• First, you’ll need to install some dependencies using the terminal. We’ll installcurlandgnupgusing the commandsudo apt-get install curl gnupg -y.yourusername@penguin:~$ sudo apt-get install curl gnupg -yCopy to clipboard
• Next, we’ll installnvm.nvmis what we’ll use to download NodeJS on your computer. There areinstructions in thenvmGitHub repo, but we’ll include the instructions relevant to you here.yourusername@penguin:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bashCopy to clipboardThis downloads a specific version of the install script. If this command doesn’t work for you, downloadthe install script from the repo.
• Now, we can install the latest release of node with thenvm install nodecommand.yourusername@penguin:~$ nvm install nodeCopy to clipboardIf you want to download a specific version of node, you can use the version number instead of the wordnode. For example, the following command would install version6.14.4.yourusername@penguin:~$ nvm install 6.14.4Copy to clipboard
• Use the commmandwhich nodeto see where node has been installed on your system.yourusername@penguin:~$ which nodehome/yourusername/.config/nvm/versions/node/v15.11.0/bin/nodeCopy to clipboard
• Let’s check the version of node that was installed on your system.yourusername@penguin:~$ node -vv15.11.0Copy to clipboard

yourusername@penguin:~$ sudo apt-get install curl gnupg -y
Copy to clipboard

yourusername@penguin:~$ sudo apt-get install curl gnupg -y

yourusername@penguin:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
Copy to clipboard

yourusername@penguin:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

yourusername@penguin:~$ nvm install node
Copy to clipboard

yourusername@penguin:~$ nvm install node

yourusername@penguin:~$ nvm install 6.14.4 
Copy to clipboard

yourusername@penguin:~$ nvm install 6.14.4

yourusername@penguin:~$ which nodehome/yourusername/.config/nvm/versions/node/v15.11.0/bin/node
Copy to clipboard

yourusername@penguin:~$ which nodehome/yourusername/.config/nvm/versions/node/v15.11.0/bin/node

yourusername@penguin:~$ node -vv15.11.0
Copy to clipboard

yourusername@penguin:~$ node -vv15.11.0

Creating Your First 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.

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. All of your projects will be stored in your “Linux files” so they are accessible from your Terminal.

• Let’s create a “web_projects” folder in your “Linux files”. We can do this in using the terminal or in your “Files” window.Using the TerminalFor your web development projects, let’s create aweb_projectsfolder using themkdircommand.yourusername@penguin:~$ mkdir web_projectsyourusername@penguin:~$ lsweb_projectsCopy to clipboardIn the “Files” WindowOpen up your “Files”, navigate to your “Linux files” folder, right-click in the window, then select the “New folder” option. Name your new folder “web_projects” with an underscore between the words “web” and “projects”
• Create a “hello_world” folder in your “web_projects” folder.
• Open VS Code.
• Next, we’ll open your development folder in VS Code. Click “File” in the top menu and click on the “Open Folder” button. This will open a window showing the files and folders in your “Linux files”.Navigate to thehello_worldfolder and select “Open”. This will open the “hello_world” folder in your explorer.
• Create a new file. In Visual Studio 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 (shown below)Name the fileindex.html. Press Enter when done.
• Let’s add code to ourindex.htmlfile! Copy and paste the following boilerplate HTML code:<html><head><title>Hello World</title></head><body><h1>Hello World</h1></body></html>Copy to clipboardSave your file often with the Auto Save feature. (To turn Auto Save on, click on ‘File’ then ‘Auto Save’. When it’s on, you’ll see a check mark next to ‘Auto Save’.) This will decrease the chances of losing unsaved work.
• View your HTML file in the browser. Navigate to theindex.htmlfile in your “hello_world” folder using your “Files” window. Right-click onindex.html, click on the “Open with…” open and select “View”.This will open the page as a webpage in Chrome. Take a second to marvel at your handiwork—you made your first project with Visual Studio Code! And when you’re ready to start your next project, check out ourweb development courses.

Using the Terminal

yourusername@penguin:~$ mkdir web_projectsyourusername@penguin:~$ lsweb_projects
Copy to clipboard

yourusername@penguin:~$ mkdir web_projectsyourusername@penguin:~$ lsweb_projects

In the “Files” Window

This image shows the New Folder option after right clicking

An image showing the Open folder button in VS Code

An image showing the hello_world folder open in VS Code

An image showing the new file button icon

<html>   <head>    <title>Hello World</title>   </head>
  <body>     <h1>Hello World</h1>   </body></html>
Copy to clipboard

<html>   <head>    <title>Hello World</title>   </head>
  <body>     <h1>Hello World</h1>   </body></html>

An image showing the View (default) option for index.html

Go Further with Visual Studio 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 and are what make Visual Studio Code such a useful editor!

• Debugging code in the editor:That’s right, you can run and test code from the editor!
• Version control:You don’t need to switch to the terminal on your computer to track changes with Git.
• Integrated terminal:You can run command line commands from your editor with Visual Studio Code.

Programming Locally

While there are some limitations to programming locally on your Chromebook, you can still program in many languages.

The following articles will help you set up a specific language or tool on your Chromebook:

• Programming in Python on a Chromebook
• Installing Jupyter Notebook on a Chromebook
• Installing IDLE on a Chromebook

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'