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

HTML5 + CSS3 Responsive Web Design

Course Summary

Leap into the world of adaptive web design with HTML5 & CSS3 Responsive Web Design!


  • +

    Course Syllabus

    • Getting Started
      • Welcome
      • Understanding Responsive Design
      • Resolutions We Will Be Targeting
      • A Look at What We Will Build
    • Wireframing Layouts in Illustrator
      • Setting Up the High Resolution Wireframe
      • Building the Header
      • Setting Up the Navigation and Slideshow
      • Constructing the Content Boxes
      • Creating the News Feed Area
      • Finishing Up with the Footer
      • Starting the Medium Resolution Wireframe
      • Building the Header and Navigation Area
      • Building the Slideshow and Content Boxes
      • Constructing the News Feed
      • Finishing Up with the Footer
      • Setting Up the Low Resolution Wireframe
      • Wireframing the Header Area
      • Constructing the Main Navigation Menu
      • Building the Content Boxes
      • Setting Up the News Feed Area
      • Finishing Up and Final Thoughts
    • Building the Designs in Photoshop
      • Setting Up the Wireframe for Import
      • Opening the High Resolution in Photoshop
      • Breaking Apart the Wireframe pt. 1
      • Breaking Apart the Wireframe pt. 2
      • Breaking Apart the Wireframe pt. 3
      • Formatting the Header
      • Setting Up the Site Logo pt. 1
      • Setting Up the Site Logo pt. 2
      • Updating the Logo
      • Formatting the Navigation Menu
      • Inserting the Menu Items
      • Building the Slideshow
      • Setting Up the First Content Box
      • Inserting the Content Box Title
      • Building the Second Content Box pt. 1
      • Building the Second Content Box pt. 2
      • Building the Second Content Box pt. 3
      • Setting Up the Third Content Box
      • Inserting the Content Box Photo
      • Placing the Content Box Title
      • Inserting Placeholder Text
      • Finishing Up the Design
    • Setting Up for the Medium Width Design
      • Preparing the Wireframe for Import
      • Bringing the Wireframe Into Photoshop
      • Extracting the Header
      • Pulling Out the Menu and Slideshow
      • Finishing Up the Wireframe BreakUp
      • Formatting the Header
      • Building the Navigation Menu
      • Formatting the Slideshow
      • Setting Up the First Content Box
      • Finishing Up the Content Boxes
      • Formatting the Footer
    • Setting Up for the Low Width Design
      • Bringing the Wireframe into Photoshop
      • Extracting the Header and Menu
      • Pulling Out the Content Boxes
      • Finishing Up the Wireframe Breakup
      • Formatting the Header
      • Building the Navigation Menu
      • Readjusting the Layout
      • Setting Up the First Content Box
      • Formatting the Second Content Box
      • Finishing Off the Design
    • Getting Set Up for Responsive Design
      • Setting Up the HTML Page
      • Setting Up the External Style Sheet
      • Testing the External Style Sheet
      • Building the Three Media Queries
      • Testing the Media Queries
      • Using Commenting to Simplify the View
    • Building the HTML Structure
      • Building the Main Layout Structure
      • Wrapping the Code into a Container Div
      • Building the Main Navigation Menu
      • Structuring the Content Boxes
      • Building the News Feed Area
      • Setting the Footer Structure
    • Constructing the High Res Layout
      • Getting Started with the High Res Layout
      • Formatting the Layouts Header
      • Formatting the Menu pt. 1
      • Formatting the Menu pt. 2
      • Formatting the Slideshow
      • Setting Up the Content Boxes
      • Applying Formatting to the News Feed
      • Finishing Off with the Footer
    • Building the Medium Res Layout
      • Setting Up the Medium Resolution Layout
      • Formatting the Header
      • Formatting the Navigation Menu
      • Applying Formatting to the Slideshow
      • Setting the Content Box Formatting
      • Adjusting the News Feed
      • Finalizing with the Footer
    • Constructing the Low Res Layout
      • Getting Started with the Low Res Layout
      • Formatting the Header and Nav Menu
      • Formatting the Content Boxes
      • Applying Formatting to the News Feed
      • Finishing Up with the Footer
    • Initial High Resolution Formatting
      • Getting the Design Underway
      • Formatting the Header
      • Formatting the Main Nav Menu
      • Settings for the Content Boxes
      • Applying Formats to the News Feed
      • Final Thoughts on the Design
      • Starting the Medium Res Formatting
      • Formatting the Header and Nav Menu
      • Formatting the Content Boxes
      • Setting Up the News Feed and Footer
      • Initial Low Resolution Formatting
      • Quickly Finishing the Low Res Design
    • Adding Graphics
      • Extracting the Logo from Photoshop
      • Inserting the Logo into the Code
      • Extracting the Slideshow
      • Getting the Slideshow Inserted
      • Pulling Out the First Content Box
      • Extracting the Remaining Content Boxes
      • Formatting the Content Box Images
      • Formatting the Medium Resolution Images
      • Styling the Low Resolution Images
    • Conclusion
      • Course Wrap Up
    • Credits
      • About the Author


Course Fee:
USD 89

Course Type:

Self-Study

Course Status:

Active

Workload:

1 - 4 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
REDHERRING
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