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

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

📌 धडा 01 — UI का: सूचना फलक

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

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

इतर प्रत्येक शाळा ज्या गोष्टीच्या दिशेने बांधते ती गोष्ट — आणि ती बनवणाऱ्या तीन files. खऱ्या files, ज्या तुम्ही संपूर्ण कोर्सभर वापराल:

ui/index.html — स्वतः सूचना फलक (~80 ओळी)
ui/styles.css — गणवेश आणि मांडणी (~50 ओळी)
ui/app.js — state, events आणि fetch (~90 ओळी, कोणताही framework नाही)
ui/mock_api.py — फलकाला बोलण्यासाठी एक छोटा काउंटर

🎒 सुरू करण्याआधी: तुम्हाला एक browser आणि Python 3 लागेल (फक्त फलक आणि त्याचा छोटा काउंटर serve करण्यासाठी). Node नाही, npm नाही, framework नाही, build step नाही. चांगले शेजारी: API शाळा (हा फलक ज्या काउंटरसाठी slips भरतो तो) आणि CI/CD शाळा (फलक कसा लावला जातो). हा कोर्स काय नाही: React कोर्स नाही — तुम्ही हाताने करून पाहिल्यानंतर frameworks काय automate करतात ते lesson 07 दाखवतो.

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

शाळेकडे एक सुंदर नोंदी ठेवण्याची खोली 🗄️ (Database शाळा) आणि एक नम्र समोरचे कार्यालय 🏢 (API शाळा) आहे. एक पालक आत येतात… आणि त्यांना काहीच दिसत नाही. तिथे सूचना फलक नाही.

म्हणून शाळा एक फलक लावते 📌. त्यावर: वर्गाची यादी, नवीन विद्यार्थ्याचे नाव नोंदवण्यासाठी एक form, आणि हा फलक काय आहे याबद्दल एक टीप. फलक तीन गोष्टींनी बनलेला आहे, आणि पहिल्याच दिवशी त्या डोक्यात वेगवेगळ्या ठेवणे फायद्याचे आहे:

HTML — काय लावले आहे. यादी, form, headings. रचना आणि अर्थ: हे heading आहे, ते button आहे, ही पाच विद्यार्थ्यांची यादी आहे.
CSS — ते कसे दिसते. रंग, अंतर, रुंद भिंतीवर दोन स्तंभ आणि phone वर एक. अर्थाबद्दल काहीच नाही; सगळे काही सादरीकरणाबद्दल.
JavaScript — कोणी स्पर्श केल्यावर काय होते. यादी filter करणे, form पाठवणे, काउंटरकडून ताजी नावे fetch करणे.

Browser HTML वाचतो आणि objects चे झाड — DOM — बांधतो, मग ते रंगवतो. CSS त्या झाडाला सजवते; JavaScript ते बदलते. या कोर्समधली प्रत्येक गोष्ट या तिघांपैकी एक आहे, किंवा ते एखाद्या माणसापर्यंत कसे पोहोचतात ते आहे.

आणि फलक दिसतो त्यापेक्षा जास्त महत्त्वाचा का आहे: लोकांना जे दिसते तेच product आहे. नोंदींची खोली परिपूर्ण असू शकते आणि काउंटर जलद, पण जर फलक गोंधळाचा असेल, keyboard ने वापरता येत नसेल, किंवा phone वर मंद असेल, तर ज्या लोकांसाठी शाळा अस्तित्वात आहे त्यांच्यासाठीच ती मोडलेली आहे.

🗺️ आकृती

flowchart LR
    subgraph back["🗄️📨 the back office"]
        db["Database school<br/>the record room"]
        api["API school<br/>the counter"]
        db --- api
    end
    subgraph board["📌 the notice board — this course"]
        h["🧱 HTML — what is pinned (structure + meaning)"]
        c["🎨 CSS — how it looks"]
        j["⚡ JavaScript — what happens when touched"]
        h --> c --> j
    end
    api -->|"fetch /api/students"| board
    board -->|"the browser builds the DOM and paints"| person["👀 a person"]

❓ काय

Browser HTML download करतो, त्याचे parsing करून DOM (nodes चे झाड) बनवतो, CSS लावून render tree तयार करतो, आणि paint करतो. JavaScript DOM कधीही बदलू शकते; browser पुन्हा paint करतो.
HTML = रचना आणि अर्थ (semantics — lesson 02). CSS = दिसणे आणि मांडणी (lesson 03). JavaScript = वागणे (lessons 04–05).
DevTools (F12 / right-click → Inspect) तिन्ही live दाखवते: Elements panel म्हणजे DOM, Styles म्हणजे जिंकलेली CSS, Console JS चालवते, Network काउंटरकडे पाठवलेली प्रत्येक slip दाखवते.
फलक म्हणजे फक्त files — HTML, CSS, JS — म्हणूनच lesson 12 तो कोणत्याही static host वर एका मिनिटात लावू शकतो.
"web app", "single-page app", "React app" हे सगळे हेच आहेत, फक्त जास्त यंत्रणेसह. Framework मधली कोणतीही गोष्ट DOM + CSS + events च्या बाहेर जात नाही.

