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 an Adaptive Web Site for Multiple Screens

Course Summary

 How to build a web site that automatically adapts its layout to various screen sizes, orientations, and resolutions on desktop browsers and mobile devices.       

  • +

    Course Syllabus

       Using the exercise files
       Using the code snippets file
    1. Getting Started
       Setting up a local server on a Mac
       Setting up a local server on a Windows computer
       Setting up the iPhone simulator
       Installing the Android emulator on a Mac
       Installing the Android emulator on a Windows computer
       Working with a remote server
       Testing on live devices
       Touring the final project
    2. Design Approaches for Multiple Screens
       Understanding design approaches
       Designing for mobile devices
       Working with adaptive design
    3. Creating and Formatting Site Templates
       Starting with an HTML5 reset template
       Customizing the HTML template
       Using the free Google web fonts
       Modifying the remaining template pieces
       Preparing graphics for a web site
    4. Creating Adaptive Sites
       Creating a page template
       Putting together a menu page
       Developing an "about us" page
       Displaying a Google map on a page
    5. Building Desktop Page Styles
       Creating style sheets
       Building body and header styles
       Crafting footer styles
       Assembling the menu items
       Styling the "about us" page
       Styling the map page
       Crafting utility items
    6. Building Interactivity for Desktop Screens
       Loading external pages with AJAX
       Displaying a high-resolution photo overlay
    7. Styling Pages for Handheld Screens
       Resetting and hiding elements
       Making footer-like buttons for a handheld device
       Modifying menu lists
       Creating mobile tabs
       Modifying other pages for mobile layout
    8. Building Interactivity for Mobile Screens Using JavaScript
       Making the tabs work
       Detecting the mobile device on the client
       Making fixed-position elements work properly on all mobile browsers
       Centering images
       Dealing with orientation changes
    9. Styling Pages for Tablets
       Redefining the menu CSS for tablets
       Changing the CSS to make other pages display properly on a tablet
    10. Troubleshooting
       Testing and debugging
       Next steps

Course Fee:
USD 25

Course Type:


Course Status:



4 - 5 hours / week

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