Learn modern CSS features and advanced CSS concepts in less than a day with this highly focused project-based CSS course.
Learn CSS Today
9h 31m 49s
English
Paid
What Will You Get?
- Access to all HD course videos covering topics from the fundamentals to advanced animations
- 61 Videos
- 21 Project Tutorials
- 9 Project Exercises
- Source code for every project broken down by video
- All future updates free of charge
- Exclusive access to the Learn CSS Today Discord channel where you can talk with me and all other members of the course
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 61 lessons
0:00
/ #1: 01 - What Is CSS?
All Course Lessons (61)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 01 - What Is CSS? Demo | 02:11 | |
| 2 | 02 - Basic Syntax | 11:30 | |
| 3 | 03 - How To Add CSS | 06:31 | |
| 4 | 04 - Comments | 02:59 | |
| 5 | 05 - 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 - Color | 12:41 | |
| 10 | 10 - Specificity | 12:28 | |
| 11 | 11 - Pseudo Classes | 11:52 | |
| 12 | 12 - Box Model | 13:09 | |
| 13 | 13 - Units | 11:37 | |
| 14 | 14 - Button Component Library Project | 23:17 | |
| 15 | 15 - Input Component Library Introduction | 01:20 | |
| 16 | 16 - Input Component Library Project Walkthrough | 11:20 | |
| 17 | 17 - Module One Final Project - Portfolio | 27:15 | |
| 18 | 18 - Document Flow | 08:26 | |
| 19 | 19 - Floats | 04:35 | |
| 20 | 20 - Flexbox | 19:18 | |
| 21 | 21 - Modal Project | 13:56 | |
| 22 | 22 - Navbar Project Introduction | 00:45 | |
| 23 | 23 - Navbar Project Walkthrough | 04:50 | |
| 24 | 24 - Grid | 25:09 | |
| 25 | 25 - Grid Home Page Project | 12:19 | |
| 26 | 26 - Image Gallery Project Introduction | 00:57 | |
| 27 | 27 - Image Gallery Project Walkthrough | 07:03 | |
| 28 | 28 - Position | 10:45 | |
| 29 | 29 - Z-Index | 07:35 | |
| 30 | 30 - Multi-Column Layout | 08:02 | |
| 31 | 31 - Overflow | 04:38 | |
| 32 | 32 - Bootcamp Landing Page | 38:56 | |
| 33 | 33 - Custom Properties | 10:05 | |
| 34 | 34 - Calc | 05:28 | |
| 35 | 35 - Button Component Library Project Upgrade | 10:32 | |
| 36 | 36 - Input Component Library Upgrade Introduction | 00:51 | |
| 37 | 37 - Input Component Library Project Upgrade Walkthrough | 04:03 | |
| 38 | 38 - Advanced Selectors | 11:14 | |
| 39 | 39 - Pseudo Elements | 06:29 | |
| 40 | 40 - Custom Checkbox Project | 12:13 | |
| 41 | 41 - Tooltip Project | 14:22 | |
| 42 | 42 - Advanced Margins | 02:54 | |
| 43 | 43 - CSS Resets | 03:22 | |
| 44 | 44 - Browser Support | 03:50 | |
| 45 | 45 - Feature Query | 05:49 | |
| 46 | 46 - Media Query | 05:54 | |
| 47 | 47 - Custom Fonts | 08:57 | |
| 48 | 48 - Bootcamp Landing Page Pricing Section | 23:20 | |
| 49 | 49 - Transition Property | 08:08 | |
| 50 | 50 - Button Transition Project Introduction | 00:56 | |
| 51 | 51 - Button Transition Project Walkthrough | 05:02 | |
| 52 | 52 - Animation Property | 14:11 | |
| 53 | 53 - Transform Property | 10:34 | |
| 54 | 54 - Button Animation Project | 09:25 | |
| 55 | 55 - Loading Text Project Introduction | 00:44 | |
| 56 | 56 - Loading Text Project Walkthrough | 08:08 | |
| 57 | 57 - Tooltip Animation Project | 06:36 | |
| 58 | 58 - Perspective Property | 07:42 | |
| 59 | 59 - 3D Cube Project | 11:19 | |
| 60 | 60 - Bootcamp Landing Page Animations | 18:58 | |
| 61 | 61 - Next Steps | 04:17 |
Unlock unlimited learning
Get instant access to all 60 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 7mo agoResponsive Design for Beginners
By: Jess ChanYou have already learned the basics of HTML and CSS... so what's next? Yes, you can follow the steps from the tutorial and have become a master at finding answe30h -
Updated 2y ago50 Projects In 50 Days - HTML, CSS & JavaScript
By: Udemy, Brad TraversyBuild 50 small web projects with HTML, CSS, and JavaScript. You learn DOM work, events, layout, and simple APIs. This course gives you clear steps.18h 13m -
Updated 3y agoCSS - The Complete Guide 2022 (incl. Flexbox, Grid & Sass)
By: Udemy, Academind Pro (Maximilian Schwarzmüller)CSS - short for C ascading S tyle S heets - is a "programming language" you use to turn your raw HTML pages into real beautiful websites.20h 54m5/5
Frequently asked questions
What prerequisites should I have before taking this course?
Before enrolling in this course, you should have a basic understanding of HTML. The course begins with foundational topics like 'What Is CSS?' and 'Basic Syntax', which are approachable for beginners, but familiarity with HTML will help you better grasp the styling concepts taught.
What projects will I build during the course?
Throughout the course, you will work on several projects, including a Simple Blog, a User Profile, a Portfolio, and components like a Button Component Library and an Input Component Library. Additionally, you will create more complex layouts like a Navbar, Grid Home Page, and Bootcamp Landing Page, as well as interactive elements such as a Modal and Tooltips.
Who is the target audience for this course?
This course is ideal for beginners and intermediate web developers looking to gain a solid understanding of CSS. It covers both basic and advanced topics, making it suitable for those who want to improve their front-end development skills and build modern, responsive web designs.
How does the scope of this course compare to other CSS courses?
The course offers a comprehensive overview of CSS through 61 lessons, including topics like Flexbox, Grid, custom properties, and animations. It emphasizes practical application with projects, which may differ from other courses that might focus more on theory. The project-based approach helps solidify understanding by applying concepts directly.
What specific CSS tools or features will I learn in this course?
You will learn various modern CSS tools and features, such as Flexbox, Grid, Media Queries, Transitions, Animations, and 3D Transforms. Lessons also cover advanced selectors, custom properties, and CSS resets, equipping you with the skills to create responsive, dynamic web pages.
What topics are not covered in this course?
The course does not cover JavaScript or backend technologies. Its focus is solely on CSS, so topics like interactivity driven by JavaScript or server-side rendering are beyond its scope. Those interested in complete web development might need additional courses covering these areas.
How much time should I expect to complete this course?
The entire course is designed to be completed in less than a day, as implied by its description. However, the exact time may vary based on your prior experience and the pace at which you choose to work through the 61 lessons and associated projects.