Beyond CSS

18h 12m 41s
English
Paid

Course description

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

Read more about the course

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

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

Watch Online Beyond CSS

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass

Sources: udemy
Have you have been taking courses that are not up to date or courses that after finishing them you will immediately know that is not what they promised to be in
95 hours 30 minutes
10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScript

Sources: udemy
Welcome to the brand new course where you can learn about how to create modern and beautiful design templates for your websites. If you want to build and customize your portfoli...
21 hours 54 minutes 19 seconds
Mastering CSS Grid 2022 - With 3 cool projects

Mastering CSS Grid 2022 - With 3 cool projects

Sources: udemy
CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our...
17 hours 16 minutes 22 seconds
Page Transitions

Page Transitions

Sources: superhi.com
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
4 hours 10 minutes 33 seconds