CF

Beyond CSS

18h 12m 41s
English
Paid

Beyond CSS is a 220-lesson 18 hours 12 minutes self-paced course by Kevin Powell. Beyond CSS is a course designed to help you use modern CSS and tools like Sass and PostCSS in order to get control of your stylesheets.

Course facts

Lessons
220
Duration
18 hours 12 minutes
Level
All levels
Language
English
Updated
Instructor
Kevin Powell
Price
Premium

Beyond CSS is a course designed to help you use modern CSS and tools like Sass and PostCSS in order to get control of your stylesheets. A course to help you learn how to wrangle your stylesheets, keeping them organized and scalable no matter the size of the project or how big your team

When we first start writing CSS, it’s pretty easy.

Change a background color here, change a font there.

As you improve, you might start building out individual components or small layouts from designs you find online, and things go pretty well.

You understand the basics of flexbox, grid, and positioning and you are feeling pretty confident.

You can create layouts and get the job done…

But as projects grow in size, things become a bit of a mess.

Every aspect of a project becomes harder to manage the larger the project is. And as more team members enter the picture, the difficulties raise exponentially.

Some things are easier to manage than others, and CSS is one of those things that is very easy for it to explode into a complex, unorganized, mess. And when you’re working in a team with varying degrees of comfort in writing CSS, thing can become a nightmare.

And that’s why there are so many 3rd party libraries and frameworks out there, as well as a bunch of different naming conventions.

Those all exist because writing CSS that can scale is hard, and it’s made harder by the ever growing list of technologies we can use to build our sites as well.

The problem

Most tutorials, blog posts, and videos about CSS cover fundamental concepts like how flexbox works, or how to make a single component in isolation. They don’t talk about writing CSS at scale.

That’s just the nature of short, easy to digest content.

And of course, CSS is usually covered in longer content and other courses, but often it’s from extremely talented full-stack educators who don’t have the strongest grasp of CSS.

That’s not to mention coding bootcamps that can cost between $10,000-$20,000 and barely even do basic CSS any justice!

Knowing the basics of it is super important, but once you’ve got the fundamentals down, class naming can still be hard, that our stylesheets can easily become a mess as they grow, and we never want to deal with frustration of dealing with conflicting styles.

There is a better way

As CSS continues to grow as a language, things like custom properties and cascade layers are here to help us wrangle our CSS like we never could do before.

There are also other tools that have become industry standards such as Sass, PostCSS, and more that can help as well.

And in this course, I want to teach you how you can leverage modern CSS, and some of those other tools to create well-organized, and easy-to-scale projects that actually leave you and your team writing less CSS.

This is an advanced course that assumes you are comfortable writing CSS, but struggle with organization and scaling projects.

Additional

This course is still a work in progress and the top tier is in pre-release at the moment.

As it stands now, modules 1-4 are finished and you will get immediate access to them (though a bit of tidying up and small fixes are still needed).

Module 5 will be progressively added as I make progress on it.

Who teaches Beyond CSS? Kevin Powell

Kevin Powell thumbnail

Kevin Powell is a Canadian developer and one of the most cited independent voices on modern CSS — running the Kevin Powell YouTube channel, which has anchored a generation of front-end developers' relationship with CSS. He is widely respected for the patience and depth of his explanations of the parts of CSS that the language's reputation as a quirky historical accident often obscures.

The course catalog covers modern CSS in depth: Grid and Flexbox layout, custom properties (CSS variables), modern responsive design (container queries, the dynamic viewport units, modern color spaces), CSS animations and transitions, typography on the web, and the design-system thinking that connects CSS to broader UI work. Material is structured for working developers building real interfaces.

The CourseFlix listing under this source carries 7 Kevin Powell courses spanning that range. Material is paid; Kevin Powell's courses are sold individually on the original platform. Courses are aimed at developers ready to make CSS a deliberate craft rather than an afterthought.

