MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.

I'm not curious

Creating a Responsive Web Experience

Course Summary

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, collapse navigation, and more.     

  • +

    Course Syllabus

       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

       Where to go from here

Course Fee:
USD 19.99

Course Type:


Course Status:



2 - 3 hours / week

This course is listed under Development & Implementations and Digital Media & Games Community

Attended this course?

Back to Top

Awards & Accolades for MyTechLogy
Winner of
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top