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...
HTML
A complete HTML path: document structure, text, links, media, tables, forms, semantic markup, HTML5, metadata, accessibility, SEO, tooling, projects and assessment.
113 notes in 20 topics
Topics in HTML
HTML Basics 7
Text and Formatting 5
Links and Navigation 5
Images and Media 7
Lists 3
Tables 5
Forms 9
Semantic HTML 5
HTML5 Features 7
Head and Metadata 5
HTML with CSS 5
HTML with JavaScript 5
Accessibility 6
HTML SEO 10
DevTools and Debugging 4
Editor Productivity 3
HTML Best Practices 4
HTML Projects 6
Advanced Projects 5
Practice and Exams 7
Notes
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
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
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
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
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
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
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
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
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
A Pre Launch Checklist
Everything worth verifying before a page goes live, grouped so it can be worked through in about twenty minutes.
HTML
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...