Beyond CSS

18h 12m 41s
English
Paid
July 28, 2024

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

More

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.

Watch Online Beyond CSS

Join premium to watch
Go to premium
# Title Duration
1 1. Introduction to the course 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

Similar courses to Beyond CSS

Data Visualization + D3.js

Data Visualization + D3.jssuperhi.com

Duration 16 hours 48 minutes 54 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!udemy

Duration 12 hours 13 minutes 30 seconds
CSS Animations & Transitions

CSS Animations & Transitionsleveluptutorials

Duration 2 hours 9 minutes 35 seconds
Mastering CSS Grid 2022 - With 3 cool projects

Mastering CSS Grid 2022 - With 3 cool projectsudemy

Duration 17 hours 16 minutes 22 seconds
The HTML & CSS Bootcamp 2023 Edition

The HTML & CSS Bootcamp 2023 Editionudemy

Duration 37 hours 18 minutes 8 seconds
The CSS Bootcamp: Zero to Mastery

The CSS Bootcamp: Zero to Masteryzerotomastery.io

Duration 40 hours 15 minutes 13 seconds