Computer Setup for Web Development

CodePen is a great way to start learning to code. It allows you to start writing code without having to install all kinds of complicated tools on your computer. There’s a built in code editor for HTML, CSS and JavaScript. They’ve even got a place where you ca see the results of your code. Everything you need is right there in your web browser.

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.

  1. In VSCode open the File menu and select Open (Open Folder on Windows) or press CMD + O (or CTRL + K then CTRL + O)
  2. 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.

  1. Right click in the sidebar and choose “New File”
  2. Name the file index.html
  3. Repeat step 1 and create a style.css file.
  4. Repeat step 1 and create a main.js folder.

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.

The .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 main.js file will hold all the JavaScript code. Those two files will be linked to the HTML file so that the browser kows it needs all three files for the page to work properly.

Before we can start writing those tags to add our CSS and JavaScript files, we need a few other tags. We didn’t need to add these tags when using CodePen because CodePen handled it for us behind the scenes. These tags must be included in every HTML web page, so CodePen took care of it for our convenience. To add the HTML starter code, go to the first line of 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 header) and body tag.

The 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 tag. 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 body tag.

To link up or CSS and JavaScript files, we need to add tags in the head tag.

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 rel and 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 style.css.

Next, we need to add the JavaScript file. Below the link file, start typing 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 main.js

√<head>
	...
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script defer src="main.js"></script>
</head>

Now you can write HTML, CSS and JavaScript in these three separate files and everything will work just like it does on CodePen. But how can you view your web page?

VSCode Extensions

Live Server

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.

  • Prettier – Code Formatter: This extension formats your code whenever you save a JavaScript file to make it easy to read.
  • 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.

To get NPM, we need to install another command line tool called Node. Node makes it possible to run JavaScript code directly on your compute outside the browser. When you install Node, you also get NPM.

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.

  1. Open the terminal inside VSCode by pressing CMD/CTRL + J.
  2. In the terminal type npm init -y, then press enter. That will generate a file called package.json
  3. Type npm install bootstrap and 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 package.json file.

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 node_modules is 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 dist folder.

The idst folder is where you can find all the completed files. The nice thing about installing packages is that you get access to all the code that the developers wrote to create the library. If you know what you’re doing you can pick and choose the files you want, change them to fit your needs, and bundle your own version of the library into a single CSS or JavaScript file. For this project, we’ll only be using the completed files in the `dist folder.

Inside the dist folder, there’s a folder for CSS and JavaScript files. Inside each folder, you’ll find individual CSS or JavaScript files for different parts fo the library. If you know which features you’ll need, you can use those individual filses .However, for this project, we’ll be using the bootstap.css and 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.

You could add the CSS and JavaScript files like this:

<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 css and 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.

Version Control

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:

  1. Type git init. That turns the folder into a repository
  2. Create a file called .gitignore
  3. add node_modules/* to the .gitignore. That tells Git not to pay attention to the node_modules folder.
  4. in the terminal, type git add .. This tells git to stage all the files.
  5. 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.

  1. Go to https://github.com/ and create an account.
  2. Click the Green button in the left sidebar that says “New”
  3. 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.
  4. Leave all settings as they are and click the green button that says “Create Repository”.
  5. 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.

Wrapping Up

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.

Leave a comment

Your email address will not be published. Required fields are marked *