CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

11h 31m 23s
English
Paid

Course description

Course consists of several sections. You will start from CSS essentials, in which you will meet some basic topics. Then after finishing basic part, you will move on to advanced CSS, where you will be able to learn advanced things in CSS, such as: backgrounds, transitions, transforms, animations, shadows and much more.

Read more about the course

"CSS Bootcamp - Master in CSS (Including CSS Grid / Flexbox)".

If you want to learn how to create modern, beautiful and real-world websites using just pure CSS, then this is the right course for you.

Included:

1. CSS Basics

2. Advanced CSS

3. Flexbox

4. Project 1 - "Grand Hotel" (Based on Flexbox)

5. CSS Grid

6. Project 2 - "Furniture Website" (Based on CSS Grid)

Advanced CSS section will be followed by CSS Flexbox part, in which you will learn about how to create layout of your web page using CSS Flexbox. After Flexbox section, we will build our first project - "Grand Hotel". It will be a real-world, modern-looking and beautiful web page about hotel. Layout of this project will be fully created using CSS Flexbox.

Next, you will move on to CSS Grid. In which you will learn about this new powerful layout module. And lastly, we will build another big project based on CSS Grid.

Each project built throughout the course, will be fully responsive for all screen device.

Throughout the course, you will meet detailed explanations about how bootstrap works, also, you will introduce to modern practices and solutions.

Who this course is for:

  • Students with zero experience in CSS
  • Students who have some basic knowledge in CSS and want to get deep understanding in CSS
  • Everyone who wants to become Master in CSS

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 87 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

0:00
/
#1: Introduction

All Course Lessons (87)

#Lesson TitleDurationAccess
1
Introduction Demo
03:32
2
Setup
04:29
3
What is CSS?
03:18
4
How to write CSS?
09:33
5
HTML Elements Tree
02:04
6
CSS Selectors
09:01
7
CSS Combinators
05:11
8
CSS Colors
05:35
9
Inheritance
03:19
10
Text Formatting - Part 1
06:06
11
Text Formatting - Part 2
09:38
12
Box Model
12:55
13
Pseudo Classes - Part 1
07:29
14
Pseudo Classes - Part 2
04:01
15
Pseudo Elements
04:04
16
Measurement Units - Part 1
06:40
17
Measurement Units - Part 2
06:25
18
Positions - Part 1
06:13
19
Positions - Part 2
08:51
20
Overflow
03:38
21
Floats
05:55
22
Backgrounds - Part 1
12:01
23
Backgrounds - Part 2
08:21
24
Gradients
06:34
25
Shadows
07:57
26
Transitions
10:15
27
Transforms - Part 1
07:15
28
Transforms - Part 2
04:40
29
Animations - Part 1
07:30
30
Animations - Part 2
08:25
31
What Is Flexbox?
06:19
32
Flex Container Properties
14:56
33
Flex Items Properties
09:36
34
Grand Hotel - Project Preview
10:20
35
Sidebar - Markup
05:52
36
Sidebar - Style
11:52
37
Navigation - Markup
06:02
38
Navigation - Style - Part 1
12:45
39
Navigation - Style - Part 2
09:53
40
Create Click Event
10:49
41
Create markup for Header
04:03
42
Header - Style
14:11
43
About Us Section - Markup
04:32
44
About Us Section - Style - Part 1
12:46
45
About Us Section - Style - Part 2
05:54
46
Rooms Section - Markup
06:34
47
Rooms Section - Style
12:41
48
Customers Section - Markup
04:18
49
Customers Section - Style
07:08
50
Footer - Markup
08:46
51
Footer - Style
14:51
52
Make "Grand Hotel" Project Responsive - Part 1
07:32
53
Make "Grand Hotel" Project Responsive - Part 2
09:37
54
Make "Grand Hotel" Project Responsive - Part 3
12:15
55
CSS Grid Introduction
04:47
56
Setup
05:30
57
How To Create Grid
06:20
58
Fractional Units
06:09
59
Positioning and Spanning Grid Items
09:28
60
Naming Grid Items - Part 1
09:29
61
Naming Grid Items - Part 2
10:03
62
Naming Grid areas
05:08
63
Explicit and Implicit Grid
06:01
64
Aligning Grid items
06:21
65
Aligning Grid tracks
04:07
66
max-content, min-content, minmax()
05:07
67
auto-fill, auto-fit
04:40
68
Furniture Store - Project Preview
02:46
69
Navbar - Part 1 - Markup
05:07
70
Navbar - Part 1 - Style
16:39
71
Navbar - Search Form
06:06
72
Navbar - Part 2 - Markup
05:38
73
Navbar - Part 2 - Style
10:27
74
Navbar - Part 2 - Dropdown
08:09
75
Banner - Markup
04:27
76
Banner - Style
11:07
77
Banner Slideshow - Part 1
06:51
78
Banner Slideshow - Part 2
06:44
79
Day Offer Section
13:01
80
Bestselling Furniture - Markup
04:42
81
Bestselling Furniture - Style
09:52
82
Gallery
10:29
83
Contact Section and Footer
09:57
84
Modal box - Markup
08:16
85
Modal Box - Style - Part 1
11:53
86
Modal Box - Style - Part 2
09:46
87
Make Project Responsive
21:49

Unlock unlimited learning

Get instant access to all 86 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)

CSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)

Sources: udemy, Academind Pro
CSS - short for Cascading Style Sheets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites. This course covers it all - we start at t...
20 hours 54 minutes 47 seconds
The Ultimate HTML5 & CSS3 Series: Part 1

The Ultimate HTML5 & CSS3 Series: Part 1

Sources: codewithmosh (Mosh Hamedani)
Have you always wanted to learn web development but didn't know where to start? Tired of lengthy, boring and outdated courses? This course is for you. A fun...
2 hours 51 minutes 50 seconds
Complete CSS

Complete CSS

Sources: Andy Bell
Reach a level in development that once seemed impossible with this extensive course from Andy Bell. Senior-level CSS is about more than just syntax You can...
32 minutes 45 seconds
CSS Animations & Transitions

CSS Animations & Transitions

Sources: leveluptutorials
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitions. In practice, ...
2 hours 9 minutes 35 seconds