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

Responsive Web Design – From Concept to Complete Site

Course Summary

Easily design responsive websites that can adapt to any device regardless of screen size using HTML 5 and CSS3

  • +

    Course Syllabus

    • Getting Started with Responsive Web Design
      • Exploring Responsive Web Design (RWD)
      • Understanding the Use of RWD
      • Examples of Adaptive Layouts
      • Device Breakpoints
      • Pros/Cons of RWD
      • Course Overview
    • Building a Fluid Layout
      • Fluid Width Layouts
      • Working with Percent Width Layouts
      • Examples of Fluid Layouts
    • Media Queries
      • Media Queries
      • Media Query Code
      • Testing a Simple Media Query
      • Best Practices for Media Queries
      • Testing Media Queries on Actual Mobile Devices
    • Building Our First Responsive Page
      • Using RWD Demo Files
      • Using Sample Files
    • HTML5 Structure for Our Site
      • Overview of the HTML Structure for the Demo Site
      • CSS Resets and HTML5
      • HTML for Container, Header, and Navigation
      • HTML for a four Column Content Area
      • HTML for a two Column Footer
    • CSS for Our Site
      • Using Demo CSS for our Site
      • Writing the CSS for the Navigation Bar and Logo
      • Building the CSS for Navigation and its Elements
      • Tweaking the Navigation Using the Inspect Element
      • Formatting the Header
      • Styling the Columns
      • Formatting Headings and Images in the Columns
      • Formatting the Footer
      • Tweaks and Fixes to the Body Layout
    • Adding Media Queries to Our Fluid Layout
      • Planning for Media Queries
      • Tablet Media Query for the Body
      • Using Media Query for the Navigation Bar and Logo
      • Using Media Query for the Navigation Bar and Logo for Devices Smaller Than the T
      • Using Media Query for Columns to Reorient Horizontally
      • More on Column Queries and Footer
      • Final Tweaks for Phone-Sized Devices
    • Advanced Features/Considerations for the Future
      • Advanced Features/Considerations
      • Dealing with Font Size EMs
      • Using Percent-Based Fonts and Dealing with Problems with EMs and Percent
      • Demo of EM and Percent-Based Font Sizes
      • Solution to Issues with REMs
      • Future Considerations: VM, VH, VMAX, and VMIN
      • Current Solutions to Text Size Issues and Responsive Background Images
      • Using Background Images, Adaptive Images, and Bandwidth
      • Responsive Grids
      • CSS Pre-processors

Course Fee:
USD 40

Course Type:


Course Status:



1 - 4 hours / week

This course is listed under Development & Implementations , Enterprise Applications and Telecommunications 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