GetMeCoding What is Visual Studio Code

How to Use Visual Studio Code (VS Code) to Build a Simple Webpage

New to writing code? I explain how to use Microsoft’s Visual Studio Code (VS Code) to build a simple webpage and have included a video below to demonstrate it.

Microsoft’s Visual Studio Code (VS Code) is a free and open-source code editor that has been gaining in popularity among developers. VS Code is a lightweight, cross-platform editor that is designed to be customizable and extensible, making it a favorite tool for building webpages.

If you want to learn more about what is HTML and building a simple webpage with other tools, visit these posts:

Building a Simple Webpage

Learn webpage development using CodePen

Screenshot of Visual Studio Code with a simple HTML webpage

What is cross platform and extensible?

When we talk about coding and software we also mention the phrase “cross-platform” and “extensible”.

EXTENSIBLE

This means that your software tool can be expanded to meet the needs of different users.  In other words, you can add features by installing extensions or plugins.

Having the ability to tailor or be extensible, Visual Studio Code can help improve your productivity and work more efficiently.

Think of it like adding new apps to your smartphone. Just as you can download and install new apps on your phone to extend its functionality, you can install extensions in VS Code to add new features, such as support for different programming languages, new color schemes, or tools for working with specific libraries or frameworks.

CROSS PLATFORM

Cross-platform means that you can write code once and it will work on multiple platforms, such as Windows, Mac, Linux, iOS, Android, and more. This is different from traditional software development, where developers would have to write different versions of their code for each platform they wanted to support.

There are many cross-platform tools and frameworks available for different programming languages, such as React Native for building mobile apps, Electron for building desktop applications, and Python for building web and server applications.

By learning and using cross-platform tools, you can develop your skills as a software developer and create applications that work across multiple platforms, which can increase your reach and make your applications more accessible to a wider audience.

What is Visual Studio Code?

Visual Studio Code is a code editor that was released by Microsoft in 2015. It is built using web technologies such as HTML, CSS, and JavaScript and is designed to be lightweight, fast, and customizable. 

One of the key features of Visual Studio Code is its vast library of extensions. These extensions are like plugins that allow developers to add new features and functionality to the editor. There are thousands of extensions available, which can be used for everything from syntax highlighting to debugging and beyond.

Go here to see the currently available extensions for VS Code.

Another significant advantage of VS Code is its support for multiple programming languages. With VS Code, you can write code in languages such as HTML, CSS, JavaScript, Python, Java, and more. 

Getting started with Visual Studio Code

Before we dive into building a webpage with Visual Studio Code, you will need to download and install it on your computer. You can download Visual Studio Code for free from the Microsoft website. 

Once you have installed VS Code, you can start a new project by creating a new folder on your computer and opening it in the editor. To open the folder, select “File” > “Open Folder” from the menu, and choose the folder where you want to store your project.

Use the download link below to get your free copy of Microsoft Visual Studio Code.

Building a webpage with Visual Studio Code

To build a webpage with Visual Studio Code, you will need to create an HTML file, a CSS file, and a JavaScript file. The HTML file will contain the content of your webpage, the CSS file will be used to style the content, and the JavaScript file will be used to add interactivity to your webpage. 

Creating an HTML file

To create an HTML file in Visual Studio Code, follow these steps:

  1. Right-click on the folder where you want to store your project in the Explorer pane on the left-hand side of the editor.
  2. Select “New File” from the menu.
  3. Type “index.html” as the name of the file and press Enter.

This will create a new HTML file named index.html in your project folder. You can now start adding content to your webpage by typing HTML code into the file.

GetMeCoding.com VS Code Animation of a file opening

Styling your webpage with CSS

To style your webpage using CSS, you will need to create a new CSS file in your project folder. To do this, follow these steps:

  1. Right-click on your project folder in the Explorer pane.
  2. Select “New File” from the menu.
  3. Type “styles.css” as the name of the file and press Enter.

This will create a new CSS file named styles.css in your project folder. You can now start adding CSS code to the file to style your webpage.

Adding interactivity with JavaScript

To add interactivity to your webpage using JavaScript, you will need to create a new JavaScript file in your project folder. To do this, follow these steps:

  1. Right-click on your project folder in the Explorer pane.
  2. Select “New File” from the menu.
  3. Type “app.js” as the name of the file and press Enter.

This will create a new JavaScript file named app.js in your project folder. You can now start adding JavaScript code to the file to add interactivity to your webpage.

GetMeCoding Visual Studio Code opening a javascript file

Wrapping up.....

Visual Studio Code is a powerful and versatile code editor that is well-suited to building webpages. With its vast library of extensions, support for multiple programming languages, and its lightweight and customizable interface, VS Code is a great tool to use to begin learning to code or continue on if you having been coding for a while.

This is one of several very good editors to help you on your coding journey.

Happy coding!!

GetMeCoding.com Mr Fred

Mr. Fred

Check out these other posts on web development....

GetMeCoding What is Visual Studio Code

How to Use Visual Studio Code (VS Code) to Build a Simple Webpage

New to writing code? I explain how to use Microsoft’s Visual Studio Code (VS Code) to build a simple webpage and have included a video below to demonstrate it. Microsoft’s Visual Studio Code (VS Code) is a free and open-source code editor that has been gaining in popularity among developers. VS Code is a lightweight,

Read More »
Blog Post Stranger Things Computer Scene Explained

Stranger Things Episode 4 Computer Scene Explained

In the spring of 2022 we saw the return of the Stranger Things Netflix series and our heroes facing new challenges. Once again we get to enjoy an episode that has a 1980’s computer scene . Like my last Stranger Thing blog posts, I had the opportunity to dig a bit deeper into areas that

Read More »
CodePen Screenshot

Learn HTML by Using Codepen: A Simple Web Page

Have you wanted to learn the code behind webpages?  Codepen is a great tool to learn HTML, CSS, and Javascript which are the foundation of most webpages on the internet today.  Let me introduce you to Codepen.io and give you a peek into what you can do with it to learn how to build webpages.

Read More »

A Farewell to Flash – An Important Lesson For All Coders

On December 31, 2020 the software company, Adobe, bid farewell to Flash which is a technology that was a game changer and presents an important lesson for all coders.  Microsoft will then begin blocking Windows from running any Flash files.  This is a process that is a long time coming but it is an important

Read More »
GetMeCoding What is Dreamweaver

What is Dreamweaver? 5 Reasons To Start Using It

Adobe Dreamweaver is a software program used for building websites and web applications. I’ll go over Dreamweaver CC in this post and give you 5 reasons to start using it. Since I have been using Adobe Dreamweaver for almost two decades, I became a affiliate so I keep the lights on at GetMeCoding.com. Please note

Read More »
Adobe Dreamweaver - Quick Tutorial GetMeCoding.com

Adobe Dreamweaver – How To Build A Webpage (Quick Tutorial)

In a recent blog post, I gave you 5 reasons to start using Adobe Dreamweaver.  In this post, I share a video (be sure to SUBSCRIBE to our Youtube channel) where I demonstrate a quick tutorial on  how to use Adobe Dreamweaver to build a webpage. Why bother? Plain and simply…..because. Just kidding. Actually, the

Read More »

Start Coding Today In 5 Minutes!

Get Me Coding Free Activity

Take 5 minutes and try a FREE coding activity!

Let Me Help You

GetMeCoding Mentoring

If you are a teacher or someone looking to help others learn to code, let me help you.

Scroll to Top

it only takes

5 Minutes and 22 Seconds