🤔 का

कारण UI मध्येच बरोबरपणा उपयोगी ठरतो. या मालिकेतली इतर प्रत्येक शाळा काहीतरी खरे बनवते; ही शाळा ते दिसणारे, समजणारे आणि वापरता येणारे बनवते — keyboard, screen reader, किंवा मंद रेल्वेत पाच वर्षे जुना phone वापरणाऱ्यांसाठीसुद्धा.

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

ui/mock_api.py तिन्ही files आणि एक छोटा /api/students काउंटर serve करतो, म्हणजे फलक तुमच्या laptop वरसुद्धा production मध्ये वागेल अगदी तसाच वागतो.

🧪 करून पाहा (60 सेकंद — संपूर्ण कोर्स, live)

python3 ui/mock_api.py          # terminal 1 → http://127.0.0.1:8000/
python3 ui/smoke_test.py        # terminal 2 → ten checks

मग browser मध्ये: एखादा वर्ग filter करा, एका विद्यार्थ्याचे नाव नोंदवा, 🌙 Dark वर click करा, अगदी वरून Tab दाबा (एक लपलेली "Skip to content" link सर्वात आधी दिसते), आणि filter करताना DOM कसा बदलतो ते पाहण्यासाठी DevTools → Elements उघडा.

Smoke test मधून तुम्हाला हे दिसायला हवे:

✅ lang attribute on <html>      ✅ one <h1>          ✅ every input has a label
✅ images have alt               ✅ skip link + live region
✅ design tokens defined         ✅ dark theme via tokens    ✅ focus is visible
✅ API returns students          ✅ API rejects a bad form (400)
🎉 the board stands

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

फलकावर पाच विद्यार्थ्यांची यादी दिसते; वर्ग filter पान reload न करता यादी लहान करतो; नाव नोंदवल्यावर एक card जोडले जाते आणि "… is on the board." छापले जाते; smoke test 🎉 the board stands ने संपतो. DevTools → Network मध्ये load होताना फलक करत असलेली एकमेव GET /api/students request तुम्ही पाहू शकता.

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

एक खरा, interactive, accessible web app म्हणजे तीन text files आणि एक browser — आणि तिन्ही भाग एकत्र काम करताना तुम्ही आधीच पाहू शकता.

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

ui/index.html थेट file system मधून उघडणे — काउंटरकडे जाणारा fetch अडवला जातो; नेहमी python3 ui/mock_api.py ने serve करा
files बदलल्या तरी बदल न दिसणे — hard-reload करा (Cmd/Ctrl + Shift + R); lesson 09 cache समजावतो
"UI" म्हणजे "design" असे समजणे — ते रचना, वागणे आणि सर्वांना वापरता येणे आहे, ज्यातला दृश्य design हा फक्त एक भाग आहे

🏭 प्रत्यक्ष वापरात हे का महत्त्वाचे: users ना खरोखर जाणवणारी प्रत्येक incident इथेच घडते: phone वरून पाठवता न येणारा form, screen reader ला न सापडणारे button, 3G वर आठ सेकंद घेणारे पान. मागचे कार्यालय अदृश्य असते; फलक हेच product आहे.

⏭️ पुढे

नेमके काय लावायचे, आणि कोणत्या आकारात? HTML रचना — semantic elements, forms, labels आणि alt text.

git checkout lesson-02-html-structure

📌 Lesson 01 — Why UI: the notice board

📍 You are here: Lesson 01 of 12 · Next: lesson-02-html-structure

📦 What's in this branch

The thing every other school builds towards — and the three files that make it. Real files you will use all the way through:

ui/index.html — the notice board itself (~80 lines)
ui/styles.css — the uniform and the layout (~50 lines)
ui/app.js — state, events and fetch (~90 lines, no framework)
ui/mock_api.py — a tiny counter for the board to talk to

🎒 Before you start: you need a browser and Python 3 (only to serve the board and its little counter). No Node, no npm, no framework, no build step. Good neighbours: the API school (the counter this board fills slips for) and the CI/CD school (how a board gets pinned up). What this is not: a React course — lesson 07 shows what frameworks automate after you have done it by hand.

