Coding Clubhouse – Lesson 1: Set Up Your Sh*t – Tools & Chaos Management

CSS, HTML, JAVASCRIPT, DATABASE

Lesson 1: Set Up Your Sh*t – Tools & Chaos Management
BY NICKOLAI BRENNAN

Welcome to the first step of your journey into CSS tables and web styling madness. Before we get to the part where we ruin our layouts and curse at misaligned divs, we need to set up our damn tools. You wouldn’t walk into a bar and demand a cocktail without any glasses, right? Same logic applies here. We need an IDE, a database, and a little patience (or a lot of whiskey).

Step 1: Download & Install VS Code (Your New Drinking Buddy)

VS Code is like that shady bartender who knows how to get you out of a coding mess, if you know how to use it properly. It’s lightweight, powerful, and doesn’t judge you for having 47 tabs open. Here’s how to get it:

Go to the official VS Code site: https://code.visualstudio.com/
Download the right version for your operating system. Don’t overthink it—just grab the stable release.
Install it like you install bad habits—quickly and without hesitation.
Launch it, and you’re in. If it looks overwhelming, don’t worry, we’ll break it down as we go.

VS Code Extensions You Actually Need

Think of these as your backup stash behind the bar—things that’ll save your ass when things get rough:

Live Server – No one should have to refresh their browser manually. Install this.
Prettier – So your code doesn’t look like it was written by a raccoon in a dumpster.
Bracket Pair Colorizer – Helps you avoid losing your mind when dealing with nested CSS.
MySQL Integration – Because we’ll be dealing with databases, and we don’t want to do it blindfolded.

Install them through VS Code’s extensions panel. You’ll thank me later.

Step 2: Get MySQL Running (Because We Need a Place to Store Our Bad Decisions)

Since this series will involve tables, we need a database to keep our data in check—because hardcoding everything into HTML is an absolute amateur move. MySQL is the perfect tool for the job. Here’s how to get it up and running:

Download MySQL Community Server: https://dev.mysql.com/downloads/
Install it with default settings (unless you actually know what you’re doing—then go wild).
Set a root password—this is important unless you want random SQL injections ruining your life.
Open MySQL Workbench (optional, but useful) to see your databases visually.
Verify it’s working by running: SHOW DATABASES; If you see a list of databases, congratulations—you’re now the proud owner of a working database.

Bonus Tip: If installing MySQL feels like trying to open a child-proofed whiskey bottle, consider using XAMPP instead. It’s an all-in-one package that sets up MySQL, Apache, and PHP without making you suffer.

Step 3: Set Up a Project Folder (Organized Chaos is Still Organization)

Now that you have your tools, you need a workspace that doesn’t look like a digital dumpster fire. Here’s how to structure your project folder:

📂 my-css-tables-project/
┣ 📂 css/ (All our glorious styles go here)
┣ 📂 html/ (Our table pages live here)
┣ 📂 js/ (If we need JavaScript for interactivity, this is where it hides)
┣ 📂 snippets/ (Saved CSS magic tricks so we don’t rewrite them 100 times)
┣ 📂 database/ (Our MySQL scripts and structure go here)
┣ 📄 index.html (The main file, the grand entrance, the front page of this mess)

This structure ensures we don’t store everything in one gigantic file like a complete lunatic.

Step 4: Install a Live Server Extension (Because Refreshing Pages Manually is for Peasants)

If you’re serious about not losing your sanity, install the Live Server extension in VS Code so you don’t have to refresh your browser every time you make a change.

Open VS Code and go to the Extensions panel (Ctrl+Shift+X or Cmd+Shift+X).
Search for ‘Live Server’ and install it.
Right-click your index.html file and hit ‘Open with Live Server’.
Your browser will now update automatically whenever you save a file. Magic.

Step 5: Quick Intro to DevTools (Your Debugging Lifeline)

Before we write a single line of CSS, you need to get comfortable with Inspect Element and DevTools. This is where you’ll debug all your bad life choices in web design.

How to Open DevTools:

Chrome/Edge: F12 or Ctrl+Shift+I (Cmd+Opt+I on Mac)
Firefox: F12 or Ctrl+Shift+K (Cmd+Opt+K on Mac)
Safari: Enable ‘Develop’ in preferences, then Cmd+Opt+I

Why You Need This?

You can inspect elements to see what CSS is affecting them.
You can live-edit CSS without breaking your actual files.
You can see errors and warnings when things inevitably go wrong.
You can simulate different screen sizes (because no one is designing just for desktop anymore).

What We’ve Done So Far (Recap Before You Pour Another Drink)

✅ Installed VS Code (and made sure it works).
✅ Set up MySQL (so we can actually store data).
✅ Created a proper project structure (so our files don’t look like a hoarder’s basement).
✅ Installed Live Server (because we are not cavemen).
✅ Opened DevTools (because debugging is a way of life).
✅ Installed essential VS Code extensions to save ourselves from unnecessary pain.

If you got through all that, congrats—you’ve officially taken your first steps toward CSS mastery. Next up, we start writing actual CSS and making things look less like the internet in 2001.

So refill your drink, take a deep breath, and let’s get to work. 🍻