Week 10 3.30
Notes
SVG
Basic SVG Resources
- CSS Tricks: Using SVG - Basic overview
- Jenkov.com: SVG Tutorial - This site isn't much to look at but includes a lot of good information
- Sitepoint: The Designer’s Guide to Working with SVG – Pt 1 - Another basic overview
- Sitepoint: Tips for Creating Accessible SVG - must read
- Sara Soueidan: Structuring, Grouping, and Referencing in SVG - Read the first section on grouping
SVG Viewbox
- Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
- SVG Animations with CSS (3 videos)
- Understanding SVG (9 Videos)
Single Page Website Example
The following is a rough demo showing how to use viewport units to create full height sections. It also incorporates a fixed side navigation as well as the use of full page background images and gradients. Review the code of the site to see how elements are used. The last section contains links to resources used in the demo.
Reading
Review the reading on SVG graphics posted in the notes.
Homework
Incorporate feedback on your midterm project from the class critique. For next week complete your final prototype of the site. The final version will be due on April 13.
Pick a nonprofit organization for your final project. Begin reviewing the existing content to see what type of information they have on their website. Create a page or section for your final project on your class website. You will post all materials for your final to this page. Post your nonprofit organization with a link to their existing website.