Now that we've taken a look at our mockup and discussed the initial page…structure, it's time to go ahead and start coding it.…Although we won't be authoring a lot of code in this exercise, what we'll be…writing is extremely important, as it's the foundation for our entire site.…Now as such, I'm going to have the mockup here open as we work and discuss what…type of impact the decisions we make will have on our eventual layout, so I'll…be switching back and forth between those mockup and the code that we create to…kind of discuss how they are related.…So I've got the mockup_home.ai opened, that we've been looking in the past couple…of exercises, but what I'm going to do right now is switch back over to my code…editor, and go ahead and crate a brand-new page for us to start working on.…
So I'm just going to go up to File and choose New, I'm just going to do a new file.…If you're not using Aptana, just whatever code editor you're using, go ahead…and create a new file.…Now I'm going to place this file in the Chapter 2, 02_05 folder.…
Author
Released
2/8/2012- 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
Skill Level Beginner
Duration
Views
-
Introduction
-
Welcome51s
-
-
1. Layout Basics
-
Box model review8m 47s
-
Calculating element dimensions11m 11s
-
Calculating em values7m 41s
-
Normal document flow13m 3s
-
Controlling element display8m 53s
-
Using CSS Resets7m 11s
-
CSS debugging tools6m 46s
-
-
2. Design Considerations
-
Page design workflow3m 6s
-
Page design tools4m 56s
-
Determining page structure7m 18s
-
Creating image assets8m 58s
-
Building internal structure10m 25s
-
-
3. Working with Floats
-
Floating elements7m 50s
-
Clearing floats7m 28s
-
Containing floats7m 50s
-
Clearfix technique10m 38s
-
Floating inline elements14m 34s
-
Two-column floated layouts8m 17s
-
Three-column floated layouts11m 30s
-
Creating equal-height columns10m 42s
-
Floats: Lab5m 25s
-
Floats: Solution5m 21s
-
-
4. Positioning Elements
-
Relative positioning7m 59s
-
Absolute positioning8m 59s
-
Fixed positioning4m 23s
-
Controlling stacking order8m 31s
-
Clipping content8m 21s
-
Controlling content overflow5m 38s
-
Positioning elements: Lab3m 59s
-
-
5. Building Fixed Layouts
-
Establishing the layout grid7m 57s
-
Defining column spacing9m 30s
-
Creating grid-based assets8m 26s
-
Grid design resources6m 22s
-
6. Building Flexible Layouts
-
Making images flexible8m 10s
-
7. Building Responsive Layouts
-
Responsive layout overview3m 49s
-
Using media queries7m 16s
-
Organizing styles8m 39s
-
Making content responsive8m 33s
-
Mobile design considerations7m 32s
-
-
8. Enhancing Page Design
-
Creating multi-column text6m 36s
-
Using borders to enhance design13m 59s
-
Rounding corners6m 56s
-
Adding drop shadows10m 35s
-
Working with opacity6m 8s
-
Working with CSS sprites7m 58s
-
Enhancing page design: Lab6m 22s
-
-
Additional Resources
-
Additional resources6m 25s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Creating initial page structure