HTML5 / CSS3 Responsive Web Design

R10,995.00

Description

This HTML5 CSS3 Training course will teach you in detail how to design responsive websites that will run on any browser and device. A must – do for any developer!

Prerequisites
You should be familiar with HTML and CSS before attempting this course Responsive Web Design with HTML and CSS3

Intended Audience
For beginning to intermediate level computer users with a good comprehension of HTML and CSS already.

Course Material
Included in the course price.

Course Contents

 

Day 1

THE ESSENTIALS OF RESPONSIVE WEB DESIGN

  • Beginning our quest
  • Defining responsive web design
  • Setting browser support levels
  • Our first responsive example
  • The shortcomings of our example

MEDIA QUERIES – SUPPORTING DIFFERING VIEWPORTS

  • Why media queries are needed for a responsive web design
  • Media query syntax
  • Combining media queries
  • Using media queries to alter a design
  • Considerations for organizing and authoring media queries
  • Combine media queries or write them where it suits?
  • The viewport meta tag
  • Media Queries Level 4


Day 2

FLUID LAYOUTS AND RESPONSIVE IMAGES

  • Converting a fixed pixel design to a fluid proportional layout
  • Introducing Flexbox
  • Getting Flexy
  • Responsive images
HTML5 FOR RESPONSIVE WEB DESIGNS
  • HTML5 markup – understood by all modern browser
  • Starting an HTML5 page the right way
  • Easy-going HTML5
  • New semantic elements in HTML5
  • HTML5 text-level semantics
  • Obsolete HTML features
  • Putting HTML5 elements to use
  • WCAG and WAI-ARIA for more accessible web applications
  • Embedding media in HTML5
  • Responsive HTML5 video and iFrames
  • A note about ‘offline first’

Day 3

CSS3 – SELECTORS, TYPOGRAPHY, COLOR MODES, AND NEW FEATURES
  • Anatomy of a CSS rule
  • Quick and useful CSS tricks
  • Word wrapping
  • Facilitating feature forks in CSS
  • New CSS3 selectors and how to use them
  • CSS3 structural pseudo-classes
  • CSS custom properties and variables
  • CSS calc
  • CSS Level 4 selectors
  • Web typography
  • New CSS3 color formats and alpha transparency
 STUNNING AESTHETICS WITH CSS3
  • Text shadows with CSS3
  • Box shadows
  • Background gradients
  • Repeating gradients
  • Background gradient patterns
  • Multiple background images
  • High-resolution background images
  • CSS filters
  • A warning on CSS performance

Day 4

 STUNNING AESTHETICS WITH CSS3
  • Text shadows with CSS3
  • Box shadows
  • Background gradients
  • Repeating gradients
  • Background gradient patterns
  • Multiple background images
  • High-resolution background images
  • CSS filters
  • A warning on CSS performance
 USING SVGS FOR RESOLUTION INDEPENDENCE
  • A brief history of SVG
  • The graphic that is a document
  • Creating SVGs with popular image editing packages and servicesInserting SVGs into your web pages
  • Inserting an SVG inline
  • What you can do with each SVG insertion method (inline, object, background-image, and img)
  • Extra SVG capabilities and oddities
  • Animating SVG with JavaScript
  • Optimising SVGs
  • Using SVGs as filters
  • A note on media queries inside SVGs

Day 5

: CONQUER FORMS WITH HTML5 AND CSS3
  • HTML5 forms
  • Understanding the component parts of HTML5 forms
  • HTML5 input types
  • How to polyfill non-supporting browsers
  • Styling HTML5 forms with CSS3
: APPROACHING A RESPONSIVE WEB DESIGN
  • Get designs in the browser as soon as possible
  • View and use the design on real devices
  • Embracing progressive enhancement
  • Defining a browser support matrix
  • Tiering the user experience
  • Linking CSS breakpoints to JavaScript
  • Avoid CSS frameworks in production
  • Coding pragmatic solutions
  • Use the simplest code possible
  • Hiding, showing, and loading content across viewports
  • Validators and linting tools
  • Performance
  • The next big things

Duration and pricing

Price Group A

Certificate
Upon completion of this course we will issue you with attendance certificate to certify your attendance and / or completion of the prescribed minimum examples.
You may sit for our competency assessment test and on passing you will obtain our competency certificate.
Our competency assessment can be booked and taken by someone who has not attended the course at a cost of R950.

Bookings
You can download the course registration form on our home page or by clicking here

Brochure
You may download a pdf copy of this page by clicking on the pdf icon at the top of the page.

Questions
Please email us

Schedule
On the calendar below. If your browser doesn’t display the calendar below, please click on this link or try using Google Chrome, alternatively please enquire via our Contact Us page.