Module 1: What Is Coding?
+ HTML &
CSS From Zero
Welcome to Day 1. We're starting from "what even is this" and
building up. No prior knowledge assumed.
Part A: What Is Coding, Really?
A computer is, underneath everything, a very fast, very dumb
machine. It only understands electrical signals — on or off. That's it.
Everything you've ever seen a computer do — videos, games, this
very text — is built on top of that simple on/off signal, in layers, like
a tower.
The layers, bottom to top:
1. Binary (1s and 0s) — the on/off signals themselves
2. Machine code — binary organized into instructions a specific
processor understands
3. Assembly language — human-readable shorthand for machine
code (still very low-level)
4. Programming languages (Python, JavaScript, C, etc.) — much
more human-friendly; you write something close to
English/math, and a program called a compiler or interpreter
translates it down into machine code
5. Applications — what you actually use (a website, an app, this
chat)
"Coding" or "programming" means: writing instructions, in a
language a translator program can convert into something the
machine can execute, that tell the computer exactly what to do,
step by step.
The most important mental shift: a computer does exactly what
you tell it, not what you meant. If your instructions are ambiguous
or wrong, it doesn't guess — it either errors out or does the wrong
thing precisely. Most of "learning to code" is learning to think in a
way that's precise enough for a machine to follow.
A Very Short History (the parts that matter)
1840s — Ada Lovelace writes notes describing how a
mechanical machine (Babbage's Analytical Engine) could
follow a sequence of instructions to compute things beyond
pure arithmetic. Many consider her the first programmer —
over a century before electronic computers existed.
1940s — First electronic computers (ENIAC). Programming
meant physically rewiring machines or feeding in punch cards.
Brutally slow and error-prone.
1950s-60s — First "high-level" languages appear: FORTRAN
(1957, for scientific computing), COBOL (1959, for business).
These let people write something closer to English instead of
raw machine instructions.
1970s — C is created at Bell Labs. It becomes the foundation
that an enormous amount of modern software (and other
languages) is built on or inspired by.
1989-91 — Tim Berners-Lee invents the World Wide Web —
and with it, HTML, the language we're about to learn. The web
is born as a way for researchers to link documents together.
1995 — JavaScript is created (in 10 days, famously) to make
web pages interactive instead of static. Also: Java, Python had
already existed since 1991 but starts gaining traction.
2000s-2010s — Web apps explode. Frameworks like Rails,
then React, [Link], etc. make building complex apps faster.
2020s — AI coding assistants (like Claude) emerge, changing
how people write and learn code — which is exactly the tool
you're learning to use now.
Why this history matters for you: every layer was built because the
layer below it was too slow or too hard for humans to work in
directly. That pattern — "this is tedious, let's build a tool to make it
easier" — is the entire story of software, and it's also exactly what's
happening right now with AI-assisted coding. You're not skipping
the "real" way of doing things; you're using the latest layer of the
same 180-year-old trend.
Part B: HTML — The Skeleton of a Webpage
What it is: HTML (HyperText Markup Language) isn't really a
programming language — it's a markup language. It doesn't do logic
or calculations. It just describes the structure and content of a
page: "this is a heading, this is a paragraph, this is an image."
Think of HTML like the skeleton of a body, or the framing of a
house — it defines what exists and where, but not how it looks
(that's CSS, Part C) or how it behaves (that's JavaScript, later).
The basic building block: the "tag"
HTML is made of elements, written as tags. Most tags come in
pairs: an opening tag and a closing tag, wrapping around content.
<p>This is a paragraph of text.</p>
<p> = opening tag (paragraph)
This is a paragraph of text. = the content
</p> = closing tag (note the / )
The essential tags to know first
What it
Tag Example
means
Headings, h1
<h1> to =
<h1>Main Title</h1>
<h6> biggest/most
important
Paragraph of
<p> <p>Some text.</p>
text
<a
A link
<a> href="[Link]
("anchor")
me</a>
An image (no
<img> closing tag <img src="[Link]">
needed)
A generic
container/box
<div> <div>...content...</div>
for grouping
things
<ul> / A bulleted list
<ul><li>Item 1</li></ul>
<li> / list item
A clickable
<button> <button>Click</button>
button
The skeleton of every HTML page
Every webpage follows this same basic shape:
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>
<!DOCTYPE html> — tells the browser "this is a modern HTML
document"
<html> — wraps the entire page
<head> — invisible metadata (page title, links to styling, etc.)
— not shown on the page itself
<body> — everything visible on the page goes here
Important concept: nesting. Tags go inside other tags, like Russian
nesting dolls. A <div> can contain a <h1> and a <p> , which is
how you build up complex layouts from simple pieces.
Important concept: attributes. Tags can carry extra information
inside the opening tag, like href on a link or src on an image:
<a href="[Link] Anthropic</a>
href is an attribute — it tells the <a> tag where to link to.
Part C: CSS — The Styling
What it is: CSS (Cascading Style Sheets) controls how HTML looks
— colors, fonts, spacing, layout, sizing. If HTML is the skeleton, CSS
is the skin, clothes, and styling.
CSS works by selecting an HTML element and then declaring
properties for it.
p {
color: blue;
font-size: 18px;
}
p = the selector (which element to style — here, all
paragraphs)
color: blue; and font-size: 18px; = declarations
(property: value, ending in ; )
The curly braces { } wrap the declarations for that selector
Three ways to attach CSS to HTML
1. Inline (on the element itself — quick but messy):
<p style="color: blue;">Hello</p>
2. Internal (inside a <style> tag in the <head> ):
<head>
<style>
p { color: blue; }
</style>
</head>
3. External (a separate .css file, linked — the standard, scalable
approach):
<head>
<link rel="stylesheet" href="[Link]">
</head>
Core concepts to know
Selectors can target by tag ( p ), by class ( .my-class ), or by
ID ( #my-id ):
.highlight { background-color: yellow; } /* targets
any element with class="highlight" */
#header { font-weight: bold; } /* targets
the one element with id="header" */
<p class="highlight">This is highlighted</p>
<div id="header">This is the header</div>
The Box Model — every HTML element is treated like a
rectangular box, with:
Content (the text/image itself)
Padding (space inside the box, around the content)
Border (a line around the padding)
Margin (space outside the box, between it and other
elements)
This is one of the single most important concepts in all of CSS
— almost every layout bug traces back to misunderstanding
the box model.
The "Cascade" (the C in CSS) — styles can come from multiple
places and can conflict. CSS has rules for which style "wins"
(more specific selectors and later-declared rules generally
win). This is why it's called Cascading.
Try It Yourself (no setup needed)
You don't need to install anything yet. Go to [Link] or just open
a .html file in any browser, and try this:
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: purple; }
p { font-size: 20px; color: gray; }
.box { background-color: lightblue; padding: 20px;
border: 2px solid navy; }
</style>
</head>
<body>
<h1>My Page</h1>
<p>This is styled text.</p>
<div class="box">I'm in a styled box!</div>
</body>
</html>
Save it as [Link] , double-click it, and it opens in your
browser. Then change colors, sizes, and text, and refresh to see
what happens. That loop — change something, refresh, see what
happened — is 80% of how front-end development actually feels
day to day.
Checkpoint Questions (answer these to
yourself before moving on)
1. What's the difference between HTML and CSS, in one sentence
each?
2. What does "nesting" mean in HTML?
3. What are the four parts of the CSS box model?
4. Why do we use external CSS files instead of inline styles for
real projects?
If you can answer these confidently, you're ready for Module 2:
JavaScript basics (making pages interactive) — or we can go
straight into vibe coding your first real mini-project using just
HTML/CSS, your choice.