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

May 6 Last Year

(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.

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


Resources

  • 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
      FitVid

      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
Thanks for your time; please come back soon. Email me here: javascriptissexy at gmail email, or use the contact form.

70 Comments

  1. Phan Thanh

    Great!

    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!

    • 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?

    • 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.

  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

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

    • 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

    Hello,

    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.

    • 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. This is a great resource for the Responsive Design Knowledge Hub! Check it out here: http://goo.gl/6TOxIp
    Thanks!

  23. prakash singh

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

  24. I’m really enjoying the theme/design of your site.
    Do you ever run into any browser compatibility issues?

    A small number of my blog audience have complained about
    my blog not working correctly in Explorer but looks great in Chrome.
    Do you have any advice to help fix this issue?

  25. 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 :-)

  26. 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?

  27. Thanks for finally writing aƄߋut >Leaqrn HTML5, CSS3,
    andd Responsive WebSite Design іn Onne Ԍo | JavaScript
    іs Sexy <Loved it!

  28. Chu

    However, sometimes these job portals do not suffice to your exact requirements.
    In creation of Website, two mainn aspects are involved
    - Website Design and Website Development, wherein Web Development is a
    broader term used for the work involved in Developing a Website by
    Web Developers London. Get the proposals from the four
    or five companies that yyou have shortlisted.

  29. Hello, I believe your blog might be having internet browser compatibility problems.
    Whenever I look at your blog in Safari, it looks fine however, if opening in IE, it’s
    got some overlapping issues. I merely wanted to give you
    a quick heads up! Besides that, excellent website!

  30. Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam feedback? If so how do you stop it, any plugin or anything you can advise? I get so much lately it’s driving me crazy so any help is very much appreciated.

  31. This is an espresso thgat is not intense and very diluted.

    The smaller thhe grind size, the more surface area there is and over extraction is a big possibility.
    Housewives fell in love with these new coffee makers because boiling over accidents became
    a thing of the past.

  32. Chi

    I know this if off topic but I’m looking into starting my own weblog and
    was wondering what aall is required to get
    setup? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web smart so I’m not 100% positive. Any tips or advice woould be greatly appreciated.
    Cheers

  33. Thanks for sharing your thoughts on best under eye anti wrinkle cream.
    Regards

  34. A fascinating discussion is definitely worth comment.

    There’s no doubt that that you ought to publish more on this topic, it might not be a taboo
    matter but usually people do not discus such issues. To the next!
    Best wishes!!

  35. What a stuff of un-ambiguity and preserveness of precious experience on the topic of unexpected feelings.

  36. It’s impressive that you are getting ideas from this article as well as from our argument made here.

  37. I’m truly enjoying the design and layout of your site. It’s
    a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did you hire out
    a designer to create your theme? Great work!

  38. That is very attention-grabbing, You’re a very skilled blogger. I’ve joined your rss feed and look ahead to in quest of more of your excellent post. Also, I’ve shared your website in my social networks

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. Frontend Development | Experiencias Alfredo Bravo Cuero
  10. And now a little something for the fellow Front-End-‘ers’ out there…

Leave a Comment