What lessons are included in Beyond CSS?

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: 1. Introduction to the course
All Course Lessons (220)
#Lesson TitleDurationAccess
1
1. Introduction to the course Demo
02:02
2
2.1.1. Installing Sass
04:22
3
2.1.2. Making sure Sass is working
04:40
4
2.1.3. Watching files
03:12
5
2.1.4. What are source maps
02:16
6
2.2.1. The parent selector
01:31
7
2.2.2. Avoiding specificity issues with nesting
02:19
8
2.2.3. Using a trailing
05:02
9
2.3.1. Variable challenge
08:07
10
2.3.2. Variables vs. Custom Properties
04:30
11
2.4.1. Color functions and custom properties
03:50
12
2.5.1. Before we get started
11:07
13
2.5.2. Setting things uo
04:26
14
2.5.3. The HTML
03:57
15
2.5.4. Pricing Table - Reset and Base Styles
07:35
16
2.5.5. Styling the page
15:28
17
2.5.6. Creating the inverted color scheme (a challenge)
02:02
18
2.5.7. Creating the button hover and focus states (a challenge)
02:38
19
2.6.1. Why extends can be dangerous
03:02
20
2.7.1. Mixins vs. Extendsb
02:14
21
2.7.2. Maxin arguments
03:03
22
2.7.3. Optional arguments
01:59
23
2.7.4. Challenge
04:33
24
2.8.1. Using variables in different places
02:12
25
2.8.2.1. Two challenges
02:42
26
2.8.2.2. Two challenges
04:47
27
2.8.3. Nested children and &
08:01
28
2.9.1. The HTML and basic page structure
15:34
29
2.9.2. Getting info from Figma
02:39
30
2.9.3.1. Even columns
03:53
31
2.9.3.2. Utility classes
06:27
32
2.9.4. Styling the product card
07:44
33
2.9.5. Positioning the button
08:17
34
2.9.6. The category card
06:24
35
3.1. The Sass color module
04:24
36
3.2.2.1. @for. In action
01:50
37
3.2.2.2. @for. In action. Column-count
02:48
38
3.2.2.3. @for. In action. Column-count
01:26
39
3.2.2.4. @for. In action. Grid based system
06:15
40
3.2.3.1. @for. A challenge
04:15
41
3.2.4.1. @EACH In action
00:47
42
3.2.5.1. @each. With nested lists
02:05
43
3.3.1. @if, @else, @if else, and if() Adding logic to our stylesheets
02:48
44
3.3.2. @if In action
02:06
45
3.3.3. @if @else A challenge
02:06
46
3.3.4. @if Refactoring our ui-component mixin
02:15
47
3.4.1. Functions Creating your own functions
02:01
48
3.4.2. Functions In action
02:38
49
3.4.3.1. Functions Warnings, errors, and debugging
04:00
50
3.4.3.2. Functions Warnings, errors, and debugging
03:23
51
3.5.1.1. Arbitrary arguments
01:51
52
3.5.1.2. Arbitrary arguments
02:37
53
3.5.2. @content
01:39
54
3.6.1.1. A fancy list
03:33
55
3.6.1.2. A fancy list
02:59
56
3.6.2. An easier way to access them
03:49
57
3.6.3.1. Nested maps
01:51
58
3.6.3.2. Nested maps
02:37
59
3.6.4. Accessing map values with loops
04:40
60
3.6.5. map.has-key() and errors
02:43
61
4.1.1.1. Building our own Sass modules
02:14
62
4.1.1.2. Building our own Sass modules
02:46
63
4.1.2.1. Using, and name-spacing, our partial files
01:41
64
4.1.4.1. @forward
02:48
65
4.1.4.2. @forward
02:01
66
4.1.6.1. Why bother with partial files
01:49
67
4.2.2.1. Getting started with Vite
03:53
68
4.2.2.2. Getting started with Vite
03:40
69
4.2.2.3. Getting started with Vite
01:57
70
4.2.3.1. Setting up Vite for multiple pages
02:39
71
4.2.3.2. Setting up Vite for multiple pages
03:02
72
4.2.3.3. Setting up Vite for multiple pages
07:11
73
4.2.4. Getting our projects online
08:50
74
4.3.2. A good starting point
16:22
75
4.3.3. Creating a template
02:52
76
4.4.1. Creating a new project from the template
02:27
77
4.4.2.1. Refactoring the pricing table project
06:14
78
4.4.2.2. Refactoring the pricing table project
01:16
79
4.4.2.3. Refactoring the pricing table project
02:04
80
4.4.2.4. Refactoring the pricing table project
01:30
81
4.4.2.5. Refactoring the pricing table project
21:06
82
4.4.3.1. Updating the template
02:56
83
4.4.3.2. Updating the template
04:56
84
4.4.3.3. Updating the template
03:08
85
4.4.3.4. Updating the template
02:48
86
4.5.1. Starting a new project using our template
02:47
87
4.5.2. Analyzing the design
08:10
88
4.5.3.1. Setting up the abstracts
02:45
89
4.5.3.2. Setting up the abstracts
02:50
90
4.5.3.3. Setting up the abstracts
10:28
91
4.5.4.1. New utilities and generic layouts
04:10
92
4.5.4.2. New utilities and generic layouts
03:14
93
4.5.4.3. New utilities and generic layouts
05:18
94
4.5.4.4. New utilities and generic layouts
03:11
95
4.5.4.5. New utilities and generic layouts
04:03
96
4.5.4.6. New utilities and generic layouts
02:53
97
4.5.5.1. The components
06:43
98
4.5.5.2. The components
18:39
99
4.5.6. Reset and base styles
02:22
100
4.5.7.1. Writing the HTML
01:00
101
4.5.7.2. Writing the HTML
06:17
102
4.5.7.3. Writing the HTML
04:30
103
4.5.7.4. Writing the HTML
05:26
104
4.5.7.5. Writing the HTML
03:56
105
4.5.7.6. Writing the HTML
02:53
106
4.5.7.7. Writing the HTML
03:28
107
4.5.8. Styling the header
07:24
108
4.5.9. Styling the hero
02:39
109
4.5.10. Improving the buttons
01:50
110
4.5.11.1. Design tweaks
01:22
111
4.5.11.2. Design tweaks
04:31
112
4.5.11.3. Design tweaks
03:45
113
4.5.12. Fixing the flex-group
03:43
114
4.5.13. The figures
09:04
115
4.5.14. The testimonial cards
10:40
116
4.5.15. Finishing touches
03:44
117
4.6.1. Updating our starter template
17:18
118
4.6.2. A faster way to use your template
01:59
119
4.7.1. Introduction
02:27
120
4.7.2.1. Getting started with PostCSS and postcss-present-env
02:33
121
4.7.2.2. Getting started with PostCSS and postcss-present-env
07:11
122
4.7.2.3. Getting started with PostCSS and postcss-present-env
05:03
123
4.7.2.4. Getting started with PostCSS and postcss-present-env
06:49
124
4.7.2.5. Getting started with PostCSS and postcss-present-env
06:56
125
4.7.2.6. Getting started with PostCSS and postcss-present-env
04:54
126
5.1.2. What is a design system
05:46
127
5.1.3.1. Design Tokens
05:27
128
5.1.3.2. Design Tokens
03:36
129
5.1.3.3. Design Tokens
04:31
130
5.1.4.1. Global Tokens and Private Members
02:54
131
5.1.4.2. Global Tokens and Private Members
02:15
132
5.1.5.1. Getting Started with our System
01:52
133
5.1.5.2. Getting Started with our System
01:07
134
5.1.6.1. Setting up our Colors
02:35
135
5.1.6.2. Setting up our Colors
03:42
136
5.1.6.3. Setting up our Colors
01:45
137
5.1.6.4. Setting up our Colors
02:45
138
5.1.7.1. Setting up the typography
08:20
139
5.1.7.2. Setting up the typography
03:10
140
5.1.7.3. Setting up the typography
03:09
141
5.1.7.4. Setting up the typography
04:09
142
5.1.7.5. Setting up the typography
03:41
143
5.1.10.1. Contextual & Component Sizes
02:01
144
5.1.10.2. Contextual & Component Sizes
10:42
145
5.1.10.3. Contextual & Component Sizes
02:00
146
5.1.12.1. Body, buttons, and cards
07:24
147
5.1.12.2. Body, buttons, and cards
12:47
148
5.1.12.3. Body, buttons, and cards
06:31
149
5.1.12.4. Body, buttons, and cards
03:27
150
5.2.2. Creating a new theme
01:59
151
5.2.3. Using our new theme
01:24
152
5.2.5.1. Making the logo change with the color scheme
07:38
153
5.2.5.2. Making the logo change with the color scheme
05:15
154
5.2.6. Switching between themes
01:56
155
5.2.7. Fixing the utility classes
02:14
156
5.2.8.1. Manually toggling the themes
14:31
157
5.2.8.2. Manually toggling the themes
03:36
158
5.3.4. Prefixing
07:06
159
5.4.2. What we will be working on
02:11
160
5.4.3. Getting started
02:01
161
5.4.4. The color abstracts
10:57
162
5.4.5. The typography abstracts
03:07
163
5.4.7. Setting up our tokens
22:34
164
5.4.8. The HTML
17:52
165
5.4.9. Improving our buttons
02:58
166
5.4.10. The hero area
04:19
167
5.4.11. The about section
16:52
168
5.4.12. Rounding the image
02:14
169
5.4.13. The offset grid
03:19
170
5.4.14.1. Customizing the cards in the offset grid
04:40
171
5.4.14.2. Customizing the cards in the offset grid
08:24
172
5.4.15. Making decisions on how we use this system
04:35
173
5.4.16. Moving forward from here
02:58
174
6.1.2. Getting started with Astro
03:39
175
6.1.3. The Astro extension
01:11
176
6.1.4. What we are starting with
03:32
177
6.1.5. The Dev Toolbar
02:00
178
6.1.6. Code fences & dynamic content
02:53
179
6.1.7. Creating a base layout
03:50
180
6.1.11. Creating a second page and navigation
04:12
181
6.1.13. CSS and Astro
06:42
182
6.1.14. Addind Sass to an Astro project
02:14
183
6.1.15. Scoped styles & Sass
01:27
184
6.1.17. Defining a content collection
04:28
185
6.1.18.1. Using a content collection
07:53
186
6.1.18.2. Using a content collection
04:14
187
6.2.3.1. Creating a button component part 1
03:28
188
6.2.3.2. Creating a button component part 1
04:45
189
6.2.4.1. Creating a button component part 2
01:40
190
6.2.4.2. Creating a button component part 2
01:48
191
6.2.5.1. Dynamic elements
04:23
192
6.2.6.1. Using classes instead of data-attribute modifiers
03:29
193
6.3.1.1. What we're going to be building
06:47
194
6.3.2.1. First steps
06:27
195
6.3.2.2. First steps
03:02
196
6.3.3.1. Setting up the tokens
32:17
197
6.3.4.1. Getting started with the layouts
10:05
198
6.3.6.1. Creating the header & footer components
05:09
199
6.3.6.2. Creating the header & footer components
06:09
200
6.3.6.3. Creating the header & footer components
06:58
201
6.3.6.4. Creating the header & footer components
06:32
202
6.3.7.1. Creating & Using a content collection
09:50
203
6.3.8.1. Creating the article index page
08:15
204
6.3.8.2. Creating the article index page
04:08
205
6.3.9.1. Creating an Article Preview component
01:57
206
6.3.10.1. Creating a Tag component
10:25
207
6.3.11.1. Creating a FormattedDate component
04:55
208
6.3.13.1. The Homepage
02:37
209
6.3.14.1. Featured articles
03:20
210
6.3.15.1. Generating the pages
05:16
211
6.3.15.2. Cleaning up the tags
01:43
212
6.3.15.3. Adding content to the pages
02:31
213
6.3.17.1. Creating the excerpts
03:29
214
6.3.18.1. Controlling the excerptLength
01:30
215
6.3.18.2. Only add a paragraph if we have an excerpt
02:36
216
6.3.20.1. Adding the missing content to our articles
09:28
217
6.3.22.1. Using the component
08:56
218
6.3.22.2. Styling the component
04:42
219
6.3.24.1. Creating the component
17:34
220
6.3.26.1. The About & Contact pages
10:53
Unlock unlimited learning

