Главная страницаКатегория cssКурс современного разработчика: Flexbox, Grid, Sass и анимации

Курс современного разработчика: Flexbox, Grid, Sass и анимации

Name: Курс современного разработчика: Flexbox, Grid, Sass и анимации
Price: 12.5 USD
Rating: 3.8 (40 reviews)

The Modern Flexbox, Grid, Sass & Animations Developer Course

udemy

★3.8 (всего оценок - 40)

Продолжительность

48 ч 20 мин

Категория

CSS

Количество уроков

173 Видео

Дата добавления

25 сент. 2020 г., 21:13

Язык

Английский

Дата выхода

17 сент. 2020 г., 20:48

Дата обновления

29 апр. 2026 г., 08:35

Курс современного разработчика: Flexbox, Grid, Sass и анимации — это практическое обучение, которое помогает уверенно освоить ключевые технологии современного CSS. Курс идеально подходит тем, кто хочет создавать профессиональные, адаптивные и эффектные интерфейсы, применяя Flexbox, CSS Grid, Sass и продвинутые анимации в реальных проектах.

Что включает курс

Программа строится вокруг практики: вы создадите три полноценных проекта, каждый из которых закрепляет новые навыки и учит мыслить как современный фронтенд‑разработчик.

Полное погружение в CSS Flexbox

Вы изучите принципы гибкой сетки и научитесь строить адаптивные блоки, элементы навигации и сложные UI‑компоненты. Flexbox станет для вас понятным инструментом, а не хаотичным набором свойств.

Освоение CSS Grid для современных макетов

Grid позволяет создавать структуры любой сложности — от многоступенчатых галерей до полноэкранных лендингов. Вы разберёте все фишки CSS Grid и научитесь грамотно комбинировать его с другими инструментами.

Изучение Sass и улучшение процессов разработки

Sass сделает вашу работу с CSS быстрее, чище и структурированнее. В курсе вы освоите переменные, миксины, вложенность, а также построение масштабируемой архитектуры стилей.

Advanced CSS Animations

Вы создадите профессиональные, плавные и производительные анимации, которые оживляют интерфейс и делают опыт пользователя значительно приятнее.

Практические проекты курса

Каждый проект — это не просто учебная работа, а реальный сайт, который вы сможете добавить в своё портфолио.

1. Адаптивное портфолио‑сайт на Flexbox

Первым вы создадите современный сайт‑портфолио для дизайнеров и разработчиков. Он полностью адаптивен и собран на Flexbox от начала до конца, что помогает закрепить фундаментальные навыки.

2. Сайт бронирования вилл на CSS Grid

Второй проект — функциональный сайт бронирования с акцентом на современный UI. Вы реализуете:

потрясающую карусель изображений,
адаптацию под любые устройства,
чистую архитектуру на основе CSS Grid.

3. Фитнес‑сайт с комбинированным использованием Flexbox, Grid и Sass

Кульминацией курса станет мощный фитнес‑сайт, объединяющий все изученные технологии. Главная особенность проекта — режим тёмной темы, позволяющий менять цветовую схему одним кликом.

Кому подходит этот курс

Программа рассчитана на тех, кто уже владеет CSS на базовом уровне и хочет перейти к профессиональным техникам. Курс поднимет вас с уверенного среднего уровня до продвинутого и даст реальные навыки, востребованные в современной веб‑разработке.

Что вы получите в итоге

понимание современных CSS‑технологий;
умение создавать адаптивные и быстрые интерфейсы;
три готовых проекта в портфолио;
командные навыки работы со структурированным CSS;
уверенность в создании сложных макетов и UI‑элементов.

