Building Projects with VS Code | Codecademy (2023)

Practice using Visual Studio Code to start an off-platform project

As you move through various lessons and paths here on Codecademy, you may find yourself needing to create a project on your own computer and not on the Codecademy learning environment. This can be tricky, but it’s an exciting step that signals that you are ready to work independently.

To do this, we’ll need to use a code editor, we recommend Visual Studio Code (or “VS Code”).

What are development folders?

Before using your text editor, it’s important to establish an organized file system. As the number and size of your projects grow, it becomes increasingly important to know where to save new projects and find old projects.

Most developers store their projects in an easy-to-find directory, (what you might be used to calling a “folder”). Here at Codecademy, we recommend naming this folder as projects. It will store all of your coding projects. Whenever you create a new project, no matter how small, you should always make a new folder inside your projects directory. You will find that single-file projects can quickly turn into larger, multi-folder projects.

Let’s make a project

Below are the steps you need to follow to create a new folder for all of your programming projects. You will also learn how to load a new project folder into VS Code and make your very first “hello world” HTML project.

We’d recommend that you watch the above video and then follow the written steps below.

1. Make a development folder

Navigate to a folder using your file manager or the terminal. Make sure it is a folder you visit regularly and will remember. Create a new folder called projects.

  • macOS users: This may be your user account or Home folder.
  • Windows users: You may want to save this on your C: drive.
  • Linux users: You may want to save this in your user folder inside of the home folder.

Inside the projects directory, create a new folder called HelloWorld. Everything you add to this folder will be part of your HelloWorld project.

2. Open VS Code

For this step, VS Code will need to be downloaded. Then, it can either be launched with the desktop icon or by opening a terminal and doing the following:

  1. Change into the projects directory with the cd command:

cd projects

  1. Open VS Code from the projects directory with the following command:

code .

Note: Depending on the operating system, there may be some extra steps needed to launch VS Code from the terminal.

3. Open your development folder

Click on the “Explorer” icon on the left-hand menu and click on the “Open Folder” button and choose your development folder. This will launch your file manager.

Navigate to the HelloWorld/ folder and select Open. The folder will open in VS Code’s side pane. At this point, there should not be any contents in the folder. We’ll add a file in the next step.

4. Add a file

Before you learn how to add files to a project folder, it is important to understand the purpose of file formats. File formats include the file extension, or the suffix of a filename (the last 3 - 4 characters in a filename, preceded by a period .), and describe the type of content the file contains. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as an HTML document. Once VS Code loads a project folder, you can add files. The steps below describe how to add files. Don’t worry about doing this on your own computer. We’ll get to that next.

In VS Code’s “Explorer” pane, click on your development folder’s name. You’ll see four icons appear to the right of the folder name. Click the “New File” icon. Type the new file’s name with its appropriate file extension ( e.g., .html, .css, and .csv). It is critical that you include the correct file path, so programs like linters know how to interpret its contents. Press Enter when done.

5. Begin coding

Copy and paste the following boilerplate HTML code:



<title>Hello World</title>



<h1>Hello World</h1>



To decrease the chances of losing unsaved work, save your file often with the Auto Save feature and track changes with a version control system, like Git, if you know how to use one. (To turn Auto Save on, click on “File”, then “Auto Save”. When it’s on, you’ll see a checkmark next to “Auto Save”.)

File Formats and Syntax Highlighting

Syntax is the set of rules that tell us how to create correctly written code. VS Code and other text editors are able to interpret file formats and provide language-specific syntax highlighting. Syntax highlighting is a tool for making code easier to read. Take a look at your index.html file. The text and tags are different colors. This is how VS Code highlights .html syntax. With each new language you learn, VS Code will highlight text in a way that makes your code easy to read. This may be different than other text editors and also different than the way your code is highlighted on Codecademy.

Optional: Change the color scheme

Although VS Code comes with default syntax highlighting, you may want to change the colors used. Good color themes will make reading all those lines of code easy on your eyes. (Try out low contrast, dark themes like “Solarized Dark” or “Dracula Dark.”)

To do this, select Color Theme from the Welcome page when you first open VS Code, or click on Code in the menu bar at the top of your desktop window, then click on Preferences, followed by Color Theme. You can also search for color themes to install using the Extensions menu.

6. View your HTML file in the browser

At this point, your file is ready to be viewed in a web browser. The following steps should be taken outside of VS Code:

Navigate to the index.html file in your Hello World folder through your file manager or terminal.

Double-click or open index.html. The page should open in your default web browser. Take a second to marvel at your handiwork — you made your first project with VS Code.

Wrapping up

Congratulations, you’ve successfully used your VS Code text editor to create a website — all on your own computer! As you work more with VS Code, you’ll get a better sense of how to personalize it to fit your needs. Don’t be afraid to experiment and try out different things!

Go further with VS Code’s features

If you already feel comfortable with the previous steps, explore the following features to further customize your development environment. You don’t need to use these suggestions to complete the projects on Codecademy but they can help make you more efficient when writing code. They are part of are what makes VS Code such a useful editor!

Learn More on Codecademy

Career pathWeb Development FoundationsGet started with the foundations. By the end of this section, you'll be able to build a stylized and responsive website with HTML and CSS.Checker DenseIncludes 7 CoursesChecker DenseCertificate IconWith CertificateChecker DenseLevel IconBeginner Friendly24 Lessons
Career pathFront-End EngineerFront-end engineers work closely with designers to make websites beautiful, functional, and fast.Checker DenseIncludes 34 CoursesChecker DenseCertificate IconWith Professional CertificationChecker DenseLevel IconBeginner Friendly126 Lessons