Get instant access to all 219 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Beyond CSS?

More courses by Kevin Powell

Frequently asked questions

What are the prerequisites for enrolling in this course?
The course is designed for individuals who have a basic understanding of CSS and HTML. Familiarity with these technologies will help participants better grasp the advanced concepts and tools covered in the course, such as Sass and PostCSS. While no advanced programming knowledge is required, a foundational understanding of web development is recommended to maximize the learning experience.
What projects will I build during this course?
Participants will engage in various practical projects, including creating a pricing table with an inverted color scheme and developing product cards with complex styling. These projects offer hands-on experience with CSS, Sass, and PostCSS, providing opportunities to apply concepts like mixins, variables, and utility classes.
Who is the target audience for this course?
This course is ideal for web developers and designers who want to enhance their styling skills and learn how to manage large-scale stylesheets effectively. It is particularly suited for those who already have a foundational knowledge of CSS and HTML and are seeking to expand their expertise in modern styling tools and techniques.
How does this course differ from other CSS courses?
Unlike basic CSS courses, this course delves into advanced styling techniques using tools like Sass and PostCSS. It covers topics such as nesting, mixins, and custom functions, providing a deeper understanding of how to create scalable and maintainable stylesheets. This makes it suitable for handling complex projects and collaborating within teams.
What specific tools or platforms will I learn to use?
The course focuses on modern CSS tools, mainly Sass and PostCSS. It covers installation, usage, and various features of these tools, such as variables, mixins, extends, and custom functions. Participants will also learn about source maps and how to manage stylesheets effectively using these tools.
What topics are not covered in this course?
This course does not cover basic CSS syntax or introductory HTML concepts. It also does not delve into JavaScript or other programming languages, focusing instead on advanced styling techniques and tools. Participants looking for a course on basic CSS or front-end development beyond styling may need to explore other resources.
How will this course benefit my career in web development?
By completing this course, participants will be equipped with advanced skills in CSS and styling tools like Sass and PostCSS, which are highly valued in web development. The ability to manage large-scale stylesheets efficiently and the knowledge of creating scalable styles will be beneficial for career advancement, particularly for roles focused on front-end development and design.