I'm excited to announce that we've refreshed the Responsive Design module on Scrimba's Frontend Developer Career Path with brand new content.

Responsive design is all about building flexible website layouts that can adapt or accommodate just about any screen size and is an essential skill for a frontend developer. In the new module, you will level up your CSS skills by completing over 35 coding challenges and exercises to get you immediately writing code, putting what you're learning into practice, and building several impressive projects.

Build a Responsive Site

In the first section, Guil teaches you how to convert a website you built in a previous module from a fixed-width layout to a fully responsive design optimized for display on mobile devices and larger laptop and desktop screens.

A responsive website layout

This section kicks off your responsive learning journey with the following lessons:

  • Thinking responsively – offering an experience to users based on the device they use
  • Common relative CSS units (%, em, rem) used for creating flexible and scalable websites and web apps
  • The basics of media queries, which play a huge role in responsive design
  • Simplify and optimize your CSS using a common strategy developers use in responsive design called "mobile-first design"
  • Build a responsive website navigation
  • The viewport meta tag
  • Add more flexbox features like flex-wrap, flex, and gap to your skillset
  • And more!

Build a Product Splash Page

In the second section, Guil helps you push your skills further by creating a splash (or landing) page for a product called Scrimbafy. The page will appear as a single-column layout on narrow screen sizes, then a split layout on wider screens.

A responsive product splash page

You’ll build your responsive splash page while learning the following topics:

  • Transforming text
  • CSS viewport units (vh, vw) relative to the browser's viewport size
  • Responsive form elements
  • Using the flexbox order property to reorder elements on screen
  • Creating modifier classes to make your CSS more reusable and flexible
  • The box-sizing property, which makes building CSS layouts easier and more intuitive
  • And more!

CSS Grid: The Ultimate Layout Tool

Section three teaches you more advanced CSS layout tools and features from CSS evangelist and star teacher Kevin Powell. You'll learn CSS Grid, the ultimate layout tool in responsive design, and build an article card with several other smaller projects associated with the lessons.

Article card built with CSS Grid

We moved this section into the Responsive Design module from a recent module about Flexbox and Grid to support and strengthen the skills you'll gain in the first two sections. It covers the following topics and more:

  • Creating grid columns and rows
  • Adding space between grid items
  • Creating grid areas
  • Placing items on the grid
  • Spanning columns
  • Flexible items with the CSS fr unit
  • Quickly make multiple columns with repeat()
  • minmax()
  • auto-fit and auto-fill

New Solo Project

The Responsive Design module also comes with a new Solo Project that you will build on your own to use and demonstrate your impressive new CSS and responsive design skills. You will build a fully responsive learning journal website that you will deploy and make live on the web with Netlify.

Learning journal website design for desktop and mobile screens.

We're excited for you to dive right in and have some fun exploring the world of responsive design with CSS. So when you're ready, be sure to check out the new content!