🖼️ See the drawing + lab 🏠 Course home 🌿 Branch on GitHub ✏️ View source

🖼️ आकृती आणि labThe drawing + lab पूर्ण पानावर उघडा ↗Open full page ↗

🎨 धडा 03 — CSS layout: एकच फलक, प्रत्येक screen

📍 तुम्ही इथे आहात: 12 पैकी धडा 03 · मागे: lesson-02-html-structure · पुढे: lesson-04-javascript-events

📦 या ब्रँचमध्ये काय आहे

धडे 01–02, आणि फलक कसा मांडला आहे: box model, गोष्टींच्या एका ओळीसाठी flexbox, भागांनी बनलेल्या पानासाठी grid, आणि एकच फलक phone वर आणि भिंतीवर चालवणाऱ्या काही मोजक्या सवयी.

🧒 5 वर्षांच्या मुलाला समजावल्यासारखे

फलकावरचा प्रत्येक element एक box 📦 आहे, आणि box ला आतून बाहेर चार थर असतात: content, padding (चौकटीच्या आतली जागा), border (चौकट), आणि margin (तिच्या बाहेरची जागा). सुरुवातीलाच एकदा box-sizing: border-box लावा, म्हणजे box ची सांगितलेली width हीच त्याची बाहेरची width ठरते — सगळे लोक प्रत्यक्षात असाच विचार करतात.

मग boxes मांडण्याचे दोन मार्ग आहेत:

Flexbox ↔️ — गोष्टींची एक ओळ, एक row (किंवा column) वाटून घेणारी. आपला header flex आहे: title, nav, theme button, त्यांच्यामध्ये gap आणि margin-left: auto nav ला उजवीकडे ढकलतो. "या गोष्टी एका ओळीत जातात" असा विचार करत असाल तेव्हा flex वापरा.
Grid ▦ — भागांचे पान, rows आणि columns एकाच वेळी. आपले main grid आहे: रुंद screen वर "students" दोन भाग घेतो आणि "enrol" एक; phone वर एकच column. "हा भाग, तो भाग" असा विचार करत असाल तेव्हा grid वापरा.

आणि फलक सगळीकडे चालवणारा नियम: आधी phone चा layout लिहा, मग media query ने मोठ्या screens साठी columns जोडा. सापेक्ष units (rem, %, fr) ताणल्या जातात; ठरावीक pixel widths ताणल्या जात नाहीत.

🗺️ आकृती

flowchart TB
    box["📦 box model: content → padding → border → margin<br/>box-sizing: border-box, always"]
    flex["↔️ flexbox — a row of things<br/>display:flex · gap · align-items · margin-left:auto"]
    grid["▦ grid — areas<br/>grid-template-columns: 2fr 1fr · auto-fill minmax(200px,1fr)"]
    resp["📱→🖥️ mobile first<br/>one column; @media (min-width:720px) → two"]
    box --> flex --> grid --> resp

❓ काय

