Project 1
Personal Portfolio Website
- Description: Create a portfolio to showcase your skills, projects, and contact info.
- HTML Skills: Sections, headings, links, images, forms.
- Extra Challenge: Make it responsive with Flexbox/Grid, add a contact form with JS validation.
Project 2
To-Do List App (Frontend Only)
- Description: A simple task manager where users can add, delete, and mark tasks as complete.
- HTML Skills: Forms, lists (<ul>/<ol>), buttons, input fields.
- Extra Challenge: Save tasks using local storage with JavaScript.
Project 3
Blogging Website Template
- Description: Create a static blog page displaying multiple blog posts.
- HTML Skills: <article>, <section>, <header>, <footer>, images, links.
- Extra Challenge: Add pagination, search bar, or category filters with JS.
Project 4
Responsive Landing Page
- Description: Build a landing page for a product or service.
- HTML Skills: Hero section, call-to-action buttons, sections, forms.
- Extra Challenge: Smooth scrolling, CSS animations, responsive navbar.
Project 5
Online Resume / CV
- Description: Build an interactive resume that looks professional in the browser.
- HTML Skills: Lists, headings, tables (for skills/experience), links.
- Extra Challenge: Dark/light mode toggle, downloadable PDF resume.
Project 6
Simple E-commerce Product Page
- Description: Showcase products with images, descriptions, and prices.
- HTML Skills: <div>, images, <span>/<p> for text, buttons.
- Extra Challenge: Image gallery, product quantity selector, responsive grid layout.
Project 7
Quiz App / Trivia Game
- Description: Create a quiz where users can select answers from multiple choices.
- HTML Skills: Forms, radio buttons, lists, buttons.
- Extra Challenge: Use JS to calculate score and show feedback messages.
Project 8
Calculator (Basic)
- Description: Build a simple HTML calculator with numbers and operators.
- HTML Skills: Forms, buttons, input fields.
- Extra Challenge: Add calculation functionality with JS and keyboard support.
Project 9
Image Gallery / Portfolio
- Description: Display multiple images where users can click to enlarge.
- HTML Skills: <img>, links, <div> grids.
- Extra Challenge: Lightbox effect with JS, responsive grid layout.
Project 10
Contact / Feedback Form
- Description: Create a contact form with name, email, and message fields.
- HTML Skills: <form>, <input>, <textarea>, <button>.
- Extra Challenge: Add JS form validation or integrate with a free backend like Formspree.
