As you learn more about computer programming and web app development, you’ll need a lot more than CodePen. Apps like Facebook weren’t built inside a web browser. Developers write code in files on their computers using a text editor. Then, they use the terminal (or command line) to bundle all those files into a single app. Throughout this process, developers are constantly saving versions of the code files so they can go back to them if anything breaks.
In this tutorial, I’ll show you how to setup your computer for web app development. We’ll install Visual Studio Code, which is the best code editor for web development. Then, we’ll install a tool called node which comes with a few helpful tools like NPM. Finally, we’ll install Git, which is another command line tool that allows you to save versions of your files for later. As we install these three tools, we’ll be setting up a basic project that’ll work similarly to the one you’d have in CodePen.
Installing Visual Studio Code (VSCode)
The most important thing you need is a code editor. I recommend Visual Studio Code. It’s made by Microsoft and its screen reader friendly! According to the documentation, it was tested with NVDA and contains some features that make it easy for those who use screen readers to navigate the app. Other alternatives to Visual Studio Code (VSCode) are Atom and Sublime text. I’ve used both of them before, but I line VSCode best
To install VSCode, go to their website and download the installer for your operating system (Windows, Mac or Linux). Then, run the installer.
You can keep all the settings the way they are. But iff your on Windows, keep an eye out for a checkbox that says something about adding to the “System PATH” and be sure to check it. That means that the app comes with a command line tool. Command line tools add new commands that you can use on your terminal or command line.
Setup Your Project in VSCode
Now that you have VSCode installed, let’s setup a project just like the one you’ve had in CodePen. First, we need to create a folder and open it in VSCode. First, create a folder on your computer. You can name it anything you want, just be sure there are no spaces in the name. It’s common for developers to replace any spaces with dashes or underscores.
It doesn’t matter where you create the folder, but I’d recommend creating a folder called
dev in the root of your hard drive. This folder can contain all your code related projects. You don’t have to do this, it just makes it easier later when we’re working in the terminal/command line.
Once you’ve created the folder, open VSCode and open the folder to create a workspace.
- In VSCode open the File menu and select Open (Open Folder on Windows) or press CMD + O (or CTRL + K then CTRL + O)
- Navigate to and select the folder you just created.
Once you’ve opened the folder, you’ll see an empty sidebar on the left. That’s the file explorer. It shows you all the files and folders that are inside the folder you just opened. There’s nothing in there so lets add some files.
- Right click in the sidebar and choose “New File”
- Name the file
- Repeat step 1 and create a
- Repeat step 1 and create a
You should now see three files in left sidebar. On the right side of the screen is the main text editor. At the top of the section, there’s a tab for each of the files that are currently opened. You can switch between the files using the CTRL + TAB keyboard shortcut.
.html file is where all our HTML code will go. It’s best to title the home page of your project
index.html because servers automatically recognize it as the home page. When you visit
google.com, the server automatically knows to give you back the
index.html file. The
style.css file will hold all of our CSS code and the
index.html file and type an exclamation point (
!). Then, press enter. That’ll generate the following code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
The first line tells the browser what version of HTML we will be using. This is just how we declare that we’ll be using HTML 5. Next is the
html tags. All of our HTML elements will go inside these
html tags. There are only two elements that belong directly inside the
html tag. That’s the
head (not to be confused with
head tag contains tags that give information about the page to search engines like google. These tags don’t do anything to the appearance of the page. One of these informational tags is the
meta tags can give all kinds of information to the web browser. The
title tag contains the text that goes in the browser tab when the page is opened.
The elements that you see on the page go in the
body tag. In CodePen, the code that you type into the HTML section goes directly into the
The link tag adds our CSS file. If you start typing the word
link, you’ll notice a pop-up box next to where you’re typing. It contains suggestions for the code VSCode thinks you are trying to write. You can use the up and down arrows on your keyboard to select one and press TAB or ENTER and VSCode will generate the code for you. When you start typing
link it should be the first option, so you can simply press ENTER.
The link tag nees to attributes
href. VSCode will fill out the
rel attribute, telling the browser that we’re adding a stylesheet. But, you ned to tell the browser where the file is. After generating the code, VSCode places your cursor between the quotation marks of the
href attribute. Enter
./style.css as the value. The
./ tells the browser to look in the same folder that the current file (
index.html) is in. It’s looking for a file called
script:. Select the option that says
script:src from the suggestions. This will generate script tags and place your cursor in the
src attribute, so you can tell the browser where the file is. Use the same pattern,
./main.js, to tell the browser to look in the current folder for a file called
√<head> ... <title>Document</title> <link rel="stylesheet" href="style.css"> <script defer src="main.js"></script> </head>
Anther nice thing about VSCode is that anyone can add features to it by writing an extension. Extensions can be installed from the Extensions panel. To open the Extensions Panel, select it from the toolbar on the left side of the window. You file explorer wi be replaced by a list of the most popular VSCode Extensions.
To view the HTML page we just created, we’ll install an extension called “Live Server” Go to the Extensions panel and search for it. It should be the first option. A new tab will open in the main code area. It shows a page with all of the information about the extension. Click the install button on the page.
Once the extension is installed, go back to the file explorer by selecting the first option in the left sidebar. Then, right click on the
index.html and select the first option that says “Open with Live Server”. It will open a browser tab to your web page. As you save changes to the file, it’ll refresh the page automatically to show your changes.
Here are some other helpful extensions and a brief description of what they do.
- Path Inellisence: Type a forward slash anywhere in your code and you’ll see the folders and files from the file explorer panel as suggestions.
- Auto Rename Tags: This extension makes it easy to rename tags. You only have to rename one tag and it’ll find the other one and change it for you (Assuming you remember to close your tags).
Whenever you use a new programming language or library, you should check to see if there is an extension for it. That’ll ensure that you have suggestions for that language or library.
Command Line Tools
The most popular command line tool fo web developers is NPM. NPM is a package manager that allows you to download code libaries like Bootstrap using the terminal/command line. You can also use it to install other command line tools.
You can download Node from here. The installer works just like the VSCode installer. For Windows users, keep an eye out for that “System PATH” checkbox. This time it’s even more important because Node doesn’t come with an app like VSCode. It only installs commands we can use in the terminal. Once you’ve installed Node, you may need to restart your computer.
Now that you’ve add Node, which comes with NPM, Lets install Bootstrap in our project.
- Open the terminal inside VSCode by pressing CMD/CTRL + J.
- In the terminal type
npm init -y, then press enter. That will generate a file called
npm install bootstrapand press enter.
The first command,
npm init -y, creates a
package.json file. This file contains information about the project including a name, license and dependencies. Dependencies are the packages (code libraries) that we install in the project folder. When we ran the second command,
npm install bootstrap, it added an entry in
package.json to tell NPM that that Bootstrap is a dependency and specifies the version of Bootstrap that was installed. The
package.json file is useful when sharing your project with others because it means that you don’t have to upload thousands of dependency files. Everyone can install there own copies of the dependencies using the
That second command also creates a
node_modules folder. This is the folder where all the dependencies are stored. You should never change any files in the
node_modules folder. You can, however, open the folder and have a look around. Right now, the only folder inside
bootstrap. Inside the
bootstrap folder, there are a whole bunch of other files and folders. The only folder we’re interested in right now is the
bootstarp.js files. These contain the entire library.
You might also notice that there are
.min.css files and
.min.js. files. These files are the same as the
.css files, and
.js files, except that all the spaces were removed. That makes the file size much smaller. Using these will make your page load faster, and it’s best to use these when deploying your page to the internet.
<head> ... <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="./style.css"> <script src="./node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="./main.js"></script> </head>
Or, you could copy the files you need and create a
js folder outside
node_modules. You should also move your other files into those folders.
<head> ... <link rel="stylesheet" href="./css/bootstrap.css"> <link rel="stylesheet" href="./css/style.css"> <script src="./js/bootstrap.js"></script> <script src="./main.js"></script> </head>
This is probably a better approach. When you deploy your page on the internet, you will be leaving behind the
node_modules folder, so you won’t have access to those Bootstrap files.
When working with files, we know that we can save our changes. But once we save our changes and close the program, we can’t go back to the way things were before we saved the file. This becomes a problem when working with large code projects. It’s easy to change your code in a way that causes it to stop working (or crash). It can be difficult to figure our what change broke the code. That’s why its really important to save different versions of the code. That’s what Git and GitHub are for.
When we use Git, our project folder becomes a “repository”. That means we can tell Git which files in the folder we want it to “watch”. When Git is watching a file, it’s keeping track of all the changes we’ve made since the last time we made a commit. A commit is when we save the entire folder. It’s best to do this right after you’ve added a new feature and you’re sure everything is working as it should.
You can install Git here. The installer works just like the Node installer. It will add new commands to your terminal.
Adding Version Control
Now we can turn our project into a repository. In the VSCode terminal:
git init. That turns the folder into a repository
- Create a file called
.gitignore. That tells Git not to pay attention to the
- in the terminal, type
git add .. This tells git to stage all the files.
- Then type
git commit -m "My first commit"That saves the changes and leaves a little note to tell us what kind of changes are saved here.
When using Git, you don’t have to save all the files, you can select specific files This is called “staging”. Before making a commit, you have to sage the files you want to commit.
Now, if you make some changes to the files that you don’t want, you can go back to this commit and your files will be exactly the same as they were when you made the commit.
You might be wondering why we excluded the
node_modules folder. As you install more NPM packages, your
node_modules folder is going to get HUGE! That means it’ll take longer to commit your changes because Git will have more files to llook through. And since you shouldn’t be changing the
node_modules files anyway, that’s a lot of unnecessary work.
But what happens if we update a package and the update breaks our code? That’s what the
package.json file is for. It keeps track of the versions of the packages we’ve installed and this file is being tracked by Git.
Sharing Your Code on GitHub
Some of your projects might be tools that you want other developers to use. Others might be projects that you want other developers to help with. You might even want to help out with existing projects. The best way to do this is through GitHub. GitHub is a service that allows you to host a repository on their servers. Anyone can download the repository and use and make changes to the code.
Here’s how GItHub Works. Once you’ve made a commit on your computer, you can push (upload) the commit to the GitHub version of the repository. If you’re working on a project with others, you should remember to pull (download) the latest changes before making your own changes. When you work on someone else’s repository you must first fork (copy) it to your account. Once you’re done, you can submit a pull request so that the original repository’s owner can pull your changes to their repository.
We won’t do all of these things here, but I’ll show you how to upload your repository to Github.
- Go to https://github.com/ and create an account.
- Click the Green button in the left sidebar that says “New”
- Add a name for your repository. The name shouldn’t have any spaces or special characters. I suggest using the folder name for your project.
- Leave all settings as they are and click the green button that says “Create Repository”.
- Under the heading that says “…or push an existing repository from the command line” , you’ll see three commands Copy them into the VSCode terminal one by one.
Now whenever you want to push your changes to GitHub, you can type
git push and all the commits you’ve made since your last push or pull will be uploaded to GitHub.
In this tutorial, we installed Visual Studio Code, NPM and Git. These are the most popular tools used by all kinds of software developers not just for web devs.
There are a lot of things that might’ve gone wrong throughout the setup process. Everyone’s computer is a little different, so don’t feel bad if some things didn’t work. If you’re having any problems, leave a comment and I’ll help you out.