-
Урок 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
Доступно, подробно описаны все важные концепции Флексов, Гридов, Анимаций. Интересные решения по адаптивным размерам. Все это очень подробно показано на практике верстки реальных страниц. Для себе узнал много нового, особенно по Гридах и Анимациях, там где у меня знания хромали.
Минусы
Ужасные не поддерживаемые селекторы типа - section#booking-content. Классы именуются с использованием БЭМ нотации, но автор вообще ни на секунду не разобрался с БЭМ. Такой клас - "header__logo__content--content__title" это дичь дичайшая. Видно что автору не приходилось долго поддерживать, часто вносить изменения в сверстанные им макеты