Unit 6 Overview

Part 1 covers icon systems and SVG: when to use SVG vs CSS vs bitmaps, SVG fundamentals, and building themed icon systems. Part 2 introduces advanced CSS (scroll snap, relative color syntax) and the final capstone project so you can demonstrate mastery of course concepts.

Part 1: Icons & SVG

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Icons & Graphics: Decision Framework and Pure CSS
  Learn when to use SVG, CSS, or bitmap images for icons and graphics; create simple pure CSS icons; and apply a decision framework for future projects.
• SVG Fundamentals and Icon Systems
  Learn core SVG syntax and structure, inline vs external SVG, accessibility, and how to build icon systems with sprite sheets and <symbol>-based patterns.
• SVG Fundamentals and Implementation
  SVG structure, styling with CSS, and modern implementation strategies: sprites, inline, symbols, and when to use each.
• Icon System Implementation
  Implement your own SVG-based icon system and design a reusable set of icons that can be dropped into any project.
• Icon System with Theming
  Extend your SVG icon system to support themes, including light and dark modes, and adjust icons so they work across themes.

Part 2: Advanced CSS

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• CSS Scroll Snap
  Learn scroll-snap-type, scroll-snap-align, and related properties to build carousels and horizontal scroll panels with pure CSS.
• Relative Color Syntax
  Use oklch(from var(--x) ...) and related syntax to derive palettes (lighten, darken) from a single variable; builds on Unit 1 color.
• Scroll Snap Practice
  Build a simple horizontal carousel or card strip using scroll-snap so items snap into place when scrolling.
• Relative Color Syntax Practice
  Derive a small palette from one variable using relative color syntax and apply it to a component or mini page.
• Final Project: Capstone CSS Showcase
  Individual capstone: a Style Stage–style challenge (CSS-only on shared markup) or a custom multi-section showcase site in your portfolio that demonstrates mastery across the course (layout, motion, SVG, advanced CSS, and more).