Web Dev Exercises

Friendly project ideas you can build step‑by‑step — start simple, then tackle intermediate and advanced challenges.

// How to use this list
1. Pick a level
2. Build and iterate
3. Add one new concept each time

Project Ideas by Level

Back to Web Dev Hub

Basics

Hello Web Page

Create a clean HTML page with a heading, paragraph, image and a link. Use semantic tags like header, main and footer.

HTML

Profile Card

Build a simple profile card with a photo, name, role and social links. Practice margin, padding and border‑radius.

HTML CSS

Recipe Page

Lay out ingredients and steps using lists and headings. Add a table for nutrition facts.

HTML Accessibility

Two‑Column Layout

Use CSS Grid or Flexbox to create a responsive two‑column layout that stacks on mobile.

CSS Layout

Navigation Bar

Create a top navigation with hover styles and an active state. Ensure it’s keyboard accessible.

CSS Accessibility

Contact Form

Build a form with text, email and textarea fields. Add basic HTML5 validation states.

HTML Forms

Image Gallery

Make a responsive gallery grid. On small screens, reduce columns gracefully.

CSS Responsive

Intermediate

To‑Do List (localStorage)

Allow adding, completing and removing tasks. Persist tasks in localStorage so they survive refreshes.

JavaScript

Live Theme Switcher

Add light/dark themes using CSS variables. Save preference in localStorage.

CSS JavaScript

FAQ Accordion

Build an accessible accordion with open/close animations and proper ARIA attributes.

JavaScript Accessibility

Weather Widget

Fetch current weather for a city using a public API. Show loading and error states.

JavaScript APIs

Pagination List

Render a long list and add client‑side pagination (Next/Prev, page numbers).

JavaScript UX

Markdown Previewer

Render Markdown to HTML as the user types. Sanitize output for safety.

JavaScript

Responsive Card Grid

Design a polished card grid with hover effects and a mobile‑first approach.

CSS Design

Advanced

Notes App (PHP + MySQL)

Full CRUD with login. Create, edit, delete and search notes. Add pagination and CSRF protection.

PHP MySQL Auth

Mini Blog API

Build a REST‑style API in PHP for posts and comments, then a JS front‑end that consumes it.

PHP APIs JavaScript

File Upload Gallery

Upload images, generate thumbnails, and display a gallery. Validate types and sizes server‑side.

PHP Security UX

Quiz App with Results

Multiple choice questions, timer, and a results summary with correct answers and explanations.

JavaScript UX Data

E‑commerce Cart (Front‑end)

Product list, cart, and checkout summary. Persist cart; post an order to a PHP endpoint.

JavaScript PHP

URL Shortener

Generate short codes for URLs, track click counts, and redirect. Add rate limiting and validation.

PHP MySQL Security

Tip: Keep scope tiny at first. Ship a basic version, then add one enhancement (accessibility, responsiveness, error handling, persistence) per iteration.