I bought this book as it was recommended reading to accompany the Codecademy Full-Stack Engineer career pathway. I usually reach for a book very fast whenever I'm learning something new, but I must admit I was suspicious about such an old book on such a fast-changing subject.
However, I was pleasantly surprised by how relevant it all seemed, and it helped me to organise and solidify my existing understanding of these languages. The first working draft of HTML 5 was published in January 2008, and the book was published in 2011.
While there have been many additions, little is depreciated or outdated. CSS, however, has come a long way since the book's release, but the information is so nicely organised and well-written that I recommend reading it if you are learning web development.
The good stuff
Excellent overview of two languages
The book offers a well-thought-out and nicely presented overview of what these two technologies can do. It's helpful to see the bigger picture early when learning something new.
Beautiful layouts
I don't know what it is about software development books, but nearly all the ones I have are huge and heavy but sparsely typeset. Despite being over 500 pages long, it's a pretty quick read. The attention to layout and presentation makes a welcome change from official programming documentation with little imagination given to these areas.
Fantastic explanations
Duckett clearly knows a thing or two about pedagogy because he takes nothing for granted and explains everything clearly. Too often, once we've mastered a complex subject, we lose all memory of the effort we put in to get where we are today. Good teaching is about having empathy with your students and imagining that you don't know the things you know now.
What's out of date
HTML5 semantic elements
These are in the book but in a section at the back (page 432). While a new practice when the
book was first published, it's now well-established and essential for keeping your code structured,
clean and accessible. A modern web page should use tags like these as standard, not as an extra: <header>, <nav>, <main>, <article>, <section>, <aside> and <footer>.
Flash player
Adobe Flash Player was a platform that enabled websites to play videos, which peaked in popularity around 2005 and 2010, but it is now officially dead(opens in a new tab).
It has been superseded by the HTML <video> element and other video-hosting platforms, such as YouTube & Vimeo, that allow you to embed videos on a web page easily without hosting huge files and worrying about encoding.
Image formats
JPEG and PNG images are now being replaced on the web with WebP and AVIF. These file types offer better compression, which enables you to reduce the file size dramatically without losing too much quality. This, in turn, will make your sites load faster. WebP was developed by Google and currently has better browser support than AVIF.
CSS blink
Sadly, this incredibly annoying feature has depreciated. Homer Simpson's website(opens in a new tab) could have used it to great effect.
960.gs
This CSS framework, referenced frequently throughout the book, allowed developers to use a grid layout system easily before CSS3 was widely supported. It was trendy in the early 2010s before features like Grid and Flexbox were introduced.
What's missing
CSS Grid & Flexbox
These powerful features only emerged when the book was published, negating the need for many hacky workarounds, such as using float for layout and inline-block for horizontal alignment.
Responsive Design Enhancements
Media Queries
The introduction of more sophisticated media queries, with features like orientation and resolution detection, gives us even more fine-grained control over building responsive designs across various devices.
Viewport Units (vh, vw, vmin, vmax):
Relative to the viewport size, these units simplified the creation of responsive layouts that scale proportionally with screen dimensions.
Variables (Custom Properties)
CSS Variables: Native variables in CSS allow you to define reusable values, making your stylesheets more dynamic and maintainable. This reduces repetition and eases style updates.
- Animations and Transitions
- CSS Transitions: Smoothly transition property changes over a set duration, creating simple animations on hover or other interactions without JavaScript.
- CSS Animations: More powerful control over animations with
@keyframes, allowing you to define complex, multi-step animation sequences directly within your stylesheets.
- Other notable CSS updates
- Calc Function: Allows calculations within CSS (e.g.,
width: calc(100% - 20px);for dynamic sizing). - Shapes: Features for creating basic geometric shapes (
circle,polygon) with CSS. - Filters and Blend Modes: Graphical effects like
blur,grayscale,drop-shadow, and blend modes manipulate image and element appearance.
- Calc Function: Allows calculations within CSS (e.g.,
Overall, this is well worth reading but not much use as a reference book. And don't bother buying a brand new copy - I bought mine on Amazon for £19.99, but there are copies in excellent condition on eBay for less than £3. It's also online as a PDF(opens in a new tab).
I have since come across a much better book: HTML, CSS & JavaScript in Easy Steps(opens in a new tab) by Mike McGrath. Updated in 2020, this is a similar (weirdly almost identical in size and weight to the Duckett book) but much more up-to-date whistle-stop tour of the languages of web development.
