DEV Community

Omar Shehata
Omar Shehata

Posted on

Build & deploy your first web app

#javascript #webdev #beginners

This guide is written for students going through CodeDay Labs. 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: 
<!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>
Enter fullscreen mode Exit fullscreen mode
  1. 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

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: 
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>
Enter fullscreen mode Exit fullscreen mode

It should go like this:

Image description

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

Image description

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.

  1. Give your <h1> element an id: 
<h1 id="title">Hello World!</h1>
Enter fullscreen mode Exit fullscreen mode
  1. Change your CSS rule to target the element with the id title instead of all h1 tags: 
#title {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

And you can style it like this in CSS:

.subtitle {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
  1. Create a file called style.css and move your CSS in there. It might look like this:

Image description

  1. 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 by running the following command: 
npm install --global http-server
Enter fullscreen mode Exit fullscreen mode

(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.)

  1. 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 .
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  1. Open up the second URL in your web browser (for me that's http://192.168.1.147:8080). You should see your website.
  2. 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

  1. Select the first option glitch-hello-website

This will take you to the Glitch code editor.

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

Image description

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/

Top comments (0)

Read next

it_vturbo profile image

The Evolution of Frontend Development: Exploring Different Architectures

Valentin Turbins -

shadiajam profile image

Should We Rethink About IDs? A Deep Dive into "Snowflake IDs"

Shadi AJAM -

nobody-99 profile image

-? What is YARN ?-

nobody-99 -

jagroop2001 profile image

20 Important JavaScript Concepts for Your Next Interview 🚀

Jagroop Singh -