Front-End Development: responsive layouts and JavaScript apps

01

Responsive foundations

In simple words

A responsive page is like water in a cup: it takes the shape of whatever holds it. A phone, a tablet and a big monitor are different cups. The page should look good in all of them without you building three websites.

Before this course: Web Development Basics (course 7.7). You should already be able to write an HTML page with headings, links, lists and images, style it with CSS (selectors, the box model, one media query), add a button click with JavaScript, use DevTools and publish with GitHub Pages. This course goes deeper: real layouts, data in JavaScript, fetching from an API and accessibility. We will build one project, "Canada Weather Cards", step by step.

Key facts

Responsive web design (MDN) is an approach that makes pages work on all screen sizes. It combines flexible layouts, flexible media and media queries.
Mobile first: start with a simple single-column layout for narrow screens, then add layout changes for wider screens.
Always include the viewport meta tag in the <head>. Without it, mobile browsers assume a width of about 980px and show a zoomed-out desktop layout:

<meta name="viewport" content="width=device-width, initial-scale=1">

Relative units adapt: %, rem (relative to the root font size), em, vw (percent of viewport width). Use rem for font sizes and spacing so the page respects the user's text-size setting.
MDN advises defining breakpoints in relative units (like rem) and changing the layout where the content starts to look bad, not at the sizes of specific devices.
Mobile-first media queries use min-width: the base CSS is for small screens, and the query adds changes for wider ones.
Make media fit its container: img { max-width: 100%; }.
box-sizing: border-box makes width include padding and border, which makes sizing easier.

Example (mobile first)

* { box-sizing: border-box; }
img { max-width: 100%; }

.site-header {
 display: flex;
 flex-direction: column;
 gap: 8px;
 padding: 16px;
}

@media (min-width: 40rem) {
 .site-header {
  flex-direction: row;
  justify-content: space-between;
 }
}

On a narrow screen the header items stack. From 40rem (640px at the default font size) they sit in one row.

Step by step

Create a folder weather-cards with index.html, style.css and app.js.
In index.html add the doctype, lang="en", the charset meta tag and the viewport meta tag shown above.
Add a header with an h1 ("Canada Weather Cards") and a nav with two links.
In style.css add * { box-sizing: border-box; } and img { max-width: 100%; }.
Write the base (phone) styles first: padding in rem or px, readable font size, no media query yet.
Add one @media (min-width: 40rem) block for wider screens.
Open DevTools, click the Device toolbar and drag the width from small to large (names can differ by version).
Check: no sideways scrolling at 360px wide, and the layout changes once you pass 640px.

Watch on YouTube

Let's code a responsive webpage! (Mobile First): meta viewport, flexbox and media queriesVirtualAddiction · YouTube · youtube.com

CSS Media Queries for Beginners (Mobile First)Code with Unclebigbay · YouTube · youtube.com

Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.

LESSON 01Responsive foundations

LESSON 01 / ANIMATED LESSON / AI VOICE00:00 / 01:00

Voice

Read the video script

[Host] "A responsive page fits any screen, like water fits any cup."
[Text on screen: <meta name="viewport" content="width=device-width, initial-scale=1">] "Step one: the viewport tag. Without it, phones show a tiny desktop page."
[Screen: CSS with a min-width media query, browser window widening] "Start with the phone layout. Then add a min-width query for bigger screens."
[Host] "Change the layout where your content looks bad, not at the size of one phone."

Try it now

Create the project folder and the header from steps 1 to 8. Test it in the DevTools Device toolbar at three widths and write down at what width the layout changes.

ClaudeStuck? Copy a ready-made prompt for Claude

Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.

For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.

I'm learning "Front-End Development: responsive layouts and JavaScript apps" on The Future Market. Lesson 1: "Responsive foundations".

What the lesson teaches:
- Responsive web design (MDN) is an approach that makes pages work on all screen sizes. It combines flexible layouts, flexible media and media queries.
- Mobile first: start with a simple single-column layout for narrow screens, then add layout changes for wider screens.
- Always include the viewport meta tag in the <head>. Without it, mobile browsers assume a width of about 980px and show a zoomed-out desktop layout:
- Relative units adapt: %, rem (relative to the root font size), em, vw (percent of viewport width). Use rem for font sizes and spacing so the page respects the user's text-size setting.
- MDN advises defining breakpoints in relative units (like rem) and changing the layout where the content starts to look bad, not at the sizes of specific devices.
- Mobile-first media queries use min-width: the base CSS is for small screens, and the query adds changes for wider ones.
- Make media fit its container: img { max-width: 100%; }.

The exercise I'm working on:
Create the project folder and the header from steps 1 to 8. Test it in the DevTools Device toolbar at three widths and write down at what width the layout changes.

I'm stuck. Please:
1. Explain the main idea in plain, simple words with one everyday example.
2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step.
3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.

I'm a parent helping my child (about 8 years old) with a lesson called "Responsive foundations" from the course "Front-End Development: responsive layouts and JavaScript apps".

Here's what the lesson says:
A responsive page is like water in a cup: it takes the shape of whatever holds it. A phone, a tablet and a big monitor are different cups. The page should look good in all of them without you building three websites.

The activity:
Create the project folder and the header from steps 1 to 8. Test it in the DevTools Device toolbar at three widths and write down at what width the layout changes.

Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words.
Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.

Open Claude

Sources

MDN Web Docs, Responsive web design: developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout

My notes

I learned this

02