This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
The Modern Flexbox, Grid, Sass & Animations Developer Course
Become Legendary in CSS Flexbox, CSS Grid, Sass and Advanced CSS Animations by Building Awesome Real-world WEBSITES
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
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.
One Last Thing to Keep in Mind
This course is NOT going to be a static course. I will definitely update it regularly for fresh content.
So, what are you waiting for? Let’s start this epic journey together by ENROLLING IN THIS COURSE RIGHT NOW!
Master The CSS Flexbox Properties & Concepts (Intermediate-level)
The Fundamentals of UI Design (Intermediate-level)
-
7
Chapter Introduction -
8
What is Flexbox
-
9
Why Flexbox
-
10
Flex Direction Property - The Flex Container Properties
-
11
Flex Wrap Property - The Flex Container Properties
-
12
Flex Flow Property - The Flex Container Properties
-
13
Justify Content Property - The Flex Container Properties
-
14
Align Items Property - The Flex Container Properties
-
15
Align Content Property - The Flex Container Properties
-
16
Order Property - The Flex Items Properties
-
17
Flex Grow Property - The Flex Items Properties
-
18
Flex Shrink Property - The Flex Items Properties
-
19
Flex Basis Property - The Flex Items Properties
-
20
Flex Shorthand Property - The Flex Items Properties
-
21
Align Self Property - The Flex Items Properties
-
22
Flexbox Resources
The Fundamentals of Responsive Web Design (Intermediate-level)
-
23
Chapter Introduction
-
24
The White Space UI Design Fundamental
-
25
The Alignment UI Design Fundamental
-
26
UI Design Fundamentals Challenge 1
-
27
The Contrast & Scale UI Design Fundamentals
-
28
The Typography UI Design Fundamental
-
29
The Color UI Design Fundamental
-
30
UI Design Fundamentals Challenge 2
-
31
The Visual Hierarchy UI Design Fundamental
-
32
UI Design Fundamentals Final Challenge
Scarlett Portfolio Website -- CSS Flexbox (Intermediate-level)
-
33
Chapter Introduction
-
34
Firefox Dev Tools
-
35
Pixels, Pixels and Pixels
-
36
Max Width & Min Width
-
37
Viewport Units
-
38
Introduction to Media Queries
-
39
Media Queries Challenge
-
40
Weather App UI Part -1
-
41
Weather App UI Part -2
-
42
Viewport Units Use Cases Part -1 Font Size
-
43
Viewport Units Use Cases Part -2 Full Screen Sections
-
44
Viewport Units Use Cases Part -3 Sticky Footer
-
45
Viewport Units Use Cases Part -4 Margins & Paddings
-
46
Viewport Units Use Cases Part -5 The Top Border
Master The CSS Grid Properties & Concepts (Advanced-level)
-
47
Scarlett Tyler Portfolio Website Introduction
-
48
Scarlett Tyler Portfolio Website Basic Setup
-
49
Box Sizing Discussion
-
50
Building The Side Nav
-
51
Building The Main Nav Part 1
-
52
Building The Main Nav Part 2
-
53
Making The Main Nav Responsive Part 1
-
54
Making The Main Nav Responsive Part 2
-
55
Building The Hero Section Part 1
-
56
Building The Hero Section Part 2
-
57
Building The Work Section
-
58
Building The About Me Section
-
59
Building The Services Section Part -1
-
60
Building The Services Section Part -2
-
61
Building The Skills Section Part -1
-
62
Building The Skills Section Part -2
-
63
Building The Testimonials Section Part -1
-
64
Building The Testimonials Section Part -2
-
65
Building The Contact Section
Vision Luxury Villas Website -- CSS Grid (Advanced-level)
-
66
Chapter Introduction
-
67
CSS Grid Layout Introduction Part -1
-
68
CSS Grid Layout Introduction Part -2
-
69
Grid Column Gap, Grid Row Gap & Grid Gap -- The Grid Container Properties
-
70
The Repeat Function & The fr Unit -- The Grid Container Properties
-
71
Changing The Position of Grid Items -- The Grid Items Properties
-
72
Spanning The Grid Items -- The Grid Items Properties
-
73
Changing The Grid Line Names -- The Grid Items Properties
-
74
The Grid Template Areas Property -- The Grid Container Properties
-
75
The Justify, Align & Place Items Properties -- The Grid Container Properties
-
76
The Justify, Align & Place Content Properties -- The Grid Container Properties
-
77
The Grid Auto Rows, Flow & Columns Values -- The Grid Container Properties
-
78
The Justify, Align & Place Self Properties -- The Grid Items Properties
-
79
The Max-Content, Min-Content & MinMax Function Values -- The Grid Container Prop
-
80
The Auto-Fill & Auto-Fit Values -- The Grid Container Properties
-
81
CSS Grid Resource
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!