CSS: Page Layouts

with James Williamson
please wait ...
CSS: Page Layouts
Video duration: 0s 8h 57m Beginner

Viewers:

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.

Topics include:
  • Reviewing the box model
  • Calculating em and percentage values
  • Controlling how elements display
  • Creating fixed, fluid, and responsive layouts
  • Structuring content with HTML5
  • Floating elements
  • Using relative, absolute, or fixed positioning
  • Defining column spacing
  • Creating grid-based assets and layouts
  • Considering mobile-design-specific issues
  • Working with multi-column text
  • Enhancing page design CSS Sprites
Subject:
Web
Software:
CSS
Author:

Welcome

- [Voiceover] Hi, I'm Jame Williamson, senior author at Lynda.com, and I want to welcome you to CSS Page Layout. In this course, we're going to explore the properties and techniques around controlling page layouts through Cascading Style Sheets. We'll start off with a quick overview of basic page layout concepts, and then talk about how to design your pages with CSS in mind and properly structure the HTML. We'll then discuss CSS page layout concepts like, "float" in positioning elements, and move on to exploring different types of page layouts, such as "fixed," "flexible," and "responsive." After that, we'll focus on how to control the content itself, by tackling navigation, images, and techniques that can enhance your overall page design.

Okay, by now I'm sure you're eager to get started. So crank up your favorite Code Editor, and let's explore CSS Page Layout.

please wait ...