Building Projects with VS Code | Codecademy? ›

It's now a non-issue even in huge Visual Studio 2022 projects. Meanwhile, Visual Studio Code usually starts up quickly enough that I can be productive in a few minutes, even for large projects.

Is VS Code good for large projects? ›

It's now a non-issue even in huge Visual Studio 2022 projects. Meanwhile, Visual Studio Code usually starts up quickly enough that I can be productive in a few minutes, even for large projects.

How do I clean and build a project in VS Code? ›

On the menu bar, choose Build, and then choose either Build ProjectName or Rebuild ProjectName.
  1. Choose Build ProjectName to build only those project components that have changed since the most recent build.
  2. Choose Rebuild ProjectName to "clean" the project and then build the project files and all project components.
Mar 9, 2023

How to build a project in Visual Studio? ›

Solutions and projects
  1. Open Visual Studio.
  2. On the start window, select Create a new project.
  3. On the Create a new project page, enter blank solution into the search box, select the Blank Solution template, and then select Next. Tip. ...
  4. Name the solution QuickSolution, and then select Create.
Mar 8, 2023

What technology is used in build VS Code? ›

Using Electron, VS Code combines web technologies such as JavaScript and Node. js with the speed and flexibility of native apps. VS Code uses a newer, faster version of the same industrial-strength HTML-based editor that has powered the "Monaco" cloud editor, Internet Explorer's F12 Tools, and other projects.

What is the disadvantage of VS Code? ›

Resource-intensive: Visual Studio Code can be resource-intensive, especially when running multiple extensions or larger projects. This can be a disadvantage for developers who have older or less powerful computers.

What percent of developers use VS Code? ›

"Visual Studio Code remains the preferred IDE across all developers, increasing its use among all developers this year from 75 percent to 81 percent," said the Stack Overflow 2023 Developer Survey, published earlier this month.

What is the difference between clean and build and rebuild? ›

Rebuild Solution

It will clean and then build the solution from scratch. It will be ignoring anything it's done before. The difference between this and "Clean, followed by Build" is that Rebuild will clean-then-build each project, one at a time, rather than cleaning all and then building all.

How do I run a build task in VS Code? ›

Pressing ⌘ + ⇧ + b or running the command “Tasks: Run Build Task” without having configured a default build task will let you choose among the tasks VS Code is aware of. Similarly, you can configure a default test task. The choice of default task is saved in a file called tasks. json in the .

What is difference between build and rebuild in Visual Studio? ›

Build means compile and link only the source files that have changed since the last build, while Rebuild means compile and link all source files regardless of whether they changed or not. Build is the normal thing to do and is faster.

What is the difference between Visual Studio and Visual Studio Code? ›

“Visual Studio” and “Visual Studio Code” are not the same thing. Visual Studio is an integrated development environment (IDE) and Visual Studio Code is a rich text editor like Sublime Text and Atom. But the difference between the tools is more than just IDE and text editor.

What is the difference between build and compile? ›

"Compiling is the act of turning source code into object code. Linking is the act of combining object code with libraries into a raw executable. Building is the sequence composed of compiling and linking, with possibly other tasks such as installer creation."

What language is VS Code built with? ›

VS Code was originally written with a mix of JavaScript and TypeScript but we quickly adopted TypeScript for all of our code and immediately got attached to its improved tool support like static type checking and refactoring.

Why do developers use VS Code? ›

VS Code supports many programming languages, for which a developer does not require Web Support. Everything can be found in its built-in multi-language support. A developer can rely on Visual Studio Code for all kinds of development, as long as they pair it with the right tools.

Can VS Code replace Visual Studio? ›

While you can achieve most of your software development goals more effectively using VS Code, Visual Studio still has use-cases that it excels at out-of-the-box... without all of the extensions that VS Code would require.

Is VS Code good for projects? ›

VS Code supports many programming languages, for which a developer does not require Web Support. Everything can be found in its built-in multi-language support. A developer can rely on Visual Studio Code for all kinds of development, as long as they pair it with the right tools.

How do you code a large project? ›

How to start a large code project
  1. Take inventory. What language(s) will you use? ...
  2. Sketch your data. The great thing about data is that, by itself, it's simply inert. ...
  3. Solve the wrong problems. The advice always given to new programmers is to solve large problems by breaking them down into small problems.
Feb 18, 2017

Can I use VS Code for business? ›

Is VS Code free? Yes, VS Code is free for private or commercial use. See the product license for details.

Is Visual Studio Code resource heavy? ›

VS Code is lightweight and should easily run on today's hardware. We recommend: 1.6 GHz or faster processor. 1 GB of RAM.

Top Articles
Latest Posts
Article information

Author: Nicola Considine CPA

Last Updated: 09/10/2023

Views: 6428

Rating: 4.9 / 5 (49 voted)

Reviews: 80% of readers found this page helpful

Author information

Name: Nicola Considine CPA

Birthday: 1993-02-26

Address: 3809 Clinton Inlet, East Aleisha, UT 46318-2392

Phone: +2681424145499

Job: Government Technician

Hobby: Calligraphy, Lego building, Worldbuilding, Shooting, Bird watching, Shopping, Cooking

Introduction: My name is Nicola Considine CPA, I am a determined, witty, powerful, brainy, open, smiling, proud person who loves writing and wants to share my knowledge and understanding with you.