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 with HTML5 and CSS3 - Introduction

Course Summary

An introduction to the code snippets necessary to make a web page responsive, including media queries, jQuery, and CSS.


  • +

    Course Syllabus

      • An Introduction to this Course
    • Setup a Site
      • Domain Name and Hosting
    • Exploring Media Queries
      • Introduction to Responsive Design
      • An example with no Media Queries
      • An example using Device Width
      • An example using Browser Width
      • An example using Browser Width and the Do Not Lie meta tag
      • An example using the Text-Size-Adjust CSS
      • An example using Media Queries In the stylesheet link
      • An example using Media Queries In the CSS
      • An example of Progressive Enhancement
      • An example showing a CSS reset and Natural Box Model
      • Download the completed example
    • Coding a Responsive Design Web Page
      • An Introduction to this Unit
      • An example using media = print
      • An overview of a responsive site using the mobile first approach
      • Review the responsive start files
      • Building the page header
      • Build responsive navigation
      • Add a Gradient Background to the Desktop
      • Build the page footer
      • Add a 100% wide graphic that scales to the browser width
      • Add a image with text wrap
      • Create two articles
      • Display the articles to appear in two columns
      • Testing your work in various browsers
      • View the completed example site
    • Advanced CSS3
      • Advanced CSS3 overview
      • Add Content to Start File
      • Add Gooogle Font
      • CSS graident
      • Phone Navigation
      • Texture Content
      • Style the Content
      • Add Social Icons
      • Tablet Navigation
      • Box Shadow
      • Round Corners
      • Background of stars for the desktop
      • Glow In Wrapper
      • Header Image
      • CSS Transitions
      • CSS Transitions for images
      • Demonstrate a Ribbon Footer
      • View the completed example
      • Additional Resources.
    • Building a sample page for a Craft Store
      • Craft-Overview of the finished site
      • Craft-Explaination of the HTML artistic columns
      • Markup the Header
      • Craft-Markup the wrapper, left and middle divisions
      • Craft-Markup for the phone navigation button
      • Craft-Add the Google font and body texture
      • Craft-Stylize the header
      • Craft-Stylize the decorative bar
      • Craft-Stylize the phone navigation
      • Craft-Stylize the tablet navigation
      • Craft-Stylize the desktop navigation
      • Craft-Stylize the Mondrian columns
      • Craft-Markup the main page content
      • Craft-Stylize the page content into columns
    • Building a sample page for a Home Improvement Company
      • Home-Overview of the finished page
      • Home-Code the Navigation
      • Home-Add the JavaScript code for the phone navigation
      • Home-Stylize the phone navigation
      • Home-Stylize the tablet navigation
      • Home-Stylize the desktop navigation
      • Home-Code the page content
      • Home-Stylize the page content
      • Home-Create and style the social links
      • Home-Add the background image
    • Building a sample page for a news site
      • Overview of the finished page
      • Code the navigation
      • Style the phone navigation
      • Code the wrappers
      • Code the header
      • Stylize the desktop and tablet navigation
      • Stylize the header
      • Code the content
      • Stylize the content on the phone
      • Stylize the content on the tablet
      • Stylize the content on the desktop
      • Add a background image
    • Sticky Navigation
      • Creating a sticky navigation bar
      • Where to go from Here


Course Fee:
USD 37

Course Type:

Self-Study

Course Status:

Active

Workload:

1 - 4 hours / week

This course is listed under Development & Implementations 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