Learn how to create beautiful websites with over 100 video tutorials and 20+ unique projects designed to make learning CSS as easy and understandable as possible.
CSS Simplified
15h 17m 44s
English
Paid
What makes this course unique?
- Much more than basic knowledge
- You will delve into CSS, learning not only the basics but also advanced techniques.
- Time-saving
- I have condensed over ten years of CSS experience to shorten your path to mastery to 16 hours of learning.
- Affordable price
- Everything you need is gathered in one place at an affordable price, so you won't have to spend money on other courses.
- Become a 10x developer
- By the end of the course, you will know CSS 10 times better than most developers, including senior specialists.
- Successful interviews
- Since few developers truly master CSS, the knowledge you gain will help you stand out and take top spots on candidate lists.
- Always current knowledge
- The course is regularly updated with new CSS features, ensuring that you are always aware of the latest innovations.
- Real projects
- You will create real projects, such as a Discord clone and attractive landing pages, which will enhance your portfolio.
This course is your chance to quickly and effectively master CSS and elevate your web development skills to an entirely new level!
Additional
About the Author: Web Dev Simplified (Kyle Cook)
Web Dev Simplified (webdevsimplified.com) is the online course platform of Kyle Cook, a US developer behind one of the larger independent web-development YouTube channels. The channel publishes weekly tutorials on JavaScript, React, CSS, and the modern web ecosystem, with paid courses extending the most-requested topics into deeper long-form material.
The course catalog covers JavaScript fundamentals (the canonical JavaScript Simplified course), modern CSS (including Grid, Flexbox, animations), React deep-dives, the testing tracks, and the algorithm / data-structure material aimed at junior developers preparing for early-career interviews. Material is taught at a deliberately accessible level for self-taught developers.
The CourseFlix listing under this source carries 9 Web Dev Simplified courses spanning that range. Material is paid; courses are sold individually on the original platform. Courses are aimed primarily at junior and self-taught developers building real proficiency.
Watch Online 101 lessons
0:00
/ #1: 01 - What Is CSS
All Course Lessons (101)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 01 - What Is CSS Demo | 02:11 | |
| 2 | 02 - CSS Basic Syntax | 11:30 | |
| 3 | 03 - How To Add CSS | 06:31 | |
| 4 | 04 - CSS Comments | 02:59 | |
| 5 | 05 - CSS Inheritance | 04:03 | |
| 6 | 06 - Your First CSS Project - A Simple Blog | 09:36 | |
| 7 | 07 - User Profile Introduction | 01:43 | |
| 8 | 08 - User Profile Project Walkthrough | 05:40 | |
| 9 | 09 - CSS Color | 12:41 | |
| 10 | 10 - CSS Specificity | 12:28 | |
| 11 | 11 - Pseudo Classes | 05:37 | |
| 12 | 12 - Box Model | 13:09 | |
| 13 | 13 - CSS Units | 11:14 | |
| 14 | 14 - Input Component Library Introduction | 01:35 | |
| 15 | 15 - Input Component Library Walkthrough | 06:50 | |
| 16 | 16 - Button Component Library Introduction | 01:22 | |
| 17 | 17 - Button Component Library Walkthrough | 14:04 | |
| 18 | 18 - Portfolio Project | 27:43 | |
| 19 | 19 - Document Flow | 08:26 | |
| 20 | 20 - Floats | 04:35 | |
| 21 | 21 - Flexbox | 20:37 | |
| 22 | 22 - Modal Project | 14:01 | |
| 23 | 23 - Navbar Project Introduction | 00:45 | |
| 24 | 24 - Navbar Project Walkthrough | 04:50 | |
| 25 | 25 - Grid | 25:09 | |
| 26 | 26 - Grid Home Page Project | 12:19 | |
| 27 | 27 - Image Gallery Project Introduction | 00:57 | |
| 28 | 28 - Image Grid Project Walkthrough | 06:38 | |
| 29 | 29 - Subgrid | 06:29 | |
| 30 | 30 - Mutli-value Display | 06:44 | |
| 31 | 31 - Position | 10:45 | |
| 32 | 32 - z-index | 07:14 | |
| 33 | 33 - Logical Properties | 10:26 | |
| 34 | 34 - Multi-Column Layout | 08:02 | |
| 35 | 35 - Overflow | 07:42 | |
| 36 | 36 - Text Wrapping | 11:47 | |
| 37 | 37 - Advanced Margins | 02:54 | |
| 38 | 38 - Viewport Meta Tag | 01:50 | |
| 39 | 39 - Media Query | 11:40 | |
| 40 | 40 - Container Query | 06:55 | |
| 41 | 41 - Responsive House Project Introduction | 02:55 | |
| 42 | 42 - Responsive House Project Walkthrough | 05:19 | |
| 43 | 43 - Media Queries For Accessibility | 03:50 | |
| 44 | 44 - Responsive Design Without Media Queries | 11:06 | |
| 45 | 45 - Custom Properties | 06:05 | |
| 46 | 46 - @property | 06:39 | |
| 47 | 47 - Custom Media Queries | 09:55 | |
| 48 | 48 - Calc | 04:59 | |
| 49 | 49 - Nesting | 07:40 | |
| 50 | 50 - Layers | 14:05 | |
| 51 | 51 - Input Component Library Updates Introduction | 00:38 | |
| 52 | 52 - Input Component Library Updates Walkthrough | 04:06 | |
| 53 | 53 - Button Component Library Updates Introduction | 01:12 | |
| 54 | 54 - Button Component Library Updates Walkthrough | 05:55 | |
| 55 | 55 - @scope | 08:08 | |
| 56 | 56 - calc-size | 02:01 | |
| 57 | 57 - Custom Fonts | 08:41 | |
| 58 | 58 - Gradients | 20:04 | |
| 59 | 59 - Color Spaces | 15:07 | |
| 60 | 60 - Advanced Color Functions | 18:24 | |
| 61 | 61 - Relative Colors | 09:19 | |
| 62 | 62 - Built In Color Properties | 04:38 | |
| 63 | 63 - Button Component Library Colors Introduction | 01:13 | |
| 64 | 64 - Button Component Library Colors Walkthrough | 09:27 | |
| 65 | 65 - Relationship Selectors | 04:14 | |
| 66 | 66 - Attribute Selectors | 05:18 | |
| 67 | 67 - Pseudo Elements | 06:24 | |
| 68 | 68 - Custom Checkbox Project | 12:32 | |
| 69 | 69 - Parent Selector | 11:27 | |
| 70 | 70 - where vs is | 07:04 | |
| 71 | 71 - Child Selectors | 06:46 | |
| 72 | 72 - Focus Selectors | 05:15 | |
| 73 | 73 - Additional Pseudo Classes | 10:27 | |
| 74 | 74 - Input Component Library Validation Introduction | 01:16 | |
| 75 | 75 - Input Component Library Validation Walkthrough | 09:39 | |
| 76 | 76 - Transition Property | 08:00 | |
| 77 | 77 - Button Transition Project Introduction | 00:56 | |
| 78 | 78 - Button Transition Project Walkthrough | 05:02 | |
| 79 | 79 - Animation Property | 14:11 | |
| 80 | 80 - Transform | 15:04 | |
| 81 | 81 - Button Animation Project | 09:25 | |
| 82 | 82 - Loading Text Project Introduction | 00:44 | |
| 83 | 83 - Loading Text Project Walkthrough | 08:52 | |
| 84 | 84 - Animating Custom Properties | 03:44 | |
| 85 | 85 - @starting-style & transition-behavior | 07:15 | |
| 86 | 86 - interpolate-size | 01:51 | |
| 87 | 87 - Modal Animation Introduction | 01:04 | |
| 88 | 88 - Modal Animation Walkthrough | 05:17 | |
| 89 | 89 - Perspective Property | 07:42 | |
| 90 | 90 - 3D Cube Project | 11:07 | |
| 91 | 91 - Next Steps | 04:17 | |
| 92 | 92 - CSS Reset | 03:16 | |
| 93 | 93 - Browser Support | 03:50 | |
| 94 | 94 - Feature Query | 04:55 | |
| 95 | 95 - @import | 08:05 | |
| 96 | 96 - Vendor Prefixes | 02:29 | |
| 97 | 97 - CSS Frameworks | 05:18 | |
| 98 | 98 - MNTN Landing Page Introduction | 04:36 | |
| 99 | 99 - MNTN Landing Page Walkthrough | 01:02:17 | |
| 100 | 100 - Discord Clone Introduction | 10:37 | |
| 101 | 101 - Discord Clone Walkthrough | 01:44:21 |
Unlock unlimited learning
Get instant access to all 100 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionBooks
Related courses
-
FreeClassicThe Ultimate HTML5 & CSS3 Series: Part 1
By: Mosh Hamedani (Code with Mosh)Learn web development with a comprehensive course on HTML5 and CSS3. Build professional websites and master responsive design, animations, and more.2h 51m5/5 -
Updated 6mo agoBuild a Podcast Player with JavaScript, CSS and Node.js
By: Zero To MasteryLearn to create a full-stack podcast player using JavaScript, CSS, and Node.js. Develop skills in web development and add a project to your portfolio.8h 30m -
Updated 1y agoAdvanced CSS & JavaScript Projects
By: Zero To MasteryMaster CSS and JavaScript by creating real projects! Enhance your skills by developing practical applications such as a quiz, an expense tracker.15h 24m5/5
Frequently asked questions
What are the prerequisites for this course?
There are no specific prerequisites for this course, making it suitable for beginners. However, basic knowledge of HTML and a general familiarity with web development principles will help you understand the context of CSS applications better.
What projects will I build during the course?
Throughout the course, you will work on over 20 unique projects. These include a Simple Blog, User Profile, Input and Button Component Libraries, a Portfolio, Modal, Navbar, Grid Home Page, Image Gallery, and a Responsive House Project, among others. These projects are designed to provide hands-on experience with real-world applications of CSS concepts.
Who is the target audience for this course?
This course is targeted at individuals looking to enhance their web design skills using CSS. It is ideal for beginners who want to start from scratch and for those with some knowledge seeking to deepen their understanding of CSS and its practical applications.
How does this course compare to other CSS courses in terms of depth?
The course offers a comprehensive view of CSS, covering both basic and advanced topics such as Flexbox, Grid, Media Queries, and Custom Properties. With 101 lessons, it provides a broad scope that includes projects and component library updates, catering to various skill levels from beginner to more advanced users.
What specific tools or platforms will I learn to use?
You will learn to use CSS tools and techniques such as Flexbox, Grid, Media Queries, and Custom Properties. The course also covers advanced topics like Logical Properties, calc(), and @scope, which are essential for modern web development.
What topics are not covered in this course?
While the course extensively covers CSS, it does not delve into other web technologies like JavaScript or backend development. The focus remains on CSS and its applications in building and styling web pages.
How much time should I expect to commit to this course?
The course consists of 101 lessons. Since each video tutorial varies in length, the total time commitment will depend on your pace. To fully benefit from the content and complete all projects, a few weeks of consistent study and practice are recommended.