A Complete Beginner's Guide to Web Development
Tags: beginners, webdev
Published: 2020-10-06 14:31:10

---
title: A Complete Beginner's Guide to Web Development
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/y8r8i7n2i62cmfcniz9q.jpg
published: true
tags: beginners, webdev
canonical_url: https://welearncode.com/beginners-guide-webdev/'
series: "A Complete Beginner's Guide to..."
---

You most likely visit websites almost every day, whether to interact with friends on social media, to shop, to do work, or thousands of other activities. But, how are websites made? This post will take you from beginner to creating a website that anyone on the web can visit!

**If you're brand new to programming, you may also want to read [this](https://dev.to/aspittel/a-complete-beginner-s-guide-to-programming-2ni4) post!**

## How the Browser Works

If you're reading this article, you've used a web browser before. Browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari allow you to access the internet.

First, a user chooses a URL they want to go to - for example, they could type "[https://twitter.com](https://twitter.com)" into the URL bar and press enter, or they could click a link somewhere else online. This makes a _request_ to a _server_.

A server is a computer that can handle these _requests_ and then return information to the browser. This data is called the _response_. Often, that response contains an HTML page that the browser can display to that user.

This process is called the request-response cycle.

### An Example: Twitter

Let's dive a little deeper with an example. First, the user makes a _request_ to Twitter by typing "[https://twitter.com](https://twitter.com)" in the URL bar. Then, a Twitter server decides what information should be returned to the requester.

Let's discuss the URL a little more: "[https://twitter.com](https://twitter.com)" returns the home feed page. If the user navigated to "[https://twitter.com/aspittel](https://twitter.com/aspittel)" instead, they'd expect to see my profile and tweets instead. The server is responsible for obtaining the appropriate information based on the user's request. The website data, such as Tweets and users, are stored in a database. The server queries that database for the appropriate data for the page and performs other logic to manipulate that data.

Finally, the server responds with the response, which will be an _HTML_ page with the correct data plugged into it.

## Frontend vs. Backend Development

Let's talk a little about the technologies that go into web development. We normally divide development into Frontend and Backend. Frontend developers work on the user interface side of websites, so how the page looks, displaying the content, and how the user interacts with the site. Backend developers work on the server-side -- they write the logic that decides which data is sent to the user.

Frontend developers normally use HTML, CSS, and JavaScript -- which we will discuss more in this post. Backend developers have a lot more languages to choose from such as Python, PHP, Java, and C#.

To get started, let's write a frontend website.

## Frontend Technologies

Three primary languages go into websites: HTML, CSS, and JavaScript.

**HTML** is responsible for the _content_ of web pages -- things like text, images, videos, and headings are controlled by HTML.

**CSS** is for styling websites, so colors, fonts, and the positioning of elements. We can use CSS to style the content we create with HTML.

Finally, **JavaScript** makes web pages interactive. Some examples would be popups and data that changes. You can also use JavaScript to write or update HTML, so some websites are written entirely in JavaScript now!

Let's learn the basics of these frontend languages, and build an "about me" site with HTML and CSS.

## Let's Create a Website

