WW515 - Responsive Web Design Using HTML and CSS

Course Description

Understand the concept of responsive design and how to apply it to design web pages that automatically adjust based on the available screen size (viewport). Discover the power of media queries to determine the viewport of the requesting device (mobile, tablet, or desktop). Create pages using a flexible grid layout that adjusts the number of columns in the layout depending on the size of the viewing screen. Learn strategies for using HTML to handle the structure of the document and using CSS to craft the design and appearance of the page. Topics include fluid grids, re-arranging content, re-sizing elements, media queries, and flexible images. Build your skills to effectively design websites that support both desktops and mobile devices.

In this course, you will learn to: 

• Recipe for Responsive Design. 

• Flexible Grids – Methods to avoid static widths and allow content to squeeze and flow into available space. 

• Flexible Images – Managing images so that they properly scale to fit into their containers or using different images based on the viewing screen. 

• CSS Media Queries – How to apply different styling geared to device breakpoints. 

• Using HTML5 to create page structure. 

• Implementing fluid measurements to appropriately scale typography, layout and images. 

• How to work with fluid grid layouts for page design. 

• Using media queries with a mobile first approach. 

Applies Towards the Following Certificates

• Web Design Certificate : Advanced Web Page Design