(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)
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.
Table of Contents
- 1 1. Introduction and Overview
- 2 2. Design Strategies and Tools for Responsive UI Design and Layout
- 3 3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries
- 4 4. Core HTML5 (Semantic Elements, Audio, and Video)
- 5 5. All the CSS3 You Need to Know
- 6 6. Modern Forms with HTML5 and CSS3
- 7 7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr
- 8 8. Twitter Bootstrap 3.0 Responsive Website Layout Tutorial
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.
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.
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.
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)
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:
- Adobe Edge Reflow—preview release (you cannot export HTML/CSS, though you can preview the page in the browser).
- JetStrap: Build Twitter Bootstrap sites interactively.
- 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:
— Elastic Videos
— 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:
- Read chapter 4, “HTML5 for Responsive Designs.”
- Read chapters 5, 6, and 7.
- Read chapter 8, “Conquer Forms with HTML5 and CSS3.”
- Read chapter 9, “Solving Cross-browser Responsive Challenges.”
- I will publish a post on HTML5 Boilerplate and Modernizr soon.
- Offline Applications and Local Storage
- Web Workers
- History API
- Server Communication (Web Sockets and Server-Sent Events)
3. Developing Responsive, Fluid Layout with Percentages and CSS3 Media Queries
4. Core HTML5 (Semantic Elements, Audio, and Video)
5. All the CSS3 You Need to Know
6. Modern Forms with HTML5 and CSS3
7. Cross-browser HTML5 with HTML5 Boilerplate and Modernizr
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.
In a follow post, we will learn Advanced HTML5 for Modern Web Application Development.
The topics will include:
Thank you so much Richard 🙂
You are welcome, Phan. I have a bit more to add to wrap up the Twitter Bootstrap 3.0 tutorial, which I will do late on Thursday.
Thanks a lot, Richard for your great effort and make us educate.
Please keep posting article like these.
Great stuff! THX :]
Pingback: Learn HTML5, CSS3, and Responsive WebSite Design in One Go … | Beachdrop
Pingback: Learn HTML5, CSS3, and Responsive WebSite Design in One Go ... | Dyno Web Design
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?
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?
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!
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.
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.
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.
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.
Nice work, but i want to ask is there a way i can get the book you refered to us in pdf version ?
You can get the eBook version (in epub, pdf, and kindle) at the link below for $20.39 (and probably for less, if they have a coupon, which they do have sometimes):
I have never left a comment on a website before!!… But your articles have been most helpful thanks bro. especially that on node.js.
I love HTML 5 and CSS 3, designers create stunning websites using HTML 5 script, I would like to learn too and I am searching for an easy tutorial for beginners to start with.
HTML 5 and CSS 3 are amazing and each coder should update his knowledge and skills on them.
Pingback: Learn HTML5, CSS3, and Responsive WebSite Desig...
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.
Seriously AMAZING!! GOD BLESS YOU MATE for sharing such a great INFO
I can’t wait for part 2.
Thanks for share this.It saves my time 🙂
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.
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
Pingback: Learn HTML5, CSS3, and Responsive WebSite Desig...
Great information about responsive web design…
Very useful topic you have covered.I really impressed your hard work to describe the complex stuffs in a simpler way.Good job.
Thanks much, Abhijit.
i want to learn html5,css3 with its code not the theory cn any1 suggest the site plzz….
Designing a website for just one screen size is like building a website that will work in only one web browser.
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.
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.
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.
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 🙂
Just wondering if you had been able to find the link for your preferred Bootstrap 3 tutorial?
I had seen a good Bootstrap tutorial on Hacker News, but I didn’t save the link and yesterday, after I saw your message, I went and looked for it. But I couldn’t find it using the Hacker News search.
Nonetheless, I just Googled and I managed to find it:
Good luck. Let me know if was helpful.
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.
Yes, that is definitely enough. You are ready to go and you will do well, so don’t worry, just commit to it and never give up.
Motivational. Thank you again.
Please finish this! 😀
I will, Joshua. I will. I will likely publish it on the Modern Developer Toolkit, which is coming very soon.
Great to hear it. Basically using this site as my bible. Thank you.
It will be a good a idea to study separate videos or books dedicated only to HTML5 and CSS3 too?
Pingback: Learn HTML5, CSS3, and Responsive WebSite Desig...
Pingback: Frontend Development | 杨明的博客
Pingback: A huge list of frontend development resources | ifLab
i want learn these softwares-html5, css3 ,photoshop template, responsive design, fluid design,
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 🙂
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?
Thanks very much Richard
I really learn alot from you posts. You are the best man.
I really appreciate for this great post about design in HTML5. It’s amazing post you share with us. Thanks
how can i learn these things here?
pretty nice blog….
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.
thanks for sharing it!!
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.
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.
Thank you so much
Pingback: Frontend Development Bookmarks – 热前端
Excellent post with lot of useful information. I really enjoyed it. So thanks
Thank you so much for the Information
Pingback: FRONTEND DEVELOPMENT RESOURCES BY GITHUB CONTRIBUTORS – Everyday Tips
Pingback: FRONTEND DEVELOPMENT RESOURCES BY GITHUB CONTRIBUTORS – ElderCity
Without responsibility for different devices it’s so tough to attract visitors. So, I appropriate your effort for this nice topic 🙂
Pingback: 65+ Online & In person Coding & Hardware Courses & Camps for Kids | TechYaYa
Thanks for your useful information about HTML5, I’m still learning it!
Pingback: Frontend Development - Hellbach blog