Beyond CSS
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
# | 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 |