2JUNIOR

Building responsive layouts

A crucial part of modern front-end development is making web pages look good on all screen sizes. The challenges in this path are designed to help you get to grips with making layouts that work across all devices.

6 challenges
Level 2
~12 hours
📱
Building responsive
6 challenges to complete

Prerequisites

Comfortable with HTML and CSS basics

Learning outcomes

Master CSS Grid and Flexbox
Understand mobile-first design
Learn responsive typography
Practice with real-world layouts

Challenges

INTERMEDIATEPREMIUM

Mood tracking app

Build a mood tracking app to help users log their daily feelings and track their emotional wellbeing over time.

HTMLCSSJavaScript
ADVANCEDPREMIUM

Browser extension manager

Create a browser extension manager interface with the ability to enable, disable, and configure extensions.

ReactTypeScriptCSS
3
JUNIORFREE

Personal blog

Build a personal blog with article listing, individual article pages, and a responsive design.

HTMLCSSJavaScript
4
NEWBIEFREE

Character counter

Create a character counter component that updates in real-time as users type in a text area.

HTMLCSSJavaScript
5
JUNIORFREE

Conference ticket generator

Build a conference ticket generator that creates personalized tickets based on user input.

HTMLCSSJavaScript
6
INTERMEDIATEPREMIUM

Tech book club

Create a tech book club website with book listings, reviews, and discussion forums.

ReactNode.jsMongoDB
Learn-Frontend