Resources
Tools, references, and resources to support your learning. New resources appear as you progress through the course.
Course References
Code Comments
When and how to comment your HTML and CSS
CSS Animations
Transitions, keyframe animations, and how to use Animista-generated code in your page
CSS Reference
Interactive guide to CSS properties for this course
DaisyUI Components
Browse and copy components for your landing page
DaisyUI Themes
Preview all themes and choose one for your page
Git, GitHub & Phoenix Code
Your workflow reference for version control and development
GitHub Account Setup
Create your account, add SSH keys, and clone your first repo
HTML Reference
Visual guide to HTML elements for this course
JavaScript Basics
Key JavaScript concepts and five copy-and-paste interactive snippets for your article
Mac Installation Guide
Phoenix Code and Git setup for Mac
Responsive Design & Accessibility
Flexbox, relative units, media queries, and accessibility for Build 2
Windows Installation Guide
Phoenix Code and Git setup for Windows
Development Tools
- Chrome DevTools Guide Inspect and debug web pages in Chrome
- Firefox Developer Tools Inspect and debug web pages in Firefox
- GitHub Desktop Alternative Git interface (optional)
- Phoenix Code Your primary code editor with Git integration and live preview
- Phoenix Code Documentation Official docs for Phoenix Code features
- Safari Web Inspector Inspect and debug web pages in Safari
- VoiceOver User Guide Apple's official guide to using VoiceOver on Mac
- W3C CSS Validator Check your CSS for errors
- W3C HTML Validator Check your HTML for errors
- WAVE Accessibility Tool Check your pages for accessibility issues
- WebAIM Contrast Checker Test your color combinations for WCAG AA compliance
General Toolkit
- A Complete Guide to CSS Grid CSS-Tricks comprehensive grid reference
- A Complete Guide to Flexbox CSS-Tricks comprehensive flexbox reference
- Anatomy of a Landing Page The components of a landing page explained with illustrations — read this before you sketch
- Animista Generate CSS animations visually and copy the code
- Coolors Generate and explore color palettes
- Flexbox Froggy Learn flexbox by placing frogs on lily pads (fun, optional)
- Font Pair Browse font pairings for headings and body text
- Google Fonts Free web fonts
- Lapa Ninja Landing page inspiration — browse hundreds of real examples
- Laws of UX Psychology principles for designers
- One Page Love Single-page website inspiration
- Pexels Free stock photos and videos
- Refactoring UI Design tips from the Tailwind CSS creators
- SVG Repo Free SVG icons
- Theme Machine Create color schemes for your pages
- Unsplash Free high-quality photos
External References
- Can I Use Browser compatibility tables
- CSS Pseudo-classes MDN reference for :hover, :focus, :active, and all other pseudo-classes
- CSS Reference (cssreference.io) Visual guide to all CSS properties
- CSS Transitions and Animations MDN guide to CSS transitions
- delphitools Indie Toolkit Lots of free design and dev tools
- Eloquent JavaScript Free online book
- HTML Reference (htmlreference.io) Visual guide to all HTML elements
- JavaScript.info Modern JavaScript tutorial
- JavaScript30 Build 30 things in 30 days (free)
- MDN JavaScript Guide Official documentation and tutorials
- MDN Web Docs Comprehensive web development documentation
- WCAG Quick Reference Web Content Accessibility Guidelines
- WebAIM Accessibility Resources Learn about web accessibility
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