Learn CSS & CSS3 with Kalob.io
Take This Course

Kalob.io is an all-you-can-eat web development buffet. It's $19.95/month and you get access to every course, including downloading every lesson, all future courses and ebooks for free, and 24/7 access on mobile. $19.95/month gets you everything!

About this course


You can launch a new career in web development by simply learning HTML and CSS. You don't need a university degree or any paid software, everything can be learned for free with free software and a few hours of your time. This course also comes with my full CSS Masterclass e-book, as an added bonus!

This entire course is designed to take you from a beginner to a CSS expert in order to prepare you for a job as a web developer.

Don't limit yourself with those terrible site-builder tools. They are cool tools, but ultimately the limit your creativity. By learning CSS you'll be able to unleash your creativity!


  • Over 170 lessons
  • Over 140 tasks (found at the end of each lesson)
  • My CSS Masterclass e-book that has interactive code examples
  • Over 25 self contained modules so you can skip around if you like
  • Direct access to me through the Q&A section (I answer questions within a few hours MAX)
  • Unlimited 24/7 Access through the website, the app, your phone or even your TV
  • A certificate of completion
  • Access to my Developer Support Group where you can ask me questions directly
  • Quizzes at the end of each module

This course does not assume any prior knowledge in CSS, but it's also broken up into small section that allow you to skip around (so you don't have to watch everything you already know about).

I've taught over 55,000 students on Udemy, so you know you can trust me and what I'm going to teach you. Here's what some people have said about my other courses:

  1. "This course is worth doing it like what i call baby steps ... i did the course again and practice a lot i sometime refer to some video if i struggle well done"
  2. "very clear explanation how things example with alot of examples. Very good!"
  3. "absolutely love this course! Perfect! You can't go wrong with this Udemy Instructor."
  4. "Great info. I think it breaks a lot of the myth of what you should and need to know to get a job doing front end development. A++"
  5. "It was a good experience. This course was excellent for me as beginner. Now, I am looking to create my first website. Thank you Mr. Kalob Taulien."

Are you looking for the best way to learn how to build beautiful websites with CSS3? What about websites that look even better on your phone?

Do you want to learn everything inone course? (no upgrades, no up-selling .. just me and you, a bunch of code and some great projects)

Have you taken other CSS courses but didn't actually learn how to build beautiful and responsive websites? Or did they teach you things that you can't apply in real life?

If your answer is a big YES... Then this is exactly the course you are looking for! This is the one-stop-shop for all your CSS learning needs!

This course is very hands on. Over 140 lessons have tasks at the end of them so you can gain immediate experience with everything new you've learned.


  • Transitions
  • Gradients
  • Transformations
  • Animations
  • Flexbox
  • Responsive Web Design

CSS Transitions:
You'll learn how to slowly animate website components using transitions. Like when you put your mouse over a link and it slowly changes color (instead of being instant.. it looks like a fading effect!)

No Photoshop required! We'll learn how to master gradients from scratch. It's a lot easier than you think and adds a nice visual aspect to your websites!

You'll learn about 2D and 3D transformations. Like making an element bigger but keeping it's height and width proportional. Rotating elements has never been easier! Change the perspective on an element adds a nice angle to your elements, and can make your text look like the intro to Star Wars.

CSS3 animations let you create full CSS-only animations (no JavaScript required). You can do more than just change sizes or colors... you can turn your website into an app-like website with cool animations. And we'll go over each animation property one-by-one with lots of practice in between. By the end of the animations module, you'll be an animation PRO!

