Frontend Core Concepts

Beginner-friendly HTML, CSS, and JavaScript examples, exercises, and mini projects. This repository helps you learn frontend development step by step through hands-on practice.

📁 Reorganized Folder Structure

The workspace has been organized into clean, categorized, and consistent directories using standard naming conventions:

frontend-core-concepts/
├── HTML_CSS/                  # HTML & CSS learning materials
│   ├── 01-basics/             # Basic HTML elements (including forms and tables)
│   │   ├── forms/             # Forms specific exercises
│   │   └── tables/            # Tables specific exercises
│   ├── 02-css-topics/         # Specific CSS topic exercises (Flexbox, Grid, Animations, etc.)
│   └── 03-projects/           # Multi-page or more structured HTML/CSS projects (e.g., Recipe Collection)
│
└── JavaScript/                # JavaScript learning materials
    ├── 01-theory-exercises/   # Chapter-wise JS concepts and simple learning exercises
    │   ├── chapter-exercises/ # Chapter 01 to Chapter 12 exercises (with leading zeros for correct sorting)
    │   └── mini-programs/     # Small standalone JavaScript scripts (Falty Calculator, Business Name, etc.)
    └── 02-projects/           # Interactive projects with UI and DOM manipulation
        ├── 01-basic-logic/    # Basic JS logic programs (e.g., Factorial, Hacking terminal simulation)
        ├── 02-dom-and-events/ # Exercises focusing on DOM manipulation and mouse/keyboard events
        ├── 03-games/          # Fun mini-games (e.g., Guess Number, Cricket Game, Snake Water Gun)
        ├── 04-ui-components/  # Interactive UI widgets (e.g., Calculator, Timer, Theme Preference switcher)
        └── 05-web-apps/       # Multi-feature projects (e.g., E-commerce bag, Student Profile, File Uploader)

🚀 Getting Started

git clone https://github.com/debug-node/frontend-core-concepts.git
cd frontend-core-concepts

Open the files in your editor and run them in your browser or Node.js depending on the code.

📚 What You'll Learn

• HTML & CSS Basics: Tags, lists, tables, forms, semantic structure.
• Advanced Styling: Flexbox, CSS Grid, Positions, Box Shadow, Media Queries, Transitions & Animations.
• JavaScript Core: Variables, Data types, Loops, Functions, Arrays, Objects, Promises, Async/Await.
• DOM & Event Handling: Manipulating classes/styles, accessing children/parents, handling keyboard/mouse events.
• Interactive Mini Projects: Creating real-world interactive components, games, and local storage utilities.

🤝 Contributing

Fork the repository, create a branch, commit your changes, and open a pull request.

👨‍💻 Author

• debug-node

⭐ Learning by building and practicing.