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.
CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)
11h 31m 23s
English
Paid
"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
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 87 lessons
0:00
/ #1: Introduction
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 subscriptionRelated courses
-
ClassicCSS for JavaScript Developers
By: Josh ComeauThe all-new interactive learning experience designed to help JavaScript developers become confident with CSS.5/5 -
Updated 2y ago10 Mega Responsive Websites with HTML, CSS, and JavaScript
By: UdemyLearn to create 10 mega responsive websites with HTML, CSS, and JavaScript. Elevate your web development skills with modern design projects for your portfolio.21h 54m5/5 -
Updated 2y agoUnderstanding HTML and CSS
By: UdemyDeeply understand Semantic HTML, CSS, Flexbox, Grid, learn to read the specifications, and more. In this course you'll gain a deep understanding of HTML and CSS17h 52m
Frequently asked questions
What prerequisites are recommended before taking this course?
Before enrolling in this CSS Bootcamp, it's beneficial to have a basic understanding of HTML since CSS is used to style HTML elements. Familiarity with basic web design concepts will help, but the course begins with CSS essentials, making it accessible for beginners.
What projects will I build during the course?
You will work on the 'Grand Hotel' project, which involves creating a responsive website. This project covers multiple aspects from setting up a sidebar, navigation, header, and various sections like 'About Us' and 'Rooms', to making the entire project responsive using Flexbox and CSS Grid.
Who is the target audience for this course?
The course is designed for beginners and intermediate learners who want to enhance their CSS skills. It's ideal for those looking to understand both basic and advanced CSS concepts, including Flexbox and CSS Grid, to build modern, responsive websites.
How does the course depth compare to other CSS courses?
This course covers both fundamental and advanced topics in CSS. Unlike some introductory courses, it delves into complex subjects like transitions, transforms, animations, and advanced layout techniques with Flexbox and CSS Grid, making it suitable for learners seeking comprehensive CSS knowledge.
What specific CSS tools and platforms are covered?
The course includes detailed lessons on CSS Grid and Flexbox, two powerful layout models. Additionally, it covers CSS selectors, pseudo-classes, pseudo-elements, and various CSS properties for styling backgrounds, shadows, and text formatting.
What topics are not covered in this CSS course?
The course does not cover CSS preprocessors like SASS or LESS, nor does it delve into JavaScript frameworks for styling. The focus remains on core CSS capabilities for styling and layout, including modern techniques like Flexbox and Grid.
How much time should I expect to commit to this course?
The course contains 87 lessons. While the exact runtime isn't specified, students should be prepared to devote several hours to complete the course, especially if they engage with the practical exercises and the 'Grand Hotel' project for hands-on experience.