QA-QAWEBCSS

Ladda ner som PDF

Developing Responsive Web Sites

From the ground up learn how to use CSS and the amazing features of CSS3 and HTML5 to create dynamic front end user interfaces. In this course you will learn to create static fixed width pages, mobile first solutions and responsive pages that adapt to the users device.

Learn how to build a cross browser bulletproof framework for your websites working with current standards and practices. Including menu systems, forms and how to use sprites and glyphs for optimised graphics.

Engage in best practices to create minified, reusable and scalable solutions through good project management and CSS preprocessing and modularisation using SASS.

Prior knowledge

  • Delegates should have a comfortable knowledge of HTML and web development concepts equivalent to Developing Web Applications using HTML5 (www.qa.com/QAWEBUI).

Objectives:

Course Outline:

HTML5 Refresher

  • Creating a Document Outline
  • Understanding HTML5 Semantic markup
  • Using DIVs and sectioning elements

The Document Object Model

  • What is the DOM
  • Understanding styles
  • Introducing Cross browser issues
  • Using a HTML5 boilerplate and CSS Normalizer

CSS Basics

  • Applying CSS
  • Simple selectors
  • Working with colour

Selectors and Inheritance

  • Understanding default CSS inheritance
  • Understanding Computed Styles
  • Using CSS resets to create an even playing field
  • Working with CSS3 selectors and understanding specificity
  • Creating hierarchical based inheritance
  • Using pseudo selectors
  • Debugging using browser tools

Measurement units and working with Text

  • Understanding the measurement options in CSS
  • Working with fixed and relative sizing options
  • Setting text styles and properties
  • Working with line heights and font faces

The Box Model

  • Understanding the box models
  • Working with margins, borders and padding
  • Understanding element widths and document flow
  • Creating documents with positional offsets
  • Floats and clears

Positioning elements

  • Understanding positioning models
  • Working with inline, block and other positioning types
  • Liquid and fixed positioning

Lists, Links & Tables

  • Working with lists style types
  • Positioning lists
  • Creating menu structures with lists
  • Creating dynamic links and hover selectors
  • Working... Läs mer

Objectives:

Course Outline:

HTML5 Refresher

  • Creating a Document Outline
  • Understanding HTML5 Semantic markup
  • Using DIVs and sectioning elements

The Document Object Model

  • What is the DOM
  • Understanding styles
  • Introducing Cross browser issues
  • Using a HTML5 boilerplate and CSS Normalizer

CSS Basics

  • Applying CSS
  • Simple selectors
  • Working with colour

Selectors and Inheritance

  • Understanding default CSS inheritance
  • Understanding Computed Styles
  • Using CSS resets to create an even playing field
  • Working with CSS3 selectors and understanding specificity
  • Creating hierarchical based inheritance
  • Using pseudo selectors
  • Debugging using browser tools

Measurement units and working with Text

  • Understanding the measurement options in CSS
  • Working with fixed and relative sizing options
  • Setting text styles and properties
  • Working with line heights and font faces

The Box Model

  • Understanding the box models
  • Working with margins, borders and padding
  • Understanding element widths and document flow
  • Creating documents with positional offsets
  • Floats and clears

Positioning elements

  • Understanding positioning models
  • Working with inline, block and other positioning types
  • Liquid and fixed positioning

Lists, Links & Tables

  • Working with lists style types
  • Positioning lists
  • Creating menu structures with lists
  • Creating dynamic links and hover selectors
  • Working with table attributes
  • Working with selectors to spruce up tables
  • Creating borders

Forms

  • Enhancing form usability with CSS
  • Selecting and styling form elements

Images and Backgrounds

  • Using CSS to position images
  • Using images as backgrounds
  • Working with backgrounds and images
  • Using Sprites to improve load performance

Transitions & Transformations

  • Understanding CSS3 transformations
  • Working with 2D & 3D transformations
  • Introducing the transition
  • Working with keyframes
  • Creating transformations

Media Types and Queries

  • Creating documents for print and other media
  • Introducing CSS3 media queries
  • Starting on the road to multi-device websites

Mobile First Responsive Design

  • Understanding the Mobile First paradigm
  • Understanding mobile devices
  • Responsive navigation and design patterns
  • Understanding the basis of grid based design
  • Rethinking content design
  • Working with multiple devices and resolution

Rapid Prototyping using Foundation

  • Introduction to grid based systems
  • Evaluating the benefit of prototyping
  • Building prototypes

Building a Mobile First User Experience

  • Examining mobile user design patterns
  • Understanding how to deal with reduced screen estate
  • Build mobile ready navigation and pages

Working with Percentage Based Grids

  • Going responsive
  • Defining breakpoints
  • Using percentages and grids to create structured pages
  • Scaling out

Introducing SASS

  • Nested Selectors
  • Parent References
  • Properties
  • Processing SASS
  • Examining Output
  • SASS Variables

Learning to be DRY

  • Using SASS to strip the unavoidable repetition from your CSS
  • Creating and Referencing SASS Variables
  • Variable scope

Mixins

  • Reusable SASS programing with Mixins
  • CSS Rules and Mixins
  • Mixin parameters

Modularization and Reuse

  • Using SASS Partials
  • Nested Imports
  • CSS Imports

Working with Compass

  • Installing COMPASS
  • Setting up a COMPASS project
  • Spriting with COMPASS

Cross Browser Strategies

  • Understanding legacy issues
  • Implementing IE specific functionality
  • Release & Maintenance
  • Management and versioning strategies
  • Improving your coding practices with LINT tools
  • Minimizing, optimizing and reducing header requests

Utbildningen levereras i samarbete med

Kurs-ID: QA-QAWEBCSS
Längd: 5 dagar
Pris exkl moms: 35 100 kr

Frågor om kursen?

Har du frågor om kursens innehåll, leveransdatum/ort eller behöver en företagsanpassad variant? Fyll i formuläret nedan!


Avtalsrabatter och kampanjer kan ej nyttjas på denna kurs.


Ort och datum

Cloud Access
i Läs mer

Delta på kursen från ditt hem, jobb eller annan plats.

23 jan-27 jan
Boka nu!
3 apr-7 apr
Boka nu!
10 jul-14 jul
Boka nu!

Tipsa