Book review: Web Design Playground

As a backend developer, I have to do some glue code on the frontend from time to time. If so, then why can’t you do some minor frontend fixes? And I do, if I’m asked to, but believe me, it’s not my comfort zone.

That was one point. Another one is that I also permanently run into a trap of being not self-sustainable when it goes to developing frontend code in my own personal projects. When you work on something bigger irregularly, in your free time (which is actually very limited, as I’m a father), at late nights or very early mornings, then it’s not comfortable to cooperate with another developer - and I’m thinking about both sides.

These two reasons pushed me on my way to level up to become a fullstack developer. I decided that it’s highest time to sort out the frontend thing. I already know HTML5 attributes, some CSS properties, basic JavaScript programming. I’ve worked with jQuery and AngularJS (you can find proofs of that in my later blog posts). But all this time, being mostly focused on backend (to which my heart belongs, I’m sure of that!), frontend always seemed a little bit like a patchwork…

I wanted to start from the very beginnings. I really want to know fundamentals (I’m thinking about HTML5, CSS, JavaScript) inside-out. Then, it’ll be time to learn some frameworks which streamlines development (I’ll probably pick up Vue.js as having the opinion of being both elegant and pleasure to work with).

But first things first! And the first thing in this context is HTML5 and CSS. I started to look out for a resource, which will make learning as effective as possible. I still prefer a book rather than a video, at least when it goes to topics which are wide and at the same time I’d like to learn them in-depth. After a short while spent on research, I’ve chosen Web Design Playground by Paul McFedries, published by Manning. Manning is definitely among my favourite publishers; actually, it holds silver position, just after O’Railly.

Why Web Design Playground? There were a few reasons, but most important are: positive feedback left by those who read it, quite recent release (19th of May 2019, roughly a year ago) and last but not least, the accompanying website which contains live examples, exercises, helpful tools (e.g. color scheme calculator, HTML5 entity browser) and additional tutorials (more on that later). You can check it out for yourself at https://webdesignplayground.io/ as access is not limited in any way.

This 450 pages long book goes through nearly every topic of HTML5 and CSS plus some handy web design additions. The content is divided into four parts, which covers (1) basic HTML5 tags, (2) media, basic CSS properties, CSS box model, (3) layouts, responsiveness, Flexbox and (4) design stuff like typography, colors etc. Each part ends with a bigger practical project, which puts together all you’ve learned so far. These projects are: personal website, product landing page, photo gallery and online portfolio.

One of the key differentiators of this book compared to other technical books is it’s design - it’s gorgeous! You look at those beautifully crafted pages and it’s hard not to notice that this book is about design, not the syntax. It’s really a pleasure to read it on Retina display ;)

One of the hardest things in my (side)carrer as a trainer at coding bootcamps, is introducing programming concepts and language syntax in such order, that trainees don’t miss anything and at the same time they build on top of what they have already learned. Of course, Java and backend in general is much more complex than HTML5/CSS, but while reading this book, I was really impressed with the “knowledge flow”.

If you’re starting from the same place as I did, that is you know most of the HTML tags and quite a lot of CSS properties, then you’ll mostly learn from the third part of the book (it starts right in the half of the book). But I still strongly recommend you to read the previous two parts too, because, as I already said, the book is about the design, not semantics, and you could otherwise miss quite a lot of design knowledge. If you’d like to skip, I’d go for the last part, as design stuff is more relevant to web designer then frontend developer.

When it goes to the projects, these are fine, but not overachieving; in my opinion landing page is the most comprehensive one. I especially like the standardized way of building a webpage as proposed by the author. This algorithm goes roughly as follows:

1. Sketch out the page you want to build using pen and paper.
2. Choose typefaces and color scheme.
3. Build the initial page structure, i.e. using HTML tags only.
4. Provide CSS for each section of the page, one by one.

The book is packed with tips and tricks as well as best practices. The most important thing is that the author manages to keep those condensed but at the same time provides enough explanation to use them with confidence. A good example of such style is when the author compares different image formats with each other, giving us a short overview of each and when to use which one. The information takes about a single page of space, which is fairly nice practical knowledge gained to words read ratio!

You can have a taste of how author approaches teaching and how well online editor plays out, by going through one of the lessons, e.g. the one about CSS Grid. It’s rather special, as this is a whole tutorial on the topic, rather than standard “Play” series exercise, but this only makes it more valuable in the context of trying out what the author has to offer.

OK, so is this book perfect? No, it’s not. Actually, the biggest flaw of this book is not enough emphasis put on mobile-first design. Although the author advices to start with mobile design and “scale up” towards bigger screens (which indeed is the essence of mobile-first approach), I don’t feel comfortable with the topic after reading the book. Don’t get me wrong: there is a lot of information on responsive web design, but in my opinion there should be even more, given the growing market share of mobile Internet users. For example, I’d love to see the final project enhanced built in mobile-first manner, while in reality this possibility is merely mentioned by the author.

To sum it up, in my opinion Web Design Playground by Paul McFedries is a comprehensive guide on HTML5, CSS and web design, useful for both the first timers and the people who don’t fell comfortable with the topic yet. Interactive playground and nice layout - not only pleasing to the eye but primarily helpful in organizing the content - are huge pluses.