Web Programming on a Chromebook

Codecademy Team
This article will teach you how set up for web development on Chromebooks so you can do off-platform web development projects on your Chromebook.

If you haven’t set up your local Linux environment on your Chromebook yet, please read the Programming Locally on a Chromebook article first.

Installing VS Code

You can follow the below instructions or find installation instructions from the VS Code website here.

  1. We will start by installing some packages using the terminal. We need to install the dependency gnome-keyring. You can do this with the command sudo apt-get install -y gnome-keyring.
yourusername@penguin:~$ sudo apt-get install -y gnome-keyring
  1. Next, to determine which installation file you should download, we need to figure out which CPU your Chromebook has. You can do this with the command dpkg --print-architecture.
yourusername@penguin:~$ dpkg --print-architecture

You will see either amd64 or arm64. 3. Go to the VS Code Download page. The Linux installation section will be underneath the image of the penguin.

  • If you saw amd64 when you ran the previous command, click on the button that says “64 bit” in the “.deb” row underneath the image of the penguin.
  • If you saw arm64 when you ran the previous command, click the button that says “ARM 64” in the “.deb” row underneath the image of the penguin. Image of Linux download section
  1. Open your “Files” on your Chromebook and go to your “Downloads” section. Double-click on the installer to begin the installation.

Image of the install file in the Downloads folder 5. A popup will let you know that you’re going to “Install app with Linux (Beta)”. Click “Install” to start the installation. You can press “Okay” to close the installation window. An image of the popup saying "Install" 6. Now, you can search for VS Code whenever you’re ready to start coding! An image of the popup saying "Install"

Installing Node.js

Not all web programming projects require node.js, but, if yours does, make sure to follow the below instructions to set that up as well.

  1. First, you’ll need to install some dependencies using the terminal. We’ll install curl and gnupg using the command sudo apt-get install curl gnupg -y.
yourusername@penguin:~$ sudo apt-get install curl gnupg -y
  1. Next, we’ll install nvm. nvm is what we’ll use to download NodeJS on your computer. There are instructions in the nvm GitHub 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 | bash

This downloads a specific version of the install script. If this command doesn’t work for you, download the install script from the repo. 3. Now, we can install the latest release of node with the nvm install node command.

yourusername@penguin:~$ nvm install node

If you want to download a specific version of node, you can use the version number instead of the word node. For example, the following command would install version 6.14.4.

yourusername@penguin:~$ nvm install 6.14.4
  1. Use the commmand which node to see where node has been installed on your system.
yourusername@penguin:~$ which node
  1. Let’s check the version of node that was installed on your system.
yourusername@penguin:~$ node -v

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.

  1. 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 Terminal

For your web development projects, let’s create a web_projects folder using the mkdir command.

yourusername@penguin:~$ mkdir web_projects
yourusername@penguin:~$ ls

In the “Files” Window

Open 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” This image shows the New Folder option after right clicking 3. Create a “hello_world” folder in your “web_projects” folder.

  1. Open VS Code.

  2. 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”.

An image showing the Open folder button in VS Code Navigate to the hello_world folder and select “Open”. This will open the “hello_world” folder in your explorer.

An image showing the hello_world folder open in VS Code 6. 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) An image showing the new file button icon Name the file index.html. Press Enter when done.

  1. Let’s add code to our index.html file! Copy and paste the following boilerplate HTML code:
<title>Hello World</title>
<h1>Hello World</h1>

Save 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.

  1. View your HTML file in the browser. Navigate to the index.html file in your “hello_world” folder using your “Files” window. Right-click on index.html, click on the “Open with…” open and select “View”. An image showing the View (default) option for index.html 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 our web development courses.

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!

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: