Creating a Responsive Web Design: Advanced Techniques

Learn how to create collapsible menus and add scalable vector graphics (SVGs) to your responsive web design layouts.

Introduction

• Introduction to this course
• What you'll need to complete this course
• About the exercise files

1. Creating a Collapsible Mobile Menu

• About this lesson
• Relocating the nav element
• Adding a mobile link button
• Removing the header height restrictions
• Restyling the mobile menu
• Adjusting the logo to overlap the menu
• Adding JavaScript and jQuery to your project
• Attaching a click event to the mobile menu button
• Animating the height of the navigation
• Removing the style attribute from the nav element
• Where to go from here

2. Working in an SVG

• About this lesson
• Grouping artwork in an SVG
• Adding CSS to an SVG
• Adding media queries to an SVG
• Changing SVG art with CSS
• Using the same SVG file for all screen sizes
• Where to go from here

3. Supporting High-Definition Screens

• About this lesson
• About the exercise files
• Adding sizes for CSS-driven images
• Adding new graphics to the project
• Using CSS media queries for device pixel ratio
• Using image srcset and the pixel density descriptor
• Where to go from here