Responsive Web Design Course
The Webmaster – Responsive Web Design Course is aimed at students with a pre-existing knowledge of HTML and CSS and will show how responsive web design (RWD) can be used to build stunning responsive websites which allow an optimal viewing and interaction experience using the very latest HTML5 and CSS technology.
The course is an ideal follow-on programme to our Webmaster – HTML and CSS Course or for those students who already have a good working knowledge of these programming languages.
The growing number of users who access the Internet via smartphones and tablet computers means that modern web designers must build pages that are responsive to the screen size, automatically adjusting the content to suit the user’s device. Responsive web design is a methodology which aims at providing an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices, from computer monitors, through laptops and tablets, to smartphones. A responsive website automatically adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, as illustrated below.
As well as learning important responsive web design techniques, you will also be introduced to all of the important new HTML5 elements and, via the magic of CSS3, you will apply a range of special effects, including transitions, transformations, and animations.
Course Summary
The web design course consists of the following lessons:
Lesson 1 – Introduction
The following topics are covered: Before We Get Started;Getting Started with HTML5 & CSS3;What’s New In HTML5?; Creating An HTML5 Document;HTML5 Document Validation;Incorporating A CSS3 Style Sheet;What’s New In CSS3?CSS3 Document Validation; Assignment 1 – Build Your HTML5/CSS3 Home Page.
Lesson 2 – Responsive Web Design
The following topics are covered: What Is Responsive Web Design?; Responsive Web Design With CSS3; Proportional Layouts; Scaling Images; Converting From Fixed To Fluid Design; Cross-Browser Considerations; Examples Of Responsive Web Design; Assignment 2 – Update Home Page To Be Fully Responsive.
Lesson 3 – HTML5 Semantic Elements
The following topics are covered: Introduction; The Header, Footer & Nav Elements; The Section, Article, & Aside Elements; Other Semantic Elements; The Role Of DIV And SPAN Elements; Dropped Elements & Attributes; Assignment 3 – Build Your Own “About Us” Page.
Lesson 4 – Introduction to CSS3
The following topics are covered: Background To CSS3; Understanding Cascading Style Sheets; Internal, Inline, & External Style Sheets; CSS3 Rules & Selectors; New CSS3 Colour Formats; Text Effects & Transformations; Multi-Column Layout; Assignment 4 – Build Your Own Products Page.
Lesson 5: Styling Content & Layout with CSS3
The following topics are covered: Recognising Content Boxes; Setting Margins & Padding; Sizing & Positioning Elements; Formatting Borders; Specifying Backgrounds; Text Formatting; Using Shadows & Gradients; Assignment 5 – Build Your Own Information Page.
Lesson 6 – Styling Lists & Tables with CSS3
The following topics are covered: Introduction; List Style Types & Positioning; Defining Shorthand Lists; New HTML5 Table Elements; Assigning Elements as Table Components; Assignment 6 – Build Your Own Store Front.
Lesson 7 – Stylish HTML5 Forms
The following topics are covered: HTML5 Form Components; Acquiring Text Input; Email, Telephone, & URL Inputs; Check Boxes & Radio Buttons; Selecting Options & Uploading Files; Standard Buttons & Image Buttons; Date, Time, & Range Inputs; Add Some Style With CSS3; Assignment 7 – Build Your Own Contact Page.
Lesson 8 – Using CSS3 to Create Special Effects
The following topics are covered: Understanding CSS3 Transitions; CSS3 Transformations; CSS3 Animations; Enhancing Your Text; Using Special Cursors; Hiding & Revealing Elements; Assignment 8 – Add Some Effects to Your HTML5 Pages.
Lesson 9 – Optimising & Organising your CSS3 Code
The following topics are covered: Resetting Browser Defaults; Organising Your Style Sheets; Optimising Style Rules; Specifying Default Styles; Assignment 9 – Optimise & Organise Your CSS3 Style Sheets.
Lesson 10 – The Powerful HTML5 API’s
The following topics are covered: Introduction; The Drag & Drop API; The Web Storage API; Inter-Document Messaging; The History API; The Geolocation & Google Maps API; The Canvas API; Incorporating Audio & Video; Assignment 10 – Shape Drawing Exercise.