CSS 201

——   Created by Kalob Taulien

Intermediate CSS. Create beautiful websites from scratch.

Share this course:

NEW
Course
29
Lessons
2h 04m
Lesson time
intermediate
Skill level
$19.97
or $15/mo for unlimited courses
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.

29 Lessons

0:03:33
The display property
free preview
0:03:11
The box model
free preview
0:02:47
Outlines
free preview
0:04:06
Text shadows
0:03:49
Minimum element width
0:00:44
Introduction to css positions
0:02:41
Relative positioning
0:04:35
Absolute positioning
0:04:19
Fixed positioning
0:04:31
Sticky positioning
0:03:29
Overflowing text
0:02:19
Centering block elements
0:06:09
Advanced css selectors
0:00:37
Introduction to psuedo selectors
0:05:43
Pseudo selectors
View more lessons +
Enroll in this course for $19.97
or $15/mo for unlimited courses

Class benefits

24/7 streaming access
30 day money-back guarantee
Project included
Teacher Q&A
2h 04m of video content
3 peers to work with
Have a coupon?

About the instructor

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 2011
  • I have over 350,000 web development students world-wide
  • I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making …
View full profile

Access unlimited courses for only $15 per month

Start your 14 day free trial. Cancel at any time.

Join Today