Resources
Tools, references, and resources to support your learning. New resources appear as you progress through the course.
Course References
Windows Installation Guide
Phoenix Code and Git setup for Windows
Mac Installation Guide
Phoenix Code and Git setup for Mac
GitHub Account Setup
Create your account, add SSH keys, and clone your first repo
Git, GitHub & Phoenix Code
Your workflow reference for version control and development
Code Comments
When and how to comment your HTML and CSS
Responsive Design & Accessibility
Flexbox, relative units, media queries, and accessibility for Build 2
HTML Reference
Visual guide to HTML elements for this course
CSS Reference
Interactive guide to CSS properties for this course
JavaScript Basics
Key JavaScript concepts and five copy-and-paste interactive snippets for your article
CSS Animations
Transitions, keyframe animations, and how to use Animista-generated code in your page
Development Tools
- Phoenix Code Your primary code editor with Git integration and live preview
- Phoenix Code Documentation Official docs for Phoenix Code features
- W3C HTML Validator Check your HTML for errors
- W3C CSS Validator Check your CSS for errors
- GitHub Desktop Alternative Git interface (optional)
- Chrome DevTools Guide Inspect and debug web pages in Chrome
- Firefox Developer Tools Inspect and debug web pages in Firefox
- Safari Web Inspector Inspect and debug web pages in Safari
- WAVE Accessibility Tool Check your pages for accessibility issues
- WebAIM Contrast Checker Test your color combinations for WCAG AA compliance
- VoiceOver User Guide Apple's official guide to using VoiceOver on Mac
General Toolkit
- Animista Generate CSS animations visually and copy the code
- Theme Machine Create color schemes for your pages
- Coolors Generate and explore color palettes
- Font Pair Browse font pairings for headings and body text
- Google Fonts Free web fonts
- Unsplash Free high-quality photos
- Pexels Free stock photos and videos
- SVG Repo Free SVG icons
- A Complete Guide to Flexbox CSS-Tricks comprehensive flexbox reference
- Flexbox Froggy Learn flexbox by placing frogs on lily pads (fun, optional)
- A Complete Guide to CSS Grid CSS-Tricks comprehensive grid reference
External References
- CSS Transitions and Animations MDN guide to CSS transitions
- CSS Pseudo-classes MDN reference for :hover, :focus, :active, and all other pseudo-classes
- MDN Web Docs Comprehensive web development documentation
- HTML Reference (htmlreference.io) Visual guide to all HTML elements
- CSS Reference (cssreference.io) Visual guide to all CSS properties
- Can I Use Browser compatibility tables
- WebAIM Accessibility Resources Learn about web accessibility
- WCAG Quick Reference Web Content Accessibility Guidelines
- MDN JavaScript Guide Official documentation and tutorials
- JavaScript.info Modern JavaScript tutorial
- Eloquent JavaScript Free online book
- JavaScript30 Build 30 things in 30 days (free)
Getting Help
During Class
- Ask questions! Web development involves lots of problem-solving
- Check documentation first, but don't spend more than 5-10 minutes stuck
- Use browser DevTools to inspect and debug
Outside Class
- Review class materials and homework readings
- Use MDN Web Docs for reliable technical information
- Check the Git/GitHub/Phoenix Code guide for tool questions
- Email your teacher if you're stuck on something