← Back to Home

The 101 Project Curriculum

Go beyond tutorials. This book is divided into 10 clear chapters, each focusing on a fundamental skill set to ensure mastery of HTML, CSS, and Vanilla JavaScript.

Focuses on building static components using modern CSS layout techniques like Flexbox and Grid. You will master positioning, responsive design basics, and visual polish.

  • Responsive Navigation Bar
  • Pricing Grid Component
  • CSS-Only Animated Loader
  • Custom Radio & Checkbox Styles
  • ... and 11 more layout projects.

The core of interactive web apps. Learn how to select, create, modify, and remove elements using vanilla JavaScript. We tackle event handling and dynamic styling.

  • Modal Window/Popup Creator
  • Image Carousel/Slider
  • Accordion Component
  • Simple Background Color Switcher
  • ... and 8 more DOM projects.

Learn to save user data directly in the browser using Local Storage and Session Storage. This is vital for building persistent applications like shopping carts or to-do lists.

  • Persistent Shopping Cart
  • Basic Dark/Light Mode Toggle
  • Custom User Greeting App
  • Simple To-Do List (CRUD operations)
  • ... and 6 more persistence projects.

Master client-side form validation without external libraries. Focus on regex, custom error messages, and ensuring a smooth, secure user input experience.

  • Live Password Strength Checker
  • Custom Select Dropdown
  • Step-by-Step Multi-Form Wizard
  • Email Subscription Validation Tool
  • ... and 6 more form projects.

The most important modern web skill. Use the Fetch API and Async/Await to pull and display live data from external sources (APIs). Learn about error handling and Promises.

  • Random Quote Generator (using an API)
  • Weather App (using OpenWeatherMap)
  • Image Gallery from Unsplash API
  • Simple Currency Converter
  • ... and 11 more API projects.

Build useful tools and learn how to represent data visually. Projects range from simple counters to more complex display logic.

  • Simple Countdown Timer
  • Analog Clock
  • Digital Calculator
  • Keyboard Tester Tool
  • ... and 6 more utility projects.

These final chapters challenge you with larger, multi-feature applications that combine everything you've learned: advanced routing, complex state management, and creative design.

  • Simple Music Player Interface
  • Canvas Drawing Application
  • Quiz Game with scoring
  • In-Browser Chat UI Mockup
  • Fully functional Kanban Board Clone
  • ... and 26 more advanced projects.
**Total Projects**
**101 Projects**

Ready to build your front-end expertise?

Don't just read code—write it. Start building your impressive portfolio today.

Get Access to All 101 Projects