Back to All Posts

Week 1 — The browser is your first backend (html + css + layout sanity)

DevelopmentTutorial

Foundation-building guide to HTML semantics, CSS fundamentals, and layout architecture. Covers semantic HTML, box model, positioning, flexbox, and CSS Grid through practical exercises. Designed to establish solid browser and DOM understanding before moving to frameworks like React.

i always thought frontend started with components. turns out it starts with humility.

welcome to week 1 — the part of the roadmap where we drop React, TypeScript, frameworks, fancy tooling… and instead sit with the two things most devs treat like chores:

HTML and CSS.

(i know. the excitement is overwhelming.)

but here’s the thing nobody told me early on:

if you don’t understand the DOM, the CSS cascade, and how the browser paints pixels… nothing you build on top will ever feel stable.

react won’t save you. tailwind won’t save you. typescript won’t even try.

this week is about building your brain’s foundation for everything coming later — component systems, rendering strategies, design systems, even how server components hydrate.

and yeah… we’re starting with HTML semantics and CSS layout architecture.

don’t worry — i’ll sprinkle in some pain, some anecdotes, a lot of “i learned this too late,” a couple spots where you’ll drop images/screenshots, and enough code blocks to feel like a real developer again.

let’s dive.

🍞 01 — semantics aren’t decoration. they’re the skeleton.

here’s the truth i avoided for years:

divs are not your best friend. but they will let you think they are.

in week 1, we focus on semantic strategy — which sounds like an SEO play but is actually an architectural one.

semantic HTML is the difference between:

  • a screen reader understanding your UI
  • google actually indexing your content
  • your layout not breaking when the css fails
  • and you writing 30% less code

your browser knows what a <header> is. it knows what <nav>, <main>, <aside>, and <footer> mean. a <div> means nothing. it’s a void. a filler. an empty soul.

my first big aha moment: when i realized a good semantic layout means less CSS, fewer hacks, better accessibility, simpler React components later.

🍞 02 — the box model is the real boss fight

i used to think CSS was unpredictable. then i realized i just didn’t understand the box model.

everything in CSS is a box. every box has:

  • content
  • padding
  • border
  • margin

if you don’t know how these fight each other, you’ll spend hours doing “margin: -8px” witchcraft and wondering why things shift on scroll.

here’s your first code reminder of the week:

* {
  box-sizing: border-box;
}

this one line saved me from a decade of misery.

i wish i was joking.

image.png

🍞 03 — positioning is where the chaos begins

CSS positioning tells you where an element lives. i used to treat these values like keyboard shortcuts — guessing until something looked right.

bad idea.

here’s the mental map i finally built:

relative → offset from its original position
absolute → relative to the nearest positioned parent
fixed → relative to the viewport
sticky → hybrid: behaves like relative until scroll threshold

sticky is the one everyone loves until they realize it needs a defined containing block.

(been there.)

absolute is the one that destroys entire layouts when used wrong.

(been there too.)

🍞 04 — flexbox is easy. grid is the galaxy brain.

flexbox is the chill friend.

grid is the architect.

you’ll use flexbox for alignment, nav bars, rows, columns, and anything “1D.”

you’ll use grid for dashboards, hero layouts, marketing sections, and anything that needs stable 2D placement.

this week, i want you to lean harder into CSS Grid — because once grid clicks, you’ll design layouts faster than any library can.

here’s a starter snippet that helped me a ton:

.container {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  height: 100vh;
}

image.png

🍞 05 — WEEK 1 LAB: the holy grail dashboard (css grid only)

no flexbox.

no frameworks.

no tailwind.

no js.

just semantic HTML and grid.

you’re building:

  • a full-height dashboard
  • with a sidebar on the left
  • a header on top
  • main content in the middle
  • footer at the bottom

here’s the skeleton to get you started:

<div class="container">
  <aside class="sidebar">sidebar</aside>
  <header class="header">header</header>
  <main class="main">main content</main>
  <footer class="footer">footer</footer>
</div>

