Responsive Websites HTML 5 CSS3 Online Course

Responsive Websites HTML 5 CSS3 Online Course

 

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. 2KO Africa is a network of companies that offers a substantial series of computer courses across the entire African region, and is a leading provider of internationally recognised online IT training, online, IT training from the comfort of home or work.


Module 1: Introduction

Welcome

A Look At What We'll Build

 

Module 2: Responsive Design Fundamentals

Key Aspects Of Responsive Design

Determining Device Resolutions To Target

Wireframing Responsive Layouts

 

Module 3: The Basics: Multiple Style Sheets & Media Queries

The Concept Of Using Multiple CSS Files

Media Queries & Multiple Style Sheets

Building Media Queries Into A Single CSS File

Using Media Query Expressions

 

Module 4: Building HTML Structure & CSS For All Screens

Setting Up The HTML & CSS Files

Getting Started With The Header

Inserting The Main Nav Menu

Inserting The Search Field

Problems With Applying Floats

Integrating Google Fonts API

Building The Hero Section Structure

Formatting The Hero Section

Inserting & Formatting A Call To Action Button

Building The Features Section, Part One

Building The Features Section, Part Two

Inserting The Organize Section

Building The Share Section

Building The Call To Action Area

Inserting And Formatting The Footer

Finishing Touches For The High Resolution Layout

 

Module 5: Building The Tablet Layout

Setting Up The Medium Resolution CSS & Testing The Media Query

Formatting The Medium Res Header

Formatting The Medium Res Hero Section

Formatting The Features Section

Formatting The Organize And Share Sections

Building The Get Section & Finishing Up The Medium Res Layout

 

Module 6: Building The Smartphone Layout

Setting Up The Low Res CSS & Testing The Media Query

Formatting The Low Res Header

Resolving Problems Caused By Floats

Formatting The Low Res Hero Section

Formatting The Features Section

Formatting The Organize And Share Sections

Building The Get Section & Finishing Up The Low Res Layout

 

Module 7: Advanced Techniques For Responsive Design

Disabling Device Smart Zoom

Testing Your Responsive Layouts

Setting Up Retina Display Graphics

 

Module 8: Wrapping Up

Where To Go From Here