Learn your way! Get started

Responsive Websites, Part 2: Page Layout

with expert John Wiley & Sons

Watch trailer

Responsive Websites, Part 2: Page Layout Trailer

Course at a glance

Included in these subscriptions:

  • Creative Design Power Pack
  • Power Pack Plus

Release date Release date 4/2/2015
Level Level Intermediate
Runtime Runtime 1h 3m
Platform Platform Major browsers on Windows Major browsers on Windows Major browsers on Mac OSX Major browsers on Mac OSX Mobile Devices Mobile Devices
Published eBooks Published eBooks N/A
Hands-on labs Hands-on labs N/A
Sample files Sample files Included
Exams Exams N/A

Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Building Responsive Websites will become easier after you take this 4 part learning series. In these courses you’ll get an introduction to the theory of a responsive website. You look at items that will need to be considered before you start building your site. Then you’ll see how to design and build mobile first sites, with more smart phones on the market than desktop computers this is a very important consideration. Next you’ll see how to layout your web pages, how to use a grid, apply media queries and breakpoints. Then you’ll learn how to apply the correct fonts and typesetting. Then what to show and hide in a website and why you need to adjust the web page to various screen sizes. Then you’ll see what a flex box is, use responsive images, create navigation lists, and finally testing your page.


This course assumes familiarity with using HTML and CSS. This course is part of a 4 part learning series. The courses should be taken in the following order; Building Responsive Websites: Introduction; Building Responsive Websites: Page Layout; Building Responsive Websites: Type & Screens; and Building Responsive Websites: Finishing Touches.

Meet the expert

John Wiley & Sons Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.

Course outline

Page Layout

Page Layout (20:43)
  • Introduction (00:10)
  • Page Layout (01:01)
  • Design Principles (02:12)
  • Grid Layout (01:18)
  • Grids Are Used in (00:39)
  • Grids (00:26)
  • How to Use a Grid (01:18)
  • Simple Grid Layout (01:32)
  • Reasons to Use a Grid (00:38)
  • Why Use Grids (00:51)
  • Why Use Grids in Web (01:18)
  • Problems & Solutions (01:20)
  • Grid Layouts & HTML (01:57)
  • CSS Grids (02:19)
  • 960 Grid (01:02)
  • 960 Grid Templates (00:59)
  • Grids for the Web (01:26)
  • Summary (00:10)
Grids (12:06)
  • Introduction (00:10)
  • Why Use Grids (01:04)
  • Why Use Grids in Web (01:46)
  • Types of Grid for Responsive (01:06)
  • 960 Grid (00:29)
  • 960 Grid Templates (00:31)
  • Responsive Grid Templates (02:04)
  • Responsive Grids (01:38)
  • Fluid Grids (02:12)
  • Fluid Grid Screens (00:25)
  • Responsive Grids (00:24)
  • Summary (00:10)
Media Queries (20:53)
  • Introduction (00:10)
  • CSS Media Query (05:00)
  • Styling with Media Queries (04:07)
  • Device-Based Media Queries (05:35)
  • CSS for Different Devices (05:51)
  • Summary (00:10)
Breakpoints (09:54)
  • Introduction (00:10)
  • Breakpoints (05:22)
  • Set up Breakpoints (04:12)
  • Summary (00:10)