and the styling:

.container {
  display: grid;
  height: 100vh;

  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

.sidebar {
  grid-area: sidebar;
  background: #111;
  color: white;
}

.header {
  grid-area: header;
  background: #222;
}

.main {
  grid-area: main;
  padding: 1rem;
}

.footer {
  grid-area: footer;
  background: #222;
}

after you build this, here’s what you should do:

  1. resize the window
  2. try breaking the layout
  3. try making the sidebar collapsible (no JS — pure CSS transitions)
  4. try switching the order on mobile

image.png

image.png

image.png

image.png

🍞 06 — modern css tricks that took me few years to learn

some things just… never show up in tutorials.

these were my biggest “oh damn” moments:

1. min(), max(), clamp()

these are secret weapons for responsive sizing:

font-size: clamp(1rem, 2vw, 2rem);

this one line handles:

  • mobile scaling
  • desktop scaling
  • minimum/maximum boundaries

no media queries.

no headache.

2. grid auto-flow

make items fill naturally:

display: grid;
grid-auto-flow: column;
grid-auto-columns: 200px;

you get a horizontally-scrolling layout without JS.

3. use :root for themes

set variables once:

:root {
  --color-bg: #111;
  --color-text: #eee;
}

then tweak or theme without rewriting anything.

4. the cascade is not your enemy

once you learn specificity rules, you stop fighting CSS and start shaping it.

image.png

🍞 07 — how this week secretly sets up the rest of the curriculum

this whole “month 1” structure looks basic on the surface.

but week 1 is actually the seed for everything else.

React components?

they’re just JS functions returning semantic HTML.

Tailwind?

it’s just CSS… but structured.

Shadcn/ui?

it’s just styled semantics + controlled component architecture.

Next.js layouts?

literally CSS Grid for routes.

Rendering performance?

deeply tied to paint, layout, and how the DOM is structured.

once you see it, you can’t unsee it:

Frontend engineering isn’t about frameworks — it’s about the browser.

frameworks just help us negotiate with it.

🍞 08 — exercises i wish someone forced me to do earlier

these aren’t optional. do them. trust me.

✔ exercise 1 — rebuild a popular site’s layout

pick:

  • twitter
  • youtube
  • medium
  • gumroad
  • spotify web

rebuild the layout using HTML + CSS Grid only.

no colors, no images, no fancy styling — just structure.

✔ exercise 2 — make your dashboard mobile-first

force yourself to design backwards:

small → medium → large,

not the other way around.

✔ exercise 3 — remove all classes

use only semantic tags and a global stylesheet.

you’ll feel pain. that’s the point.

✔ exercise 4 — debug with devtools layout panel

open devtools.

go to the “Layout” tab.

turn on grid overlays.

watch how the browser sees your layout — not how you “think” it looks.

🍞 09 — week 1 code template (starter kit)

here’s a mini-starter you can drop into a folder to get going:

week-1/
├── index.html
└── styles.css

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Week 1 — Holy Grail Dashboard</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="container">
      <aside class="sidebar">sidebar</aside>
      <header class="header">header</header>
      <main class="main">main content</main>
      <footer class="footer">footer</footer>
    </div>
  </body>
</html>

styles.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.container {
  display: grid;
  min-height: 100vh;

  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;

  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

.sidebar {
  grid-area: sidebar;
  background: #111;
  color: #eee;
  padding: 1rem;
}

.header,
.footer {
  background: #222;
  color: #eee;
  padding: 1rem;
}

.main {
  grid-area: main;
  padding: 1rem;
}

🍞 10 — closing thoughts for week 1

if you’ve ever felt like frontend was “unstable,” “chaotic,” or “random,” i promise you — it becomes predictable the moment you respect the browser’s rules.

week 1 might feel slow, but this is the foundation.

and by the time you hit react, you’ll feel like someone unlocked god mode for you.

next friday, we dive into the event loop — the part of JavaScript that finally made async make sense to me.

there’s still a lot to learn and build.

Back to All Posts