Step by Step Instructions for Setting Up a Website and Publishing It

NOTE: This webpage is getting it's styling from: /css/style.css

✅ Step 1: Set Up Your Website Folder

1. Create a folder on your computer where your website files will live.

If you are using Windows, create the folder on your desktop so you can find it easier.

2. Name it something like tannergsell (no spaces).

3. Inside that folder, create the following files:

👉 This is what your folder should look like:


    tannergsell/
    ├── index.html
    ├── about.html
    ├── contact.html
    ├── style.css
    └── script.js

✅ Step 2: Open the Folder in VSCode

1. Open Visual Studio Code (VSCode).

2. Go to File > Open Folder.

3. Select your tannergsell folder.

You’ll now see your files listed in the Explorer on the left.

✅ Step 3: Add Basic HTML to Each Page

You can paste this as a starting point into each .html file:


    <!DOCTYPE html >
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home - Website for Tanner Gsell</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <h1>Welcome to My Website </h1>
    <nav>
        <a href="index.html">Home</a> |
        <a href="about.html">About</a> |
        <a href="contact.html">Contact</a>
    </nav>
    <p>This is the homepage.</p>
    <script src="script.js"></script>
    </body>
    </html>

Repeat this for about.html and contact.html, just change the <title> and <h1> text.

✅ Step 4: Add Styles and JS (Optional)

Open style.css and add some basic styling, then save the file:



        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        nav a {
            margin-right: 10px;
        }

Open script.js and add something simple to test it works, like this:

        
          console.log("Your website is working!");

✅ Step 5: Preview Your Website

You can install the Live Server extension in VSCode to preview locally:

1. In VSCode, go to Extensions (left sidebar) and search for: Live Server

2. Click Install.

3. Now right-click index.html and choose "Open with Live Server". Your default browser will open with a live preview and you should see the page as it will look when you publish it.

NOTE: You will need to use the developer tools in order to see the console.log

✅ Step 6: Upload Files to Web Hosting Server

Here are your FTP credentials (provided by your web host).

Use FileZilla to transfer files to server (recommended for beginners)

1. Download and install FileZilla.

2. Open FileZilla and fill in the top bar with the following:

3. Host: 200.225.43.151

4. Username: tanner

5. Password: (see text from Jackie)

6. Port: usually leave it as 21

7. Click Quickconnect.

Once connected:

1. On the left side, find your tannergsell folder.

2. On the right side, open the folder where your website files go (usually public_html).

3. Drag and drop all your files (index.html, style.css, script.js, etc.) from the left side into the right side.

4. Wait for the upload to finish.

✅ Step 7: Test Your Website Online

Open a browser and go to your domain name: https://tannergsell.com/index.html

You should see your homepage!

Click the About and Contact links to make sure everything is working.

✅ Optional: Organize Further

You could add folders later, like:

But for now, keeping everything in one folder is great for learning.

Troubleshooting:

Check file paths, making sure uploads go to the right directory.

Clear browser cache or open website in incognito mode.