Creating a Responsive Web Design: Advanced Techniques
1h 15mAdvanced2016-06-03
Authors
Chris Converse
Applies design and UX principles to technology
Course details
Looking to take your responsive web design skills to the next level? Learn how to create collapsible menus and add scalable vector graphics (SVGs) to your layouts. Chris Converse shares advanced techniques to style mobile menus and graphics with HTML, CSS, JavaScript, and jQuery. These videos offer practical, start-to-finish tutorials to build more efficient and flexible webpages that can adapt to different screen sizes and orientations.
Skills covered
Responsive Web DesignCSSWeb StandardsWeb DesignFront-End Web DevelopmentProjectWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Introduction to this course
- 02 - What you'll need to complete this course
- 03 - About the exercise files
1. Creating a Collapsible Mobile Menu
- 04 - About this lesson
- 05 - Relocating the nav element
- 06 - Adding a mobile link button
- 07 - Removing the header height restrictions
- 08 - Restyling the mobile menu
- 09 - Adjusting the logo to overlap the menu
- 10 - Adding JavaScript and jQuery to your project
- 11 - Attaching a click event to the mobile menu button
- 12 - Animating the height of the navigation
- 13 - Removing the style attribute from the nav element
- 14 - Where to go from here
2. Working in an SVG
- 15 - About this lesson
- 16 - Grouping artwork in an SVG
- 17 - Adding CSS to an SVG
- 18 - Adding media queries to an SVG
- 19 - Changing SVG art with CSS
- 20 - Using the same SVG file for all screen sizes
- 21 - Where to go from here
3. Supporting High-Definition Screens
- 22 - About this lesson
- 23 - About the exercise files
- 24 - Adding sizes for CSS-driven images
- 25 - Adding new graphics to the project
- 26 - Using CSS media queries for device pixel ratio
- 27 - Using image srcset and the pixel density descriptor
- 28 - Where to go from here