Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: cjsumit/html-css-javascript-projects
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 5029387
Choose a base ref
...
head repository: solygambas/html-css-javascript-projects
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: 4c3d76f
Choose a head ref
  • 11 commits
  • 1 file changed
  • 1 contributor

Commits on Mar 24, 2025

  1. docs: remove survey

    solygambas committed Mar 24, 2025
    Copy the full SHA
    55c6ded View commit details

Commits on Jun 10, 2025

  1. docs: add companion guide

    	modified:   README.md
    
     Changes to be committed:
    	modified:   README.md
    solygambas committed Jun 10, 2025
    Copy the full SHA
    de6b7c9 View commit details

Commits on Jun 11, 2025

  1. Copy the full SHA
    f218652 View commit details

Commits on Jun 12, 2025

  1. Copy the full SHA
    9eb410e View commit details
  2. docs: fix indentation

    solygambas committed Jun 12, 2025
    Copy the full SHA
    984638a View commit details

Commits on Jun 14, 2025

  1. Copy the full SHA
    6158625 View commit details

Commits on Jun 16, 2025

  1. docs: add solution branch

    solygambas committed Jun 16, 2025
    Copy the full SHA
    49a4807 View commit details
  2. docs: remove code block

    solygambas committed Jun 16, 2025
    Copy the full SHA
    9eafd1b View commit details

Commits on Jul 7, 2025

  1. docs: reorg sections

    solygambas committed Jul 7, 2025
    Copy the full SHA
    05fc6e9 View commit details
  2. Copy the full SHA
    f35a0d0 View commit details

Commits on Jul 9, 2025

  1. Copy the full SHA
    4c3d76f View commit details
Showing with 23 additions and 7 deletions.
  1. +23 −7 README.md
30 changes: 23 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -2,10 +2,28 @@

Welcome to the repository for 100+ mini web projects using HTML, CSS, and JavaScript. This collection serves as a comprehensive resource for developers of all levels to practice their skills, explore new techniques, and get inspired by a wide range of web projects. Consider this as the ideal companion if you want to embark on the 100 Days of Code journey and challenge yourself.

[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)
## Companion Guide

Enhance your learning journey with **_100 Projects in 100 Days – HTML, CSS & JavaScript: The Ultimate Companion Guide._** This comprehensive guide is designed to help you maximize your experience with this project collection.

Inside the PDF, you'll find:

- **Day 0: Before Starting Up**<br>
Quick-start setup instructions and a boilerplate walkthrough.
- **Days 1–102: Challenges & Enhancements**
- **Challenges**: Targeted tasks to modify core markup, styles, or scripts and deepen your understanding.
- **Enhancements**: Advanced feature ideas, design refinements, and real-world polish suggestions.
- **MDN Web Docs Links**: Direct pointers to documentation for every tweak, so you can dive deeper on demand.
- **Solutions**: Available in the [challenge-solutions branch](https://github.com/solygambas/html-css-javascript-projects/tree/challenge-solutions) of the repository.

This guide isn't just about tweaking projects; it's about building momentum, mastering fundamentals, and challenging yourself to explore, break, and rebuild.

[**Preview the Companion Guide (PDF)**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)

## Project Showcase

[View the full collection on CodePen](https://codepen.io/collection/DKLgmm?grid_type=grid&sort_by=id)

Explore each project individually and view live demos to see them in action:

| # | Project | Live Demo |
@@ -111,19 +129,17 @@ Explore each project individually and view live demos to see them in action:
| 099 | [Parallax Website](099-parallax%20website) | [Live Demo](https://codepen.io/solygambas/full/poeBdPr) |
| 100 | [Hulu Webpage Clone](100-hulu%20webpage%20clone) | [Live Demo](https://codepen.io/solygambas/full/rNmmqBy) |
| 101 | [Cascade Layers](101-cascade%20layers) | [Live Demo](https://codepen.io/solygambas/full/poYaZmv) |
| 102 | [Container queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) |
| 102 | [Container Queries](102-container%20queries) | [Live Demo](https://codepen.io/solygambas/full/abMqPNy) |

> **Ready to master all 102 projects?** Don't just build them—transform them into portfolio showpieces with our [**Ultimate Companion Guide**](https://www.onbusinessplan.com/pdfs/100%20projects%20-%20Companion%20Guide.pdf)!
## Get Inspired

Check out our [**collection of articles**](https://www.onbusinessplan.com/) for those beginning their web development journey. Find tips, tricks, and motivational content to keep you engaged and motivated throughout your learning process.

## Share Your Insights

We want to hear from you! Help us tailor our content to better meet your needs by participating in our brief survey. Your feedback is invaluable in guiding us to create the most relevant and useful resources for developers and freelancers. [**Take the survey here**](https://forms.gle/sSWJ4uAcTdFJu6W76).

## Setup Instructions

To get started with these projects, follow these simple steps:
To get started with these projects, [**watch the setup tutorial on YouTube**](https://www.youtube.com/watch?v=GlKnIym2xnk) or follow these simple steps:

1. **Fork the Repository**: Click on the "Fork" button at the top-right corner of this page to create a copy of the repository in your GitHub account.