Are you include images in your web pages? Visual Studio Code (VS Code), a powerful and popular editor, makes this task seamless. Whether you’re a beginner or just need a quick refresher, this step-by-step guide will walk you through the process of installing Visual Studio Code, adding images to your HTML, and optimizing your setup for a successful web development journey.
If you’re interested in learning more about VS Code and how it works beyond how to include images in HTML, check out our Introducing the VS Code Text Editor workshop.
Step 1: Install Visual Studio Code
First things first, let’s get Visual Studio Code installed on your computer. Here’s how you can install it on Windows and macOS:
- Visit the Visual Studio Code download page.
- Choose the version suitable for your operating system (Windows, Linux, macOS).
- Click on the installer to download it.
- Once downloaded, run the installer and follow the on-screen instructions to complete the installation.
Now that you have VS Code installed, let’s move on to the fun part!
Become a Front End Web Developer in 2024!
Learn to code with Treehouse Techdegree’s curated curriculum full of real-world projects and alongside incredible student support. Build your portfolio. Get certified. Land your dream job in tech. Sign up for a free, 7-day trial today!
Start a Free Trial
Step 2: Set Up Your HTML Project
Let’s start by setting up a simple HTML project:
- Create a new folder on your computer where you want your project to be.
- Open up Visual Studio Code.
- Inside Visual Studio Code, go to File > Open Folder, and select your newly created folder.
- With the folder open, create a new file by right-clicking in the explorer on the left and selecting New File. Name it index.html.
- Type ! and press Tab. This will generate a basic HTML5 template thanks to VS Code’s Emmet integration.
Your index.html should now look something like this:
Step 3: Include Images in Your HTML
To include an image, you’ll need an image file. Place it in the same folder as your HTML file or for better organization you could create a subfolder.
Here’s how to add an image to your HTML file:
- Use the <img> tag to insert your image. Place this tag inside the <body> tag.
- Set the src attribute to the path of your image file. If your image is in the same folder as your HTML file, just use the image file name.
- Use the alt attribute to describe your image; this is important for SEO and accessibility.
Here’s an example:
Or if your image is in a subfolder called images your path should look like this:
If you need a refresher on file paths check out our File Paths Practice Session
Step 4: Preview Your Page
To see how your image looks on your web page:
- Open up the index.html file in your web browser by navigating to the file location and double-clicking on it. This will allow you to preview your HTML page in your browser.
- Alternatively, you can use Live Server, a popular Visual Studio Code extension, to preview your page. If you haven’t already, install Live Server by going to the Extensions view (Ctrl+Shift+X) and searching for ‘Live Server’. Once installed, right-click your index.html file in VS Code and select Open with Live Server to preview your page in the browser.
And that’s it! You’ve successfully added an image to your HTML project using Visual Studio Code.
Go Further with HTML and CSS
If you want to learn more HTML and CSS, we recommend checking out our Introduction to HTML and CSS course to learn the basics and take your web development skills to the next level. Thanks for following along, and happy coding!