Foundations of Web Design

Class Exercise 1:

Setting Up VS Code and Creating a Simple “Hello World” HTML Page

Goal:

Download and install VS Code, set up necessary extensions, and create a simple “Hello World” HTML page.

Instructions:

Download and Install VS Code:

Go to the VS Code website.
Download the installer for your operating system (Windows, macOS, or Linux).
Run the installer and follow the on-screen instructions to complete the installation.

Open VS Code:

Once installed, open VS Code.
You should see the welcome screen with options to get started.

Install Extensions:

Click on the Extensions icon in the Activity Bar on the side of the window (or press Ctrl+Shift+X).
Search for and install the following extensions:
- Live Server
- Live Preview
- Prettier
- HTML CSS Support

Create a New Project Folder:

Create a new folder somewhere you will remember and name it “Foundations of Web Design”.
Open VS Code, go to File > Open Folder, and select the “Foundations of Web Design” folder.

Download starter_code01.zip:

Unzip the folder and get started with your HTML file.

Creating a simple “Hello World” HTML page:

In your “Foundations of Web Design” folder, create a new folder named “Week 1”.
Open your “Week 1” folder and create a new folder named “CE01”.
Open your “CE01” folder and create an HTML File named “CE01.html”.
In your “CE01.html” file, type this basic HTML structure into the file:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <h1></h1>
    </body>
    </html>

Viewing Your Web Page:

Run Your Project with Live Server:
- Right-click on your “CE01.html” file and select “Open with Live Server”.
- This will open your web page in your default browser.
- You should now see your “Hello World” web page.
Run Your Project with Live Preview:
- Right-click on your “CE01.html” file and select “Show Preview”.
- This will open your web page in a tab in VS Code next to your HTML file.