HTML Notes - Page 3

Project: A Personal Profile Page

Your first complete page. One file, semantic structure, a photograph, a list, a table and a link out - built to a specification and checked against it...

HTML

A Pre Launch Checklist

Everything worth verifying before a page goes live, grouped so it can be worked through in about twenty minutes.

HTML

Security Considerations in HTML

Markup is not where security is enforced, and several markup decisions can undermine it entirely. The ones every front end developer should know.

HTML

HTML Performance Best Practices

What the markup alone can do for speed, with no build tooling: resource hints, image discipline, script loading and the small set of attributes that m...

HTML

Clean HTML: Structure, Naming and Maintainability

Markup you can still read in six months. Consistent conventions, meaningful names, shallow nesting and a house style that survives more than one devel...

HTML

A Working Setup: Formatting, Linting and Live Preview

Consistent formatting, markup linting, live reload and shared settings. A day of setup that pays back on every file afterwards.

HTML

Editor Shortcuts and Multi Cursor Editing

Multi cursor editing changes what feels possible in a file. These shortcuts are worth the twenty minutes it takes to build the habit.

HTML

Emmet: Writing HTML at Speed

Type an abbreviation, press Tab, get a block of markup. Emmet is built into most editors and turns twenty keystrokes into three.

HTML

Debugging Common HTML Problems

A symptom to cause lookup for the problems that come up repeatedly, and the two minute checks that resolve most of them.

HTML

Validating HTML

The validator catches nesting errors, duplicate ids and missing attributes in seconds. A page that renders is not the same as a page that is correct.

HTML

The Console and the Network Panel

The Console reports what went wrong. The Network panel shows what was requested, in what order, and how big it was. Between them they explain most pag...

HTML

The Elements Panel

The Elements panel shows the live DOM, not your file. That difference is why it is the first place to look when markup behaves in a way the source doe...