šŸ“š Build Your Own Website

The Web Trifecta

Before we do anything fancy, remember: HTML builds the bones, CSS dresses it up, JavaScript makes it dance.

StepĀ 1: Download & Open VSĀ Code

VSĀ Code is your free code BFFā€”open-source and runs on Mac, Windows, or Linux.

Once installed, open your project folder:

cd /path/to/simple-website
    code .

Note: If the code . command doesnā€™t work, you can:

  • Rightā€‘click the simple-website folder > ā€œOpen Withā€ > VSĀ Code
  • In VSĀ Code, go to File > Open Folderā€¦ and select your project

StepĀ 2: Serve & Live-Reload Your Page

OptionĀ A: VSĀ Code LiveĀ Server Extension

  1. In VSĀ Code, click the Extensions icon (or press Ctrl+Shift+X / Cmd+Shift+X).
  2. Search for LiveĀ Server and click Install.
  3. Open tutorial.html, then click GoĀ Live in the bottom-right.

Your browser opens http://127.0.0.1:5500/tutorial.html and auto-refreshes whenever you save.

OptionĀ B: Node.js ā€œlive-serverā€ (No VSĀ Code Required)

If you have Node.js installed, run:

npm install -g live-server
    live-server

This serves your folder at http://127.0.0.1:8080 with live reload on changes.

StepĀ 3: Edit, Tweak & Custom Layout

Open tutorial.html and style.css in your editor. Here are some quick examples:

Change the header background:

/* In style.css */
    header {
    background-color: #ffeb3b;
    padding: 20px;
    }

Add a new section to your HTML:

<section>
    <h2>My Custom Section</h2>
    <p>This is my new content!</p>
    </section>

Save (Ctrl+S / Cmd+S) and watch it live update.

StepĀ 4: Clone & Follow the GitHub Repo

Grab the full code and follow along on GitHub:

Clone it locally:

git clone -b tutorial https://github.com/dripz0r/simple-website.git
    cd simple-website

Open the README.md for extra snippets and notes to help you edit.

StepĀ 5: Explore More & TL;DR

Want more deep dives? Drop by these tutorials:

TL;DR: Paste your HTML & CSS into an AI builder and get a working page in 2Ā minutes.

StepĀ 6: Style Tips & Next Moves

  • Colors: One background, one text, one accent for a clean look.
  • Fonts: Stick to sans-serif for modern simplicity.
  • Spacing: Use margin and padding so elements breathe.
  • Extra pages: Copy tutorial.html as page2.html and update links for more content.

Now youā€™ve got a thorough, friendly guideā€”no training wheels, but plenty of hand-holding! šŸš€