Это самый современный и обширный курс по CSS Flexbox, CSS Grid, Sass и Advanced CSS Animations. В этом курсе вы узнаете все о CSS Flexbox и как он внедряется в реальные веб-сайты. Вы изучите основы веб-дизайна пользовательского интерфейса и адаптивного веб-дизайна, а также передовой опыт. Мы глубоко погрузимся в тему CSS Grid и все его тонкости. В этом курсе также подробно рассматривается язык расширения Sass для CSS.
Первое, что мы собираемся создать, - это сайт-портфолио для дизайнеров и разработчиков. Он полностью адаптивен и создан на CSS Flexbox.
Второй - это веб-сайт бронирования вилл с современными функциями, такими как потрясающая карусель галереи. Этот веб-сайт также полностью адаптирован для всех устройств, существующих или будущих и был создан исключительно с помощью CSS Grid.
Третий - это фитнес-сайт в котором мы объединим истинную мощь CSS Flexbox, CSS Grid и Sass. Этот веб-сайт является кульминацией всех ваших усилий на протяжении всего курса. Самая большая и самая смелая функция этого веб-сайта - это ТЕМНЫЙ РЕЖИМ, который позволяет пользователям изменять цветовую тему веб-сайта одним щелчком мыши.
Этот курс предлагает гораздо больше, начиная с среднего уровня, он выведет вас за пределы продвинутого уровня и позволит вам стать легендой в этих технологиях.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
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 - одна из самых больших площадок в мире по доставке обучающего контента от разных авторов всего мира. Присутсвуют курсы практически на любую тему.
Плюсы
Доступно, подробно описаны все важные концепции Флексов, Гридов, Анимаций. Интересные решения по адаптивным размерам. Все это очень подробно показано на практике верстки реальных страниц. Для себе узнал много нового, особенно по Гридах и Анимациях, там где у меня знания хромали.
Минусы
Ужасные не поддерживаемые селекторы типа - section#booking-content. Классы именуются с использованием БЭМ нотации, но автор вообще ни на секунду не разобрался с БЭМ. Такой клас - "header__logo__content--content__title" это дичь дичайшая. Видно что автору не приходилось долго поддерживать, часто вносить изменения в сверстанные им макеты
Anonymous
Этот курс слишком длинный. Вы можете получить те же знания за гораздо меньшее время с помощью других курсов. Не тратьте так много времени на этот курс.
ox4
автор походу заходил) влепил себе минус
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Изучите CSS в первый раз или поднимите свои навыки CSS и погрузитесь еще глубже. КАЖДЫЙ веб-разработчик должен знать CSS.CSS - сокращение от Cascading Style Sheets - это «язык программирования», который вы используете, чтобы превратить ваши необработанные HTML-страницы в настоящие красивые веб-сайты.Этот курс охватывает все это - мы начинаем с самых основ (что такое CSS?) Как это работает? Как вы его используете? и постепенно погружай
CSS Grid (Сетки) - это новая система компоновки элементов в CSS! Это не фреймворк или библиотека - это дополнение к языку, которое позволяет нам быстро создавать гибкие двухмерные макеты.Мы можем использовать ее для размещения, выравнивания и дизайна верстки так, как ранее было просто невозможно с помощью флоатов или flexbox.CSS-сетка может показаться немного сложной с новыми идеями синтаксиса и макета, но она довольно проста и может быть разбита
Sass стал основным языком для изучения начинающими веб-разработчиками. Он помогает вам быстрее писать свой код, делать вещи, которые иногда кажутся волшебными, а также является частью многих современных рабочих процессов. Этот курс расскажет вам, как использовать Sass, как интегрировать его в рабочий процесс и подтолкнуть вас к трудностям, помогая вам стать лучшим frontend-разработчиком.
В данном курсе предлагаем познакомиться с новой и удобной технологией CSS Grids. Данная технология представляет набор CSS-свойств, которые помогают гибко и удобно управлять лейаутом страницы.
Курс по креативной CSS анимации, переходам и трансформации
Creative CSS Animations, Transitions And Transforms Course
Вы когда-нибудь видели веб-анимацию на codepen или на любом веб-сайте, а потом думаете: «О, это круто! Я хочу сделать это! » но потом думаете, что это сложно ? Ну, я здесь, чтобы сказать вам: Нет, это определенно не так! Я Ahmed Sadek , веб-разработчик и фрилансер fullstack c более чем 7 лет опыта, и я хочу поприветствовать вас на моем курсе - Курс по креативной CSS анимации, переходам и трансформации.
Доступно, подробно описаны все важные концепции Флексов, Гридов, Анимаций. Интересные решения по адаптивным размерам. Все это очень подробно показано на практике верстки реальных страниц. Для себе узнал много нового, особенно по Гридах и Анимациях, там где у меня знания хромали.
Минусы
Ужасные не поддерживаемые селекторы типа - section#booking-content. Классы именуются с использованием БЭМ нотации, но автор вообще ни на секунду не разобрался с БЭМ. Такой клас - "header__logo__content--content__title" это дичь дичайшая. Видно что автору не приходилось долго поддерживать, часто вносить изменения в сверстанные им макеты