Common HTML & CSS Mistakes Students Make

Beginner HTML & CSS errors are surprisingly consistent. After teaching web design for a while, you start seeing the same “usual suspects” on repeat.

The good news: most of these mistakes are preventable with a few simple teaching moves and a classroom debugging routine.

Here are the most common HTML & CSS mistakes students make, why they happen, and the quick fixes that keep your class moving.

The routine that saves the most time

Before I even list the errors, this routine matters more than any individual fix:

1. Save the file
2. Refresh the browser
3. Check the exact line you changed
4. Change one thing and test again

Most “it doesn’t work” moments are actually just “I didn’t save” or “I didn’t refresh.”

Mistake #1: Not saving the file

Why it happens: students assume the browser updates automatically.

Quick teaching move: I make “Save + Refresh” a call-and-response routine during Week 1.

Mistake #2: Wrong file path for images

Why it happens: beginners don’t understand folders and relative paths yet.

Quick teaching move: I teach one rule: “If the image is in the same folder, use just the filename.”

• Teach students to check spelling, capitalization, and file extension.
• Teach “drag the image into the folder first, then link it.”

Mistake #3: Missing closing tags

Why it happens: students forget that many tags need an opening and closing pair.

Quick teaching move: I teach tag pairing like parentheses: if you open it, you close it.

• Indentation is the “x-ray” that reveals nesting problems.
• Have students collapse sections (or re-indent) to spot broken structure.

Mistake #4: Putting CSS in the wrong place

Why it happens: students mix structure and styling before they understand the difference.

Quick teaching move: I repeat the mental model daily: HTML = structure, CSS = style.

Mistake #5: Not linking the CSS file correctly

Why it happens: the link tag is easy to mistype, and folder paths get confusing.

Quick teaching move: I teach a fast diagnostic: change the body background color to something obvious.

• If it changes, CSS is connected.
• If not, it’s a link/path problem, not a “CSS problem.”

Mistake #6: Forgetting the dot for class selectors

Why it happens: students confuse class names with tag names.

Quick teaching move: I teach it as “class selectors need a dot, IDs need a hashtag.”

Mistake #7: IDs and classes mixed up

Why it happens: beginners don’t understand uniqueness vs reuse.

Quick teaching move: I delay IDs at first and teach classes as the default tool.

Mistake #8: Missing curly braces or semicolons in CSS

Why it happens: CSS syntax feels “almost English,” so students get sloppy.

Quick teaching move: I teach CSS like a recipe card:

• selector = who we’re styling
• { } = the style box
• property: value; = each instruction line

Mistake #9: Styling the wrong element

Why it happens: students guess selectors instead of targeting intentionally.

Quick teaching move: I teach “add a class first, then style the class.”

Mistake #10: Margin vs padding confusion

Why it happens: both create space, but in different ways.

Quick teaching move: I teach it visually:

• Padding = space inside the box
• Margin = space outside the box

The teaching move that prevents the most troubleshooting

I require students to debug with evidence. If they ask for help, they must show:

• what they changed
• what they expected
• what happened instead

That turns “help me” into a learning moment and reduces repeated confusion.

Bottom line

HTML & CSS mistakes aren’t a sign students are failing. They’re a sign students are doing the real work of building and troubleshooting.

With a predictable routine and a few targeted teaching moves, you can prevent hours of frustration and help beginners build confidence fast.