Build Responsive Real World Websites with CSS3 v2.0
4.6 (942 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
36,953 students enrolled

Build Responsive Real World Websites with CSS3 v2.0

Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!
4.6 (942 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
36,953 students enrolled
Last updated 7/2020
English
English [Auto], Polish [Auto], 1 more
  • Romanian [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 13 hours on-demand video
  • 2 articles
  • 163 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Real-world skills to build real-world websites. Including several mini projects!
  • Learn the basics, then learn Advanced Selectors, Gradients, Transformations, Transitions, Animations, Flexbox and Responsive Web Design!
  • Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen
  • Get helpful support in the course Q&A
  • Downloadable lectures, code and design assets for the entire project
Course content
Expand all 181 lectures 12:57:51
+ CSS Introduction
11 lectures 33:23

An introduction into CSS: Cascading Style Sheets

Preview 02:10
Support Group
01:02

Learn what the CSS syntax looks like, and learn about each part.

Preview 03:14
Very Important
01:32

Sublime, Atom, VS Code, Notepad++.. all of these are text editors you can use for writing CSS.

Preview 02:14

Here's how to ask great questions. Well worded and descriptive questions tend to get answered faster. This is helpful for future questions you'll have in advanced subjects like server-side programming. 

Preview 03:31

Get your free copy of the CSS Masterclas e-book. Over 180 pages with live, interactive code examples. 

CSS Masterclass e-book (free)
00:11

Learn what the difference between inline, internal and external CSS is. 

Preview 03:28

Learn what the difference between inline, internal and external CSS is. 

What is Internal CSS?
03:48

Learn what the difference between inline, internal and external CSS is. 

What is External CSS?
09:15

A few questions to see if you were paying attention.

CSS Introduction Quiz
4 questions
+ Getting Started
14 lectures 01:05:32

CSS allows you to write hex colors (we'll explore these) and named colors, such as "red" and "blue". 

Preview 10:05

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.

Preview 04:15

Each HTML element can have a background color and image. Let's explore how to add a background image in this lesson.

Preview 04:31

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.

Repeating Background Images
03:07

Every HTML element can have a border. It seems ugly at first, but they play an important role in the user experience.

Borders
08:57

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.

The Box Model (Extremely Important!)
05:08

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.

Padding
05:24

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.

Margin
04:40

Centering an entire element isn't an intuitive feature in CSS. Here's how we center an element.

Centering an Element
04:06

Outline is the border around the border. Confused? Let's take a dive into what this property is.

Outline
02:56
Cursor
02:42
A Quick Checkup
01:01

Test your knowledge with these questions.

Getting Started Quiz
6 questions

Your first mini project! Get hands on practice with CSS.

Mini Project
01:42

Here's my solution to the Mini Project lesson. Source code included.

Mini Project: Solution
06:58
+ Text Formatting
9 lectures 33:34

Here's how you can easily change the text color in any element. 

Preview 02:07

There are 4 primary ways to align your text. If you don't know them all off the top of your head you should probably watch this video. 

Preview 04:31

If CSS is "decoration", then what is "text decoration"? It's underlines, over lines, and strike-throughs. You can also change the color of the lines so it doesn't match your text color. Here's how..

Preview 06:33

There's a way to force all your letters to be uppercase, lowercase or capitalized. In this lesson we learn how to do that. 

Text Transform
03:25

Text indenting is more than "just adding a space" before a word. As you learned in middle school, paragraphs should start with an indentation. CSS can handle that for us. 

Text Indent
02:23

Did you know you can change the spacing between letters using CSS? Yep, you can make letters closer or further apart. We learn how to do that in this lesson. 

Letter Spacing
04:06

Sometimes you want more spacing between your lines. CSS makes this easy for us. Learn how in this lesson.

Line Height
03:34

Not every language writes from left to right. There are many languages to write sentences the other way. It's important that you know how to change the text direction in today's hyper connected world. 

Direction
03:23

Just like letter spacing, there's a way to add word spacing. Word spacing is how we space out, or bring together, words in an element.

Word Spacing
03:32

Test your knowledge with these questions.

Text Formatting Quiz
4 questions
+ Fonts and Font Styling
8 lectures 36:52

Serif.. Sans Serif... Cursive... These are just 3 different font types. As a front end web developer you need to know the difference between font types. 

Preview 03:33

When you change a font on your website, you need to consider some people can't see every font. You need backup fonts. And a font family is how you provide this backup support. 

Preview 05:37

I'm going to show you the best place to get free fonts. And how you can install them on your website SUPER easily. 

Preview 04:18

Font style is how you make your text italicized. 

Font Style
03:37

Font size is how you change the height (and width, proportionally) of your text. This is used every single day, several times a day.

Font Size
04:48

To bold, or not to bold, that is the font weight... and more! You can even make your fonts the opposite of bold using font weights!

Font Weight
06:19

Never heard of this one? Let's dive into font variant and explore what it can do for you.

Font Variant
02:36

By far the best icon set on Earth. It's free, it's amazing, they scale perfectly, and they're made with a font file. In this lesson we learn about Font Awesome and how to install it, then we learn how to make the icons appear on our website and how we can change the sizes of our new icon set. 

Font Awesome Icons
06:04

Test your knowledge with these questions.

Font and Font Styling Quiz
5 questions
+ Links and their "States"
4 lectures 08:29

Do you know how to style a link? This section focuses on styling the link and it's "pseudo" states. 

Preview 02:08

When you put your mouse over a link... what is it going to do? That's the hover state. Let's learn how to style that. 

Preview 01:58

Learn how to style links you've already clicked on. 

Visited Links
01:49

When you click on a click, but have not released your mouse button.. this is called the "active" state. And you can style this, too! 

Active Links
02:34

Test your knowledge with these questions.

Links Quiz
2 questions
+ Better Selectors
4 lectures 21:59

You don't need to write a new selector for every single element. There's a way to group your selectors together. 

Preview 05:45

You can select elements "under" other elements. But be careful, this can lead to a specificity nightmare.

Preview 07:53

How do you select child elements in your HTML DOM? We'll learn about that in this lesson. 

Child Selectors
04:35

In this lesson we learn about selecting elements that are "beside" each other. Also known as "siblings". 

Adjacent Selectors
03:46

Test your knowledge with these questions.

Better Selectors Quiz
2 questions
+ Lists
3 lectures 08:56

Browsers style lists for you, but often you want to change it. In this lesson we'll learn about the List Style Type and how we can change bullet points into something else. 

Preview 05:24

Do you want your list position inside the element, or outside the element? This really comes down to padding. We dive deeper into this in this 2 minute video. 

List Style Position
02:03

We can change a lists bullet points or numbers to a custom image. 

List Style Image
01:29

Test your knowledge with these questions.

Lists Quiz
2 questions
+ Tables
6 lectures 16:54

Tables are not preferred in HTML. But they are unavoidable. Here's how you can make the best of tables with CSS.

Preview 01:54

Tables have strange border rules. Let's look at removing some of them so they act like regular elements. 

Preview 01:47

One of the few benefits that comes from using tables is the ability to vertically align content (more on this in the Flexbox module). In this lesson we'll change the vertical alignment of our content inside a table. 

Table Cell Vertical Align
01:23

Let's take what we know of CSS so far, and create a fun little hover effect over a table. This is a common design and it's good to know how to do this. 

Table Row Hover Effect
02:18

I've given you code, and you have to style it using ONLY CSS. You cannot write any HTML to help you out. The code you need is added as an additional downloadable file. 

Mini Project
01:15

The solution to the Mini Project video that came before this video. Source code added.

Mini Project: Solution
08:17

Test your knowledge with these questions.

Tables Quiz
3 questions
+ Display
5 lectures 12:14

Welcome to the Display property, arguably one of the most important CSS properties to ever exist. 

Preview 01:56

What's the difference between <span> and <div>? Display Block. 

Preview 02:15

What's the difference between <div> and <span>? Display Inline.

Display Inline
02:45

There's a middle ground between Display Block and Display Inline. It's called Display Inline Block, and it's amazing. 

Display Inline-Block
02:55

This is how you make elements hide on a page. Not "invisible", but they act like they don't exist at all. 

Display None
02:23

Test your knowledge with these questions.

Display Quiz
4 questions
+ Sizing Elements
2 lectures 06:06

Not all HTML elements support a custom width. But you can overwrite their default behavior and force a width on any element. Learn how to add CSS widths in this lesson.

Preview 03:11

Not all HTML elements support a custom height. But you can overwrite their default behavior and force a height on any element. Learn how to add CSS heights in this lesson.

Height
02:55

Test your knowledge with these questions.

Sizing Elements Quiz
2 questions
Requirements
  • 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
Description

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!

THIS COURSE COMES WITH:

  • 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

  • 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 225,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 in one 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. 

YOU'RE GOING TO LEARN AMAZING ADVANCED CSS3 SUCH AS:

  • 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!)

Gradients:
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!

Transformations:
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. 

Animations:
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:
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 this course is for:
  • 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