Jen Kramer, Freelance Instructor

Practical CSS Layouts

Bored with basic layouts? Unsure how to make them spicier? This is the course for you! Join Jen Kramer in building three different responsive websites for the fictional band Magenta Lime.

We'll start with a basic website, solidifying our fonts, sizing, colors, images, breakpoints, and fundamentals of the design. Next, we'll move a medium difficulty site, reusing many elements from the basic design but adding interactivity, additional styling, and a tiny bit of JavaScript. Finally, we'll tackle a complex site, adding animations, interactivity, and even more challenging layouts.

View the websites we'll create:

Practical CSS Layouts logo. Frontend Masters produced this course.

This course is available by subscription to Frontend Masters.

Watch the course

Chapter Listing

About This Course

By watching the course, you'll learn:

  • Create 3 different websites with the same material - easy, medium, hard
  • Move basic layouts to complex layouts with a handful of CSS properties
  • Keep it accessible with semantic markup
  • Learn some of the latest layout moves beyond Jen's other courses

Is This Course for Me?

If you've mastered the basics of Flexbox and Grid, such as you'd get from my CSS Grid & Flexbox for Responsive Layouts, v2 course, you're ready to take this course.

Any Prerequisites?

  • STRONGLY RECOMMENDED - "CSS Grid & Flexbox for Responsive Layouts, v2" or similar knowledge of Flexbox and Grid.
  • Understanding of CSS, selectors, variables, calc(), and general styling recommended.