CF

CSS Simplified

15h 17m 44s
English
Paid

CSS Simplified is a 101-lesson 15 hours 17 minutes self-paced course by Web Dev Simplified (Kyle Cook). 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.

Course facts

Lessons
101
Duration
15 hours 17 minutes
Level
All levels
Language
English
Updated
Instructor
Web Dev Simplified (Kyle Cook)
Price
Premium

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.

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

https://github.com/WebDevSimplified/css-simplified/tree/main

Who teaches CSS Simplified? Web Dev Simplified (Kyle Cook)

Web Dev Simplified (Kyle Cook) thumbnail

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.

What lessons are included in CSS Simplified?

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: 01 - What Is CSS
All Course Lessons (101)
#Lesson TitleDurationAccess
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 subscription

Books

Read Book CSS Simplified

#TitleTypeOpen
1CSS Box Model Cheat Sheet - Dark PDF
2CSS Box Model Cheat Sheet - Light PDF
3CSS Selector Cheat Sheet - Dark PDF
4CSS Selector Cheat Sheet - Light PDF

What courses are similar to CSS Simplified?

More courses by Web Dev Simplified (Kyle Cook)

  • React Simplified - Bonus Project thumbnailUpdated 1y ago

    React Simplified - Bonus Project

    What if I told you that by the end of this course, you could independently build an advanced job board project ?
    5h 8m
  • React Simplified - Advanced thumbnailUpdated 1y ago

    React Simplified - Advanced

    Once you become a good React developer, it is time to start diving into advanced React concepts. This course will take you from a junior to a mid-level React d
    11h 34m5/5
  • React Simplified - Next.js thumbnailUpdated 1y ago

    React Simplified - Next.js

    Welcome to my Next.js course. This course is a little bit interesting in how it's structured because it's actually broken into two main sections. That's because
    9h 33m5/5
  • React Simplified - Beginner thumbnailUpdated 2y ago

    React Simplified - Beginner

    A complete video course with just under 11 hours of content spread across 79 videos and 10 modules. This may be called a Beginner Course, but it doesn't just s
    10h 58m5/5
  • TypeScript Simplified thumbnailFreeClassic

    TypeScript Simplified

    TypeScript Simplified by Web Dev Simplified (Kyle Cook) — 47 video TypeScript course with a bonus React TypeScript module. Watch free on CourseFlix.
    10h 23m5/5
  • Learn CSS Today thumbnailUpdated 2y ago

    Learn CSS Today

    Learn modern CSS features and advanced CSS concepts in less than a day with this highly focused project-based CSS course.
    9h 31m

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.