HTML Code Study Guide | J. Lindquist

01 // foundation

HTML Basics

HTML gives a webpage its structure and meaning. Think of it as the skeleton. CSS is what makes that skeleton look fabulous.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

<head>

Metadata, title, CSS links, meta tags, scripts.

<body>

Visible and interactive content lives here.

<!DOCTYPE html>

Tells the browser to use modern HTML standards.

02 // power skill

Attributes, ID vs. Class

Attributes add information to an element. They appear inside the opening tag.

<img src="logo.png" alt="Company Logo" id="main-logo" class="site-logo">

# ID

One unique target.

#hero { color: hotpink; }

. Class

A reusable group or style.

.card { padding: 20px; }

FAST MEMORY: # = one named target. . = reusable team jersey.

03 // user input

Forms

Forms collect user data. Connect labels to inputs by matching for with the input's id.

<form>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required>

  <button type="submit">Send</button>
</form>

Attribute	Purpose
name	Identifies the data when submitted.
placeholder	Shows a temporary hint. It is not a replacement for a label.
value	Sets an initial value.
maxlength	Limits the number of characters.
required	Uses built-in browser validation to require a value.

04 // structured data

Tables

<table>The full table.

<tr>A table row.

<th>A header cell.

<td>A data cell.

<table>
  <caption>Team Members</caption>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Jo</td>
    <td>Website Wizard</td>
  </tr>
</table>

SPAN IT: colspan spans columns. rowspan spans rows.

05 // meaningful markup

Semantic HTML

Semantic elements describe what content is, not just what it looks like.

<header>

Intro or header content.

<nav>

Navigation links.

<main>

Main unique page content.

<section>

A themed group of content.

<article>

Self-contained content.

<footer>

Footer information.

MEMORY TRICK: <div> = generic box. Semantic tags = boxes with job titles.

06 // everybody gets in

Accessibility Basics

Use useful alt text for meaningful images.
Decorative images can use alt="".
Use real labels for form fields.
Use <button> for actions and <a> for navigation.
Keep heading order logical: h1 → h2 → h3.
Do not remove visible keyboard focus unless you replace it with something clear.

ARIA RULE: Native HTML first. ARIA adds meaning when native HTML cannot; it should not be used to patch avoidable bad markup.

07 // style engine

CSS Basics

selector {
  property: value;
}

Selector = what you target. Property = what you change. Value = what you change it to.

Type	Example	Where it lives
Inline	`style="color:pink"`	Inside the HTML element.
Internal	`<style>...</style>`	Inside the document's head.
External	`<link rel="stylesheet" href="styles.css">`	A separate CSS file.

08 // target practice

Selectors

Selector	Targets
`p`	All paragraph elements.
`.card`	All elements with class="card".
`#hero`	The element with id="hero".
`div p`	Any p somewhere inside a div.
`div > p`	A p that is a direct child of div.
`.card:hover`	A card while hovered.
`input:focus`	An input while focused.
`.title::after`	A generated pseudo-element after the title.

09 // why that rule won

Cascade, Specificity & Inheritance

When more than one CSS rule targets the same thing, the browser has to decide which declaration wins.

p { color: black; }            /* element */
.note { color: purple; }       /* class */
#warning { color: deeppink; }  /* ID - more specific */

BEFORE !important: Check whether another selector is more specific, whether the stylesheet loaded, and whether a later rule is overriding yours.

10 // every element is a box

The Box Model

ContentThe actual text/image/content.

PaddingSpace inside the border.

BorderThe line around content + padding.

MarginSpace outside the border.

*, *::before, *::after {
  box-sizing: border-box;
}

border-box makes declared width/height include padding and borders, which is usually much easier to reason about.

11 // layout switchboard

display

Value	What it does
block	Starts on a new line and typically fills available width.
inline	Flows with text and uses only needed width.
inline-block	Flows inline but accepts width and height.
none	Removes the element from layout and display.
flex	Creates a Flexbox container.
grid	Creates a Grid container.

DON'T MIX THESE UP: visibility:hidden hides an element but keeps its space. display:none removes it from the layout.

12 // one-dimensional layout

Flexbox

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

