60 Beginner Projects: HTML, CSS & JavaScript
Phase 1: HTML Only Projects (Days 1-10)
1. Personal Bio Page
2. List of Favorite Movies or Songs
3. Simple Contact Form (no styling)
4. Recipe Page with Ingredients and Instructions
5. Static Resume Page
6. Timetable using a Table
7. HTML Image Gallery
8. Survey Form with Inputs
9. Page with Internal Links (Jump to Section)
10. Basic Article Page (like a blog post)
Phase 2: HTML + CSS Projects (Days 11-30)
1. Styled Personal Portfolio Page
2. Responsive Card Layout
3. Navigation Bar with Hover Effects
4. Login Page UI Design
5. Pricing Table
6. Simple Landing Page
7. Testimonial Section
8. Image Gallery Grid
9. Restaurant Menu Design
10. Mobile-First Blog Layout
11. 404 Error Page
12. Coming Soon Page
13. Basic CSS Animations (e.g., bouncing text)
14. Button Hover Effects
15. Simple Responsive Footer
16. CSS Flexbox Layout (3-column)
17. CSS Grid Layout
18. One-Page Travel Website
19. CSS-only Modal Window (hidden by default)
20. Portfolio with Dark Mode (CSS toggle only)
Phase 3: HTML + CSS + JavaScript Projects (Days 31-60)
1. Digital Clock
2. Random Quote Generator
3. Simple Calculator
4. To-Do List
5. Form Validation
6. Show/Hide Password Toggle
7. Character Counter for Textarea
8. Image Slider
9. Accordion (Expand/Collapse FAQ)
10. Color Changer Button
11. Toggle Dark Mode with Button
12. Tip Calculator
13. BMI Calculator
14. Counter App (+ / - buttons)
15. Basic Weather UI (static data)
16. Palindrome Checker
17. Rock-Paper-Scissors Game
18. Image Zoom on Hover
19. Basic Quiz App (multiple choice)
20. Typing Speed Test (basic version)
21. Newsletter Subscription Form with Confirmation
22. Scroll to Top Button
23. Tabs Navigation UI
24. Stopwatch App
25. Auto-Expanding Textarea
26. Search Filter (for a list of items)
27. Basic Drum Kit (keyboard interaction)
28. Simple Drawing App using Canvas
29. Password Strength Indicator
30. Sticky Notes App