Skip to content
Modern CSS Fundamentals

Before we start

A few quick things before we dive into this course.

Course website

Section titled “Course website”

I will be following this course website very closely. It has a fair number of embedded examples, a few interactive sections, and code snippets and links to files that we’ll be using as we go through the course.

While we’ll be following this site very closely, not everything is in here. Sometimes, we’ll be learning something, then jumping over to our project files to practice what we’ve learned.

That said, this site is a pretty comprehensive companion to what you are learning, and I wanted to make it something you could easily reference in the future, so the lessons include code blocks with reference code and embedded examples of the concepts in action.

There is also a search feature at the top, so if you’re looking for a specific thing, you can use that to find all the places where it is mentioned.

Additional Resources

At the end of many lessons, there are blocks like this one with links to additional resources, if ever you feel like you’d like to dive deeper into a given topic.

What we are building

Section titled “What we are building”

This course is very much intended to be hands on, with you writing a lot of code to reinforce what we are learning. We’ll be doing that with a project that we’ll be returning to on a regular basis, as well as smaller-scale stand alone examples and demos.

Here is a preview of what we will be building as part of the larger project.

CodePen

Section titled “CodePen”

Many lessons have embedded CodePen’s for some of the simple examples we will be exploring.

While there is no need, if you’d like to be able to save the changes you make to them, you would need a CodePen account, which is totally free.

Some of the CodePens will be used for quick demos, and some for small challenges.

Anytime there is an embedded CodePen, you can click the Edit on CodePen on the top right to edit it.

See the Pen Untitled by Kevin (@kevinpowell) on CodePen.

Editor

Section titled “Editor”

We’ll also be writing some code in a code editor along the way as well.

I will be using VS Code as my editor, however you’re free to use whatever editor you’re already familiar with.

Extensions

Section titled “Extensions”

There are two extensions that I’ll be using. They’re both optional, but do make life easier!

My theme & font

Section titled “My theme & font”

If you like my set up: