Now that you have downloaded the editor and are comfortable with it, let’s move on to building a simple web page.
Step 1: Create a Project Folder
- Decide where you want to create the project folder. Common locations are:
- Documents (e.g., Documents/sites)
- Desktop
- Any location that’s convenient for you.
- Create a folder named portfolio (e.g., Documents/sites/portfolio). This folder name reflects the focus of your project, but you can choose another name if you prefer. For consistency, it’s ideal to:
- Use lowercase letters.
- Stick to alphanumeric characters.
- Use underscores _ or hyphens – for spaces.
Step 2: Open the Folder in VSCode
- Launch Visual Studio Code (VSCode).
- Open the portfolio folder in VSCode. (If you don’t remember how, refer to the VSCode guide to refresh your memory.)
- Any files you create for this project must go inside the folder, that you named, porfolio.
Step 3: Create an HTML File
- Open the Explorer panel in VSCode (usually located on the left side of the interface).
- Right-click within the Explorer and select New File.
- Name the file index.html.
Step 4: Add Boilerplate HTML Code
- Inside the editor, you can:
- Type out the boilerplate HTML code manually, OR
- Use a shortcut by typing an exclamation mark ! and pressing Enter.
Using the shortcut will generate the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
Note: It’s better to use the shortcut than to copy-paste the code, as this reinforces learning.
Step 5: Add Content to the Page
- Between the
<body>
and</body>
tags, add the following code:
<p>Hello Internet!</p>
Your full code should now look like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>Hello Internet!</p> </body> </html>
Step 6: Preview the Page
- Right-click anywhere in the editor background and select Show Preview.
- You should see a split view with a preview of your page on the right.
Mac users: Note that the preview setup can vary depending on your configuration. Make sure to check the guide for Mac-specific instructions if needed.
Step 7: Create Additional Pages
Now that you’ve created your homepage (index.html), let’s create a few more skeleton pages. For each page:
- Create a new file in the Explorer panel.
- Use the shortcut ! to generate boilerplate HTML.
Create the following pages:
- about.html
- contact.html
- portfolio.html
These will serve as the basic structure for your website. Great job—you’ve just laid the foundation for your portfolio site!