Today it becomes real
Your first static website — built, saved, and pushed to your own GitHub.
Four classes of practice pages end here. Today you create the folder every remaining lab of this course lives in — poshtik-campus/ — build its first three real pages with your own hands, and then do something no class has done yet: put that folder under version control and push it to a GitHub repository that belongs to you. When you walk out, your site exists in two places: your Desktop, and the internet.
“Creation of Static Web Site using HTML.”
Walk out of this lab able to…
Lab 1's three pages are deliberately text-only — headings, paragraphs, lists and links, nothing else. The dish photographs stay behind in your fswd-practice\ sandbox experiments; the real poshtik-campus/menu.html gets its images in a later lab, after the site is safely under version control. One new thing at a time.
A heading and a paragraph. Two minutes, from memory.
Before the real build, four tiny finger-warmers — each one rehearses a move today's site uses at full scale. No marks, no gate: the answer sits right below, because a warm-up you can't check isn't a warm-up. Write it first, then look.
The program: in a scratch file called warmup-1.html (in your fswd-practice\ sandbox — never the repo), write a complete page whose visible content is exactly one <h1> that says Healthy food, honest prices and one paragraph under it. Full skeleton — doctype to closing html — nothing skipped.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Warm-up 1</title> </head> <body> <h1>Healthy food, honest prices</h1> <p>A campus canteen that treats your health as the main course.</p> </body></html>A campus canteen that treats your health as the main course.
Every one of today's three real pages starts with this identical skeleton and an <h1>. If your fingers typed it without thinking just now, the real build will feel like repetition — which is the point.
An unordered list of three items.
Today's navigation — on all three pages — is a <ul> of three entries. So the second warm-up is exactly that shape, with plain text where links will later go.
The program: in warmup-2.html (full skeleton again — no shortcuts), the body holds one <h2> saying Today's specials and an unordered list of any three dishes from the Poshtik Campus menu.
Ragi Sangati Bowl · Jonna Rotte Wrap · Sprouted Moong Chaat <body> <h2>Today's specials</h2> <ul> <li>Ragi Idli Bowl</li> <li>Pesarattu with Sprouts</li> <li>Millet Protein Shake</li> </ul> </body>- Ragi Idli Bowl
- Pesarattu with Sprouts
- Millet Protein Shake
In under an hour you'll wrap each of these <li> texts in an <a> and it becomes your site's navigation. List first, links inside it second — the exact layering the real build uses.
One image, with alt text that earns its place.
Third warm-up: the <img> tag — one line, two attributes, no closing tag. The skill being rehearsed isn't the tag; it's writing an alt that describes the picture honestly.
The program: in warmup-3.html, show a photo called ragi-idli.jpg that sits in the same folder as the file, with alt text a blind classmate would thank you for. (No such photo on your disk? Perfect — you'll see exactly what a browser does when an image is missing, and why alt matters.)
<body> <h2>Ragi Idli Bowl</h2> <img src="ragi-idli.jpg" alt="Three ragi idlis in a steel bowl with chutney"> </body>A bare filename in src means "same folder as this file" — the smallest possible relative path. Hold onto that instinct: warm-up 4 and the whole site build run on it.
Two files. One link between them.
The final warm-up is today's whole build in miniature: two files in one folder, and an anchor that carries you from the first to the second. If this works on your machine, today's three-page site is just more of this.
The program: in one folder, create one.html and two.html. Page one shows a heading and a link reading Go to page two. Page two shows any heading, so you can tell you arrived. Save both, open one.html, click the link.
<body> <h1>Page one</h1> <p><a href="two.html">Go to page two</a></p> </body><!-- two.html body: just <h1>You made it.</h1> -->Go to page two
the two files are not in the same folder, or the filename in href is spelt differently from the file on disk (case counts: Two.html ≠ two.html). Those are the only two ways this breaks — and both will chase you into the real build if you don't fix them here.
Part 6 · Meet the project
Every lab from today serves one client.
Not a toy example that changes every week — one continuous project that grows with your skills, lab after lab, until it is a full MERN application. Here is your client.
The running project
Poshtik Campus పౌష్టిక్ క్యాంపస్
A healthy-food canteen opening inside your campus. Their pitch: proper Telangana & Andhra staples — millets, sprouts, protein bowls — at student prices. They have dishes, they have a counter… and they have no website. You are their web team for the rest of this course.
The problem statement, in full
"We need a website where a student can, in under a minute: see who we are and what we stand for, browse the full menu of ten dishes, and find out how to reach us. It must work on the lab desktops and on a phone. We'll add online ordering someday — but first we just need to exist on the web."
Today's slice of that: a three-page static site — a home page (index.html), a menu page (menu.html) listing all ten dishes by name, and an about page (about.html) — every page reachable from every other. Text only; the order form arrives in Lab 2, styling in Lab 3, real ordering in Unit 4. A real client, sliced the way real teams slice.
The menu — ten dishes, locked
This exact list, in this exact order, is the site's content today — and every later lab keeps the same ten names in the same order, so the file you write now stays the file you extend. English names only — that's the client's own branding decision for the menu board.
Poshtik / పౌష్టిక్ means nutritious — the same word your grandmother uses about ragi and sprouts. The founders wanted a name every student's family would instantly approve of. It's also the only place Telugu appears in the project: dish names stay English on the board, but the brand proudly isn't.
Which tags will the home page need?
Before code, a planning question — answered the way a professional would: read the requirement, name the structures.
The requirement: "The home page shows the canteen's name as a big heading, one welcome sentence, and a navigation list that reaches the other two pages."
The page's one main heading is <h1>. One per page — a habit that holds for life.
Running text is <p>. Not a heading — it doesn't title anything, it just speaks.
The word list gives you <ul> + <li>; the word reaches gives you <a href> inside each item. Warm-ups 2 and 4, combined — exactly as promised.
The full skeleton: <!DOCTYPE html>, <html>, <head> (with <meta charset> and <title>), <body>. Requirements name the organs; the skeleton is assumed.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Poshtik Campus — Home</title></head><body> <h1>Poshtik Campus</h1> <!-- answer 1 --> <p>Healthy food, right on campus.</p> <!-- answer 2 --> <ul> <!-- answer 3 --> <li><a href="menu.html">Menu</a></li> <li><a href="about.html">About</a></li> </ul></body></html>Healthy food, right on campus.
- Menu
- About
<head> contributed nothing you can see — the title shows up on the tab, not in the page. That is exactly its job.Underline the nouns in a requirement — heading, sentence, list, link — and each noun names its own tag. This reading-to-tags reflex is the whole skill of turning a spec into markup.
Write the link from index.html to menu.html.
Both files will sit side by side in poshtik-campus/. One anchor connects them — and warm-up 4 already justified every character of it.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Poshtik Campus — Home</title></head><body> <ul> <!-- inside index.html's nav list --> <li><a href="menu.html">Menu</a></li> </ul></body></html>- Menu
Ten dishes, every one of them poshtik.
- Home
Same folder means the shortest relative path. No C:\ (breaks on every other machine), no https:// (site isn't hosted), no folder prefix (there is no folder between them).
The out-of-context test: link text must make sense alone, read aloud with nothing around it. Menu passes. Click here never does.
What goes in <head>, what goes in <body>?
You'll type this split three times today — once per page — so let's make the rule impossible to forget: head is about the page, body is on the page.
Information for the browser, invisible in the page itself: <meta charset="UTF-8"> (how to read the bytes) and <title> (the tab label — watch every preview tab on this page prove it). Later residents: CSS links, favicons.
Everything a visitor can see or click: headings, paragraphs, lists, links, images. If it has pixels, it lives in body. If a tag's content shows up in the white area of the browser, you put it here.
<!DOCTYPE html> <!-- "this is HTML5" --><html lang="en"><head> <!-- ABOUT the page --> <meta charset="UTF-8"> <!-- how to read the bytes --> <title>About — Poshtik Campus</title></head><body> <!-- ON the page --> <h1>About Us</h1> <p>Run by students, for students.</p></body></html>Run by students, for students.
<head> — put nothing in the white area; the only thing they changed was the tab label above. Lines 7–9 are the only ones a visitor can see. That is the entire rule, proved by where the pixels went.An <h1> accidentally placed inside <head>. Browsers are forgiving and often render it anyway — which makes the mistake invisible until a stricter context (a validator, a framework, an exam) points it out. Careful habits now, so forgiveness never gets the chance to teach you wrong.
Two questions, zero help. Then the sheet.
Guided is over. These two are answered on paper, alone, before the gate below opens — they are the exact reasoning the build will demand in twenty minutes.
Q4. The about page must link back to the home page. Write the complete anchor tag as it appears in about.html, and state the one word your link text should be.
Q5. A classmate's nav reads <a href="Menu.html">Menu</a> and works on their Windows laptop. Predict what happens after the site is uploaded to a Linux web server — and name the rule that saves you from this forever.
Both answers written? Only then.
<!-- in about.html --><a href="index.html">Home</a>Home
Healthy Telangana & Andhra staples at student prices.
- About us
On the Linux server the link breaks — 404. Windows treats Menu.html and menu.html as the same file; Linux treats them as two different names, and only menu.html exists. The saving rule, from today and forever: all filenames lowercase, always — then href and file can never disagree by case.
- Q4 exact tag with
index.html+ one-word text — full marks. Wrotehome.html? The home page's real name isindex.html— the special name servers open by default; re-read Part 7. - Q5 predicted the 404 and named the lowercase rule — full marks. Predicted "works fine"? That answer costs real teams real money weekly. Burn this one in.
Create poshtik-campus/ — the folder this course lives in.
Stop. This is a together-moment. Every file today, and every file for the next eleven labs, lives inside one folder — created right now, exactly like this, on every machine in the room.
Minimise everything (Win+D does it in one stroke). You should be looking at your wallpaper.
A folder appears with its name highlighted, waiting.
poshtik-campus — all lowercase, one hyphen, no spaces, no capitals. Press Enter. The same lowercase-no-spaces rule you follow for filenames applies to folders too, and Git will thank you for the no-spaces part within the hour.
Right-click the folder and choose Open with Code (or in VS Code: File menu, Open Folder). The Explorer sidebar now shows POSHTIK-CAMPUS, empty. That empty sidebar is the "before" photo of your entire course.
C:\Users\student\Desktop\poshtik-campus\fswd-practice\. The sandbox is for drills; this folder is the product. Two different lives.Because in ninety minutes this folder becomes a Git repository, and its exact name becomes part of a public URL: github.com/<you>/poshtik-campus. A space or a capital letter typed casually now would follow you through every lab. Names are cheap to get right once and expensive to fix forever after.
Build index.html from the requirements alone.
No code on this screen — that's deliberate. You have the requirements, a structure sketch in plain words, and everything the prelab just rehearsed. Fifteen minutes. The solution sheet comes after you've fought for it.
Problem. Poshtik Campus needs its front door: the page a visitor lands on first, carrying the brand and the way onward.
Requirements.
- File named
index.html, at the top level ofposhtik-campus/. - Browser tab must read Poshtik Campus — Home.
- One main heading with the canteen's name — exactly Poshtik Campus.
- One welcome paragraph — type exactly: “Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.” (typing the same sentence means your browser preview must match the solution sheet's, character for character — that's your self-check).
- A navigation list reaching
menu.htmlandabout.html— yes, files that don't exist yet; write the nav as if they do, because in ten minutes they will.
Sample structure, in words only: the skeleton first; the head holds charset + title; the body holds heading, then paragraph, then the two-item nav list. Every requirement maps to a warm-up or a prelab question — nothing here is new.
SAMPLE OUTPUT — YOUR FINISHED PAGE MUST RENDER EXACTLY THIS
Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.
- Menu
- About us
It may have been moved, edited or deleted.
ERR_FILE_NOT_FOUND
← Back to index.html
It may have been moved, edited or deleted.
ERR_FILE_NOT_FOUND
← Back to index.html
Ctrl+S after every element, F5 in the browser after every save. The nav's two links will show "file not found" when clicked — correct at this stage: the anchors are promises, and you keep them in Part 14.
The front door, line by line.
Compare against your own — differences in wording are fine, differences in structure are findings.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Poshtik Campus — Home</title> </head> <body> <h1>Poshtik Campus</h1> <p>Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.</p> <!-- site navigation: same list on every page --> <ul> <li><a href="menu.html">Menu</a></li> <li><a href="about.html">About us</a></li> </ul> </body></html>Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.
- Menu
- About us
It may have been moved, edited or deleted.
ERR_FILE_NOT_FOUND
← Back to index.html
It may have been moved, edited or deleted.
ERR_FILE_NOT_FOUND
← Back to index.html
- Title in head, heading in body — both carrying the brand, doing different jobs (Q3's split, live).
- The comment above the nav — in ten minutes you'll paste this list into two more files; the comment is the flag that says "shared block, keep identical".
- & for the ampersand — the entity habit, in the wild. A bare
&usually renders, but "usually" isn't a standard.
Keep the promises: menu.html and about.html.
Your home page's nav points at two ghosts. Twenty minutes to make them real — and to make the navigation two-way, so no visitor is ever stranded.
menu.html.
- Tab reads Poshtik Campus — Menu.
- Main heading Our Menu.
- One short intro paragraph.
- An unordered list of all ten dishes, exact names, exact order from Part 6 — English only, plain text (they become fragment-linked sections in a later lab).
- The same nav list as index — but think before you paste: what should the Menu entry become on the menu page itself?
about.html.
- Tab reads Poshtik Campus — About.
- Main heading About us.
- Two short paragraphs — type exactly: “We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.” and “Find us beside the library block, open 8am–8pm.” — so your render matches the solution sheet's preview exactly.
- The nav, adapted the same way.
Then the test that makes it a site: from index.html, click to Menu, to About, and back Home from each. Four clicks, zero error pages, zero Back-button rescues.
SAMPLE OUTPUT (menu.html) — ONE THING DELIBERATELY HIDDEN
Ten dishes, every one of them poshtik.
- Jonna Rotte Wrap
- Sajja Roti Wrap
- Ragi Sangati Bowl
- Ragi Idli Bowl
- Pesarattu with Sprouts
- Ulava Charu Protein Bowl
- Gongura Sprouts Salad
- Sprouts Moong Chilla
- Paneer Protein Bowl
- Millet Protein Shake
Only after your four-click test runs clean (or you know exactly where it breaks).
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Poshtik Campus — Menu</title> </head> <body> <h1>Our Menu</h1> <p>Ten dishes, every one of them poshtik.</p> <ul> <li>Jonna Rotte Wrap</li> <li>Sajja Roti Wrap</li> <li>Ragi Sangati Bowl</li> <li>Ragi Idli Bowl</li> <li>Pesarattu with Sprouts</li> <li>Ulava Charu Protein Bowl</li> <li>Gongura Sprouts Salad</li> <li>Sprouts Moong Chilla</li> <li>Paneer Protein Bowl</li> <li>Millet Protein Shake</li> </ul> <!-- site navigation --> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About us</a></li> </ul> </body></html>Ten dishes, every one of them poshtik.
- Jonna Rotte Wrap
- Sajja Roti Wrap
- Ragi Sangati Bowl
- Ragi Idli Bowl
- Pesarattu with Sprouts
- Ulava Charu Protein Bowl
- Gongura Sprouts Salad
- Sprouts Moong Chilla
- Paneer Protein Bowl
- Millet Protein Shake
- Home
- About us
Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.
- Menu
- About us
We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.
Find us beside the library block, open 8am–8pm.
- Home
- Menu
<title>Poshtik Campus — About</title> <body> <h1>About us</h1> <p>We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.</p> <p>Find us beside the library block, open 8am–8pm.</p> <!-- site navigation --> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> </ul> </body>We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.
Find us beside the library block, open 8am–8pm.
- Home
- Menu
Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.
- Menu
- About us
Ten dishes, every one of them poshtik.
- Jonna Rotte Wrap
- Sajja Roti Wrap
- Ragi Sangati Bowl
- Ragi Idli Bowl
- Pesarattu with Sprouts
- Ulava Charu Protein Bowl
- Gongura Sprouts Salad
- Sprouts Moong Chilla
- Paneer Protein Bowl
- Millet Protein Shake
- Home
- About us
Part 15 · One more look before Git
The client said "on a phone, too." Let's check.
Requirement one of the brief: works on lab desktops and phones. Your pages have no styling yet — and that's exactly why they already pass. Below, the same index.html at two widths.
Text wraps, lists stack, nothing has a fixed width — the browser's default layout flows. Sites break on phones when styling later pins widths in pixels. Remember this day when we reach CSS: responsiveness isn't something you add, it's something you avoid breaking.
- Open
index.html, click Menu — all ten dishes present, in order? - Click Home — back at the front door? Click About us — both paragraphs there?
- Click Menu from About — cross-link works without passing through Home?
- Every tab title correct on every page? Then say it: "the site works." Now let's make sure it can never be lost.
Run that click-test right here — on the REAL files.
This is not a picture of your site and not a simulation. Below, a browser is loading three genuine .html files — the same three you just wrote — and rendering them itself. Click Menu, come Home, cross to About us: the tabs above the frame switch the real file the frame is showing, exactly like typing its name in the address bar.
And for the record, here is the same thing drawn as a walkthrough — useful when your instructor is presenting and wants to point at one page at a time:
Healthy Telangana & Andhra staples at student prices — millets, sprouts and protein bowls, made fresh on campus.
- Menu
- About us
Ten dishes, every one of them poshtik.
- Jonna Rotte Wrap
- Sajja Roti Wrap
- Ragi Sangati Bowl
- Ragi Idli Bowl
- Pesarattu with Sprouts
- Ulava Charu Protein Bowl
- Gongura Sprouts Salad
- Sprouts Moong Chilla
- Paneer Protein Bowl
- Millet Protein Shake
- Home
- About us
We believe campus food can be honest food: millets, sprouts and real vegetables, cooked the way home cooks.
Find us beside the library block, open 8am–8pm.
- Home
- Menu
Save points. That's the whole idea.
Your site works. Now imagine tomorrow you edit menu.html, break it, and can't remember what it looked like when it worked. Every developer has lived this. Version control is the fix — and you already understand it from games.
You reach a checkpoint, the game saves. Try a risky jump, fall, and you don't restart the game — you go back to the save point. Saves are named, ordered, and always there.
You reach a working state, you commit — a save point for the whole folder, with a message saying what it contains. Break something later? Any commit can be revisited. Nothing committed is ever truly lost.
A folder that looks like index-final.html, index-final-v2.html, index-actually-final.html… Copies-as-versions: nobody knows which is current, what changed between them, or which one worked. Git keeps one file per name and remembers every version behind it, each with a message, a timestamp, and an author.
A free program on your machine. It watches a folder you choose (a repository, "repo") and records commits when you say so. Works fully offline.
A website that stores a copy of your repository online. Laptop stops working, lab machine gets wiped clean — your history is safe, and shareable by URL. Git without GitHub: fine, but local. GitHub without Git: impossible — it shelves what Git records.
A commit saves locally. Pushing uploads your new commits to GitHub. The rhythm of your whole developer life, starting today: work, commit, push.
GO DEEPER · YOU USE THINGS BUILT THIS WAY DAILY
The browser you're reading this in, the OS under it, WhatsApp, Instagram — all built by teams committing to shared repositories, most of them on GitHub itself. When recruiters say "show me your GitHub", they mean: show me your save points — the honest history of what you've built. Yours starts in about twenty minutes.
Install Git, prove it's alive, introduce yourself.
Lab machines: Git is pre-installed — skip to the proof step. Your own laptop: follow every step, together, now. Hands up at any step that looks different on your screen; nobody proceeds past a hurdle alone.
In the browser open git-scm.com/downloads, click Windows (or your OS), then 64-bit Git for Windows Setup. One official site, no mirrors, no "download manager" buttons.
It asks ~10 questions. The honest secret: press Next on every screen. The defaults are what professionals use. The only screen worth reading names the default branch — if it offers a choice, choose main.
In VS Code with poshtik-campus open: Terminal menu, New Terminal (Ctrl+`). A panel appears at the bottom, showing your folder's path and a waiting cursor. That panel is where the rest of this lab happens.
Type the three commands below — the panel shows the exact output to expect. The name/email pair is stamped onto every commit you'll ever make; use your real name and the email you'll give GitHub in Part 19. --global means "remember on this machine" — once, ever.
poshtik-campus.git --version— the proof-of-life check.git config --global user.name "…"andgit config --global user.email "…"— your real name and the email you'll give GitHub.git config --global user.namewith no value — read the setting back to verify.
C:\Users\student\Desktop\poshtik-campus> git --versiongit version 2.46.0.windows.1 C:\Users\student\Desktop\poshtik-campus> git config --global user.name "Ananya Rao"C:\Users\student\Desktop\poshtik-campus> git config --global user.email "ananya.rao@example.com" C:\Users\student\Desktop\poshtik-campus> git config --global user.nameAnanya RaoA version number = Git is installed. Yours may differ (2.44, 2.47…) — any number is a pass. "git is not recognized" instead? Git isn't installed or the terminal is stale — close VS Code fully, reopen, retry; still failing? Hand up.
Silence = success. The config commands print nothing when they work — a terminal habit worth learning on day one: no news is good news. Use your name, not Ananya's.
Asking a config without a value reads it back. If your name echoes back, Git knows who you are. Every commit from now on is signed.
Git has point-and-click wrappers, but every tutorial, every Stack Overflow answer, every workplace speaks Git's command language. Learn the five commands once and every wrapper becomes obvious; learn only a wrapper and every terminal stays foreign. We do it the portable way.
init · status · add · commit. Your first save point.
Not a demo folder — your poshtik-campus/, the one holding the three files you just built. Four commands, each explained beside its real output. Type along.
poshtik-campus/ — the folder holding your three real pages — into a Git repository, and record its first save point.git initonce, inside the project folder — never anywhere else.git statusbefore and after staging — watch the three files move from untracked to staged.git add .to stage everything, thengit commit -m "Lab 1: three-page static site".
f3a9c21; every commit's ID is unique in the world.C:\Users\student\Desktop\poshtik-campus> git initInitialized empty Git repository in C:/Users/student/Desktop/poshtik-campus/.git/ C:\Users\student\Desktop\poshtik-campus> git statusOn branch mainNo commits yetUntracked files: (use "git add <file>..." to include in what will be committed) about.html index.html menu.htmlnothing added to commit but untracked files present (use "git add" to track) C:\Users\student\Desktop\poshtik-campus> git add .C:\Users\student\Desktop\poshtik-campus> git statusOn branch mainChanges to be committed: new file: about.html new file: index.html new file: menu.html C:\Users\student\Desktop\poshtik-campus> git commit -m "Lab 1: three-page static site"[main (root-commit) f3a9c21] Lab 1: three-page static site 3 files changed, 62 insertions(+) create mode 100644 about.html create mode 100644 index.html create mode 100644 menu.htmlgit init — "watch this folder." Run once per project, ever. It creates a hidden .git/ folder where all history will live. Delete that hidden folder and the history is gone — so don't.
git status — "what do you see?" Git sees your three files but calls them untracked: visible, not yet part of any save point. Status is free and safe; run it whenever unsure — it's Git's answer to "where was I?"
git add . — "include everything here in the next save point." The dot means "this folder". Silent on success. Status now shows the same three files in green: staged, ready.
git commit -m "…" — the save point itself. The -m message is for future-you: say what this version is. f3a9c21 is the commit's short ID — yours will differ; every commit's ID is unique in the world.
Part 17's two git config --global lines didn't run (or ran with a typo). Run them again exactly, then repeat the commit. This is the single most common first-commit hiccup in any classroom.
GitHub, from absolute zero.
Assume nothing: no account, never seen the site. Fifteen minutes from now your repository exists at a public URL. Screens below are drawn to match what you'll see; small visual drift on GitHub's side never changes the flow.
Step A — create the account
github.com/signupEnter the same email you gave git config in Part 17 — matching emails is how GitHub credits your commits to your account.
The username becomes part of every URL you'll ever share: github.com/<username>. Professional and readable beats clever — ananya-rao outlives xX_coderguy_Xx on a résumé. Lowercase, hyphens allowed.
Solve the human-check puzzle, then GitHub emails a launch code — open your inbox, copy the digits, paste. You land on your dashboard. Free plan; skip or close any personalisation questions.
Step B — create the empty repository
Anyone can view (not edit). Your work becomes showable — the point of a portfolio.
Only you. Fine too — but today we go public, together.
An empty repo shows "Quick setup" with copy-paste commands. Ours are below — same commands, explained. The long https://github.com/…/poshtik-campus.git address on that page is your repo's remote URL; you're about to hand it to Git.
Step C — connect and push
git remote add origin …with your URL from GitHub's Quick-setup page — not Ananya's.git push -u origin main—-ulinks local and remote so future pushes are justgit push.- When the browser pops up once for sign-in: click Authorize. Windows remembers it after that.
C:\Users\student\Desktop\poshtik-campus> git remote add origin https://github.com/ananya-rao/poshtik-campus.gitC:\Users\student\Desktop\poshtik-campus> git push -u origin maininfo: please complete authentication in your browser...Enumerating objects: 5, done.Counting objects: 100% (5/5), done.Delta compression using up to 8 threadsCompressing objects: 100% (4/4), done.Writing objects: 100% (5/5), 1.42 KiB | 1.42 MiB/s, done.Total 5 (delta 0), reused 0 (delta 0), pack-reused 0To https://github.com/ananya-rao/poshtik-campus.git * [new branch] main -> mainbranch 'main' set up to track 'origin/main'.remote add origin <URL> — "the cloud copy of this repo lives at this address, and I'll call it origin." Use your URL from the Quick-setup page, not Ananya's. Silent on success.
The browser pops up once — first push opens a GitHub sign-in window; click Authorize. Windows remembers it after that (Credential Manager) — you will not sign in per push.
The counting/compressing chatter — Git bundling your commit for the wire. You never need to read these lines closely; their presence means progress.
[new branch] main -> main — the success line. Your local main now exists on GitHub, and -u linked them: from now on plain git push suffices.
Now do the whole thing yourself — and verify online.
Parts 17–19 were done together, on the projector. This part is yours alone: the spec below, your terminal, no peeking back up the page until you've tried.
The spec.
- Your
poshtik-campus/contains the three working pages. - Git knows your name and email.
- The folder is a repository with at least one commit containing all three files.
- A GitHub repository named
poshtik-campusexists under your account. - Your local commits are pushed to it.
- Proof: open
github.com/<you>/poshtik-campusin the browser — all three files listed, your commit message beside them.
Already pushed while following along? Then prove the daily rhythm instead: open about.html, improve one sentence, save — then add and commit (fresh message: "Improve about wording") and push, and watch the change appear online on refresh.
After your repo page shows three files — or after fifteen honest minutes of trying.
The whole story, one terminal, start to finish.
Every command from empty folder to public repo — the reference card for the rest of the course. Config lines appear once in life; everything from status down repeats every lab.
# once per machine, ever> git config --global user.name "Your Name"> git config --global user.email "you@example.com"# once per project> git init> git remote add origin https://github.com/<you>/poshtik-campus.git# every working session — the rhythm> git status> git add .> git commit -m "What this save point contains"> git push -u origin main# (-u needed on the first push only; afterwards: git push)about.htmlLab 1: three-page static siteindex.htmlLab 1: three-page static sitemenu.htmlLab 1: three-page static site- Repo name beside your username.
- "Public" badge.
- Three files, alphabetical.
- Your commit message beside each.
- "1 commit" in the history bar (2+ if you did the rhythm re-run).
- "remote origin already exists" — you ran the remote line twice. Fix:
git remote set-url origin <URL>. - "failed to push some refs" — the GitHub repo wasn't created empty (a README got ticked). Fix today: delete the repo on GitHub (Settings page, bottom), recreate with all three boxes unticked, push again.
- "src refspec main does not match any" — you pushed before committing, so there's no save point to send. Fix:
addthencommit, then push. - Repo page shows no files after "success" — you pushed a different folder. Check the terminal's path prefix;
cdintoposhtik-campusand re-run the rhythm.
Part 22 · The map of what you own
Your folder after today — three files, one repo, two homes.
Small on disk, big in meaning: this exact tree is the project every remaining lab of the course grows. It now lives on your Desktop and at github.com/<you>/poshtik-campus — and Git watches every change from here on.
| TODAY'S POINT | WHAT IT LEFT BEHIND |
|---|---|
| 2–5 · Prelab warm-ups | scratch files in your sandbox — not part of the repo |
| 11 · The folder ritual | Desktop\poshtik-campus\ itself |
| 12–13 · MPS 1 + solution | index.html |
| 14–15 · MPS 2 + solution | menu.html + about.html |
| 16–18 · Git 1–3 | Git installed · configured · .git\ ledger + first commit |
| 19–21 · Git 4–6 | your GitHub account · the poshtik-campus repo · everything pushed |
Your fswd-practice\ sandbox (Classes 2–4) stays exactly where it is — it is your study record, never pushed, never graded. poshtik-campus\ is different: it is the product, it lives under Git, and every later lab opens by continuing this exact repo. Missed something today? Lab 2 restates the folder's expected starting state, so you can always catch up.
Part 23 · Wrap-up
Your site exists in two places. That changes every lab after this one.
Say each of these out loud — any hesitation marks your revision list. Every line below was done with your own hands today, not watched.
index · menu · about — from a blank folder, with two-way navigation that click-tests clean.index-final-v2.html was never a system.git init · status · add · commit on my own folder and can say what each step did.status · add · commit · push — and that -u was needed on the first push only.From Lab 2 to Lab 12, every session closes the same way: git status, git add ., git commit -m "…", git push — the git-push checkpoint. It's not ceremony: it means no lab's work can ever be lost to a broken laptop, and your GitHub profile quietly becomes a week-by-week record of the entire course — the exact thing recruiters open first.
Before the next lab — three 15-minute pieces of homework:
At home, open about.html, improve one sentence, save — then add, commit, push with a fresh message, and watch the change appear on your repo page on refresh. Doing it once with nobody beside you is what makes it yours.
On GitHub, search any project you've heard of. Find the same things your repo has: files, commit messages, a history count. The tools you used today are the tools the whole industry uses — at exactly this scale and at a million times it.
Open your menu.html. Ten dishes as a list, and nothing a customer can fill in — no name, no phone, no quantity. Lab 2 opens this very file and adds the order form beneath the list. Come with an opinion on which questions the form must ask.
Two sentences: (1) In plain words, what did git commit do that Ctrl+S doesn't? (2) Your laptop suddenly stops working — exactly which of today's work is still safe, and at what address?