The Question That Stopped Everything
You're deep in code, typing away, when you notice small eyes watching your screen. "What's that?" your niece asks, pointing at the strange symbols filling your editor.
That innocent question forces you to pause. How do you explain something you've internalized over years of practice? How do you break down web development for someone who's never seen a line of code?
I decided to try. And what happened next changed how I think about my craft.
The LEGO Analogy: Building with Bricks
I needed something concrete. Something a five-year-old could grasp.
"Think of HTML like LEGO bricks," I told her. "Each piece has a specific shape and purpose. You follow instructions to connect them together and build something bigger."
Her eyes lit up. She knew LEGO. She understood building.
The analogy clicked because it's accurate. HTML elements are like building blocks--you combine <h1> headings, <p> paragraphs, <img> images, and <a> links to construct a complete webpage. Each tag serves a purpose, and how you arrange them determines what you build.
In modern web development with Next.js and React, we still think in blocks. Components are just reusable LEGO pieces that we assemble into interfaces. Just as CSS Flexbox revolutionized layout design, modern frameworks have evolved how we piece together user interfaces.
HTML: The Structure Behind Every Website
HTML stands for HyperText Markup Language. But what does that actually mean?
At its core, HTML is about meaning. When you use an <h1> tag, you're saying "this is the main heading." When you use <p>, you're marking up a paragraph of text. The browser reads these tags and uses them to build the document's structure.
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my website.</p>
</body>
</html>
This structure is foundational. Semantic HTML--using the right element for the right job--improves accessibility for screen readers, boosts SEO for search engines, and makes your code easier to maintain.
Even in modern frameworks like Next.js, we're ultimately generating HTML. The fundamentals of web development never change. Understanding how elements nest and relate to each other is essential--whether you're writing raw HTML or building with components.
1<!DOCTYPE html>2<html>3 <head>4 <title>My First Page</title>5 </head>6 <body>7 <h1>Hello, World!</h1>8 <p>This is my website.</p>9 <img src="cat.jpg" alt="A cute cat">10 </body>11</html>1h1 {2 color: #2c3e50;3 font-size: 2.5rem;4}5 6p {7 color: #555;8 line-height: 1.6;9 margin-bottom: 1rem;10}CSS: Making It Beautiful
Once my niece understood that HTML provides structure, it was time to show her CSS.
"CSS is like giving your LEGO creation paint and decorations," I explained. "It doesn't change what you built--it makes it look amazing."
CSS stands for Cascading Style Sheets. It works by selecting HTML elements and applying properties to change how they look:
- Colors and backgrounds
- Fonts and typography
- Spacing and layout
- Positioning elements
The key insight? Separation of concerns. HTML handles meaning and structure. CSS handles presentation and appearance. Keeping them separate makes code cleaner, more maintainable, and easier to collaborate on.
Modern web development extends this concept with design systems, component libraries, and utility-first CSS like Tailwind--all built on the same foundational principle of separating structure from style.
“"So HTML says what's there, and CSS makes it pretty."”
"HTML Says What's There, CSS Makes It Pretty"
That was the moment. My niece had distilled years of web development into a single, perfect sentence.
She was right. That's exactly what we do:
- HTML defines the content and structure--what exists on the page
- CSS defines the presentation--how that content looks
- JavaScript (the muscles, as some teachers explain) adds interactivity
This simplicity is beautiful. As web developers, we can get caught up in frameworks, build tools, and complex architectures. But at its heart, web development is still about putting content on a page and making it look good.
The child-cut-through-jargon moment reminded me why I fell in love with building for the web in the first place. Concepts like CSS pointer events show how even seemingly advanced CSS features build on these same fundamental principles.
What I Learned from My Niece
Teaching a child taught me more than any tutorial ever could:
Slow Down
When you have to explain something to a beginner, you can't rush. You find the core of an idea and build from there. This patience makes you a better developer.
Fundamentals Matter
The basics of HTML and CSS haven't fundamentally changed in decades. New tools (React, Next.js, Vue) are built on these same principles. Mastering the fundamentals makes learning new technologies easier. Even advanced topics like CSS Flexbox and grid layouts build on these same core concepts.
Joy of Discovery
Seeing something through fresh eyes reminds you why it's exciting. Building websites is genuinely magical--you type symbols and create something millions can see.
Teaching Reveals Gaps
If you can't explain something simply, you don't truly understand it. Teaching exposes the gaps in your own knowledge and forces you to fill them.
The Modern Web Development Context
You might wonder: with all our modern tools--Next.js, React, Tailwind, CSS-in-JS--does this LEGO analogy still apply?
Absolutely. Here's why:
- Next.js generates HTML from React components, but those components are just structured pieces
- Tailwind provides utility classes for styling, but the separation of structure and style remains
- Design systems are collections of reusable patterns, like LEGO sets for building interfaces
The fundamentals are timeless. The tools evolve, but the principles stay the same. Understanding the CSS overflow property or how to center elements with flexbox--these skills all trace back to the same HTML-is-structure, CSS-is-style principle.
Best Practices for Web Structure and Styling
Whether you're building for yourself or teaching someone new, these principles hold true:
Semantic HTML
Use the right element for the right job:
<header>for page headers, not just styling<nav>for navigation sections<main>for the primary content<article>for self-contained content<footer>for footer sections
Semantic HTML improves accessibility, SEO, and code maintainability.
Mobile-First Responsive Design
Start with the smallest screen and build up. Use CSS media queries to adapt layouts for larger screens. Modern CSS with flexbox and grid makes this easier than ever.
Organized CSS Architecture
Keep your styles maintainable:
- Use CSS modules or utility classes
- Establish design tokens for colors, spacing, fonts
- Component-scoped styles prevent conflicts
- Follow consistent naming conventions
Performance Considerations
- Minimize CSS payload
- Optimize images and assets
- Use lazy loading for below-the-fold content
- Leverage browser caching