Share Description
In this course, you will :
- Discover how to make collapsible menus and incorporate scalable vector graphics (SVGs) into your layouts.
- demonstrates advanced techniques for styling mobile menus and graphics using HTML, CSS, JavaScript, and jQuery.
- These videos provide step-by-step instructions for creating more efficient and flexible webpages that can adapt to different screen sizes and orientations.
Syllabus :
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
