Learn your way! Get started

Responsive Websites, Part 1: Introduction

with expert John Wiley & Sons


Watch trailer


Course at a glance


Release date 4/2/2015
Level Intermediate
Runtime 1h 9m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams N/A


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.

Prerequisites

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

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



Introduction

Introduction (27:58)
  • Introduction (00:10)
  • History of Website Design (03:26)
  • What Is Responsive Design? (00:44)
  • Responsive Layouts (03:02)
  • Responsive Web Content (01:29)
  • Should You or Shouldn't You? (00:43)
  • Responsive Website Design (00:33)
  • Audience (01:31)
  • Analytic Software (03:49)
  • If Yes... (02:34)
  • Create a Responsive Site? (02:01)
  • Website Creation Knowledge (00:22)
  • Design Needs (00:39)
  • Wireframe Software (00:24)
  • Web Page Layout (00:59)
  • Image Editing (00:39)
  • Breakpoint Construction (00:54)
  • HTML/CSS Editors (01:00)
  • Test/Debug (00:50)
  • JavaScript (01:49)
  • Summary (00:10)
Before You Build (13:51)
  • Introduction (00:10)
  • Steps After Analytics (01:44)
  • Organize Your Information (00:59)
  • Example Site (01:05)
  • Analytic Data (00:22)
  • Build Mobile First (01:02)
  • Mobile First Layout (00:33)
  • Screen Layout (00:26)
  • Organize Content (01:13)
  • What Should You Look For? (00:47)
  • Browsers (00:47)
  • Devices (01:08)
  • Connection Speeds (00:41)
  • Time on Site (01:31)
  • Potential Problems (01:07)
  • Summary (00:10)
Mobile First Sites (27:48)
  • Introduction (00:10)
  • Traditional Web Site (01:07)
  • Responsive Web Site (03:06)
  • Mobile First Web Site (01:11)
  • Content First Web Site (01:50)
  • Mobile First Starting Point (04:05)
  • Multiple Art Boards (06:01)
  • Add Content to Art Boards (02:06)
  • Layout in Photoshop (03:46)
  • Layer Comps (04:13)
  • Summary (00:10)