Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Creating a Responsive Web Design: Advanced Techniques

via LinkedIn Learning

Go to class Write review

Details

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

1 hour 15 minutes
Sessions

On-Demand
Level

Intermediate

Found in

Coursera

Save 40% on 3 months of Coursera Plus

Scrimba

Our career paths help you become job ready faster

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

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

Syllabus

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

Taught by

Chris Converse

Reviews

4.6 rating at LinkedIn Learning based on 27 ratings

Start your review of Creating a Responsive Web Design: Advanced Techniques