Этот курс поможет вам выйти за рамки базовых знаний и стать разработчиком, который уверенно владеет Flexbox, CSS Grid, Sass и современными анимациями.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:01:44
Course Introduction
Урок 2. 00:02:31
Scarlett Portfolio Website Introduction
Урок 3. 00:02:50
Vision Luxury Villas Website Introduction
Урок 4. 00:05:35
gYmantic Website Introduction
Урок 5. 00:05:41
Setting Up Necessary Software
Урок 6. 00:00:48
Chapter Introduction
Урок 7. 00:17:24
What is Flexbox
Урок 8. 00:29:08
Why Flexbox
Урок 9. 00:09:55
Flex Direction Property - The Flex Container Properties
Урок 10. 00:10:59
Flex Wrap Property - The Flex Container Properties
Урок 11. 00:10:31
Flex Flow Property - The Flex Container Properties
Урок 12. 00:15:01
Justify Content Property - The Flex Container Properties
Урок 13. 00:20:10
Align Items Property - The Flex Container Properties
Урок 14. 00:24:33
Align Content Property - The Flex Container Properties
Урок 15. 00:14:12
Order Property - The Flex Items Properties
Урок 16. 00:06:26
Flex Grow Property - The Flex Items Properties
Урок 17. 00:04:06
Flex Shrink Property - The Flex Items Properties
Урок 18. 00:08:55
Flex Basis Property - The Flex Items Properties
Урок 19. 00:02:33
Flex Shorthand Property - The Flex Items Properties
Урок 20. 00:08:13
Align Self Property - The Flex Items Properties
Урок 21. 00:06:43
Flexbox Resources
Урок 22. 00:01:09
Chapter Introduction
Урок 23. 00:14:26
The White Space UI Design Fundamental
Урок 24. 00:08:42
The Alignment UI Design Fundamental
Урок 25. 00:15:21
UI Design Fundamentals Challenge 1
Урок 26. 00:20:38
The Contrast & Scale UI Design Fundamentals
Урок 27. 00:12:37
The Typography UI Design Fundamental
Урок 28. 00:15:17
The Color UI Design Fundamental
Урок 29. 00:08:05
UI Design Fundamentals Challenge 2
Урок 30. 00:09:53
The Visual Hierarchy UI Design Fundamental
Урок 31. 00:10:08
UI Design Fundamentals Final Challenge
Урок 32. 00:01:06
Chapter Introduction
Урок 33. 00:13:24
Firefox Dev Tools
Урок 34. 00:16:50
Pixels, Pixels and Pixels
Урок 35. 00:14:50
Max Width & Min Width
Урок 36. 00:19:56
Viewport Units
Урок 37. 00:09:49
Introduction to Media Queries
Урок 38. 00:10:09
Media Queries Challenge
Урок 39. 00:21:17
Weather App UI Part -1
Урок 40. 00:34:00
Weather App UI Part -2
Урок 41. 00:13:37
Viewport Units Use Cases Part -1 Font Size
Урок 42. 00:06:32
Viewport Units Use Cases Part -2 Full Screen Sections
Урок 43. 00:12:25
Viewport Units Use Cases Part -3 Sticky Footer
Урок 44. 00:08:22
Viewport Units Use Cases Part -4 Margins & Paddings
Урок 45. 00:08:59
Viewport Units Use Cases Part -5 The Top Border
Урок 46. 00:14:56
Scarlett Tyler Portfolio Website Introduction
Урок 47. 00:08:36
Scarlett Tyler Portfolio Website Basic Setup
Урок 48. 00:10:58
Box Sizing Discussion
Урок 49. 00:24:53
Building The Side Nav
Урок 50. 00:16:54
Building The Main Nav Part 1
Урок 51. 00:12:36
Building The Main Nav Part 2
Урок 52. 00:21:48
Making The Main Nav Responsive Part 1
Урок 53. 00:16:01
Making The Main Nav Responsive Part 2
Урок 54. 00:23:17
Building The Hero Section Part 1
Урок 55. 00:16:30
Building The Hero Section Part 2
Урок 56. 00:14:39
Building The Work Section
Урок 57. 00:20:03
Building The About Me Section
Урок 58. 00:23:51
Building The Services Section Part -1
Урок 59. 00:05:26
Building The Services Section Part -2
Урок 60. 00:24:22
Building The Skills Section Part -1
Урок 61. 00:17:31
Building The Skills Section Part -2
Урок 62. 00:24:43
Building The Testimonials Section Part -1
Урок 63. 00:24:58
Building The Testimonials Section Part -2
Урок 64. 00:16:34
Building The Contact Section
Урок 65. 00:01:57
Chapter Introduction
Урок 66. 00:21:25
CSS Grid Layout Introduction Part -1
Урок 67. 00:12:52
CSS Grid Layout Introduction Part -2
Урок 68. 00:18:36
Grid Column Gap, Grid Row Gap & Grid Gap -- The Grid Container Properties
Урок 69. 00:28:48
The Repeat Function & The fr Unit -- The Grid Container Properties
Урок 70. 00:18:19
Changing The Position of Grid Items -- The Grid Items Properties
Урок 71. 00:20:47
Spanning The Grid Items -- The Grid Items Properties
Урок 72. 00:22:10
Changing The Grid Line Names -- The Grid Items Properties
Урок 73. 00:17:33
The Grid Template Areas Property -- The Grid Container Properties
Урок 74. 00:16:02
The Justify, Align & Place Items Properties -- The Grid Container Properties
Урок 75. 00:15:10
The Justify, Align & Place Content Properties -- The Grid Container Properties
Урок 76. 00:16:09
The Grid Auto Rows, Flow & Columns Values -- The Grid Container Properties
Урок 77. 00:09:31
The Justify, Align & Place Self Properties -- The Grid Items Properties
Урок 78. 00:25:08
The Max-Content, Min-Content & MinMax Function Values -- The Grid Container Prop
Урок 79. 00:20:56
The Auto-Fill & Auto-Fit Values -- The Grid Container Properties
Урок 80. 00:09:50
CSS Grid Resource
Урок 81. 00:18:53
VLV Website Introduction
Урок 82. 00:16:11
Setting Up the VLV Website
Урок 83. 00:26:44
Crafting The Overall Layout Part -1
Урок 84. 00:22:59
Crafting The Overall Layout Part -2
Урок 85. 00:27:20
Crafting The Overall Layout Part -3
Урок 86. 00:25:37
Building The Nav Part -1
Урок 87. 00:25:16
Building The Nav Part -2
Урок 88. 00:26:56
Building The Nav Part -3
Урок 89. 00:29:21
Building The Header
Урок 90. 00:25:48
Building The Booking Content Part -1
Урок 91. 00:08:08
Building The Booking Content Part -2
Урок 92. 00:21:05
Building The Booking Date Part -1
Урок 93. 00:26:00
Building The Booking Date Part -2
Урок 94. 00:36:20
Making The Booking Content and Date Responsive
Урок 95. 00:24:18
Building The Villas Part -1
Урок 96. 00:28:48
Building The Villas Part -2
Урок 97. 00:21:34
Building The Villas Part -3
Урок 98. 00:09:45
Building The Motto
Урок 99. 00:31:59
Building The Events Content
Урок 100. 00:08:11
Building The Events Text
Урок 101. 00:14:27
Building The Gallery Text
Урок 102. 00:23:01
Building The Gallery Carousel Part -1 (Markup)
Урок 103. 00:17:52
Building The Gallery Carousel Part -2 (Styling)
Урок 104. 00:23:41
Building The Gallery Carousel Part -3 (Styling)
Урок 105. 00:09:48
Building The Gallery Carousel Part -4 (JavaScript)
Урок 106. 00:10:14
Building The Gallery Carousel Part -5 (JavaScript)
Урок 107. 00:10:22
Building The Gallery Carousel Part -6 (JavaScript)
Урок 108. 00:08:08
Building The Gallery Carousel Part -7 (JavaScript)
Урок 109. 00:06:05
Building The Gallery Carousel Part -8 (JavaScript)
Урок 110. 00:21:31
Building The Gallery Carousel Part -9 (JavaScript)
Урок 111. 00:10:35
Building The Gallery Carousel Part -10 (JavaScript)
Урок 112. 00:11:35
Building The Gallery Carousel Part -11 (JavaScript)
Урок 113. 00:16:45
Building The Gallery Carousel Part -12 (JavaScript)
Урок 114. 00:14:22
Building The Gallery Carousel Part -13 (JavaScript)
Урок 115. 00:22:06
Building The Gallery Carousel Part -14 (JavaScript)
Урок 116. 00:19:09
Building The Features Content and Text
Урок 117. 00:20:24
Building The Testimonials Part -1
Урок 118. 00:25:24
Building The Testimonials Part -2
Урок 119. 00:29:04
Building The Footer
Урок 120. 00:01:11
Chapter Introduction
Урок 121. 00:19:21
Installing Sass Using Node-Sass Part -1 -- Method -1
Урок 122. 00:20:28
Installing Sass Using Node-Sass Part -2 -- Method -1
Урок 123. 00:13:18
Installing Sass Using Node-Sass Part -3 -- Method -1
Урок 124. 00:16:51
Installing Sass Using a VS Code Extension -- Method -2
Урок 125. 00:11:22
Exploring the Difference Between .sass & .scss Files
Урок 126. 00:14:29
Sass Variables
Урок 127. 00:16:53
Sass Maps
Урок 128. 00:30:08
Sass Nesting
Урок 129. 00:12:48
Sass Partials & Imports
Урок 130. 00:23:20
Sass Functions
Урок 131. 00:19:56
Sass Mixins Part -1
Урок 132. 00:10:20
Sass Mixins Part -2
Урок 133. 00:16:16
Sass @extend Rule
Урок 134. 00:30:06
Sass @each Rule
Урок 135. 00:17:15
Sass Conditionals
Урок 136. 00:17:37
Sass For Loops
Урок 137. 00:14:16
Sass While Loops
Урок 138. 00:26:25
Sass Arithmetic Operators
Урок 139. 00:18:02
gYmantic Website Introduction
Урок 140. 00:30:39
gYmantic Website Setup
Урок 141. 00:24:43
Crafting the Overall Layout
Урок 142. 00:23:16
Building the Header Part -1 (Markup)
Урок 143. 00:04:27
Building the Header Part -2 (Markup)
Урок 144. 00:24:42
Building the Header Part -3 (Styling)
Урок 145. 00:23:44
Building the Header Part -4 (Styling)
Урок 146. 00:22:52
Building the Header Part -5 (Styling)
Урок 147. 00:37:27
Building the Header Part -6 (Styling)
Урок 148. 00:17:10
Making the Header Responsive Part -7 (Functionality)
Урок 149. 00:20:08
Implementing the Dark Mode (Functionality)
Урок 150. 00:05:23
Building the Showcase Part -1 (Markup)
Урок 151. 00:22:06
Building the Showcase Part -2 (Styling)
Урок 152. 00:25:07
Building the Showcase Part -3 (Styling)
Урок 153. 00:24:22
Building the Motto Part -1 (Markup + Styling)
Урок 154. 00:11:39
Building the Motto Part -2 (Styling)
Урок 155. 00:11:45
Building the Features Part -1 (Markup)
Урок 156. 00:31:04
Building the Features Part -2 (Styling)
Урок 157. 00:08:16
Building the Trainers Part -1 (Markup)
Урок 158. 00:20:08
Building the Trainers Part -2 (Styling)
Урок 159. 00:10:38
Building the Testimonials Part -1 (Markup)
Урок 160. 00:19:50
Building the Testimonials Part -2 (Styling)
Урок 161. 00:15:25
Building the Testimonials Part -3 (Functionality)
Урок 162. 00:07:20
Building the Clients Part -1 (Markup)
Урок 163. 00:19:50
Building the Clients Part -2 (Styling)
Урок 164. 00:17:36
Building the Scroll to Top Button
Урок 165. 00:22:53
Building the Register Part -1 (Markup)
Урок 166. 00:15:51
Building the Register Part -2 (Styling)
Урок 167. 00:19:25
Building the Register Part -3 (Styling)
Урок 168. 00:20:11
Building the Register Part -4 (Functionality)
Урок 169. 00:14:20
Building the Register Part -5 (Functionality)
Урок 170. 00:23:34
Building the Footer Part -1 (Markup)
Урок 171. 00:22:22
Building the Footer Part -2 (Styling)
Урок 172. 00:25:46
Building the Footer Part -3 (Styling)
Урок 173. 00:00:47
Wrap Up

Автор - udemy

udemy

Udemy - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.

+198

Комментарии

blash
28 янв. 2021 г., 08:35
Плюсы
Доступно, подробно описаны все важные концепции Флексов, Гридов, Анимаций. Интересные решения по адаптивным размерам. Все это очень подробно показано на практике верстки реальных страниц. Для себе узнал много нового, особенно по Гридах и Анимациях, там где у меня знания хромали.

Минусы
Ужасные не поддерживаемые селекторы типа - section#booking-content. Классы именуются с использованием БЭМ нотации, но автор вообще ни на секунду не разобрался с БЭМ. Такой клас - "header__logo__content--content__title" это дичь дичайшая. Видно что автору не приходилось долго поддерживать, часто вносить изменения в сверстанные им макеты
Anonymous
29 сент. 2020 г., 00:06
Этот курс слишком длинный. Вы можете получить те же знания за гораздо меньшее время с помощью других курсов. Не тратьте так много времени на этот курс.
ox4
26 сент. 2020 г., 06:40
автор походу заходил) влепил себе минус