3000+ Courses from California Community Colleges

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

LinkedIn Learning

Creating a Responsive Web Design: Advanced Techniques

via LinkedIn Learning

Go to class Write review

Overview

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

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.