Practical CSS Layouts

Jen Kramer

Jen Kramer

8 hours, 58 minutes CC
Practical CSS Layouts

Course Description

Starting with the basics of CSS and HTML, you'll progress through creating responsive designs for mobile, tablet, and desktop layouts. You'll learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists. You'll explore concepts like rem and em units, custom fonts, responsive images, and the picture element. By the end of the course, you'll have built three variations of a website, each increasing in complexity!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: July 25, 2023


Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 8 minutes
  • Introduction
    Jen Kramer begins the course by sharing the course website and giving a brief tour of the design that will be built. Three variations of a website will be created, growing in complexity throughout the course. A demo of CodePen is also provided in this lesson.

Easy Design

Section Duration: 2 hours, 21 minutes

Medium Design: Tour Page & Tracklist

Section Duration: 1 hour, 9 minutes

Medium Design: Reviews & Images

Section Duration: 40 minutes

Medium Design: Audio Player & Hamburger Menu

Section Duration: 1 hour, 40 minutes

Medium Design: Final Site Assembly

Section Duration: 22 minutes

Difficult Design: Small Elements

Section Duration: 1 hour, 2 minutes

Difficult Design: Advanced Styles

Section Duration: 1 hour, 27 minutes

Wrapping Up

Section Duration: 5 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now