Resources
This page provides tools, references, and articles to support your learning. Resources are organized by the build you're currently working on, so you'll see what's relevant when you need it.
Getting Started
Installation Guides Step-by-step instructions for setting up your development environment:
- Windows Installation Guide - Phoenix Code and Git for Windows
- Mac Installation Guide - Phoenix Code and Git for Mac
Git, GitHub, and Phoenix Code
- Complete Guide - Your workflow reference for version control and development
Development Tools
Phoenix Code Your primary code editor for this course. It includes built-in Git integration, live preview, and everything you need to build web pages.
Browser Developer Tools Every modern browser includes powerful tools for inspecting and debugging web pages. You'll learn to use these throughout the course.
Git & GitHub Version control tools that track changes to your code and enable publishing via GitHub Pages.
- Git/GitHub/Phoenix Code Guide - Student reference for this course
- GitHub Desktop - Alternative Git interface (optional)
Validators Tools to check your code for errors and compliance with web standards.
- W3C HTML Validator - Check HTML for errors
- W3C CSS Validator - Check CSS for errors
Design Resources
Color and Typography
- 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
Images and Media
HTML & CSS References
- MDN Web Docs - Comprehensive web development documentation
- HTML Reference - Visual guide to HTML
- CSS Reference - Visual guide to CSS
- Can I Use - Browser compatibility tables
Course Articles
Articles assigned as homework will appear here after they're assigned, so you can easily find and reference them later.
Foundations of the Web
Available after Week 1
- HTML Is Actually a Programming Language. Fight Me - Tim Carmody
- An Ars Technica History of the Internet, Part 1 - Jeremy Reimer
- Why I Gave the World Wide Web Away for Free - Tim Berners-Lee
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
Responsive Design & Accessibility Build 2
Layout Techniques Master modern CSS layout with these comprehensive guides:
- A Complete Guide to Flexbox - CSS-Tricks
- A Complete Guide to CSS Grid - CSS-Tricks
Accessibility Build websites that work for everyone:
- WAVE Accessibility Tool - Check accessibility
- WebAIM Accessibility Resources
- WCAG Quick Reference
JavaScript Build 3
Learning JavaScript
- MDN JavaScript Guide - Official documentation and tutorials
- JavaScript.info - Modern JavaScript tutorial
Practice & Reference
- Eloquent JavaScript - Free online book
- JavaScript30 - Build 30 things in 30 days (free)
Advanced Topics Build 4
UI/UX Design
- Refactoring UI - Design tips from the Tailwind CSS creators
- Laws of UX - Psychology principles for designers
Showcase Preparation Resources for polishing your final project:
- Lighthouse - Audit performance, accessibility, and best practices
- PageSpeed Insights - Analyze and optimize page speed
Showcase Project Showcase
Project Planning
- Project Brief Template - Define your project scope and goals
- Wireframing with Figma - Plan your layouts visually
Polish & Presentation
- Lighthouse - Audit performance, accessibility, and best practices
- How to Present a Web Project - Tips for your showcase presentation
Inspiration
- Awwwards - Award-winning website designs
- One Page Love - Single-page website inspiration