🚀 @Randomize Web Dev Workshop Series

Welcome! This repository contains all the source code, example snippets, and project files for the 3-part web development workshop series hosted by **@Randomize **.

This series is designed to take you from the fundamentals of HTML, CSS, and JavaScript all the way to building a full-stack MERN application, with a "magical" theme to guide us.

Workshop Breakdown

Workshop 1: The Magical Frontend (HTML, CSS, & JavaScript)

In this session, we built the foundation of our Gringotts Galleon Tracker, focusing on the core technologies of the web.

• Topics Covered:
  • HTML5: The structure of our magical ledger.
  • CSS3: Styling our app with a "Prisoner of Azkaban" theme, including glassmorphism, responsive design, and animations.
  • JavaScript (ES6+):
    • JS Fundamentals (variables, functions, objects, arrays).
    • DOM Manipulation: Selecting and changing HTML elements.
    • Event Listeners: Making our app interactive.
• Project: A multi-page, themed financial tracker.
• Code Location:
  • work-shop-1/: The complete Gringotts Ledger project.
  • work-shop-1/examples.js: Standalone JS snippets used during the lecture.

---

Workshop 2: Asynchronous Magic & The React-iverse

In this session, we dive into modern JavaScript, learn how to collaborate, and rebuild our app with the most popular frontend library: React.

• Topics Covered:
  • Asynchronous JS: async/await, Promises, and Callbacks.
  • Fetch API: How to get data from external sources (APIs).
  • Git & GitHub: The essential tools for version control and collaboration.
  • React.js:
    • Component-based architecture.
    • props vs. state.
    • React Hooks (useState, useEffect).
• Project: Upgrading our Gringotts Tracker into a dynamic, component-based React application.
• Code Location:
  • work-shop-2 (react code)/: The complete React (Vite) project.

---

Workshop 3: The Full Stack (MongoDB, Express, Node.js)

In our final session, we'll build the "brain" of our application—a full backend server—and connect it to our React frontend.

• Topics Covered:
  • Node.js: Running JavaScript on a server.
  • Express.js: Building a fast, simple, and powerful API.
  • MongoDB: A NoSQL database for storing our vault data.
  • MERN Stack: Connecting our MongoDB, Express, React, and Node components.
• Code Location:
  • (Coming soon! Code will be added after Workshop 3)

How to Use This Repo

You can get all the code on your local machine by "cloning" this repository.

git clone [https://github.com/Dragun-op/Web-dev-workshop.git](https://github.com/Dragun-op/Web-dev-workshop.git)