Common Fixes
Debug missing CSS, broken images, GitHub Pages updates, mobile overflow, JavaScript, forms, carousels, and keyboard issues.
Supports File Paths and Site Structure
Resources
Class references.
Curated tools, links, and references for ART 3020. Use this page when you need the right resource without hunting through every lesson.
Troubleshooting
Use these when something breaks and you need a calm debugging sequence.
Setup
Tools students need before project work can move smoothly.
GitHub opens in a new tab
Create repositories, publish code, and manage project history.
Supports Developer Environment Setup
GitHub Desktop opens in a new tab
Commit and push project changes without needing the command line.
Supports Developer Environment Setup
Visual Studio Code opens in a new tab
Edit HTML, CSS, JavaScript, and project files locally.
Supports Developer Environment Setup
HTML & CSS References
Reference material for structure, styling, and browser behavior.
MDN HTML opens in a new tab
Look up elements, attributes, forms, links, images, and semantic HTML.
Supports Basic HTML Structure and Elements
MDN CSS opens in a new tab
Look up CSS properties, selectors, layout systems, and browser support.
Supports Intro to CSS
CSS-Tricks opens in a new tab
Find practical examples and explanations for common CSS patterns.
Supports Box Model and Layout
Layout Practice
Low-pressure games and guides for learning layout behavior.
Flexbox Froggy opens in a new tab
Practice flexbox alignment, direction, wrapping, and ordering.
Supports Flexbox
Grid Garden opens in a new tab
Practice CSS Grid placement concepts through short challenges.
Supports Responsive Web Design
Can I Use opens in a new tab
Check browser support before relying on newer CSS or HTML features.
Supports Responsive Web Design
Accessibility
Manual and automated tools for testing inclusive interfaces.
WebAIM opens in a new tab
Learn accessibility principles, testing methods, and common patterns.
Supports Web Accessibility
WAVE opens in a new tab
Run a visual accessibility scan and review errors in context.
Supports Web Accessibility
WebAIM Contrast Checker opens in a new tab
Check whether foreground and background colors meet contrast guidance.
Supports Styling Text with CSS
WCAG Quick Reference opens in a new tab
Look up accessibility requirements and techniques by guideline.
Supports Web Accessibility
Design & Process
Planning and review tools for the work before and after coding.
Figma opens in a new tab
Create wireframes, layouts, visual systems, and design references.
Supports Website Process
Responsive Design Mode opens in a new tab
Test a page at different viewport sizes while refining layout.
Supports Responsive Web Design
PageSpeed Insights opens in a new tab
Review performance, accessibility, SEO, and best-practice signals after publishing.
Supports Image Optimization
Libraries
Third-party tools used when native browser features need help.
Slick Carousel opens in a new tab
Build carousel behavior with a plugin when a project calls for rotating content.
Supports Mastering Carousels
GSAP opens in a new tab
Create more controlled web animation timelines and interactive motion.
Supports GSAP Web Animation
jQuery opens in a new tab
Understand legacy plugin setup, including tools like Slick that depend on it.
Supports Mastering Carousels