🧒 Explain like I'm 5

The school has a beautiful record room 🗄️ (the Database school) and a polite front office 🏢 (the API school). A parent walks in… and sees nothing. There is no notice board.

So the school pins one up 📌. On it: the class list, a form to enrol a new student, a note about what the board is. The board is made of three things, and it is worth separating them in your head on day one:

HTML — what is pinned up. The list, the form, the headings. Structure and meaning: this is a heading, that is a button, this is a list of five students.
CSS — how it looks. Colours, spacing, two columns on a wide wall and one on a phone. Nothing about meaning; everything about presentation.
JavaScript — what happens when someone touches it. Filter the list, submit the form, fetch fresh names from the counter.

The browser reads the HTML and builds a tree of objects — the DOM — then paints it. CSS decorates the tree; JavaScript changes it. Everything in this course is one of those three, or how they travel to a person.

And the reason the board matters more than it looks: what people see IS the product. The record room could be perfect and the counter fast, and if the board is confusing, unusable with a keyboard, or slow on a phone, the school is broken for the only people it exists for.

🗺️ Diagram

flowchart LR
    subgraph back["🗄️📨 the back office"]
        db["Database school<br/>the record room"]
        api["API school<br/>the counter"]
        db --- api
    end
    subgraph board["📌 the notice board — this course"]
        h["🧱 HTML — what is pinned (structure + meaning)"]
        c["🎨 CSS — how it looks"]
        j["⚡ JavaScript — what happens when touched"]
        h --> c --> j
    end
    api -->|"fetch /api/students"| board
    board -->|"the browser builds the DOM and paints"| person["👀 a person"]

❓ What

The browser downloads HTML, parses it into the DOM (a tree of nodes), applies CSS to produce a render tree, and paints. JavaScript can change the DOM at any time; the browser repaints.
HTML = structure and meaning (semantics — lesson 02). CSS = looks and layout (lesson 03). JavaScript = behaviour (lessons 04–05).
DevTools (F12 / right-click → Inspect) shows all three live: the Elements panel is the DOM, Styles is the CSS that won, Console runs JS, Network shows every slip sent to a counter.
The board is just files — HTML, CSS, JS — which is why lesson 12 can pin it up on any static host in a minute.
A "web app", a "single-page app", a "React app" are all this, with more machinery. Nothing in a framework escapes DOM + CSS + events.

🤔 Why

Because the UI is where correctness becomes usefulness. Every other school in this series makes something true; this one makes it seen, understood and operable — including by people using a keyboard, a screen reader, or a five-year-old phone on a slow train.

🔧 How (in this repo)

ui/mock_api.py serves the three files and a tiny /api/students counter, so the board behaves exactly as it would in production, on your laptop.

🧪 Try it (60 seconds — the whole course, live)

python3 ui/mock_api.py          # terminal 1 → http://127.0.0.1:8000/
python3 ui/smoke_test.py        # terminal 2 → ten checks

Then, in the browser: filter a class, enrol a student, click 🌙 Dark, press Tab from the very top (a hidden "Skip to content" link appears first), and open DevTools → Elements to watch the DOM change as you filter.

You should see, from the smoke test:

✅ lang attribute on <html>      ✅ one <h1>          ✅ every input has a label
✅ images have alt               ✅ skip link + live region
✅ design tokens defined         ✅ dark theme via tokens    ✅ focus is visible
✅ API returns students          ✅ API rejects a bad form (400)
🎉 the board stands

✅ Verify — what you should see

The board lists five students; the class filter narrows it without a page reload; enrolling adds a card and prints "… is on the board."; the smoke test ends with 🎉 the board stands. In DevTools → Network you can see the single GET /api/students the board makes on load.

🏁 What you just proved

A real, interactive, accessible web app is three text files and a browser — and you can already see all three parts working together.

⚠️ Common mistakes

opening ui/index.html directly from the file system — fetch to the counter is blocked; always serve it with python3 ui/mock_api.py
editing files and not seeing changes — hard-reload (Cmd/Ctrl + Shift + R); lesson 09 explains the cache
thinking "UI" means "design" — it is structure, behaviour and access, of which visual design is one part

🏭 Why this matters in production: every incident that users actually notice happens here: a form that cannot be submitted on a phone, a button a screen reader cannot find, a page that takes eight seconds on 3G. The back office is invisible; the board is the product.

⏭️ Next

What exactly should be pinned, and in what shape? HTML structure — semantic elements, forms, labels and alt text.

git checkout lesson-02-html-structure

← Course homeall lessons Next →html structure

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