|
A comprehensive, open-source curriculum for learning HTML, CSS, and Git workflow through 40 progressive hands-on assignments. |
CodePath is a complete frontend learning path with 40 assignments organized into 10 themed series, each progressing from Foundation to Mastery. Learn by building real projects while practicing professional Git workflow with branches and pull requests.
Perfect for:
- Self-taught developers building fundamentals
- Coding bootcamps needing structured curriculum
- Anyone mastering HTML/CSS before JavaScript
- Learning real-world Git workflow
1. Fork & Clone
# Fork this repo on GitHub, then:
git clone https://github.com/YOUR-USERNAME/codepath.git
cd codepath2. Start Your First Assignment
git checkout -b wireframe-to-webcode
# Open 01-wireframe/01-foundation/README.md
# Build the assignment, then create a PR!📖 New to this? Read the Getting Started Guide for detailed setup instructions.
10 progressive series × 4 difficulty levels = 40 assignments
| Series | Focus | Folder |
|---|---|---|
| Wireframe to Webcode | Design interpretation, layouts | 01-wireframe/ |
| Form Controls | Forms, inputs, validation | 02-form-controls/ |
| Bikes for Refugees | HTML structure, styling | 03-bikes-for-refugees/ |
| Navigation | Navbars, menus, mobile patterns | 04-navigation/ |
| Card Components | Cards, variants, interactions | 05-cards/ |
| Data Tables | Tables, responsive strategies | 06-tables/ |
| Modals & Overlays | Dialogs, drawers, accessibility | 07-modals/ |
| Animations | Transitions, keyframes | 08-animations/ |
| Typography | Font systems, fluid type | 09-typography/ |
| Accessibility | WCAG, semantic HTML, ARIA | 10-accessibility/ |
Each series: 🟢 Foundation → 🟡 Enhancement → 🟠 Integration → 🔴 Mastery
📋 See full curriculum: CURRICULUM.md
Three custom GitHub Copilot agents guide you with hints, not answers:
- frontend-mentor - HTML & CSS debugging
- javascript-coach - JS concepts & hints
- git-guide - Git commands & workflow
Paste-in system-prompt instructions that turn Copilot Chat into a coaching mentor for this curriculum. No full solutions — only guided hints and Socratic questions.
| Agent | Focus |
|---|---|
| frontend-html-css-mentor | HTML structure, CSS layout, responsive design |
| javascript-mentor | DOM scripting, JS debugging, introductory SQL |
| git-mentor | Branching, committing, pull requests, merge conflicts |
📄 How to use these agents in VS Code
- Getting Started Guide - Fork, clone, first assignment
- Git Workflow Guide - Branches, commits, PRs, troubleshooting
- Full Curriculum - All 10 series with details
- Learning Roadmap - What's next after HTML/CSS?
- FAQ & Troubleshooting - Common issues solved
By completing CodePath, you'll master:
✅ Semantic HTML & accessibility
✅ Modern CSS (Flexbox, Grid, animations)
✅ Responsive design patterns
✅ Professional Git workflow
✅ Code review & iteration
✅ Building real-world projects
Completed CodePath? Continue your learning journey!
View the Complete Learning Roadmap
Discover what comes after HTML/CSS:
- JavaScript Essentials (Coming Q2 2026)
- React & Modern Frontend (Planned Q3 2026)
- Full-Stack Development (Planned Q4 2026)
- Advanced Topics (Future)
CodePath is designed to be forked and customized:
- Add your own assignments
- Modify existing ones
- Create cohort-specific branches
- Integrate with your LMS
Students fork your version and submit PRs to their own repos. You review via shared PR links.
Found a bug? Have a suggestion? We welcome contributions!
- Open an issue
- Submit a pull request
- Share your completed projects!
Open source and free for educational use. Fork, modify, and share!
Inspired by Hack Your Future Belgium, Code Your Future, and real-world development workflows.
Ready to start? Fork this repo and begin your coding journey! 🚀
Questions? Check the FAQ or open a discussion.