HTML and CSS: Design and Build WebsitesHTML and CSS: Design and Build Websites by Jon Duckett

My rating: 4 of 5 stars

This is the most visually pleasing web design book I’ve ever read. It’s logically organized and explains concepts well, using simple terms, code examples, and beautiful illustrations. I wish I had had it when I was first learning HTML and CSS. The book focuses on the fundamentals of HTML and CSS (including some HTML5 and CSS3), but there are also a handful of pages about the design process, SEO, and analytics.

I won a copy of this book in a Twitter contest from The East Wing podcast, one of my favorite web design podcasts. The author appeared in Episode 11: The Book Process with Jon Duckett.

Stock photos

Browser testing

Text

  • Leave body text at 16px, then adjust other font sizes using a scale.
  • Setting font size in pixels is the best way to ensure that it appears as you intend, because percentages and ems vary depending on the text size set in the browser.
  • Line-height should be 1.4 – 1.5em.
  • Hide text with text-indent: -9999px.

Open source font sources

Commercial font sources

Styling tables

  • Give cells padding.
  • Make headings bold and uppercase, and add a background color or underline.
  • Shade alternating rows.
  • Use text-align to right-align numeric columns.

Styling forms

Use formalize.me to style forms consistently across browsers.

Aligning form controls (view source in this example to see HTML and CSS)

  • Add the class “title” to elements containing form titles.
  • Float the title class to the left.
  • Set the width on the title class so they’re all the same width.
  • Use text-align to align titles to the right, and use padding to put a gap between titles and form controls.
  • Set the width and use padding-bottom to put vertical space between rows.
  • Right-align the submit button.

Online wireframe tools (paid)

SEO

On-page SEO

  • Keywords should be in these places:
  • Page title
  • URL
  • Headings
  • Text (2-3 times in body)
  • Link text
  • Image alt text
  • Meta descriptions

Off-page SEO

  • Get other sites to link to yours, especially sites with related content.
  • Links containing keywords are more relevant.
  • Make sure words in links to your sites also appear on the page linked to.

Analytics

Direct traffic is traffic that didn’t come from another site. The visitor may have typed the URL, or clicked a link in an email or document.

View all my reviews

Leave a Reply