Web Design Playground
Author: Paul McFedries
Review created: 2019-06-18
Web Design Playground is an excellent book. It is one of the best non-fiction books I've ever read. If you are into learning how to design web pages using HTML5 and CSS3 that is.
The book is about the design of webpages. It will teach you about basic HTML tags but it does not contain an exhaustive list of such elements (e.g. forms are not covered). Instead its focus in on how to build web pages that looks good on as many devices as possible. You will learn how to implement different kinds of designs in a number of different ways.
The book is organized into four parts:
- Getting Started with HTML and CSS
- Working with Images and Styles
- Laying Out a Web Page
- Making Your Web Pages Shine
Every part is divided into several chapters where each chapter most often contains information about both HTML, CSS and web design. The final chapter of each part describes how to implement a small project e.g. creating a personal home page, a portfolio page or a photo gallery.
The first part teaches the reader about basic HTML and CSS and describes how to create a simple webpage. Each of the following parts adds some more concepts and details to the stuff from the previous parts.
Some common webpage layouts are described in the book e.g. the holy grail layout, hero image layout and five boxes layout. How to implement the holy grail layout is described in at least three different ways, which is really nice as you then can compare the different ways and choose the one that you like the most (my favourite is the way that uses flexbox).
Web Design Playground makes no claim to go through all HTML5 elements or all CSS features. It concentrates on those elements and CSS properties that are most useful for creating a visually appealing design. It also stresses the usage of HTML5 semantic page elements: header, nav, main, article, aside, section and footer. After reading the book (or rather while reading it), I rewrote much of the HTML code for this site to use the semantic HTML5 elements.
Regarding CSS, the book advocates using the flexbox model. I must say that I was quite glad when reading about the flex box model (I'd not heared about it before, so much of a web developer am I...) as it reminds me about the old GridBagLayout from my Swing-coding days.
The layout of the book is by far the best of any non-fiction book that I've ever read. Every page is colourful and different fonts (and colours) are used for headings, sidebars, special sections and so on. Note that just the right number of colours is used and that the colours fit together very well. It is easy to tell that the author is a design expert.
One of the main strengths of the book is its companion website. In it much of the most important content of the book is summarized and the examples in the book can be tried out directly in the browser. I.e. the HTML and CSS of an example can be entered into the webpage and the result can then be rendered by the push of a button. Really neat!
The webpage also contains a fairly large number of exercises that can be used to further ones understanding of the topics of the book. It also contains a number of useful tools that can come in handy when designing a webpage. Examples of such tools are a colour chooser by which complementary colours can be selected by entering a single colour and a HTML5 entity browser by which character entities can be search for by entering some keyword (e.g 'triangle'). All in all there are six of these tools, all very useful.
I learned a lot by reading this book, and it feels that my feeble effort of creating my own website has at least been improved somewhat by what I've learned. At least the code behind the site has been vastly improved regardless if it shows or not. I'm afraid that improving my design skills beyond the level of novice is beyond all books not matter how good :)
It was fun to read Web Design Playground! The pages just flies by and suddenly you're finished. I ordered both the printed version and the electronic version from Manning. The books was such an easy read that I'd finished reading the electronic version almost a week before I received the printed book!
Summary: if you're at least a little bit interested in designing web pages and not already an expert: buy this book! If you're an expert: by this book anyway. You could at least admire the layout of the book itself.