Scribd
Upload
3 views

Beginner HTML CSS JS Projects

The document outlines a 60-day plan for beginner projects focused on HTML, CSS, and JavaScript. It is divided into three phases: the first phase includes HTML-only projects, the second combines HTML and CSS, and the third incorporates JavaScript. Each phase consists of 10 to 30 projects designed to build foundational web development skills.

Uploaded by

ykhatsuriya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Beginner HTML CSS JS Projects

The document outlines a 60-day plan for beginner projects focused on HTML, CSS, and JavaScript. It is divided into three phases: the first phase includes HTML-only projects, the second combines HTML and CSS, and the third incorporates JavaScript. Each phase consists of 10 to 30 projects designed to build foundational web development skills.

Uploaded by

ykhatsuriya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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

You might also like