CSS Page Layout Course
1-day training course in CSS positioning and page Layout — CSL
CSS Positioning Training Course 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.
Course contents — 1 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
Course contents — 2 Float-based CSS Layout
- Understand what floats really are
- How to use floats to create page grids
- Fluid and fixed
- 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
Course contents — 3 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
Course contents — 4 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.
Course contents — 5 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
Course contents — 6 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
- 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
Dates for Online courses
Dates for Dublin
- Thursday 6 Feb 2025 Ormond Quay €540 Book
- Thursday 13 Mar 2025 Ormond Quay €540 Book
- Thursday 17 Apr 2025 Ormond Quay €540 Book
Dates for Belfast
- Thursday 17 Apr 2025 Assembly Buildings £450 Book
- Thursday 22 May 2025 Assembly Buildings £450 Book
- Thursday 26 Jun 2025 Assembly Buildings £450 Book
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.