HTML & CSS First Principles
Beginner’s one-pager · Structure · Box model · Selectors · Layout
Dark mode · Mobile friendly · OnlyBuilds 21 Document skeleton
First principle: HTML is a tree of meaning. CSS is how that tree looks.
mode
root
meta
content
charset
utf-8 always
text encoding
viewport
mobile scale
width=device-width
title
tab name
SEO + UX
One page = one
. Nest tags. Close tags.2 Core HTML elements
h1–h6
headings
outline
p
paragraph
text block
a href
link
go somewhere
img src alt
image
always alt
ul / ol / li
lists
items
div / span
hooks
no meaning
button / input
controls
interaction
Prefer semantic tags: header, main, nav, section, footer.
3 The box model
First principle: everything is a rectangle.
margin · outside gap
border · edge
padding · inside gap
content · text / kids
box-sizing
border-box
width includes pad
4 CSS selectors
element
p, h1, a
by tag
.class
reusable
most styles
#id
unique
use sparingly
parent child
descendant
nest scope
:hover :focus
state
interaction
@media
breakpoints
responsive
Specificity: inline > id > class > element. Keep it simple.
5 Display & flow
block
full width
div, p, h1
inline
in text
span, a
inline-block
inline + size
buttons
none
remove
hide fully
flex
1D layout
rows / cols
grid
2D layout
pages
6 Flexbox essentials
display: flex
gap
justify-content
align-items
flex-wrap
justify
main axis
space-between
align
cross axis
center
Mobile nav, cards in a row, centering: flex first.
7 Color, type, space
color / background
paint
contrast first
font-size / weight
hierarchy
clamp() helps
margin
between boxes
outside
padding
inside box
breathing room
border-radius
corners
soft UI
line-height
readability
~1.4–1.6
Dark mode tip: light text on near-black, muted labels, one accent.
8 Build recipe (first principles loop)
1 · HTML meaning
2 · Mobile layout
3 · Spacing scale
4 · Color tokens
5 · Breakpoints up
6 · Polish states
min-height: 100dvh
full phone screen
modern
max-width + margin: auto
readable column
desktop
gap not margin hacks
flex/grid spacing
cleaner
This page is pure HTML + CSS — no framework. View source. Steal the patterns. Ship.