CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
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
All Course Lessons (87)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Complete CSS
10 Mega Responsive Websites with HTML, CSS, and JavaScript
Tailwind UI (Application UI + Marketing)
