Web Design Principles

Use h1 through h6 to give readers a clear content hierarchy, and avoid replacing real headings with styled paragraphs.

Reduce repeated CSS by grouping selectors, and target elements inside a particular container with descendant selectors.

Learn the CSS box model, how margin differs from padding, and how content, borders, and spacing affect an element’s size.

Explore visual balance and invisible alignment lines, with examples from the historical 960-pixel grid system.

Understand em-based font sizing, convert pixel values using the parent font size, and follow the archive’s 62.5% sizing example.

Compare the archive’s GIF, JPEG, and PNG examples, and learn how image type and compression affect quality and file size.

A personal guide to freelance life, covering routines, clients, deadlines, creativity, time off, and the uncertainty of working for yourself.

Plan a website from goals and content through information structure, visual design, management, search visibility, and promotion.