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