Box model: width/height, padding, border, margin; box-sizing: border-box मुळे width मध्ये padding आणि border समाविष्ट होतात.
Flexbox: display: flex, flex-direction, gap, justify-content, align-items, flex-wrap: wrap, वाढण्यासाठी flex: 1. एक मिती.
Grid: display: grid, grid-template-columns, gap, fr units, आपोआप पुन्हा मांडले जाणाऱ्या card grids साठी repeat(auto-fill, minmax(200px, 1fr)). दोन मिती.
Selectors आणि cascade: नंतरचे नियम आणि जास्त विशिष्ट selectors जिंकतात (#id > .class > element). Specificity कमी आणि सपाट ठेवा; !important शेवटचा उपाय म्हणूनच वापरा.
Units: अक्षरे आणि अंतरासाठी rem (user च्या font size चा आदर करते), layout साठी % आणि fr, बारीक रेषा आणि radii साठी px.
Media queries: @media (min-width: 720px) { … } — screen मोठा होईल तशी गुंतागुंत वाढवा, कधीही उलट नाही.
हेसुद्धा प्रामाणिकपणे: prefers-reduced-motion (आपली hover lift त्याचा आदर करते) आणि prefers-color-scheme (lesson 08).

🤔 का

कारण "माझ्या laptop वर चालते" हे वाक्य layout मध्येच मरते. Flex, grid आणि सापेक्ष units वापरून mobile-first बांधलेला फलक दुसऱ्या codebase शिवाय कोणत्याही screen ला जुळवून घेतो; ठरावीक widths आणि absolute positioning ने बांधलेला फलक प्रत्येक नवीन device साठी पुन्हा लिहावा लागतो.

🔧 कसे (या repo मध्ये)

ui/styles.css सुमारे पन्नास ओळींचे असून तीन भागांत आहे: tokens (lesson 08), layout (हा धडा — body, .board-head flex, main grid, .cards auto-fill grid), मग components. min-width: 720px वरची एकमेव media query हेच संपूर्ण "desktop" design आहे.

🧪 करून पाहा

python3 ui/mock_api.py     # http://127.0.0.1:8000/
# 1) shrink the browser to ~380px wide (or DevTools → device toolbar): one column, nothing clipped
# 2) delete the @media block in styles.css and reload at desktop width — one column everywhere
# 3) change .cards to grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) — watch cards reflow
# 4) set body { max-width: none } and read a paragraph at 1600px — that is why max-width exists
# 5) find the winner: DevTools → Elements → Styles on a .card, see which rules applied and which were struck through

✅ तपासा — तुम्हाला काय दिसायला हवे

Phone width वर फलक एकाच column मध्ये असतो आणि आडवा scrollbar नसतो; ≥720px वर students आणि enrol शेजारी शेजारी बसतात. Media query नसेल तर desktop वरही एकच column असतो (mobile-first म्हणजे पाया mobile असतो). तुम्ही आकार बदलता तसे card grid स्वतःहून columns ची संख्या बदलते.

🏁 तुम्ही आत्ताच काय सिद्ध केले

दोन layout पद्धती आणि एका media query ने प्रत्येक screen साठी संपूर्ण फलक मांडला, आणि कोणता नियम जिंकला ते DevTools ने तुम्हाला नेमके दाखवले.

⚠️ नेहमीच्या चुका

container वर ठरावीक width: 1200px (phones वर आडवा scroll) — max-width वापरा
flex/grid ऐवजी layout साठी position: absolute
desktop-first media queries (max-width) — screens वाढतील तशा त्या तुमच्याशी भांडतात
!important वर संपणारी specificity ची युद्धे
gap नाही, म्हणून cards मधले margins अनपेक्षितपणे collapse होतात

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: खऱ्या traffic पैकी अर्ध्याहून जास्त phones वरून येते. या धड्यातल्या दोन सवयी — mobile-first आणि सापेक्ष units — म्हणजे एक stylesheet आणि फलकावरचा कायमचा "mobile bug" column यांच्यातला फरक.

⏭️ पुढे

फलक बरोबर दिसतो; आता तो काहीतरी करेल असे करा: JavaScript आणि events — clicks, forms, आणि काउंटरकडून fetch करणे.

git checkout lesson-04-javascript-events

🎨 Lesson 03 — CSS layout: one board, every screen

📍 You are here: Lesson 03 of 12 · Previous: lesson-02-html-structure · Next: lesson-04-javascript-events

📦 What's in this branch

Lessons 01–02, plus how the board is arranged: the box model, flexbox for a row of things, grid for a page of areas, and the handful of habits that make one board work on a phone and on a wall.

🧒 Explain like I'm 5

Every element on the board is a box 📦, and a box has four layers from the inside out: the content, the padding (space inside the frame), the border (the frame), and the margin (space outside it). Set box-sizing: border-box once at the top and a box's declared width is its outer width — the way everyone actually thinks.

Then there are two ways to arrange boxes:

Flexbox ↔️ — one line of things, sharing a row (or column). Our header is flex: the title, the nav, the theme button, with gap between them and margin-left: auto pushing the nav to the right. Use flex when you are thinking "these go in a row".
Grid ▦ — a page of areas, rows and columns at once. Our main is grid: on a wide screen, "students" takes two fractions and "enrol" one; on a phone, one column. Use grid when you are thinking "this area, that area".

And the rule that makes the board work everywhere: write the phone layout first, then add columns for bigger screens with a media query. Relative units (rem, %, fr) stretch; fixed pixel widths do not.

🗺️ Diagram

flowchart TB
    box["📦 box model: content → padding → border → margin<br/>box-sizing: border-box, always"]
    flex["↔️ flexbox — a row of things<br/>display:flex · gap · align-items · margin-left:auto"]
    grid["▦ grid — areas<br/>grid-template-columns: 2fr 1fr · auto-fill minmax(200px,1fr)"]
    resp["📱→🖥️ mobile first<br/>one column; @media (min-width:720px) → two"]
    box --> flex --> grid --> resp

❓ What

Box model: width/height, padding, border, margin; box-sizing: border-box makes width include padding and border.
Flexbox: display: flex, flex-direction, gap, justify-content, align-items, flex-wrap: wrap, flex: 1 to grow. One dimension.
Grid: display: grid, grid-template-columns, gap, fr units, repeat(auto-fill, minmax(200px, 1fr)) for card grids that reflow by themselves. Two dimensions.
Selectors and the cascade: later rules and more specific selectors win (#id > .class > element). Keep specificity low and flat; avoid !important except as a last resort.
Units: rem for type and spacing (respects the user's font size), % and fr for layout, px for hairlines and radii.
Media queries: @media (min-width: 720px) { … } — add complexity as the screen grows, never the reverse.
Also honest: prefers-reduced-motion (our hover lift respects it) and prefers-color-scheme (lesson 08).

🤔 Why

Because layout is where "it works on my laptop" goes to die. A board built mobile-first with flex, grid and relative units bends to any screen without a second codebase; one built with fixed widths and absolute positioning needs a rewrite for every new device.

🔧 How (in this repo)

ui/styles.css is about fifty lines in three parts: tokens (lesson 08), layout (this lesson — body, .board-head flex, main grid, .cards auto-fill grid), then components. The single media query at min-width: 720px is the whole "desktop" design.

🧪 Try it

python3 ui/mock_api.py     # http://127.0.0.1:8000/
# 1) shrink the browser to ~380px wide (or DevTools → device toolbar): one column, nothing clipped
# 2) delete the @media block in styles.css and reload at desktop width — one column everywhere
# 3) change .cards to grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) — watch cards reflow
# 4) set body { max-width: none } and read a paragraph at 1600px — that is why max-width exists
# 5) find the winner: DevTools → Elements → Styles on a .card, see which rules applied and which were struck through

✅ Verify — what you should see

At phone width the board is one column with no horizontal scrollbar; at ≥720px students and enrol sit side by side. Without the media query, the desktop is a single column (mobile-first means the base is mobile). The card grid changes column count by itself as you resize.

🏁 What you just proved

Two layout systems and one media query arranged the whole board for every screen, and DevTools showed you exactly which rule won.

⚠️ Common mistakes

fixed width: 1200px on a container (horizontal scroll on phones) — use max-width
position: absolute for layout instead of flex/grid
desktop-first media queries (max-width) — they fight you as screens multiply
specificity wars ending in !important
no gap, so margins collapse unpredictably between cards

🏭 Why this matters in production: over half of real traffic is phones. The two habits in this lesson — mobile-first and relative units — are the difference between one stylesheet and a permanent "mobile bug" column on the board.

⏭️ Next

The board looks right; now make it do things: JavaScript and events — clicks, forms, and fetching from the counter.

git checkout lesson-04-javascript-events

← Previoushtml structure Next →javascript events

This page is the lesson's README from the lesson-03-css-layout branch, shown here so the whole School stays on one site. Code files open on GitHub at the same branch.