Welcome to CSS 201: Intermediate CSS

In this course, we're going to be working with intermediate level CSS, meaning we'll be getting into the nitty-gritty of what CSS can really do.

This is the second step in being able to write really powerful CSS and making your websites look amazing!

"Without CSS, every website would be ugly." – The Internet

We're going to get started by quickly reviewing some of the things we learned in CSS 101. Then we're going to jump into more advanced CSS like absolute positioning and making pixel-perfect web designs.

We'll even talk about working with a designer, so when you land your first web development job as a frontend web developer you'll be prepared to work with a professional designer.

We're going to learn about the box model, which is arguably one of the most useful concepts to know about in CSS without writing any code, strangely enough. It's the difference between an element taking up 100% of the width of your page, and that same element taking up 100% + 2px and acting finicky.

There are lessons on more selectors, including pseudo selectors (like hovering over an element and making it change) and pseudo elements (like adding an HTML element to your page without writing any HTML at all).

We're going to work with lots of positioning, too. That's where we take an element and using CSS, we move it. We can make entire elements sticky, or stick to a certain part of the viewport (the page), or even just bump an element a few pixels to the side.

There are also lessons on transitions – how we make small micro animations, like a smooth movement when you hover over an element with your mouse. Along with transformations – the way we can make elements look skewed from perspective.

And a big subject we're going to tackle is CSS animations – how to make things move on their own without any interaction whatsoever. This is as close as we can get to creating a "cartoon" character that moves by itself, by only writing CSS.

Nearing the end of the course we'll dive into CSS Flexbox and CSS Grid, which are advanced CSS subjects – and that will prepare you for the next step in your CSS journey: learning responsive web development.

There are lots of hands-on practice in this course as well. At the end of most lessons is a homework assignment, so you'll effectively be coding along with me.

Lastly, your project is going to be a big one. You'll find a really nice web design and try to re-create it as best you can. There's going to be a lot of dissection and trying to figure out when and where to place HTML elements, and how to overwrite them using CSS. This project is designed to make your brain SWEAT – as in, it's going to really challenge what you know and push you to your maximum limit. If you can finish this project, you'll likely be able to design any website in the future!

Happy coding!

Requirements:

Basic understanding of CSS and HTML
Internet to stream the videos

Resources:

Amir Khalaf

The Ultralearner

--

1