Building Responsive Websites With HTML5 & CSS3 Premium class

Geoff Blake, Ten Ton Online

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
42 Videos (3h 32m)
    • Welcome

      0:48
    • A Look At What We'll Build

      1:35
    • Key Aspects Of Responsive Design

      2:43
    • Determining Device Resolutions To Target

      4:20
    • Wireframing Responsive Layouts

      4:58
    • 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
    • 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:24
    • 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
    • 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
    • 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
    • Disabling Device Smart Zoom

      5:59
    • Testing Your Responsive Layouts

      4:27
    • Setting Up Retina Display Graphics

      6:21
    • Where To Go From Here

      2:49

About This Class

In this hands-on training course, award-winning veteran trainer Geoff Blake shows you, step-by-step, how to build beautifully designed, responsive websites that adjust and function perfectly on smartphones, tablets, and desktop displays. You’ll begin 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. Geoff 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.

Download the project files here.

68

Students

--

Projects

Geoff Blake

Ten Ton Online

Geoff Blake is an award-winning veteran software trainer, author, and designer. A professional public speaker since 1997, Geoff has taught desktop publishing, web design and graphics courses for a wide range of clients and organizations, from Fortune 500 companies and colleges, to small and medium-sized businesses; and to individuals just like  you. In 2009 he launched his video-based training site, Ten Ton Online, allowing him to reach learners worldwide. With his humorous, non-jargonny approach, Geoff's style of teaching revolves around dissolving learner's anxiety, and presenting otherwise technical subjects in a relaxed, easily understandable way. He regularly contributes to top industry magazines and web sites, and continues sharing his knowledge in his casual, off-beat style through his website, tentononline.com.