📚 Technical Documentation

Complete guide to the 100 Days of Web Development challenge

Getting Started

Setup and first steps

Project Structure

Understand the codebase

Contributing

Join the community

FAQ

Common questions

📑 Table of Contents

1. Getting Started
2. Project Structure
3. Daily Challenges
4. Contributing Guidelines
5. Tech Stack
6. FAQ

Getting Started

Prerequisites

Before you begin, make sure you have the following installed:

A modern web browser (Chrome, Firefox, Safari, or Edge)
Code editor (VS Code recommended)
Git for version control
Basic knowledge of HTML, CSS, and JavaScript

Installation

Clone the repository to get started:

          git clone
          https://github.com/Shubham-cyber-prog/100-Days-Of-Web-Development.git

          cd 100-Days-Of-Web-Development
        

Running Locally

You can run this project in several ways:

Using Live Server (VS Code): Install the Live Server extension and click "Go Live"
Using Python: python -m http.server 8000
Using Node.js: npx http-server
Direct File Open: Open index.html in your browser

💡 Tip: For the best experience, use a local server to avoid CORS issues with some projects.

Project Structure

Understanding the project organization:

          100-Days-Of-Web-Development/

          ├── public/

          │ ├── Day 01/

          │ ├── Day 02/

          │ └── ... (100 daily projects)

          ├── website/

          │ ├── pages/ # Dashboard, projects, etc.

          │ ├── styles/ # Global CSS files

          │ ├── scripts/ # JavaScript modules

          │ └── assets/ # Images, icons, etc.

          ├── README.md

          ├── CONTRIBUTING.md

          └── CODE_OF_CONDUCT.md

Key Directories

public/ - Contains all 100 daily challenge projects
website/pages/ - Dashboard interface and navigation pages
website/styles/ - Global stylesheets and theming
website/scripts/ - JavaScript functionality and interactions

Daily Challenges

Challenge Structure

Each day's project follows a consistent structure:

index.html - Main HTML file
style.css or styles.css - Styling
script.js - JavaScript functionality
README.md - Project description (optional)

Difficulty Levels

Beginner (Days 1-30): HTML/CSS fundamentals, basic JavaScript
Intermediate (Days 31-70): DOM manipulation, APIs, responsive design
Advanced (Days 71-90): Complex interactions, data structures
Capstone (Days 91-100): Full-featured applications

Adding a New Day

To add your own day's project:

Create a new folder: public/Day XX/
Add your HTML, CSS, and JS files
Update the project metadata in scripts/pages/projects.js
Submit a pull request

Contributing Guidelines

We welcome contributions from developers of all skill levels! Here's how you can contribute:

Ways to Contribute

🐛 Report bugs and issues
✨ Suggest new features or improvements
📝 Improve documentation
💻 Submit new day projects
🎨 Enhance UI/UX design
🔧 Fix existing issues

Contribution Workflow

Fork the repository
Create a feature branch: git checkout -b feature/your-feature
Make your changes
Commit with clear messages: git commit -m "feat: add new feature"
Push to your fork: git push origin feature/your-feature
Open a Pull Request

📖 Read More: Check out our CONTRIBUTING.md for detailed guidelines.

Tech Stack

Frontend Technologies

HTML5: Semantic markup and structure
CSS3: Modern styling with custom properties, grid, and flexbox
JavaScript (ES6+): Vanilla JS for all interactions

Design System

Color Scheme: Dark/Light theme with cosmic accent colors
Typography: System fonts for optimal performance
Icons: Font Awesome 6.5.1
Animations: CSS transitions and keyframe animations

No Build Tools Required

This project uses vanilla web technologies without any build process or framework dependencies. This makes it:

✅ Easy to understand for beginners
✅ Quick to set up and run
✅ Lightweight and fast
✅ Great for learning fundamentals

Frequently Asked Questions

Do I need to complete all 100 days?

Not at all! Start wherever you feel comfortable. You can pick and choose projects based on your interests and skill level.

Can I use frameworks like React or Vue?

This challenge focuses on vanilla JavaScript to build strong fundamentals. However, you're welcome to create framework versions as bonus projects!

How do I track my progress?

Use the interactive dashboard that includes a heatmap visualization to track your daily commits and progress.

What if I miss a day?

No problem! This isn't a strict daily challenge. Learn at your own pace and complete projects when you can.

Can I modify existing projects?

Absolutely! Feel free to enhance, redesign, or expand any project. Just make sure to submit a PR if you'd like to contribute back.

Is this suitable for complete beginners?

Yes! The projects start with beginner-friendly HTML/CSS and gradually introduce JavaScript concepts. Some programming knowledge is helpful but not required.

How can I get help?

Join our Discord community or open an issue on GitHub. The community is friendly and always ready to help!