Creating a Responsive Web Experience

Learn how to add JavaScript to your HTML and CSS to make your webpages more responsive to different screen sizes. Dynamically load content, add animation, and collapse navigation.

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