US $19.97
US $59.97

CSS 301: Responsive Web Design

——   Created by Kalob Taulien

Learn how to make your websites look good on phones, tablets and desktops

Share this course:

NEW
Course
10
Lessons
30m
Lesson time
intermediate
Skill level
US $19.97
USD $59.97 Sign Up

More about this course

Welcome to CSS 301: Responsive web design

This is the "final step" when learning CSS – how to make your website "responsive".

Making a website responsive is the act of writing code that makes your website look good on TVs, desktops, laptops, tablets, and phones.

Typically we write one codebase to support all these different device types.

The problem with normal CSS is, for example, an image could be 500 pixels wide.. but what if a viewer with a phone only has a 425 pixel-wide device? Now your website looks broken. That's no good.

Responsive web design is the act of making your HTML elements "snap" to different locations and to look different on different devices.

In this course, you'll use your knowledge of background colors, border radii, font colors, flexbox, and grid to start making a web page act responsively.

Lastly, you'll finish this course by creating a page layout using flexbox (alternatively you can use CSS grid) and making the template responsive – that is, you'll make it "mobile-friendly" so when you shrink down your browser size, it looks great on tablets and phones.

Requirements:

  • Intermediate CSS knowledge (syntax and knowledge around flexbox will be helpful)
  • A text editor such as VS Code, Sublime, Atom, etc. Any free text editor will work
  • Internet to stream these video lessons

The course project

You'll finish this course by creating a page layout using flexbox (alternatively you can use CSS grid) and making the template responsive – that is, you'll make it "mobile-friendly" so when you shrink down your browser size, it looks great on tablets and phones.

10 Lessons

2 mins
Course introduction
free preview
2 mins
The viewport meta element
free preview
4 mins
Media query syntax
3 mins
What is mobile first
4 mins
Responsive images
5 mins
Responsive embeds
3 mins
Multiple media queries
9 mins
Making a responsive layout
2 mins
Your project
2 mins
Summary

Reviews

100% of 2 people enjoyed this course!

Courtney Fuhr liked this class

Steve Mcdougson liked this class and said...

I really liked this course, it was very helpful. Lots of great insight. Can't wait to take another one!

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
  • 30m of on-demand video
  • 2 peers to work with
  • Have a coupon?
  • Checkout