Property	Think of it as...
flex-direction	Which direction do the items travel?
justify-content	How are items spaced on the main axis?
align-items	How are items aligned on the cross axis?
flex-wrap	Can items move onto another line?
gap	Consistent space between items.

13 // rows + columns

CSS Grid

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Flexbox

Best when one main direction matters: a row OR a column.

Grid

Best when rows AND columns matter together.

14 // where things live

Positioning + z-index

Position	Behavior
static	Normal document flow.
relative	Stays in flow; can be offset and anchors absolute children.
absolute	Removed from normal flow; positioned against its nearest positioned ancestor.
fixed	Anchored to the browser viewport and stays there while scrolling.
sticky	Behaves normally until a scroll threshold, then sticks inside its scroll container.

Z-INDEX WARNING: It works inside stacking contexts. “Just use 999999” is not a reliable debugging strategy.

15 // adapt or perish

Responsive Design

Responsive design lets a page adapt to different screen sizes using flexible layouts, images, and media queries.

.cards {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

MOBILE-FIRST: Start simple for small screens. Add complexity with min-width as more room becomes available.

16 // stop the weird cropping

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

Property	What it does
object-fit: cover	Fills the box. Cropping is allowed.
object-fit: contain	Shows the whole image. Empty space may remain.
object-position	Controls which part of a cropped image stays visible.
aspect-ratio	Maintains a consistent width-to-height proportion.

17 // sizing without chaos

CSS Units + Modern Sizing

px

Fixed CSS pixel.

%

Relative to another size, often the parent.

rem

Relative to the root font size.

em

Relative to the current font context.

vw / vh

Relative to viewport width/height.

fr

A fraction of available Grid space.

h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
}

.container {
  width: min(92%, 1200px);
}

CLAMP: Read it as minimum, preferred/fluid, maximum.

18 // reusable values

CSS Variables

:root {
  --brand-pink: #ff2e9a;
  --text-dark: #17141a;
  --space-lg: 32px;
}

.button {
  background: var(--brand-pink);
  padding: 12px var(--space-lg);
}

Change the value once and every place using that variable updates.

19 // CSS lie detector

Debugging with DevTools

Problem	Check first
Style does nothing	Is the selector matching? Is the rule crossed out?
Image is missing	Path, filename case, src value, Network tab.
Elements overlap	Positioning, width/height, overflow, parent Flex/Grid rules.
Mobile looks wrong	Viewport meta tag and active media queries.
Spacing is weird	Computed margin/padding and the box model.
Wrong rule wins	Specificity and source order.

DEBUG ORDER: Inspect → matching rules → box model → parent layout → responsive rules → then change code.

20 // framework reality check

Bootstrap & Theme CSS

Framework classes already carry CSS. Your custom rules are layered on top of them, which is why a theme can sometimes appear to “fight” you.

<div class="row">
  <div class="col-lg-4">One</div>
  <div class="col-lg-4">Two</div>
  <div class="col-lg-4">Three</div>
</div>

12-COLUMN RULE: 4 + 4 + 4 = 12, so three equal columns fit. 5 + 5 + 5 = 15, so something has to wrap.

21 // final boss

Quick Self-Test

1. What is the difference between an ID and a class?

An ID is a unique target; a class is reusable across multiple elements.

2. Why might #hero beat .hero in a CSS conflict?

An ID selector has higher specificity than a class selector.

3. cover vs contain?

cover fills the box and may crop. contain shows the entire image and may leave empty space.

4. When is Grid usually better than Flexbox?

When coordinated rows and columns matter together, like galleries or card grids.

5. What does position:absolute position itself against?

Its nearest positioned ancestor. If none exists, it falls back to the page's initial containing context.

6. What is the shorthand order for four margin or padding values?

Top, Right, Bottom, Left — TRBL.

7. First move when CSS seems ignored?

Inspect the element in DevTools and see which rules are matching and winning.

Bonus: File paths that save your sanity

images/logo.png starts from the current file's location. ../images/logo.png goes up one folder first. /images/logo.png starts from the site root. On many servers, logo.JPG and logo.jpg are different filenames.

Bonus: Link vs Button

Use a link when the user is going somewhere. Use a button when the user is doing something.