Web Programming on a ChromebookThis 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.
- 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.[email protected]:~$ 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
You will see either[email protected]:~$ dpkg --print-architecture
- 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.
- If you saw
- 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.[email protected]:~$ 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.
This downloads a specific version of the install script. If this command doesn’t work for you, download the install script from the repo.[email protected]:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
- Now, we can install the latest release of node with the
nvm install nodecommand.
If you want to download a specific version of node, you can use the version number instead of the word[email protected]:~$ nvm install node
node. For example, the following command would install version
6.14.4.[email protected]:~$ nvm install 6.14.4
- Use the commmand
which nodeto see where node has been installed on your system.[email protected]:~$ 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.[email protected]:~$ 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_projectsfolder using the
mkdircommand.[email protected]:~$ mkdir web_projects[email protected]:~$ 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”
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.
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 second to marvel at your handiwork—you made your first project with Visual Studio Code!
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: