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.
- 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
- 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
yourusername@penguin:~$ dpkg --print-architecture
You will see either
3. Go to the VS Code Download page. The Linux installation section will be underneath the image of the penguin.
- If you saw
amd64when 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
arm64when you ran the previous command, click the button that says “ARM 64” in the “.deb” row underneath the image of the penguin.
- 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!
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.
- First, you’ll need to install some dependencies using the terminal. We’ll install
gnupgusing the command
sudo apt-get install curl gnupg -y.
yourusername@penguin:~$ sudo apt-get install curl gnupg -y
- Next, we’ll install
nvmis what we’ll use to download NodeJS on your computer. There are instructions in the
nvmGitHub 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
yourusername@penguin:~$ nvm install 6.14.4
- Use the commmand
which nodeto see where node has been installed on your system.
yourusername@penguin:~$ which nodehome/yourusername/.config/nvm/versions/node/v15.11.0/bin/node
- Let’s check the version of node that was installed on your system.
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 Terminal
For your web development projects, let’s create a
web_projects folder using the
yourusername@penguin:~$ mkdir web_projectsyourusername@penguin:~$ lsweb_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” 3. 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 the hello_world folder and select “Open”. This will open the “hello_world” folder in your explorer.
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)
Name the file
index.html. Press Enter when done.
- Let’s add code to our
index.htmlfile! 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.
- 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.
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: