Learn HTML5, CSS3, and Responsive WebSite Design in One Go

»may. 6 2013 72

(You will also learn HTML5 Boilerplate, Modernizr, and Twitter Bootstrap 3.0 responsive website layout)

Prerequisite: Familiarity with basic HTML and CSS
Duration: 2 – 3 days (about 18 hours)

We have learned quite a bit of JavaScript, but we must take a break from JavaScript briefly and learn HTML5 and CSS3, because we need both, along with JavaScript of course, to build modern web applications and websites.

Become an Elite/Highly Paid Specialized Software Engineer (Frontend, Fullstack, etc.)

Within 8–10 Months, Earn MORE than the Avg. New CS Graduate Earns.

New Prices (Monthly Subscription):
Basic: $250/month, Pro: $350/month, Premium: $600/month

By the founder of JavaScriptIsSexy

Both CSS3 and HTML5 are just about fully supported in all modern browsers, and we there are techniques in place to patch old browsers that lack support. So there is no disadvantage to using CSS3 and HTML5 today. The opposite is true, however: there are many painful, frustrating disadvantages with forgoing HTML5 and CSS3.

You may already “know” a bit of HTML5 and a touch of CSS3 (or perhaps you probably know enough old-school HTML and CSS), and with this knowledge, you might have thought you needn’t learn HTML5 and CSS3 fully.

The crux of the matter is that after you complete this course, you will make faster, more user friendly, highly adaptive websites and web applications. And you will learn a number of other very exciting modern web development techniques.

Responsive Web Design is becoming increasingly essential (we are probably a few months away from responsive being mandatory) with the ubiquity of the myriad screen sizes available today. As a result, modern web developers are expected to understand and implement responsive web designs.

What You Will Learn?

  • HTML5 Core (HTML5 semantics, video, and audio; and later, Advanced HTML5 APIs)
  • Responsive Web Design (create fluid, responsive layouts from scratch and from static, pixel based layouts; responsive images, icons, and videos; and more)
  • Tools and Strategies for Designing the user interface and static comps for responsive websites
  • HTML5 Boilerplate, Modernizr, and Initializr
  • Twitter Bootstrap 3.0 Responsive Layout and Best Practices


  • Get the following book (it is a very short read):
    Responsive Web Design with HTML5 and CSS3. As with the other books I have recommended, in my humble opinion, this book is the best of the lot (I have done the research), so get it knowing you will get your money’s worth.

    Note that this book does not cover all the materials below, so you have to read the sections below in addition to the outlined chapters in the book.

    In the rest of this article, I will henceforth refer to this book as “RWD with HTML5 and CSS3.”

  • Downloads (including JS Libraries, module managers, and git): See the relevant sections below.

Day 1

1. Introduction and Overview

  • Overview of HTML5, CSS3, and Responsive Web Design

    It is important to know that just about all the often-used HTML5 features and most CSS3 features are supported by all modern browsers, and developers use polyfills to patch old browsers that lack the HTML5 and CSS3 features we need to use. As a result, HTML5 and CSS3 are in widespread use on modern websites and web applications.

    HTML5 is an enormous standard with an extraordinary list of features, and there are many features and standards that will not be standardized by W3C and not fully implemented in most modern browsers for years to come. However, today there are many HTML5 features that developers are using to develop modern web applications.

    We will conceptually divide HTML5 into two parts: HTML5 Core (the semantic elements and video and audio— the HTML markup you see on the page), and HTML5 Web Application API (features such as canvas, web sockets, server-sent events, and more—mostly the JavaScript-based aspects of the HTML5 API). In this post, we will focus on the former, and in part 2 (a follow-up post), we will focus on the latter. We will use HTML5 to markup our web page and add video and audio.

    We can use most CSS3 features today, because they are supported by all the modern browsers (IE9 is not a full modern browser, yet it still supports much of CSS3). And for browsers that don’t support the wildly adopted CSS3 features, we will use a JavaScript library like Modernizr to detect the missing parts, and we will use polyfills to patch the browsers accordingly, as I noted earlier. We use CSS3 for styling our website to add specialized CSS rules for detecting screens via the virtuous CSS media queries feature.

    Responsive Web Design is the notion that modern websites should adapt to, and display optimally on any, indeed all, screen sizes. This is accomplished by fluid layouts using formulaic (a specific formula) percentages for CSS measurement instead of pixels, and using CSS media queries to target different screen sizes (viewports).

    There are generally two principal ways for developing websites to specifically target multiple devices: develop separate websites for mobile and desktop, or develop responsive websites that adapt to all screen sizes. We will only discuss the latter, since the former is a costlier alternative that has some specific use cases depending on the target audience and the purpose of the website. Here is a brief article on Responsive website design versus Separate websites.

    Most online resources cover only the development of responsive website design, but we will also touch on, though briefly, the UI design and the static comp design, in addition to the development.

    Modernizr is a JavaScript library that detects which CSS3 and HTML5 features are not supported in browsers, and it facilitates adding targeted CSS and JavaScript for browsers lacking core HTML5 and CSS3 feature support. It also provides (inject) semantic HTML5 elements into the page, for old browsers that natively lack HTML5 support.

    Lastly, HTML5 Boilerplate is simply a template (with HTML, CSS, and a bit of JavaScript, among a few other options like .htaccess and robots.txt) that provides some standard, best practice functionality for developing modern websites and web applications.

    We use Modernizr to add HTML5 and CSS3 support in old browsers, and HTML5 Boilerplate to provide a bevy of essential web development best practices.

  • Read Chapter 1 of Responsive Web Design with HTML5.

2. Design Strategies and Tools for Responsive UI Design and Layout

Before we read chapter 2 in the book and start developing a responsive website with HTML and CSS, let’s briefly touch on UI design tools and strategies for responsive websites.

If you are not a designer, you should still read this section.

Within the last few months there have been a half dozen or more sophisticated UI tools for creating responsive UI layout, wireframes, and even complete HTML/CSS builds. Generally, designers today can follow the conventional route and design static comps in Photoshop, or they can design interactive HTML and CSS interfaces in real time, then export the resulting HTML and CSS code. Either of these methods works today, but over time, as responsive website designs mature, designers and clients will find it too time consuming and costly to design dozens of static comps for numerous pages in different screen sizes using Photoshop, particularly since there is a better alternative.

The two popular methods use today for designing the UI for responsive websites are:

  • Static Comps Design in Photoshop
    You can create the full static design comps in Photoshop and then export the design elements and recreate the design with HTML and CSS—the process we have used for many years. This process will eventually become obsolete because it is becoming counter productive today.

    This it is still the most popular way to design websites, responsive or not. Below are some Photoshop responsive design tools to make designing responsive websites in Photoshop more manageable:

    • Responsive Design Layout Patterns: Here are some examples of responsive design layout patterns that you can consider before you start designing in Photoshop.
    • Rresponsinator: This shows the viewport dimensions for the major mobile devices and desktop computers. Use these dimension along with the Bootstrap grid system to design responsive layouts.
    • This Photoshop Responsive Design template shows 4 designs for 4 separate screen sizes, but it does not have grids.
    • The Photoshop Responsive Design template at the link below uses a grid system, but the designer has rounded the percentage values for the grid system to make the numbers more easy on the eyes and mind. As you will learn in the chapter below, the formula used to calculate fluid, percentage-based layouts results in numbers with lengthy remainders. Here is the link to the design template.
    • FlatUI is a FREE UI kit of PSD templates and HTML/CSS, and it based on the flat design color scheme inspired by Windows 8 UI. I highly recommend this.
    • And there are two great UI frameworks that sell for a few dollars, but worth every penny:
      — The Impressionist UI – User Interface Pack.
      — The Bricks User Interface Framework.
  • Design UI in Real Time with HTML and CSS (the future of designing responsive websites)

    One of the fastest growing patterns for designing responsive web sites is to use of a new genre of tools called “Interface Builders”. These tools are mostly online and they allow you to interactively design responsive interfaces with HTML and CSS live, and you get to output the resulting HTML and CSS, and sometimes even JavaScript, from your designs.

    I use a hybrid of the aforementioned Photoshop static design along with an Interface Builder tool. For example, I would design my overall look and feel for the desktop version of the application (I really should be doing the mobile first bit, but I am yet to transition away from my old habits), and then I use an online InterFace Builder tool to design the full responsive layout with HTML/CSS.

    Some of the best Interface builder tools are listed below. These tools are very similar and I haven’t tried all of them thoroughly enough to make a qualified recommendation, so you have to try them and determine which is best for your needs. They are mostly easy to use.

    Whichever tool you use, make sure you can export the HTML and CSS. Here are the new and exciting Interface Builder tools:

  • 3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries

    • In Chapter 2, which you will read next, the author uses the Columnal CSS Grid system. You should follow along with the book and use the Columnal grid system, so you can acquire the skills and learn the techniques for how to develop a responsive layout from a non-responsive HTML/CSS layout.

      Bonus: I am writing a full Bootstrap 3.0 tutorial, so that you can use a real-world responsive design (mobile first) CSS/HTML framework. You will most likely use (if you aren’t already) Twitter Bootstrap anyway, so it makes sense that you get head start with Bootstrap 3.0 in the context of this article, since are discussing responsive web design.

    • Read chapter 2, “Media Queries: Supporting Differing Viewports” of RWD with HTML5 and CSS3.

      You will learn more about Modernizr in section 7 below and in my Modernizr tutorial I will publish tomorrow.

    • Read chapter 3, “Embracing Fluid Layouts.”
    • More on Fluid Images and Videos
      In chapter 3, you will note that the author discusses an adaptive image technique and a fluid video technique. But since the publication of the book, developers have created some new techniques for fluid images and fluid videos. Here are a few to make note of:
      Fluid Videos:
      Elastic Videos

      Fluid Images:
      Adaptive Images (the technique discussed in the book)
      Clown Car Technique
      Fluid Images by Ethan Marcotte

      In addition, I came across this very useful responsive table technique a few days ago:
      Responsive Data Tables:

    4. Core HTML5 (Semantic Elements, Audio, and Video)

    • Read chapter 4, “HTML5 for Responsive Designs.”

    Day 2

    5. All the CSS3 You Need to Know

    • Read chapters 5, 6, and 7.

    6. Modern Forms with HTML5 and CSS3

    • Read chapter 8, “Conquer Forms with HTML5 and CSS3.”

    7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr

    • Read chapter 9, “Solving Cross-browser Responsive Challenges.”
    • I will publish a post on HTML5 Boilerplate and Modernizr soon.

    8. Twitter Bootstrap 3.0 Responsive Website Layout Tutorial

    I have to complete the Bootstrap tutorial, which keeps growing, but I am taking a little break to complete another project and I will return to the Bootstrap tutorial soon.

    Part 2

    In a follow post, we will learn Advanced HTML5 for Modern Web Application Development.
    The topics will include:

    • Offline Applications and Local Storage
    • Web Workers
    • Canvas
    • History API
    • Server Communication (Web Sockets and Server-Sent Events)
    • Geolocation


  1. Phan Thanh


    Thank you so much Richard :)

  2. Mary Pieroszkiewicz

    Great stuff! THX :]

  3. Wayne

    Regarding your approach to Website builders. You say that you use Photoshop to get a “feel” for the design, then move into one of the online tools to do the mock-up?

    How far do you take the design inside an interface builder? Is the goal to get the site generally how you want, then merely just tidy up the HTML it outputs/integrate with Javascript etc?

    Do you let the interface builder take over 100% of the implementation of your Photoshop design? Or do you use it as a sketchpad/mockup tool before you begin properly with a fresh Boilerplate template?

    – I just want to say that this site has been a fantastic resource for me. I am currently halfway through your Learn Javascript course. Good stuff!

    • Wayne

      Hmm I am unable to edit my post. The third paragraph was meant to replace the two before it, I just forgot to remove them before submitting. Sorry!

    • Richard Bovell (Author)

      Regarding your approach to Website builders. You say that you use Photoshop to get a “feel” for the design, then move into one of the online tools to do the mock-up? How far do you take the design inside an interface builder?

      I have been using DivShot experimentally for this and I can pretty much recreate the design with HTML/CSS in DivShot and even modify it for the mobile layouts.

      Is the goal to get the site generally how you want, then merely just tidy up the HTML it outputs/integrate with Javascript etc?

      Yep, I try to get the full layout and export the HTML and CSS, so I don’t redo the work. It is amazing that you can use these Interface Builder tools to design and layout your site simultaneously.

      Do you let the interface builder take over 100% of the implementation of your Photoshop design? Or do you use it as a sketchpad/mockup tool before you begin properly with a fresh Boilerplate template?

      I am new to this process, so I haven’t done many projects, but experimentally, I have been trying to do the entire layout inside the Interface Builder, and then come back to WebStorm and finish off the layout and the full development.

      I just want to say that this site has been a fantastic resource for me. I am currently halfway through your Learn Javascript course. Good stuff!

      Thank you for the compliment and I am very happy to hear that the site is helpful. Best of luck with your dev/design career.

  4. Nice work, but i want to ask is there a way i can get the book you refered to us in pdf version ?

  5. mike

    I have never left a comment on a website before!!… But your articles have been most helpful thanks bro. especially that on node.js.

  6. Hi Richard, this tutorial is great. But one more thing, i would love it if you can always have a link to ebooks of the paper back books you recommend. Sometimes i prefare the ebooks.. And before i forget your ”by” a Tee thing, is not to be ”Buy” a Tee?

    • Richard Bovell (Author)

      Okay, I will be sure to add the eBooks henceforth. See my comment above for where you can get the eBook version for cheap.

      Thanks very much for the typo tip. That was a horrible mistake by me.

  7. Seriously AMAZING!! GOD BLESS YOU MATE for sharing such a great INFO

  8. Madjia

    I can’t wait for part 2.

  9. Thanks for share this.It saves my time :)

  10. Responsive Web design is in its initial phases, as Web developers is search for solutions as they serve content for big screens and portable devices alike.

  11. Wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read atleast 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i’m already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards,Web Design and web solutions in Hyderabad

  12. Great information about responsive web design…

  13. Abhijit Mallik

    Very useful topic you have covered.I really impressed your hard work to describe the complex stuffs in a simpler way.Good job.

  14. bindi bhatt

    i want to learn html5,css3 with its code not the theory cn any1 suggest the site plzz….

  15. Thanks! JavaScript course is also amazing.

  16. Designing a website for just one screen size is like building a website that will work in only one web browser.

  17. Hey,

    Really like the post, and I’m about halfway through following the textbook.

    I’m really looking forward to the Bootstrap 3 tutorial, any more details on when that will be released?

    Thanks so much.

    • Richard Bovell (Author)

      Hi Louis,

      I completed about 60% – 70% of the Bootstrap tutorial, but I got distracted with some interesting articles. I will try to finish off sometime soon.

  18. Joshua

    Just wondering if It is recommended to complete this before I even start doing any JavaScript programming? I’ve been learning HTML5 & CSS3 on alternative sites but trying to use as many resources as I can… Thanks again and the beginners JS tutorial looks amazing. Can’t wait to start it.

  19. Ala

    Is there any possibility that you will finish your articles in near future?
    It looks you start and not finish your articles.

    • Richard Bovell (Author)

      I have to admit that you are correct that I did not complete part 2 of at least 2 articles, Ala. This article and the Handlebars one.

      The reason is because I am extremely busy working on the moderndevelopertoolkit.com project, which will actually have some of the stuff that are missing from part 2 of the aforementioned articles.

      So, even though I have not completed the articles on this blog, I will most likely have the content either in the book I am writing or on moderndevelopertoolkit.

  20. Joe


    Love the articles that you have put up so far, very informative! Was wondering if you had an ETA on the Twitter Bootstrap tutorial?

    Thanks again for all your great work.

    • Richard Bovell (Author)

      I feel bad about not completing the Bootstrap tutorial. I simply got too busy working simultaneously on the Modern Developer Toolkit project and on a book I am writing.

      The bottom line is that the Bootstrap stuff will be in the book. I am sorry about not completing it sooner. I will post a link to a great Bootstrap 3 tutorial later today. I have to go find it. If I don’t post it within a few hours, please remind me :)

  21. Joshua

    What experience level is required to start this guide? I know it says ‘basic understanding’ here and ‘familiarity with creating static sites’ in the book. I have some knowledge of the markup required to create very simple and basics sites… is that enough to progress through this guide? Thanks again.

  22. prakash singh

    i want learn these softwares-html5, css3 ,photoshop template, responsive design, fluid design,

  23. Alisa

    Hello again! I haven’t worked through this tutorial yet but thought I’d let you know you have a typo in the 2nd paragraph, “we there are techniques…”
    What’s really funny is that your website was blocked when I was using the wifi at the mall for possibly being of unsuitable content :-)

  24. Hi therе! Ɗo youu kոow іf they make anyy plugins to safeguard аgainst hackers?
    Ӏ’m kinda paranoiud ɑbout losing everythinɡ
    I’ve worked hard on. Any recommendations?

  25. tommynguyen

    Thanks very much Richard
    I really learn alot from you posts. You are the best man.

  26. I really appreciate for this great post about design in HTML5. It’s amazing post you share with us. Thanks

  27. Viji

    how can i learn these things here?

  28. Robin Clark

    pretty nice blog….

  29. Kos

    Hi! Here’s a new tool – Wamer Sketch (online tool for Front-end Сomponent-based Web development ). Draw your page layout then fill it with various useful components (jQuery UI, bootstrap, other) and add styles, effects, interactions. Also, you can add your components.
    Enjoy! http://wamer.net/sketch/

  30. thanks for sharing it!!

  31. Odat

    Nice. So what about that second post?

    • I think that HTML5 and CSS3 is the future of modern websites look. Mastering these skills can help a webmaster create truly awesome projects with fully responsive and fast loading sites without any additional use of slow loading scripts.

  32. Very informative, thanks for sharing.

    I’m not able to download the zip file. I have tried many times to download however every time it fails.

  33. Nguyet Huynh

    Thank you so much

  34. Excellent post with lot of useful information. I really enjoyed it. So thanks

  35. Without responsibility for different devices it’s so tough to attract visitors. So, I appropriate your effort for this nice topic :)

  36. Thanks for your useful information about HTML5, I’m still learning it!

Trackbacks for this post

  1. Learn HTML5, CSS3, and Responsive WebSite Design in One Go … | Beachdrop
  2. Learn HTML5, CSS3, and Responsive WebSite Design in One Go ... | Dyno Web Design
  3. Learn HTML5, CSS3, and Responsive WebSite Desig...
  4. Learn HTML5, CSS3, and Responsive WebSite Desig...
  5. 16 JavaScript Concepts JavaScript Professionals Must Know Well | JavaScript is Sexy
  6. Learn HTML5, CSS3, and Responsive WebSite Desig...
  7. Frontend Development | 杨明的博客
  8. A huge list of frontend development resources | ifLab
  9. JavaScript Concepts we should know well |
  10. Frontend Development Bookmarks – 热前端
  13. 65+ Online & In person Coding & Hardware Courses & Camps for Kids | TechYaYa

Leave a Reply

Current ye@r *