Frontend Workshop!

Welcome! This repository contains all the starter code and instructions for our frontend development workshop. We'll start by mastering modern CSS layouts and then use that knowledge to build a complete, interactive React application from scratch.

---

1. Pre-Workshop Setup (Critical!)

You must complete these steps before the workshop to ensure you're ready to start coding.

1. Install a Code Editor

We'll be using Visual Studio Code (VS Code).

• Download VS Code here

2. Install Node.js

React requires Node.js to run. We need the LTS (Long-Term Support) version.

• Download Node.js (LTS) here

3. Install Git

Git is a version control system we use to download (or "clone") this code.

• Download Git here

4. Check Your Installation

After installing all three, open your computer's Terminal (or Command Prompt / Git Bash on Windows) and run these commands. You should see a version number for each (your numbers might be different).

node -v
# You should see something like: v20.12.2

npm -v
# You should see something like: v10.5.0

git --version
# You should see something like: git version 2.43.0

If you see version numbers, you're all set!

---

2. How to Use This Repo

1. Get the Code

"Clone" (download) this repository to your computer. Run this command in your terminal:

git clone https://github.com/Aditya03-D/Frontend-Workshop.git

2. Understand the Branches

This repository uses two "branches" (versions):

• main (This branch): This is the starter code. It has all the files you need to begin the exercises. This is the branch we will use during the workshop.
• solution: This branch contains the final, completed code for the entire workshop. If you get stuck or want to review the answer after the workshop, you can switch to this branch.

To see the solution branch (don't peek yet!):

git checkout solution

To switch back to the starter code:

git checkout main

---

3. Workshop Plan

We'll be moving from static layouts to a fully dynamic application.

1. Part 1: Modern CSS Layouts
   • Mastering Flexbox
   • Mastering CSS Grid
2. Part 2: The React To-Do List
   • Task 1: The Static Mockup (JSX)
   • Task 2: Component-ize! (Components & Props)
   • Task 3: Add State (useState)
   • Task 4: Add Routing (React Router)
   • Task 5: Add Side Effects (useEffect & localStorage)

Let's get building!