Front-End Development: mga responsive layout at JavaScript app

01

Mga pundasyon ng responsive design

In simple words

Ang responsive na page ay parang tubig sa baso: kinukuha nito ang hugis ng anumang paglalagyan. Magkakaibang baso ang phone, tablet at malaking monitor. Dapat maganda ang page sa lahat ng iyon nang hindi ka gumagawa ng tatlong website.

Bago ang course na ito: Web Development Basics (course 7.7). Dapat marunong ka nang magsulat ng HTML page na may mga heading, link, listahan at larawan, i-style ito gamit ang CSS (mga selector, ang box model, isang media query), magdagdag ng button click gamit ang JavaScript, gumamit ng DevTools at mag-publish gamit ang GitHub Pages. Mas malalim ang course na ito: totoong mga layout, data sa JavaScript, pagkuha mula sa API at accessibility. Gagawa tayo ng isang proyekto, ang "Canada Weather Cards", hakbang-hakbang.

Key facts

Ang responsive web design (MDN) ay isang paraan para gumana ang mga page sa lahat ng laki ng screen. Pinagsasama nito ang flexible na mga layout, flexible na media at media queries.
Mobile first: magsimula sa simpleng single-column na layout para sa makikitid na screen, saka magdagdag ng pagbabago sa layout para sa mas malalapad na screen.
Laging isama ang viewport meta tag sa <head>. Kapag wala ito, ipinapalagay ng mga mobile browser na mga 980px ang lapad at nagpapakita ng naka-zoom out na desktop layout:

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

Umaangkop ang relative units: %, rem (kaugnay ng root font size), em, vw (porsyento ng lapad ng viewport). Gamitin ang rem para sa font size at spacing para igalang ng page ang text-size setting ng user.
Pinapayo ng MDN na tukuyin ang mga breakpoint sa relative units (gaya ng rem) at baguhin ang layout kung saan nagsisimulang pumangit ang content, hindi sa mga laki ng partikular na device.
Gumagamit ng min-width ang mga mobile-first na media query: ang base CSS ay para sa maliliit na screen, at ang query ang nagdaragdag ng pagbabago para sa mas malalapad.
Gawing kasya ang media sa lalagyan nito: img { max-width: 100%; }.
Ang box-sizing: border-box ay nagpapasama ng padding at border sa width, kaya mas madaling magsukat.

Halimbawa (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;
 }
}

Sa makitid na screen, nakapatong-patong ang mga item ng header. Mula 40rem (640px sa default na font size), nasa iisang hanay na sila.

Step by step

Gumawa ng folder na weather-cards na may index.html, style.css at app.js.
Sa index.html, idagdag ang doctype, lang="en", ang charset meta tag at ang viewport meta tag na nasa itaas.
Magdagdag ng header na may h1 ("Canada Weather Cards") at isang nav na may dalawang link.
Sa style.css, idagdag ang * { box-sizing: border-box; } at img { max-width: 100%; }.
Isulat muna ang base (phone) na mga style: padding sa rem o px, madaling basahing font size, wala pang media query.
Magdagdag ng isang @media (min-width: 40rem) block para sa mas malalapad na screen.
Buksan ang DevTools, i-click ang Device toolbar at i-drag ang lapad mula maliit hanggang malaki (maaaring magkaiba ang mga pangalan depende sa version).
Check: walang pasidlong na pag-scroll sa 360px na lapad, at nagbabago ang layout kapag lumampas ka na sa 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 01Mga pundasyon ng responsive design

LESSON 01 / ANIMATED LESSON / ENGLISH VOICE00:00 / 01:00

Voice

Read the video script

[Host] "Kasya ang responsive na page sa anumang screen, gaya ng tubig na kasya sa anumang baso."
[Text on screen: <meta name="viewport" content="width=device-width, initial-scale=1">] "Unang hakbang: ang viewport tag. Kapag wala ito, maliit na desktop page ang ipapakita ng phone."
[Screen: CSS na may min-width media query, lumalapad ang browser window] "Magsimula sa layout ng phone. Tapos magdagdag ng min-width query para sa mas malalaking screen."
[Host] "Baguhin ang layout kung saan pumapangit ang content mo, hindi sa laki ng isang phone lang."

Try it now

Gawin ang project folder at ang header mula sa mga hakbang 1 hanggang 8. Subukan ito sa DevTools Device toolbar sa tatlong lapad at isulat kung sa anong lapad nagbabago ang layout.

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: mga responsive layout at JavaScript app" on The Future Market. Lesson 1: "Mga pundasyon ng responsive design".

What the lesson teaches:
- Ang responsive web design (MDN) ay isang paraan para gumana ang mga page sa lahat ng laki ng screen. Pinagsasama nito ang flexible na mga layout, flexible na media at media queries.
- Mobile first: magsimula sa simpleng single-column na layout para sa makikitid na screen, saka magdagdag ng pagbabago sa layout para sa mas malalapad na screen.
- Laging isama ang viewport meta tag sa <head>. Kapag wala ito, ipinapalagay ng mga mobile browser na mga 980px ang lapad at nagpapakita ng naka-zoom out na desktop layout:
- Umaangkop ang relative units: %, rem (kaugnay ng root font size), em, vw (porsyento ng lapad ng viewport). Gamitin ang rem para sa font size at spacing para igalang ng page ang text-size setting ng user.
- Pinapayo ng MDN na tukuyin ang mga breakpoint sa relative units (gaya ng rem) at baguhin ang layout kung saan nagsisimulang pumangit ang content, hindi sa mga laki ng partikular na device.
- Gumagamit ng min-width ang mga mobile-first na media query: ang base CSS ay para sa maliliit na screen, at ang query ang nagdaragdag ng pagbabago para sa mas malalapad.
- Gawing kasya ang media sa lalagyan nito: img { max-width: 100%; }.

The exercise I'm working on:
Gawin ang project folder at ang header mula sa mga hakbang 1 hanggang 8. Subukan ito sa DevTools Device toolbar sa tatlong lapad at isulat kung sa anong lapad nagbabago ang layout.

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 "Mga pundasyon ng responsive design" from the course "Front-End Development: mga responsive layout at JavaScript app".

Here's what the lesson says:
Ang responsive na page ay parang tubig sa baso: kinukuha nito ang hugis ng anumang paglalagyan. Magkakaibang baso ang phone, tablet at malaking monitor. Dapat maganda ang page sa lahat ng iyon nang hindi ka gumagawa ng tatlong website.

The activity:
Gawin ang project folder at ang header mula sa mga hakbang 1 hanggang 8. Subukan ito sa DevTools Device toolbar sa tatlong lapad at isulat kung sa anong lapad nagbabago ang layout.

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