Web Programming on a 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
   
   

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

4. Open your “Files” on your Chromebook and go to your “Downloads” section. Double-click on the installer to begin the installation.

   

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.

6. Now, you can search for VS Code whenever you’re ready to start coding!

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
   
   

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

4. Use the commmand which node to see where node has been installed on your system.

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

5. Let’s check the version of node that was installed on your system.

   yourusername@penguin:~$ node -v
   v15.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.

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
   web_projects
   
   

   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”

2. Create a “hello_world” folder in your “web_projects” folder.

3. Open VS Code.

4. 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 the hello_world folder and select “Open”. This will open the “hello_world” folder in your explorer.

   

5. 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 file index.html. Press Enter when done.

6. Let’s add code to our index.html file! Copy and paste the following boilerplate HTML code:

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

   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.

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

• 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