Creating a Responsive Web Experience

Introduction

• Preview the final project
• About the exercise files
• The software you'll need to complete this course
• For those using Dreamweaver

1. Modifying the Previous Project

• Modifying the graphics
• Adjusting the CSS for the navigation

2. Dynamically Loading Content

• Adding a content container and files
• Adding JavaScript and jQuery to your project
• Loading content with jQuery

3. Styling the Hero Area

• Positioning the image and caption
• Styling the hero captions

4. Adjusting the Experience Based on Screen Size

• Determining the screen size with JavaScript
• Detecting a change in screen size
• Loading alternative content based on screen size
• Setting up the mobile nav button
• Setting up the mobile nav panel
• Opening and closing the nav panel

5. Animating the Hero Panel

• Preloading images
• Animating the hero elements

6. Maintaining Support for Internet Explorer 7 and 8

• Altering the CSS and JavaScript for Internet Explorer 7 and 8

Conclusion

• Where to go from here