Welcome to CSS 201: Intermediate CSS
In this course, we are going to be working with intermediate level CSS, meaning we will 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 are going to get started by quickly reviewing some of the things we learned in CSS 101. Then we are going to jump into more advanced CSS like absolute positioning and making pixel perfect web designs.
We will even talk about working with a designer, so when you land your first web development job as a frontend web developer you will be prepared to work with a professional designer.
We are 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 is 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 are going to work with lots of positioning, too. That is 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 are 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 will 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 will effectively be coding along with me.
Lastly, your project is going to be a big one. You will find a really nice web design and try to re create it as best you can. There is 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 is going to really challenge what you know and push you to your maximum limit. If you can finish this project, you will likely be able to design any website in the future!
Happy coding!

Resources:
?Curriculum overview (https://docs.google.com/document/d/1GzHM1t-M7bIxq9MAEEjzvPORrXBbEH2BAB4-zcJGm-8/edit#heading=h.f9flfaxda1b2)
?Download VS Code (https://code.visualstudio.com/download)?
–
SKILLS YOU WILL GAIN
CSS3
Web Development
WHAT YOU WILL LEARN
CSS animations
Positioning
Advanced Selectors
Find a really nice web design and try to re-create it as best you can