The first thing we need to do is download a text editor, which will allow us to write code. There are a lot of options on which to use, but my favorite is [Visual Studio Code](https://code.visualstudio.com/). Go ahead and download it on your computer.

Once it's downloaded, open the application. Also, create a folder on your computer. On a Mac, you can open up the `finder` application and then click `file > new folder`. On a Windows computer, you can do similar with the `File Explorer` app. Call the folder `about-me` or whatever you want to call it!

Now, navigate back to VS Code. Click on the `Open folder...` link under `Start`. Then, select the folder you just created.

![open folder under start](https://welearncode.com/beginners-guide-webdev/start-new-file.png)

Now, we'll create two files, `index.html` and `style.css`. You can do this in VS Code by clicking on the icon that looks like two pieces of paper on the left-hand bar.

![](https://welearncode.com/beginners-guide-webdev/create-new-file.png)

Then click on the `new file` button next to the name of the folder. You may need to hover over the explorer section on the left that opened when you clicked the two pieces of paper button. Then enter the name of the file and press the `enter` key.

![](https://welearncode.com/beginners-guide-webdev/files-created.png)

You can also create the files in your `finder` or `file explorer` if you're more comfortable with that!

## HTML

We write HTML using tags that describe what type of content is between them. For example:

```html
<h1>Hello World</h1>
```

`<h1>` is the open tag, it denotes that Hello World, our content, is a first level header. `</h1>` is the close tag, which ends the header.

Let's go ahead and add code to our website.

In VS Code, click on the `index.html` file you created to open it up.

In the file, add the following code:

`<html></html>`

These tags say that anything between them is HTML -- this may be obvious to us, but it's good practice to tell the browser that too.

Let's go ahead and add a `<head>` and a `<body>` tag inside of the `<html>` tags:

```html
<html>
  <head></head>
  <body></body>
</html>
```

The `body` tags will contain all our page content -- the stuff that will show up to the user. The `head` tags will contain configuration information about the page.

Inside the `head` tags, we'll add a `title` tag and inside the `body` tag we'll add an `h1` tag.

```html
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

Now, save the file. You can do this using the shortcut `cmd + s` or `ctrl + s` or by clicking `file > save` on the menu bar of your computer.

Now, let's open up this website on your computer. In your finder, right-click on the file and click `open with > Chrome` or your browser of choice. On a Mac, you can also double click the file.

Your browser should open up with a web page:

![](https://welearncode.com/beginners-guide-webdev/hello-world-page.png)

The `Hello World` comes from your `h1` tag, and the text on the tab comes from the `title` tag. Let's add some more information!

```html
<html>
  <head>
    <title>About Blair</title>
  </head>
  <body>
    <h1>About Blair</h1>
    <p>
      Blair is a very sweet mini double doodle. 
      She likes chasing balls and eating peanut butter.
      She also likes napping on her mama's lap while she works.
    </p>
    <img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg">
  </body>
</html>
```

Save your file again, and then refresh your HTML page in the browser! New information!

Let's discuss the two new tags. The `p` tag is for paragraphs. The `img` tag is a little different. First, it's a self-closing tag which means that we don't need a close tag for it. It also has an `attribute`. Attributes are additional information that we can add to tags. The `src` attribute holds the URL for an image. You can pick any image on the web!

Let's add a second attribute to our `img` tag -- `alt`.

`<img src="https://pbs.twimg.com/media/EiAQnwXX0AESbgZ.jpg" alt="Blair lying on her back on her bed">`

Alt-text is what will be read to users utilizing screen readers, it's really important to focus on making your HTML [accessible](%5B)]([https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What\_is\_accessibility](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility)) by using tools like alt text.

This is just a small sampling of the things we can do with HTML, [here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) is a list of more resources you can explore.

## CSS

Our web page works, but it isn't very pretty yet -- it's just black text on a white background. Let's add some CSS to style our page!

First, we need to link our style sheet to our HTML page. We will do that inside of our `head` tag:

```html
<head>
  <title>About Blair</title>
  <link rel="stylesheet" href="style.css">
</head>
```

This links our CSS sheet to our HTML page, so we can now write some code to style our page. Save your HTML file and then open up the `style.css` file in VS Code.

With CSS, we select elements from our HTML and add styling to them. Let's make our image a little smaller:

```css
img {
  height: 200px;
}
```

The `img` says that we are adding styling to our `<img>` tags. Everything inside the `{}` will apply to the `img`s. Then, `height: 200px;` is a rule. In this case, we are saying that our images will be 200 pixels tall.

![CSS selector diagram](https://res.cloudinary.com/practicaldev/image/fetch/s--OKgDRq8---/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/plbffq89hy8s5pm1el2s.png)

Let's also add a background color to our page:

```css
body {
  background-color: lightpink;
}
```

Play around with adding some more styles -- [color](https://www.w3schools.com/css/css_text.asp) and [font](https://www.w3schools.com/css/css_font.asp) may be good to try!

I also wrote [this](https://dev.to/aspittel/css-from-zero-to-hero-3o16) full guide to CSS if you want to dive into it deeper.

## Deployment

Now we have a website, but we can only access it on our computer. We need to use a server to make it available to other users on the web. Managing our own server would be quite a bit of work and pretty expensive. We'll instead use a cloud-based server via [AWS](https://aws.amazon.com/). This means that you can just upload your files and AWS will host them for you, it'll also be free for the first year. After that, the pricing will look [like this](https://aws.amazon.com/amplify/pricing/).

First, [create an AWS account](https://aws.amazon.com/premiumsupport/knowledge-center/create-and-activate-aws-account/). Then, navigate to the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home). Click the `Connect app` button, then select `Deploy without Git provider` (the last option) on the next page.

We will also need to zip our files. In your finder or file explorer, right-click on the `about-me` folder and click `compress folder`. Then, drag and drop the generated zip file to AWS.

![](https://welearncode.com/beginners-guide-webdev/amplify-setup.png)

Finally, click the `save and deploy` button. On the next page, you may need to wait a few seconds for your site to finish building. Once it does, you'll see a URL that you can send to anyone! [Here](https://dev.d2eake8ncluv1e.amplifyapp.com) is mine.

## Conclusion

Web development is an awesome career path, and there is so much you can learn within it. Hopefully, this tutorial got you interested in learning more! [Here](https://welearncode.com/favorite-free-resources/) are some of my favorite resources for getting started.