100 Days of HTML, CSS and JavaScript - Build 100 Projects

Build a quiz game by wiring up html, css, and javascript in an empty folder, creating index.html, style.css, and script.js, and switching between start, quiz, and result screens.

Learn to establish a css baseline with a universal reset and border-box sizing, then build a responsive quiz interface using flexbox, typography, colors, transitions, and mobile-friendly media queries.

Build a JavaScript quiz app by selecting dom elements, defining quiz questions with answers, tracking current question and score, and rendering results with feedback.

Create a five-box color palette generator using HTML, CSS, and JavaScript by building a boilerplate, wiring CSS and script.js, and enabling hex copy.

Master CSS resets, font embedding with Google Fonts, and responsive layouts; build a gradient user interface with a color palette grid and interactive buttons with hover states and copy functionality.

This JavaScript project builds a dynamic color palette generator that selects DOM elements, creates five random hex colors, updates the UI, and enables copying colors with feedback.

Build a simple Kanban board with three lists (to-do, in progress, done), move and reorder cards using the HTML drag and drop API, covering the core 90% of concepts.

Build a kanban board with HTML, CSS, and JavaScript. Create draggable cards across to do, in progress, and done lists and implement drag events such as dragstart, dragover, and drop.

Build a responsive expanse tracker html page by linking css, importing the Poppins font from Google fonts, and creating a balance section with income, expenses, and a transactions form.

Learn to style a budgeting app with a css reset, responsive grid layouts, gradient backgrounds, hover effects, custom scrollbars, and slide-in transactions using keyframes.

Build a bookmark saver app that stores name and url, persists data in local storage, and supports adding, clicking to redirect, and deleting bookmarks.

Learn to build a bookmark saver using HTML, CSS and JavaScript: design UI with input fields and a list, add and delete bookmarks, validate URLs, and store in local storage.

Build a simple registration form with real-time validations, including username length, email format, password length and match, and reset behavior, demonstrated in HTML, CSS, and JavaScript.

Create a responsive registration form using HTML and CSS, including labeled inputs for username, email, password, and confirm password, with CSS styling, focus states, and ready for JavaScript validation.

Explore building a client-side form validator by selecting the DOM elements, handling form submission, validating required fields, usernames, emails, and passwords, showing errors or success, and resetting the form.

Learn to build a password generator that starts with a random password, lets you set length from 6 to 24, toggle uppercase and lowercase, observe strength changes, and copy results.

Create a password generator page with an HTML boilerplate, Font Awesome icons, a read-only password field, length options, character type checkboxes, a generate button, and a dynamic strength meter.

Create a password generator that uses the DOM to read length and character-type checkboxes, generate a password, display its strength, and copy it to the clipboard.

Build a 2d app from scratch that lets users add items with an input, submit via enter or button, delete, check completed, filter active or completed, save to local storage.

Build a dynamic to-do app with HTML, CSS, and JavaScript by creating a project, linking Font Awesome and scripts, and implementing a header, input, filters, and a live-updated task list.

Learn to reset styles, define css variables for colors, and build a structured to-do interface with header, inputs, filters, list items, and interactive hover and focus states.

Build a dynamic to-do app with JavaScript by selecting DOM elements, handling add, delete, and toggle actions, persisting to local storage, and filtering by all, active, and completed.

Build an all HTML and CSS contact form with animated slide-in effects, box-shadow visuals, and well-designed inputs, plus an info section, without any JavaScript.

Build a responsive contact form ui with html and css, using font awesome icons, grid layouts, css variables, and a no javascript approach.