1621Days

1621 days since this post was last revised. Specific details are likely out of date.

I’d like to tell you about my first book. It’s called ‘Responsive web design with HTML5 & CSS3‘. You can order it now as eBook, Kindle, or good ol’ hardcopy. Links for purchasing at the end of the post…

Since publication in April 2012, a few of the syntaxes for CSS level 3 gradients and the like have changed. Subsequently a couple of the code examples in the book no longer work in every browser. If you are working through and hit an issue here please email me or comment on this thread and I will provide any clarification needed. Thanks.

Now, if you can only buy one book on Responsive web design, buy Ethan Marcotte’s seminal masterpiece, called ‘Responsive web design‘. It’s an absolute cracker and as he’s the 10th Dan grand-master of ‘Responsive-jutsu’ – that should be your first purchase.

However, if you can stomach another, I’ll explain a little about my offering. If you’ve yet to get fully acquainted with Responsive web design or HTML5 and CSS3 I wrote this book to sit on your desk with you. So if you can’t remember the syntax for nth-child selectors, or the name of that plugin to make iFrame videos responsive or how to make your form field bring up the url entry tools on an iPad, you can just peek in and find the answers.

Responsive web design with HTML5 & CSS3

In fact, I’m quite selfish – the book contains pretty much everything I, as a front-end developer, need to remember when I’m building websites – but I hope you’ll find it useful too.

Here’s the Chapter summary:

Chapter 1, Getting Started with HTML5, CSS3, and Responsive Web Design, defines what responsive web design is, provides examples of responsive designs, and highlights the benefits and economies of using HTML5 and CSS3.
Note: some examples show thinkvitamin.com – sadly since publication, that site has now changed to ‘treehouse’ but the images show what you need to know.

Code file: PSD basis for design: RWDHTML5CSS3_ATWI_PSD

Chapter 2, Media Queries: Supporting Differing Viewports, explains what media queries are, how to write them, and how they can be applied to any design to adapt the CSS styles for a device’s capabilities.

Code file: RWDHTML5CSS3_Chapter2

Chapter 3, Embracing Fluid Layouts, explains the benefits of a fluid layout and shows how to easily convert a current fixed-width design to a fluid layout or use a CSS framework to rapidly prototype a responsive design.

Code file: RWDHTML5CSS3_Chapter3

Chapter 4, HTML5 for Responsive Designs, explores the many benefits of coding with HTML5 (leaner code, semantic elements, offline caching, and WAI-ARIA for assistive technologies).
Preface

Code file: RWDHTML5CSS3_Chapter4

Chapter 5, CSS3: Selectors, Typography and, Color Modes, demonstrates the power of CSS3 selectors, allowing you to target and transform anything with ease. We also use CSS3 @font-face rules to create beautiful web typography and explain new CSS3 color modes such as RGB(A) and HSL(A).

Code file: RWDHTML5CSS3_Chapter5

Chapter 6, Stunning Aesthetics with CSS3, shows how to create text shadows, box shadows, and gradients with pure CSS3. We also cover how to add multiple background images and create icons with a font.

Code file: RWDHTML5CSS3_Chapter6

Chapter 7, CSS3 Transitions, Transformations, and Animations, covers how to create, animate, and transform on-screen elements with nothing more than CSS3.

Code file: RWDHTML5CSS3_Chapter7

Chapter 8, Conquer Forms with HTML5 and CSS3, illustrates how to implement cross-browser form techniques that work on everything from the latest smart phones to desktop browsers.

Code file: RWDHTML5CSS3_Chapter8

Chapter 9, Solving Cross-browser Responsive Challenges, explains how to make old Internet Explorer versions responsive, adapt a set of links to a menu on mobile devices, serve different content for high-resolution displays, and conditionally load assets with Modernizr.

Code file: RWDHTML5CSS3_Chapter9

Available now!
To get your hands on it I’d encourage you to order the e-book or paperback direct from Packt (plus some money goes to the publisher and me that way!). Alternatively, you can order it from Amazon and Barnes & Noble. If you’re in the UK, you can also get it at Amazon UK. I’d really like to know what you think of it! If you have read it, drop me a comment below…

Ben Frain Developer, Author: 'Enduring CSS', 'Responsive Web Design with HTML5 & CSS3'.