HTML5 + CSS3 Responsive Web Design

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome

Lecture 2: Understanding Responsive Design

Lecture 3: Resolutions We Will Be Targeting

Lecture 4: A Look at What We Will Build

Chapter 2: Wireframing Layouts in Illustrator

Lecture 1: Setting Up the High Resolution Wireframe

Lecture 2: Building the Header

Lecture 3: Setting Up the Navigation and Slideshow

Lecture 4: Constructing the Content Boxes

Lecture 5: Creating the News Feed Area

Lecture 6: Finishing Up with the Footer

Lecture 7: Starting the Medium Resolution Wireframe

Lecture 8: Building the Header and Navigation Area

Lecture 9: Building the Slideshow and Content Boxes

Lecture 10: Constructing the News Feed

Lecture 11: Finishing Up with the Footer

Lecture 12: Setting Up the Low Resolution Wireframe

Lecture 13: Wireframing the Header Area

Lecture 14: Constructing the Main Navigation Menu

Lecture 15: Building the Content Boxes

Lecture 16: Setting Up the News Feed Area

Lecture 17: Finishing Up and Final Thoughts

Chapter 3: Building the Designs in Photoshop

Lecture 1: Setting Up the Wireframe for Import

Lecture 2: Opening the High Resolution in Photoshop

Lecture 3: Breaking Apart the Wireframe pt. 1

Lecture 4: Breaking Apart the Wireframe pt. 2

Lecture 5: Breaking Apart the Wireframe pt. 3

Lecture 6: Formatting the Header

Lecture 7: Setting Up the Site Logo pt. 1

Lecture 8: Setting Up the Site Logo pt. 2

Lecture 9: Updating the Logo

Lecture 10: Formatting the Navigation Menu

Lecture 11: Inserting the Menu Items

Lecture 12: Building the Slideshow

Lecture 13: Setting Up the First Content Box

Lecture 14: Inserting the Content Box Title

Lecture 15: Building the Second Content Box pt. 1

Lecture 16: Building the Second Content Box pt. 2

Lecture 17: Building the Second Content Box pt. 3

Lecture 18: Setting Up the Third Content Box

Lecture 19: Inserting the Content Box Photo

Lecture 20: Placing the Content Box Title

Lecture 21: Inserting Placeholder Text

Lecture 22: Finishing Up the Design

Chapter 4: Setting Up for the Medium Width Design

Lecture 1: Preparing the Wireframe for Import

Lecture 2: Bringing the Wireframe Into Photoshop

Lecture 3: Extracting the Header

Lecture 4: Pulling Out the Menu and Slideshow

Lecture 5: Finishing Up the Wireframe BreakUp

Lecture 6: Formatting the Header

Lecture 7: Building the Navigation Menu

Lecture 8: Formatting the Slideshow

Lecture 9: Setting Up the First Content Box

Lecture 10: Finishing Up the Content Boxes

Lecture 11: Formatting the Footer

Chapter 5: Setting Up for the Low Width Design

Lecture 1: Bringing the Wireframe into Photoshop

Lecture 2: Extracting the Header and Menu

Lecture 3: Pulling Out the Content Boxes

Lecture 4: Finishing Up the Wireframe Breakup

Lecture 5: Formatting the Header

Lecture 6: Building the Navigation Menu

Lecture 7: Readjusting the Layout

Lecture 8: Setting Up the First Content Box

Lecture 9: Formatting the Second Content Box

Lecture 10: Finishing Off the Design

Chapter 6: Getting Set Up for Responsive Design

Lecture 1: Setting Up the HTML Page

Lecture 2: Setting Up the External Style Sheet

Lecture 3: Testing the External Style Sheet

Lecture 4: Building the Three Media Queries

Lecture 5: Testing the Media Queries

Lecture 6: Using Commenting to Simplify the View

Chapter 7: Building the HTML Structure

Lecture 1: Building the Main Layout Structure

Lecture 2: Wrapping the Code into a Container Div

Lecture 3: Building the Main Navigation Menu

Lecture 4: Structuring the Content Boxes

Lecture 5: Building the News Feed Area

Lecture 6: Setting the Footer Structure

Chapter 8: Constructing the High Res Layout

Lecture 1: Getting Started with the High Res Layout

Lecture 2: Formatting the Layouts Header

Lecture 3: Formatting the Menu pt. 1

Lecture 4: Formatting the Menu pt. 2

Lecture 5: Formatting the Slideshow

Lecture 6: Setting Up the Content Boxes

Lecture 7: Applying Formatting to the News Feed

Lecture 8: Finishing Off with the Footer

Chapter 9: Building the Medium Res Layout

Lecture 1: Setting Up the Medium Resolution Layout

Lecture 2: Formatting the Header

Lecture 3: Formatting the Navigation Menu

Lecture 4: Applying Formatting to the Slideshow

Lecture 5: Setting the Content Box Formatting

Lecture 6: Adjusting the News Feed

Lecture 7: Finalizing with the Footer