US $19.97
US $49.97

CSS 201

——   Created by Kalob Taulien

Intermediate CSS. Create beautiful websites from scratch.

Share this course:

NEW
Course
28
Lessons
2h 02m
Lesson time
intermediate
Skill level
US $19.97
USD $49.97 Sign Up

More about this course

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:

The course project

You will find an inspiring web design from pinterest.com and code it using HTML and CSS. This will stretch your mental capacity and show you what you're truly capable of.

This project is not easy , nor is it designed to be easy.

The idea is to take a beautiful (and difficult) web design and make it a reality. Once you are done with your project, you can share it in your portfolio when you're applying for a frontend web development job.

Lastly, don't forget to share your project (you can even share your work-in-progress website) in your Arbington Project section in this course.

28 Lessons

4 mins
The display property
free preview
4 mins
The box model
free preview
3 mins
Outlines
free preview
5 mins
Text shadows
4 mins
Minimum element width
1 min
Introduction to css positions
3 mins
Relative positioning
5 mins
Absolute positioning
5 mins
Fixed positioning
5 mins
Sticky positioning
4 mins
Overflowing text
7 mins
Advanced css selectors
1 min
Introduction to psuedo selectors
6 mins
Pseudo selectors
2 mins
Introduction to pseudo elements
View more lessons +

Reviews

100% of 2 people enjoyed this course!

Delia Asan liked this class

Marius Bratu liked this class

About the instructor

Kalob Taulien
Kalob Taulien
  • 160 students
  • 41 reviews
  • 38 courses

Hi everybody! I'm Kalob Taulien.

Here's the TL;DR (short) version about me:

  • I have been coding since 1999 and teaching people how to code since …
Read more
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today. ☝️

Class benefits

  • Certificate of Completion
  • 30 day satisfaction guarantee
  • 24/7 streaming access
  • Project included
  • Direct teacher access
  • 2h 02m of on-demand video
  • 3 peers to work with
  • Have a coupon?
  • Checkout