HTML JavaScript CSS Computer Science

Beginner

40 mins

Teacher/Student led

+35 XP

What you need:
Chromebook/Laptop/PC

Setting up your Development Environment

In this lesson, you'll learn how to set up a local web development environment on your computer. Follow step-by-step guidance to install Visual Studio Code, create a project folder, build a simple web page, and understand file structures.

Learning Goals Learning Outcomes Teacher Notes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction to Web Development Environments
2 Downloading and Installing VS Code
3 Creating a Project Folder
4 Creating Your HTML File
5 Viewing the Web Page
6 Adding an Image to Your HTML
7 Creating a CSS File
8 Linking to Another Page
9 Activity
10 Wrap Up

1 - Introduction to Web Development Environments

So far, you've probably mostly used online editors for coding, which are great for quick tasks. But for real web development, it's essential to set up a local environment on your computer. This allows you to work offline, manage files easily, and use powerful tools.

In this lesson, we'll introduce you to Visual Studio Code (VS Code), a popular code editor, and guide you through creating a simple web page with HTML and CSS to understand file structures.

By the end, you'll have a basic project setup and see how files interact in web development.

👇 Mark your steps as done as you complete them.

+10 XP

2 - Downloading and Installing VS Code

VS Code is a free, lightweight code editor from Microsoft that's perfect for web development. It supports HTML, CSS, JavaScript, Python and more, with features like syntax highlighting, auto-completion, and built-in version control. Version control is a system that records changes to files over time, allowing you to track your project's history, collaborate with others, and revert to previous versions if needed. VS Code has integrated support for Git, a popular version control system.

To get started:

Go to the official VS Code website: https://code.visualstudio.com/
Click the 'Download' button for your operating system (Windows, macOS, or Linux).
Once downloaded, run the installer and follow the on-screen instructions. Accept the defaults unless you have a specific reason to change them.
After installation, open VS Code to ensure it launches correctly. You'll see a welcome screen.

3 - Creating a Project Folder

Web projects consist of multiple files like HTML, CSS, images, and JavaScript. We'll organise them in a folder.

In VS Code:

Click 'File' > 'Open Folder' (or use the welcome screen to open a folder).
Create a new folder on your computer, e.g., name it 'MyFirstWebPage' in your Documents.
Select that folder in VS Code. This sets it as your workspace. If you see a message asking "Do you trust the authors of the files in this folder?", click "Yes, I trust the authors" to proceed.

You should see the folder name in the Explorer pane on the left. This is where you'll add files.

4 - Creating Your HTML File

HTML is the structure of your web page. Let's create a basic one.

In VS Code, with your project folder open:

Right-click in the Explorer pane and select 'New File'.
Name it 'index.html' (this is the standard name for the main page).
The file will open in the editor.

Add the following complete HTML code to 'index.html':

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is some sample text.</p>
</body>
</html>

Save the file (Ctrl+S or Cmd+S).

+15 XP

5 - Viewing the Web Page

To view your web page in a browser, you need to open the 'index.html' file directly from your computer's file system.

Follow these steps using Windows Explorer:

Open Windows Explorer (you can search for it in the Start menu or press the Windows key + E).
Navigate to the folder where you created your project, for example, Documents\MyFirstWebPage.
Locate the 'index.html' file inside the folder.
Double-click on the 'index.html' file. This should open it in your default web browser.

You should now see your styled web page with the heading, paragraph, image, and applied CSS styles.

If the file does not open in a browser automatically, right-click on 'index.html', select 'Open with', and choose a web browser like Chrome, Edge, or Firefox.

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.