You need to sign in or sign up before continuing.
Scan barcode
A review by beaconatnight
Web Design Playground: HTML & CSS the Interactive Way by Paul McFedries
5.0
Web Design Playground didn't immediately convince me. On first sight the defining feature with the online platform felt gimmicky. I have to admit, I was also wary of the author when I read about the output of this textbook-producing machine and some of the very mundane topics he covers. But trust me, this is a stellar work in both design and theory.
Similar to Jon Duckett's HTML and CSS: Design and Build Websites, the book itself is beautifully designed. There is significantly more text than in this older work, but everything is very orderly with examples that combine visual result, HTML, and CSS pleasantly separated by contrasting colors and sections. Most sections open with surprisingly stimulating quotes from web-design professionals, essayists, artists, and other writers. It's really the kind of book that would get you excited for the topic.
Before I go more into the substance, let me further harp on the presentation. The prose is written in this generally amusing and encouraging mentor-prose: "You know more than enough to ace this assignment, and I'll be building my own (rather silly, as you'll see) landing page right alongside you. If you get stuck, I (or, at least, my code) will be right there with you to help or give you a nudge in the right direction. Let's get started!" It's a bit silly, but it wasn't lost on me.
The author also goes the extra mile to make the examples fun and exciting. For instance, there is the chapter-long project of a landing page about a fictional novel, The Web Designer, about a female heroine in New York whose adventures somehow involve the coding in HTML and CSS. Again, it's silly, of course, but it's original enough to keep the reader engaged. Unlike the often dull projects of other text books.
The theory is very well explained and gradually builds your web development and design skills. It doesn't take long before the reader is introduced to exciting patterns and how to implement them using CSS rules. The topics are reasonably ordered so that the very basics are followed by the kind of things many would-be developers and designers would learn how to do. So, after learning a bit about structure and typeface, you learn about images and audio/video or how to place element on your web page.
I've said that you learn a bit about structure and typeface, but I was pleased to find that these topics are taken up again in later chapters and with much more detail. I was especially amazed by Chapter 18, "Enhancing Page Text with Typography", which introduces the reader to concepts to describe and recognize the differences between various fonts beyond the family traits of sans-serif, serif, and monospaced. Knowing about ascender, descender, baseline, line height, and x-height is of particular importance when you try to decide on a font for smaller screens (like smartphones). For a more hands-on approach, the author also offers straight-forward recommendations of particular fonts that go well together.
Talking of responsiveness, the textbook includes two chapters dedicated to this often intimidating topic. It strongly advises against the use of fixed-width layouts (probably a favorite among beginners) and teaches about numerous alternative approaches. These include liquid layouts, flexible layouts, adoptive layouts, and proposes the general mobile-first approach. For each it conveys coding-based ideas and also provides some general settings to always apply.
Here as well as on many other topics the author warns against common pitfalls. For instance, it explains how to prevent containers from collapsing when they only contain floating elements (one reason why under normal circumstances you should always use flexbox layouts instead). On almost every page there is helpful best-practice advice to make you more confident in your ability to apply concepts like professionals do. These techniques and methods of best practices are later reapplied to confirm their importance and general usability beyond what you might have initially thought.
Many examples are annotated with sections that point to things to note. So it acknowledges even the more obvious aspects, which might not be too obvious to you – especially if you are not paying much attention while quickly browsing over the code with your eyes (and without much thinking). For each larger topic there is background information, like file formats and their proper uses, units of measurement in CSS, resolutions of displays, basic concepts of typography, color theory (complementary, analogous, triadic, split complementary), grid systems, and more. Principles everyone should have a basic understanding of.
The accompanying website lets you try out code and immediately see its effect. The idea is to play around to get a genuine feel for how theory works in practice. The tool offers much more, though. It's structured according to chapters and often steam-lined so to bring home important points by solving concrete problems. To focus on what's important, the usual boilerplate is hidden. Finally, the website includes additional features, like tools for picking matching colors or code to support older browsers.
Similarly, there are concise guidelines on how to accomplish more practical prerequirements. For instance, you will often have to optimize images before using them on a web page, a topic explicitly addressed in a subsection. There is also an appendix on how to get your page online so that it's there for all to see (which you might be eager to do). Also more mundane topics, like choosing a text editor, are covered.
At many places the author offers what seems like a reasonable assessment of the state of the art. For instance, when it comes to the page layout, it's said that the use of float and inline-blocks will fade-out (in favor of flexboxes) and eventually only be encountered in legacy code. I think hints like this are important as otherwise there is the real danger that you would perceive style properties as somewhat being on-a-par or as them all having their own individual raison d'être (after all, why else would they still be there). Well, maybe they don't. The explanations are not just dogmatic or arcane, the author always offers the rationale behind the recommendations.
By the end you feel as if you know everything there is to web design. Before the author expels the aspirations of grandeur. I think it speaks to the quality of a textbook that it makes you feel you can do things without ever being overwhelming. There is a price, though. In the real world, the cascading aspect of CSS is significantly more important than the isolating approach followed in the book so far may lead you to believe. It might only be in Chapter 19 that you fully realize that the rules in your stylesheets are often conflicting and that you need to understand how to make use of this to your advantage. You need to have a firm grasp of inheritance and specificity to write professional web design stylings.
So, the book leaves you with a firm grasp as to where to go next and what it really takes to master the art of web design. So when the conclusion releases you to the real world with necessary honesty, it remains as encouraging as it had been throughout. Web Design Playground was among the best textbooks I've read.
Rating: 5/5
Similar to Jon Duckett's HTML and CSS: Design and Build Websites, the book itself is beautifully designed. There is significantly more text than in this older work, but everything is very orderly with examples that combine visual result, HTML, and CSS pleasantly separated by contrasting colors and sections. Most sections open with surprisingly stimulating quotes from web-design professionals, essayists, artists, and other writers. It's really the kind of book that would get you excited for the topic.
Before I go more into the substance, let me further harp on the presentation. The prose is written in this generally amusing and encouraging mentor-prose: "You know more than enough to ace this assignment, and I'll be building my own (rather silly, as you'll see) landing page right alongside you. If you get stuck, I (or, at least, my code) will be right there with you to help or give you a nudge in the right direction. Let's get started!" It's a bit silly, but it wasn't lost on me.
The author also goes the extra mile to make the examples fun and exciting. For instance, there is the chapter-long project of a landing page about a fictional novel, The Web Designer, about a female heroine in New York whose adventures somehow involve the coding in HTML and CSS. Again, it's silly, of course, but it's original enough to keep the reader engaged. Unlike the often dull projects of other text books.
The theory is very well explained and gradually builds your web development and design skills. It doesn't take long before the reader is introduced to exciting patterns and how to implement them using CSS rules. The topics are reasonably ordered so that the very basics are followed by the kind of things many would-be developers and designers would learn how to do. So, after learning a bit about structure and typeface, you learn about images and audio/video or how to place element on your web page.
I've said that you learn a bit about structure and typeface, but I was pleased to find that these topics are taken up again in later chapters and with much more detail. I was especially amazed by Chapter 18, "Enhancing Page Text with Typography", which introduces the reader to concepts to describe and recognize the differences between various fonts beyond the family traits of sans-serif, serif, and monospaced. Knowing about ascender, descender, baseline, line height, and x-height is of particular importance when you try to decide on a font for smaller screens (like smartphones). For a more hands-on approach, the author also offers straight-forward recommendations of particular fonts that go well together.
Talking of responsiveness, the textbook includes two chapters dedicated to this often intimidating topic. It strongly advises against the use of fixed-width layouts (probably a favorite among beginners) and teaches about numerous alternative approaches. These include liquid layouts, flexible layouts, adoptive layouts, and proposes the general mobile-first approach. For each it conveys coding-based ideas and also provides some general settings to always apply.
Here as well as on many other topics the author warns against common pitfalls. For instance, it explains how to prevent containers from collapsing when they only contain floating elements (one reason why under normal circumstances you should always use flexbox layouts instead). On almost every page there is helpful best-practice advice to make you more confident in your ability to apply concepts like professionals do. These techniques and methods of best practices are later reapplied to confirm their importance and general usability beyond what you might have initially thought.
Many examples are annotated with sections that point to things to note. So it acknowledges even the more obvious aspects, which might not be too obvious to you – especially if you are not paying much attention while quickly browsing over the code with your eyes (and without much thinking). For each larger topic there is background information, like file formats and their proper uses, units of measurement in CSS, resolutions of displays, basic concepts of typography, color theory (complementary, analogous, triadic, split complementary), grid systems, and more. Principles everyone should have a basic understanding of.
The accompanying website lets you try out code and immediately see its effect. The idea is to play around to get a genuine feel for how theory works in practice. The tool offers much more, though. It's structured according to chapters and often steam-lined so to bring home important points by solving concrete problems. To focus on what's important, the usual boilerplate is hidden. Finally, the website includes additional features, like tools for picking matching colors or code to support older browsers.
Similarly, there are concise guidelines on how to accomplish more practical prerequirements. For instance, you will often have to optimize images before using them on a web page, a topic explicitly addressed in a subsection. There is also an appendix on how to get your page online so that it's there for all to see (which you might be eager to do). Also more mundane topics, like choosing a text editor, are covered.
At many places the author offers what seems like a reasonable assessment of the state of the art. For instance, when it comes to the page layout, it's said that the use of float and inline-blocks will fade-out (in favor of flexboxes) and eventually only be encountered in legacy code. I think hints like this are important as otherwise there is the real danger that you would perceive style properties as somewhat being on-a-par or as them all having their own individual raison d'être (after all, why else would they still be there). Well, maybe they don't. The explanations are not just dogmatic or arcane, the author always offers the rationale behind the recommendations.
By the end you feel as if you know everything there is to web design. Before the author expels the aspirations of grandeur. I think it speaks to the quality of a textbook that it makes you feel you can do things without ever being overwhelming. There is a price, though. In the real world, the cascading aspect of CSS is significantly more important than the isolating approach followed in the book so far may lead you to believe. It might only be in Chapter 19 that you fully realize that the rules in your stylesheets are often conflicting and that you need to understand how to make use of this to your advantage. You need to have a firm grasp of inheritance and specificity to write professional web design stylings.
So, the book leaves you with a firm grasp as to where to go next and what it really takes to master the art of web design. So when the conclusion releases you to the real world with necessary honesty, it remains as encouraging as it had been throughout. Web Design Playground was among the best textbooks I've read.
Rating: 5/5