Build & deploy your first web app
Tags: javascript, webdev, beginners
Published: 2023-07-14 00:28:09

This guide is written for students going through [CodeDay Labs](https://labs.codeday.org/). You will learn:

- How to set up a simple web app from scratch 
- How to deploy your applications so others can access it via a URL

This tutorial is meant to teach the basic fundamentals of working with web technologies, regardless of what specific framework you might be using in the future.

### Step 1 - Create an HTML page

We are going to create our first web page, by hand. You typically will not do this in your web development career, but it will help you understand what is happening under the hood, and what problems all these frameworks like React etc are trying to help you solve.

1. Create a new directory for our project. Name it `web-dev-101`
2. Open up your favorite code editor, like VSCode or Sublime Text, and create a new file called `index.html`
3. Copy/paste the following code:


```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Web Dev 101</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>
```

4. Now preview your web page by double clicking on `index.html`, or dragging and dropping it into your web browser.

It should look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/st9ghlg4y4bf9051mtwh.png)

#### Extra challenges:

* What does the `<h1>` tag mean? What happens if you do `<h2>` tag instead? Or `<p>` tag?
* Can you change the title in the browser tab, to make it say `Web Dev 102` instead of `Web Dev 101` ?

### Step 2 - Add some styling / CSS

HTML is a markup language, it's for controlling **what** is shown on screen (as in, the content, the text, etc)

CSS is the styling language, it controls **how** things are displayed on screen (the color, the size, etc)

To add CSS/styling rules to your web page:

1. Add the following snippet inside the `<head>` tag:

```html
	<style type="text/css">
		h1 {
			color: red;
		}
	</style>
```

It should go like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v69yvps0sub4xuhhwjro.png)

Then refresh your web page, the text should now be red:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5eg31due4v034j489u7l.png)

This CSS rule we added makes ALL `<h1>` tags red. If we wanted to make a specific HTML element red, we have to give it either an ID or a class.

2. Give your `<h1>` element an id:

```html
<h1 id="title">Hello World!</h1>
```

3. Change your CSS rule to target the element with the id `title` instead of all `h1` tags:

```css
#title {
  color: red;
}
```

The `#` symbol prefixing "title" is what tells CSS to apply the rule to any element that has the ID "title". This is called a **CSS selector**.

Another common type of CSS selector is a class. It works very similarly to an ID. You can give an element a class name as follows:

```
<h2 class="subtitle">My subtitle</h2>
```

And you can style it like this in CSS:

```
.subtitle {
  color: blue;
}
```

When should you use id vs class? Typically you use id for one specific element (like the title) and a class for something for which there can be multiple elements (like a paragraph, or a button).

#### Extra challenges:

* What happens if you have an element that is BOTH an `<h1>` and has an id `title`, and you create a css rule that makes `<h1>` red and a css rule that makes `title` elements blue? Will the element be red or blue?
* Can you use CSS to make an element underlined? Or bigger font?

### Step 3 - Move your CSS to another file

You can add CSS into the same file as your HTML. But for bigger projects it is helpful to split it up into another file.

To do this:

1. Add the following line inside the `<head>` tag, this tells the HTML page it should load styles from a file called `style.css`:

```
<link rel="stylesheet" href="style.css">
```

2. Create a file called `style.css` and move your CSS in there. It might look like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnanr6ve9kitd1aqo5v.png)

3. Refresh the web page, confirm the CSS still works. Make a change to the style/color and confirm it updates when you refresh.

### Step 4 - Deploy your web page 

At this point the web page only exists on your computer. In order for others to access it on the internet, we need to:

- Put it on a web server
- Give it on a domain name

A "web server" is just a computer. Your personal laptop _could_ be a web server. You just need to run a program that responds to HTTP requests and returns your web page. 

In fact, let's try that real quick:

1. Install a simple [http server library](https://www.npmjs.com/package/http-server) by running the following command:

```
npm install --global http-server
```

_(if you don't already have npm installed, get it from here: https://nodejs.org/en/download. Yarn is also fine, the command might be slightly different.)_

2. Open up a terminal window in the folder of your `index.html` and run the following command to run a web server on your laptop:

```
http-server .
```

The dot (`.`) tells it to serve the HTML files in the current directory.

This should give you an output that looks like this:

```
Available on:
  http://172.25.240.1:8080
  http://192.168.1.147:8080
  http://127.0.0.1:8080
```

3. Open up the **second** URL in your web browser (for me that's `http://192.168.1.147:8080`). You should see your website.
4. If it works, open up this URL on your phone or another computer. As long as it's connected to the same WiFi as your laptop, it should work.

What you just did is access your web page on your phone, powered by the web server running on your laptop!

You don't have a domain name, which is why you have to access it trough the IP address of your computer. It has to be on the same WiFi network for reasons outside the scope of this tutorial.

### Step 5 - Deploy to a web server with a domain name

To put your web page on a server that others can access anywhere on the internet, we typically need to pay for this service. There's a few free options. One free option is: https://glitch.com/.

1. Create an account on https://glitch.com/signup
2. Create a new project (top right of the page)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itolbqmtb3m4gr6joy9q.png)

3. Select the first option **glitch-hello-website**

This will take you to the Glitch code editor.

4. Copy paste your `index.html` from your computer into the Glitch editor (select index.html from the sidebar then just replace all its contents)
5. Do the same for `style.css` 
6. Click the "Preview" button in the bottom panel to open up your website:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9uczb2d2s7luh5qsaue9.png)

This is your website deployed to a web server, with a domain name you can now share!

#### Extra challenges:

Another option instead of using Glitch is using Github Pages. This is a way of automatically getting a deployed web page for any repository in your GitHub account.

The following guide will explain how to do it. Try to create a new repository for your `web-dev-101` project and deploy it with GitHub pages:

https://pages.github.com/