Creating a Responsive Web Experience
1h 24mAdvanced2013-11-18
Authors
Chris Converse
Applies design and UX principles to technology
Course details
Many times, simply resizing your web design is not enough to create a satisfying user experience. This course helps you make your webpages more responsive to different screen sizes with HTML, CSS, and JavaScript. Chris Converse shows how to modify your existing HTML, dynamically load content, animate elements on the page, and collapse the navigation on smaller screens—while allowing users to expand menus with a tap of their finger.
Note: This course uses the jQuery JavaScript library to add interactivity and other features to the example site. But if you've never written JavaScript before, don't worry. This course provides a step-by-step approach to writing just the code you need to replicate the experience Chris shows on screen.
Learning objectives
Modifying the graphics
Adjusting the CSS for the navigation
Adding JavaScript and jQuery to your project
Loading content with jQuery
Determining screen size with JavaScript
Loading alternate content based on screen size
Animating the hero panel
Maintaining support for Internet Explorer 7 and 8
Note: This course uses the jQuery JavaScript library to add interactivity and other features to the example site. But if you've never written JavaScript before, don't worry. This course provides a step-by-step approach to writing just the code you need to replicate the experience Chris shows on screen.
Learning objectives
Modifying the graphics
Adjusting the CSS for the navigation
Adding JavaScript and jQuery to your project
Loading content with jQuery
Determining screen size with JavaScript
Loading alternate content based on screen size
Animating the hero panel
Maintaining support for Internet Explorer 7 and 8
Skills covered
jQueryResponsive Web DesignHTMLCSSWeb DesignFull-Stack Web DevelopmentProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Preview the final project
- 02 - About the exercise files
- 03 - The software you'll need to complete this course
- 04 - For those using Dreamweaver
1. Modifying the Previous Project
- 05 - Modifying the graphics
- 06 - Adjusting the CSS for the navigation
2. Dynamically Loading Content
- 07 - Adding a content container and files
- 08 - Adding JavaScript and jQuery to your project
- 09 - Loading content with jQuery
3. Styling the Hero Area
- 10 - Positioning the image and caption
- 11 - Styling the hero captions
4. Adjusting the Experience Based on Screen Size
- 12 - Determining the screen size with JavaScript
- 13 - Detecting a change in screen size
- 14 - Loading alternative content based on screen size
- 15 - Setting up the mobile nav button
- 16 - Setting up the mobile nav panel
- 17 - Opening and closing the nav panel
5. Animating the Hero Panel
- 18 - Preloading images
- 19 - Animating the hero elements
6. Maintaining Support for Internet Explorer 7 and 8
- 20 - Altering the CSS and JavaScript for Internet Explorer 7 and 8
Conclusion
- 21 - Where to go from here