This guide provides structured learning materials for web front-end development from beginner to advanced levels. All lessons include code examples and hands-on projects.
Learning Goals:
- HTML/CSS/JavaScript fundamentals
- Responsive web design and cross-browser compatibility
- Modern front-end development (TypeScript, build tools)
- Practical skills (accessibility, SEO, project development)
Characteristics:
- Progressive learning from beginner to advanced
- Practical focus with numerous code examples and projects
- Coverage of latest web standards and best practices
- Hands-on project-based learning
- Basic computer operation skills
- Basic understanding of files and folders
- Text editor usage (VS Code recommended)
- Text Editor: Visual Studio Code
- Browser: Chrome or Firefox (with DevTools)
- Version Control: Git (optional, but recommended)
# macOS (Homebrew)
brew install --cask visual-studio-code
# Windows (Chocolatey)
choco install vscode
# Or download from official website
# https://code.visualstudio.com/Recommended Extensions:
- Live Server (Real-time preview)
- Prettier (Code formatting)
- ESLint (JavaScript linting)
- Auto Rename Tag (HTML tag synchronization)
# macOS (Homebrew)
brew install node
# Windows (Chocolatey)
choco install nodejs
# Or download from official website
# https://nodejs.org/# macOS
brew install git
# Windows
choco install git
# Verify installation
git --version| # | File Name | Topic | Difficulty | Time |
|---|---|---|---|---|
| 00 | 00_Overview.md | Learning guide and roadmap | - | 10min |
| 01 | 01_HTML_Basics.md | HTML fundamentals | ⭐ | 2h |
| 02 | 02_HTML_Forms_Tables.md | HTML forms and tables | ⭐ | 2h |
| 03 | 03_CSS_Basics.md | CSS fundamentals | ⭐ | 3h |
| 04 | 04_CSS_Layout.md | CSS layout (Flexbox, Grid) | ⭐⭐ | 3h |
| 05 | 05_CSS_Responsive.md | Responsive web design | ⭐⭐ | 2h |
| 06 | 06_JS_Basics.md | JavaScript fundamentals | ⭐⭐ | 4h |
| 07 | 07_JS_Events_DOM.md | DOM manipulation and events | ⭐⭐ | 3h |
| 08 | 08_JS_Async.md | Asynchronous JavaScript | ⭐⭐⭐ | 3h |
| 09 | 09_Practical_Projects.md | Practical projects (Todo, Weather, Gallery) | ⭐⭐⭐ | 6h |
| 10 | 10_TypeScript_Basics.md | TypeScript fundamentals | ⭐⭐⭐ | 3h |
| 11 | 11_Web_Accessibility.md | Web accessibility (A11y) | ⭐⭐ | 2h |
| 12 | 12_SEO_Basics.md | SEO fundamentals | ⭐⭐ | 2h |
| 13 | 13_Build_Tools_Environment.md | Build tools and environment | ⭐⭐⭐ | 3h |
| 14 | 14_CSS_Animations.md | CSS animations | ⭐⭐ | 2h |
| 15 | 15_JS_Modules.md | JavaScript modules | ⭐⭐⭐ | 2h |
| 16 | 16_Flask_Basics.md | Flask routing, templates, forms, DB integration, REST API | ⭐⭐⭐ | 3h |
| 17 | 17_Service_Workers_and_PWA.md | Service Workers and Progressive Web Apps | ⭐⭐⭐ | 3h |
| 18 | 18_Core_Web_Vitals.md | Core Web Vitals and Performance | ⭐⭐⭐ | 3h |
| 19 | 19_Web_Components.md | Web Components | ⭐⭐⭐ | 3h |
Total estimated learning time: ~54 hours
Focus on HTML/CSS fundamentals and building simple web pages.
Week 1:
├── Day 1-2: 01_HTML_Basics.md
├── Day 3-4: 02_HTML_Forms_Tables.md
├── Day 5-7: 03_CSS_Basics.md
Week 2:
├── Day 1-3: 04_CSS_Layout.md
├── Day 4-5: 05_CSS_Responsive.md
└── Day 6-7: Practice and build simple web pages
Learn JavaScript and build interactive web applications.
Week 3:
├── Day 1-3: 06_JS_Basics.md
├── Day 4-5: 07_JS_Events_DOM.md
└── Day 6-7: 08_JS_Async.md
Week 4:
├── Day 1-4: 09_Practical_Projects.md (Todo app, Weather app)
└── Day 5-7: Build your own project
Master modern web development tools and best practices.
Week 5:
├── Day 1-2: 10_TypeScript_Basics.md
├── Day 3-4: 11_Web_Accessibility.md
└── Day 5-7: 12_SEO_Basics.md
Week 6:
├── Day 1-3: 13_Build_Tools_Environment.md
└── Day 4-7: Build a complete project applying all learned concepts
Basic Path (Minimal):
01 → 03 → 06 → 07 → 09
Standard Path (Recommended):
01 → 02 → 03 → 04 → 05 → 06 → 07 → 08 → 09 → 11 → 12
Advanced Path (Complete):
01 → 02 → 03 → 04 → 05 → 06 → 07 → 08 → 09 → 10 → 11 → 12 → 13
- MDN Web Docs - Best web development reference
- W3C - Web standards organization
- Can I Use - Browser compatibility checker
- CodePen - Online code editor and sharing
- JSFiddle - Quick JavaScript testing
- Frontend Mentor - Real-world project challenges
- freeCodeCamp - Free interactive tutorials
- The Odin Project - Full-stack curriculum
- CSS-Tricks - CSS techniques and tips
- "HTML and CSS: Design and Build Websites" by Jon Duckett
- "JavaScript: The Good Parts" by Douglas Crockford
- "Eloquent JavaScript" by Marijn Haverbeke (Free online)
- "You Don't Know JS" by Kyle Simpson (Free online)
- Traversy Media - Web development tutorials
- The Net Ninja - Modern web development
- Kevin Powell - CSS specialist
- Fireship - Quick tech overviews
- Code along with examples
- Modify examples to understand concepts
- Build small projects regularly
- Inspect elements and CSS
- Debug JavaScript with console
- Test responsive designs
- MDN is your best friend
- Don't just copy-paste, understand the code
- Experiment with different approaches
- Start small and gradually increase complexity
- Copy existing websites to learn
- Create a portfolio of your work
- Stack Overflow for questions
- GitHub for open source projects
- Twitter/Discord for web dev communities
- Attend local meetups or online events
After completing these lessons, consider exploring:
- JavaScript Frameworks: React, Vue, or Svelte
- CSS Frameworks: Tailwind CSS, Bootstrap
- Backend Development: Node.js, Express, databases
- Advanced TypeScript: Advanced types, decorators
- Testing: Jest, Testing Library, Cypress
- Performance: Lighthouse, Web Vitals optimization
- Progressive Web Apps (PWA): Service workers, offline functionality
- Web Components: Custom elements, Shadow DOM
Good luck with your web development journey!