Flexbox is probably the most important CSS3 property. It lets you set an element's base size and allow it to grow or shrink depending on other content. You can vertically align content without tables or CSS "hacks". It makes responsive web design SO EASY. You can re-arrange your HTML elements without writing any HTML (pure css!) With transitions, you can make a VERY nice website. You'll get real life practice with flexbox AND how you can make a website responsive (there's a project based on creating a Flexbox layout!)

Responsive Web Design (RWD):
Learn exactly how we make a website "responsive", which really just means "the website transforms when you view it on a phone or a laptop". We'll dive into Responsive Web Design, media queries, and get hands on practice creating our own responsive website!

Who is the target audience?

  • Complete beginners who want to learn how to build a professional, beautiful and responsive website
  • Students with some knowledge about HTML and CSS, but who struggle to put together a great website
  • Designers who want to expand their skill set into HTML5 and CSS3


  • No coding or design experience necessary
  • Any computer will do — Windows, OSX or Linux
  • You don’t need to buy any software — we will use the best free web development editor in the world

Sign Up

What's in this course?

CSS Getting Started
Color Types (10:05)
CSS allows you to write hex colors (we'll explore these) and named colors, such as "red" and "blue".
Background Colors (4:15)
Websites are made of "blocks", like Lego. And you can change the entire color of a block by changing it's background color. Find out how this is done.
Background Images (4:31)
Each HTML element can have a background color and image. Let's explore how to add a background image in this lesson.
Repeating Background Images (3:08)
Background images can repeat over and over (like a pattern), or you can tell the browser to only use the image once. In this lesson we'll explore repeating and non-repeating background images.
Borders (8:57)
Every HTML element can have a border. It seems ugly at first, but they play an important role in the user experience.
The Box Model (Extremely Important!) (5:09)
The Box Model is arguably the most important aspect of CSS. It's the padding, margin, border and overall spacing inside an element. We'll explore how to visually see all of these properties in this lesson.
Padding (5:25)
Padding is the spacing inside an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.
Margin (4:40)
Padding is the spacing outside of an element. This is a vital property when it comes to styling your website. You'll use this property dozens of times every day as a web developer.
Centering an Element (4:07)
Centering an entire element isn't an intuitive feature in CSS. Here's how we center an element.
Outline (2:57)
Outline is the border around the border. Confused? Let's take a dive into what this property is.
Cursor (2:43)
Mini Project (1:42)
Your first mini project! Get hands on practice with CSS.
Mini Project: Solution (6:58)
Here's my solution to the Mini Project lesson. Source code included.
CSS3 Flexbox
Flexbox Introduction (4:44)
Welcome to CSS3's Flexbox Module. You'll learn everything about flexbox and it's properties in this complete mini-course.
Equal Sized Columns (9:56)
Learn how to create equal sized columns using flexbox. No floats, no inline-block tricks.. and this is by far the best way to accomplish equal sized columns.
Flexbox Order (3:26)
With CSS3's Flexbox, you can change the order of your elements.. without re-writing your HTML!
Flexbox Rows and Columns (2:58)
Flexbox is broken into 2 main sections: rows and columns. The rules you'll learn about in future lessons apply to both, but can drastically change your results.
Flexbox Reversed Rows and Columns (2:45)
When talking about responsive web design, sometimes you want to simply reverse the rows or columns. Here's how we accomplish that with one simple CSS3 flexbox property.
Flexbox Basis (6:04)
CSS3's Flexbox Basis property is kind of like the width property. But it can grow and shrink. It's PERFECT for responsive web design. Let's dive into this!
Flexbox Wrap (4:31)
When you write too many flexbox items it can take up more than 100% of your browsers width, and that looks terrible. Instead, you want to break items to new rows. In this lesson we'll explore how to do that.
Flexbox Vertical Alignment (4:49)
Up until now vertical alignment was only achievable through CSS hacks, lots of code, or tables.. But thanks to Flexbox, we can do it with just a couple CSS properties!
Flexbox Align Items (5:58)
With flexbox you can align your items (child elements) to the start, end, center, spread out or space them out equally. No padding, no margin.. none of that hassle. This is truly game changing CSS!
Flexbox Justify Content (4:48)
Flexbox's Justify Content property isn't the same as a text-align: justify; declaration. But it's incredibly important. Explore this CSS3 property with me in this video.
Flexbox Align Self (4:42)
CSS3's Flexbox lets you align all it's items (child elements) at the same time. But you can also specify which elements should break the mould and do something different. That's what Flexbox Align Self is all about.
Flexbox Align Content (6:09)
Flexbox comes with a way to align it's own content. In this lesson we'll dive into what that means and how you can change the content alignment inside of Flexbox.
Responsive Flexbox Layout Project (26:36)
Responsive Flexbox Layout Project. Source code is included.