HTML5 & CSS3 Building Responsive Websites


Build one layout for multiple displays!

In this hands-on HTML5 & CSS3 – Building Responsive Websites training course, you will learn how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. Project Files included!

Length: 4 hrs

This title is available in the
Total Training All-Access library.

Subscribe Now


With HTML5 & CSS3 – Building Responsive Websites, you’ll start with the fundamentals of responsive design, beginning with multiple style sheets, media queries and various expressions.

Next comes the fun part: you’ll be guided through several in-depth chapters that walk you through the responsive design workflow, building HTML structure and CSS formatting for mobile and desktop displays; including tablets, desktop screens, and smartphones.

Veteran instructor Geoff Blake shows you how to plan out your work, handle common issues that arise in a responsive layout, and how to handle various page components between device displays.

Finally, the course closes with additional tricks, advanced techniques, and testing methods to ensure that your layout looks fantastic.
Sample clip

About HTML5 and CSS3


HTML or Hyper Text Mark-up Language is the language used for presenting websites and web content. HTML5 is the latest version, made official by the World Wide Web Consortium in 2014. Having a good grasp of HTML means you’ll be able to create, present and edit a whole variety of content on the web.


CSS (Cascading Style Sheets) essentially ’enhances’ HTML, giving developers and users more control over how pages and content is displayed. It is responsible for creating more visually engaging web pages, applications and interfaces. CSS3 is the latest version, and has many more extended features than previous versions – although it is backwards compatible.

 Welcome (0:48)
 A Look At What We’ll Build (1:35)
2.Responsive Design Fundamentals
 Key Aspects Of Responsive Design (2:43)
 Determining Device Resolutions To Target (4:20)
 Wireframing Responsive Layouts (4:58)
3.The Basics: Multiple Style Sheets & Media Queries
 The Concept Of Using Multiple CSS Files (10:49)
 Media Queries & Multiple Style Sheets (8:57)
 Building Media Queries Into A Single CSS File (7:38)
 Using Media Query Expressions (5:04)
4.Building HTML Structure & CSS For All Screens
 Setting Up The HTML & CSS Files (4:18)
 Getting Started With The Header (7:36)
 Inserting The Main Nav Menu (6:01)
 Inserting The Search Field (6:55)
 Problems With Applying Floats (4:19)
 Integrating Google Fonts API (3:25)
 Building The Hero Section Structure (4:25)
 Formatting The Hero Section (9:04)
 Inserting & Formatting A Call To Action Button (9:50)
 Building The Features Section, Part One (5:46)
 Building The Features Section, Part Two (4:56)
 Inserting The Organize Section (8:18)
 Building The Share Section (5:15)
 Building The Call To Action Area (6:36)
 Inserting And Formatting The Footer (3:47)
 Finishing Touches For The High Resolution Layout (4:06)
5.Building The Tablet Layout
 Setting Up The Medium Resolution CSS & Testing The Media Query (7:01)
 Formatting The Medium Res Header (4:08)
 Formatting The Medium Res Hero Section (6:08)
 Formatting The Features Section (2:13)
 Formatting The Organize And Share Sections (5:17)
 Building The Get Section & Finishing Up The Medium Res Layout (2:53)
6.Building The Smartphone Layout
 Setting Up The Low Res CSS & Testing The Media Query (4:40)
 Formatting The Low Res Header (2:52)
 Resolving Problems Caused By Floats (4:21)
 Formatting The Low Res Hero Section (3:17)
 Formatting The Features Section (1:46)
 Formatting The Organize And Share Sections (2:58)
 Building The Get Section & Finishing Up The Low Res Layout (3:06)
7.Advanced Techniques For Responsive Design
 Disabling Device Smart Zoom (5:59)
 Testing Your Responsive Layouts (4:27)
 Setting Up Retina Display Graphics (6:21)
8.Wrapping Up
 Where To Go From Here (0:28)

Geoff BlakeGeoff Blake is an award-winning instructor with nearly 20 years of experience creating online video courses. His goal is to help people gain serious web skills, helping them to expand their business, develop their projects, and yeah – make more money!

Geoff is a published author, having written ‘Ten Ton Dreamweaver’ with Peachpit Press. He also held a professorship at Seneca college, and ran graphics workshops at George Brown, and Humber colleges in Toronto.

You may also like…