CSS Page Layout

1-day training course in CSS positioning and page Layout — CSS-02

CSS Positioning TrainingCourse Overview

This hands-on, practical, CSS training course focuses exclusively on CSS page layout.

It does assume a tiny bit of previous CSS knowledge, but is entirely suitable for beginners who have recently completed our CSS Essentials Course, i.e. only the most basic knowledge of CSS syntax is required.

Its principal goal is to enable students to build robust, cross-platform, CSS page structures, without all of the unnecessary tweaking and debugging that too many web designers waste too much of their time upon.

CSS Positioning TrainingCourse Contents

Introduction

  • Personal and technical introductions
  • Re-cap CSS fundamentals
    • The default box model
    • Normal flow
    • Common exceptions
    • Table-like layout boxes, floats, etc.
  • Preview upcoming modules

Float-based CSS Layout

  • Understand what floats really are
  • How to use floats to create page grids
  • Intrinsic problems with float grids:
    • Fragility, float wrapping, tied to HTML code order, IE bugs, etc.
  • Practice building a float-based grid
  • Prototyping, using:
    • Placeholder content
    • Outlines
    • Background colours
  • Testing prototypes in various browsers
  • Float bugs in non-standard user agents
  • Understand the underlying causes, i.e.
    • IE quirks modes
    • IE's hasLayout property
  • Workarounds for float bugs
    • Clearfixes
    • Auto widths
    • Standards mode
    • box-sizing:border-box
    • Toggle hasLayout
    • Use inline blocks instead

Layout Using CSS Positioning

  • Understand the CSS position property
    • Static positioning
    • Fixed positioning
    • Absolute positioning
    • Relative positioning
    • Combining relative and absolute
  • Practice fixed positioning
    • Fix navigation and header divisions to the top of the browser window
  • Practice relative absolute positioning
    • E.g. CSS-only drop down menu
  • Create a full page multicolumn grid
    • Using relative absolute positioning
    • Fluid and fixed
  • Problem: multi-row wireframes

More CSS Layout Options

  • Using inline-blocks
  • Using display:table
  • Using flexbox
  • Grid system principles:
    • Vertical rhythmn
    • Horizontal rhythmn
  • Using a responsive grid framework
    • Bootstrap 3
  • Mixing different layout box styles: static, tables, floats, inline-blocks, absolute, table-like, etc.

CSS-only Menus

  • Make menu buttons
  • Style lists of links as menus
  • Make horizontal lists
  • Style horizontal menus
  • Make drop-down or pull-out menus

Maintain, Debug, Test

  • Hide stuff from some users/devices
  • Using multiple stylesheets, e.g.
    • Separate decoration from layout
    • Separate site-wide from sectional
    • Different styles for different browsers
      • E.g. non-standard styles for old IEs
  • Vary styles by output medium
    • Print styling
    • Desktop
    • Handheld
  • Write CSS directly inside HTML, for
    • Email
    • One-off styles and snippets
    • Legacy content management systems
  • Understanding the cascade — precedence & specificity
    • Origin, importance, specificity, order, html hints
  • Using validators
  • Isolating the problem context
  • Using a CSS pre-processor
    • E.g. Sass

CSS Positioning TrainingCourse Schedule

CSS Positioning TrainingFurther Details

Course Objectives

On completion of this CSS training course, you should be able to:

  • Design a complete CSS page layout from scratch
  • Design a CSS page layout without using HTML tables
  • Use the CSS float property to design a page layout
  • Use absolute positioning and relative positioning to design a CSS page layout
  • Design CSS-based web navigation menus
  • Design nested menus with roll-over effects
  • Design CSS-only drop-down menus — no JavaScript
  • Create, serve and maintain your CSS more efficiently

Target Audience

  • Experienced designers with a little CSS knowledge
  • Beginners who have recently completed our CSS Essentials course
  • Web Developers and Web Designers who either:
    • Need a refresher/check-up on CSS layout best practice
    • Want to iron out wrinkles with cross-browser CSS layout

Training Pre-requisites

Either:

  • Basic knowledge of CSS syntax and box models, or;
  • Successful completion of our CSS Essentials course

Training Style

This is an instructor-led, practical CSS training course.

The majority of the time is spent on well-structured, hands-on, exercises.

Students will hand-code complete float-based and position-based full-page CSS layouts from scratch — i.e. they will write all the CSS themselves, although they will be given pre-prepared HTML and media assets to compose and style. For other topics, students may be asked to modify or corrent pre-prepared samples of CSS code.

Students are provided with a comprehensive manual containing the practical exercises and suggested solutions, a complete set of pre-prepared resources and media assets, and a suite of cross-platform editing tools.