English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 48.5 Hours | 21.8 GB
Become Legendary in CSS Flexbox, CSS Grid, Sass and Advanced CSS Animations by Building Awesome Real-world WEBSITES
This is the most up to date and extensive course regarding CSS Flexbox, CSS Grid, Sass and Advanced CSS Animations. In this course you will learn all about CSS Flexbox and how it incorporates into real-world websites. You will learn the fundamentals of UI web design and responsive web design along with best practices. We will take a deep dive into the topic of CSS Grid and all the nuts and bolts of it. This course also covers the Sass Extension Language of CSS thoroughly.
The first website which we are going to create is a portfolio website for Designers and Developers. This website is fully responsive and has been created completely on CSS Flexbox.
The second website is a Villa Booking website with modern features such as an awesome looking Gallery Carousel. This website is also fully responsive on all devices, existing or yet to come. This website has been created purely with the power of CSS Grid.
The third website is a Fitness website where we will combine the true power of CSS Flexbox, CSS Grid and Sass. This website is the culmination of all of your efforts throughout the course. The biggest and boldest feature of this website is the DARK MODE FEATURE which allows users to change the color theme of the website with just one click.
There are a lot more that this course offers, starting from an intermediate level, it will take you beyond the advanced level all the way to becoming a legend in these technologies.
What you’ll learn
- You will learn the basics of CSS Flexbox
- You will learn the intermediate level of CSS Flexbox
- You will learn the advanced level of CSS Flexbox
- You will learn the fundamentals of UI Web Design
- You will learn the fundamentals of Responsive Web Design
- You will be able create a portfolio website completely on CSS Flexbox
- You will learn the basics of CSS Grid
- You will learn the intermediate level of CSS Grid
- You will learn the advanced level of CSS Grid
- You will be able create a villa booking website completely on CSS Grid
- You will learn how to setup Sass by two methods
- You will learn all about Sass
- You will be able create a fitness website using CSS Flexbox, CSS Grid and Sass with DARK MODE
Table of Contents
Course Introduction
1 Course Introduction
2 Scarlett Portfolio Website Introduction
3 Vision Luxury Villas Website Introduction
4 gYmantic Website Introduction
5 Setting Up Necessary Software
Master The CSS Flexbox Properties & Concepts (Intermediate-level)
6 Chapter Introduction
7 What is Flexbox
8 Why Flexbox
9 Flex Direction Property – The Flex Container Properties
10 Flex Wrap Property – The Flex Container Properties
11 Flex Flow Property – The Flex Container Properties
12 Justify Content Property – The Flex Container Properties
13 Align Items Property – The Flex Container Properties
14 Align Content Property – The Flex Container Properties
15 Order Property – The Flex Items Properties
16 Flex Grow Property – The Flex Items Properties
17 Flex Shrink Property – The Flex Items Properties
18 Flex Basis Property – The Flex Items Properties
19 Flex Shorthand Property – The Flex Items Properties
20 Align Self Property – The Flex Items Properties
21 Flexbox Resources
The Fundamentals of UI Design (Intermediate-level)
22 Chapter Introduction
23 The White Space UI Design Fundamental
24 The Alignment UI Design Fundamental
25 UI Design Fundamentals Challenge 1
26 The Contrast & Scale UI Design Fundamentals
27 The Typography UI Design Fundamental
28 The Color UI Design Fundamental
29 UI Design Fundamentals Challenge 2
30 The Visual Hierarchy UI Design Fundamental
31 UI Design Fundamentals Final Challenge
The Fundamentals of Responsive Web Design (Intermediate-level)
32 Chapter Introduction
33 Firefox Dev Tools
34 Pixels, Pixels and Pixels
35 Max Width & Min Width
36 Viewport Units
37 Introduction to Media Queries
38 Media Queries Challenge
39 Weather App UI Part -1
40 Weather App UI Part -2
41 Viewport Units Use Cases Part -1 Font Size
42 Viewport Units Use Cases Part -2 Full Screen Sections
43 Viewport Units Use Cases Part -3 Sticky Footer
44 Viewport Units Use Cases Part -4 Margins & Paddings
45 Viewport Units Use Cases Part -5 The Top Border
Scarlett Portfolio Website — CSS Flexbox (Intermediate-level)
46 Scarlett Tyler Portfolio Website Introduction
47 Scarlett Tyler Portfolio Website Basic Setup
48 Box Sizing Discussion
49 Building The Side Nav
50 Building The Main Nav Part 1
51 Building The Main Nav Part 2
52 Making The Main Nav Responsive Part 1
53 Making The Main Nav Responsive Part 2
54 Building The Hero Section Part 1
55 Building The Hero Section Part 2
56 Building The Work Section
57 Building The About Me Section
58 Building The Services Section Part -1
59 Building The Services Section Part -2
60 Building The Skills Section Part -1
61 Building The Skills Section Part -2
62 Building The Testimonials Section Part -1
63 Building The Testimonials Section Part -2
64 Building The Contact Section
Master The CSS Grid Properties & Concepts (Advanced-level)
65 Chapter Introduction
66 CSS Grid Layout Introduction Part -1
67 CSS Grid Layout Introduction Part -2
68 Grid Column Gap, Grid Row Gap & Grid Gap — The Grid Container Properties
69 The Repeat Function & The fr Unit — The Grid Container Properties
70 Changing The Position of Grid Items — The Grid Items Properties
71 Spanning The Grid Items — The Grid Items Properties
72 Changing The Grid Line Names — The Grid Items Properties
73 The Grid Template Areas Property — The Grid Container Properties
74 The Justify, Align & Place Items Properties — The Grid Container Properties
75 The Justify, Align & Place Content Properties — The Grid Container Properties
76 The Grid Auto Rows, Flow & Columns Values — The Grid Container Properties
77 The Justify, Align & Place Self Properties — The Grid Items Properties
78 The Max-Content, Min-Content & MinMax Function Values — The Grid Container Prop
79 The Auto-Fill & Auto-Fit Values — The Grid Container Properties
80 CSS Grid Resource
Vision Luxury Villas Website — CSS Grid (Advanced-level)
81 VLV Website Introduction
82 Setting Up the VLV Website
83 Crafting The Overall Layout Part -1
84 Crafting The Overall Layout Part -2
85 Crafting The Overall Layout Part -3
86 Building The Nav Part -1
87 Building The Nav Part -2
88 Building The Nav Part -3
89 Building The Header
90 Building The Booking Content Part -1
91 Building The Booking Content Part -2
92 Building The Booking Date Part -1
93 Building The Booking Date Part -2
94 Making The Booking Content and Date Responsive
95 Building The Villas Part -1
96 Building The Villas Part -2
97 Building The Villas Part -3
98 Building The Motto
99 Building The Events Content
100 Building The Events Text
101 Building The Gallery Text
102 Building The Gallery Carousel Part -1 (Markup)
103 Building The Gallery Carousel Part -2 (Styling)
104 Building The Gallery Carousel Part -3 (Styling)
105 Building The Gallery Carousel Part -4 (JavaScript)
106 Building The Gallery Carousel Part -5 (JavaScript)
107 Building The Gallery Carousel Part -6 (JavaScript)
108 Building The Gallery Carousel Part -7 (JavaScript)
109 Building The Gallery Carousel Part -8 (JavaScript)
110 Building The Gallery Carousel Part -9 (JavaScript)
111 Building The Gallery Carousel Part -10 (JavaScript)
112 Building The Gallery Carousel Part -11 (JavaScript)
113 Building The Gallery Carousel Part -12 (JavaScript)
114 Building The Gallery Carousel Part -13 (JavaScript)
115 Building The Gallery Carousel Part -14 (JavaScript)
116 Building The Features Content and Text
117 Building The Testimonials Part -1
118 Building The Testimonials Part -2
119 Building The Footer
Sass Mastery (Advanced-level)
120 Chapter Introduction
121 Installing Sass Using Node-Sass Part -1 — Method -1
122 Installing Sass Using Node-Sass Part -2 — Method -1
123 Installing Sass Using Node-Sass Part -3 — Method -1
124 Installing Sass Using a VS Code Extension — Method -2
125 Exploring the Difference Between .sass & .scss Files
126 Sass Variables
127 Sass Maps
128 Sass Nesting
129 Sass Partials & Imports
130 Sass Functions
131 Sass Mixins Part -1
132 Sass Mixins Part -2
133 Sass @extend Rule
134 Sass @each Rule
135 Sass Conditionals
136 Sass For Loops
137 Sass While Loops
138 Sass Arithmetic Operators
gYmantic Website — Sass + Grid + Flexbox (Advanced-level)
139 gYmantic Website Introduction
140 gYmantic Website Setup
141 Crafting the Overall Layout
142 Building the Header Part -1 (Markup)
143 Building the Header Part -2 (Markup)
144 Building the Header Part -3 (Styling)
145 Building the Header Part -4 (Styling)
146 Building the Header Part -5 (Styling)
147 Building the Header Part -6 (Styling)
148 Making the Header Responsive Part -7 (Functionality)
149 Implementing the Dark Mode (Functionality)
150 Building the Showcase Part -1 (Markup)
151 Building the Showcase Part -2 (Styling)
152 Building the Showcase Part -3 (Styling)
153 Building the Motto Part -1 (Markup + Styling)
154 Building the Motto Part -2 (Styling)
155 Building the Features Part -1 (Markup)
156 Building the Features Part -2 (Styling)
157 Building the Trainers Part -1 (Markup)
158 Building the Trainers Part -2 (Styling)
159 Building the Testimonials Part -1 (Markup)
160 Building the Testimonials Part -2 (Styling)
161 Building the Testimonials Part -3 (Functionality)
162 Building the Clients Part -1 (Markup)
163 Building the Clients Part -2 (Styling)
164 Building the Scroll to Top Button
165 Building the Register Part -1 (Markup)
166 Building the Register Part -2 (Styling)
167 Building the Register Part -3 (Styling)
168 Building the Register Part -4 (Functionality)
169 Building the Register Part -5 (Functionality)
170 Building the Footer Part -1 (Markup)
171 Building the Footer Part -2 (Styling)
172 Building the Footer Part -3 (Styling)
Course Wrap Up
173 Wrap Up
Resolve the captcha to access the links!