DEV Community

Cover image for A Complete Beginner's Guide to Web Development
Ali Spittel
Ali Spittel

Posted on • Originally published at welearncode.com on

A Complete Beginner's Guide to Web Development

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 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" 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" 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" returns the home feed page. If the user navigated to "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. 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

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.

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.

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:

<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>
  <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>
  <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:

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>
  <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](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 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:

<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:

img {
  height: 200px;
}

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

CSS selector diagram

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

body {
  background-color: lightpink;
}

Play around with adding some more styles -- color and font may be good to try!

I also wrote this 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. 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.

First, create an AWS account. Then, navigate to the AWS Amplify Console. 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.

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 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 are some of my favorite resources for getting started.

Discussion (10)

Collapse
nialljoemaher profile image
Niall Maher

Super useful series! Great work. 🤘

Collapse
jighdan profile image
Reinny Almonte

Great article Ali

Collapse
andrewbaisden profile image
Andrew Baisden

Another awesome series thanks for sharing.

Collapse
nektro profile image
Meghan (she/her)

Great article Ali!

and pages.github.com/ and netlify.com/ are also great options for the Deployment step

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
lumdermaku_30 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Info Comment hidden by post author - thread only accessible via permalink
LumDermaku • Edited on

So you talk about front-end and back-end and endup giving only examples of (simple) fron-end development? What about also including a (simple) backend example? How to deal with at least 1 endpoint, a database query, or how to process given data from front-end?
There are thousands of these types of posts around the internet about the basics of web dev and OP ends up giving examples only about front end and back end is nowhere to be seen which should be considering that it is a part of "a complete beginner's guide to web-dev".
Posts like these just clutter this site and almost every other resource on the internet, so why not try to stand out for good and include a more realistic guide of examples of what you include in your posts? It's like, every single chain of posts (like this) in dev.to is supposed to be good just because OP spent a while writing these but rarely anyone discusses if these posts are actually helpful or not.
Sorry but i don't find this posts any good since it doesn't look any different from other "intro to web dev for beginners" posts.

Collapse
aspittel profile image
Ali Spittel Author • Edited on

A couple of points:

1) one of the most important principles of teaching is to only teach what is necessary. Overwhelming a complete newbie with installing python or node or whatever and then maxing an Ajax call would most likely lose the newbie and overwhelm them.

2) the idea of “cluttering the internet” or “this has already been written” is super toxic and discouraging to authors. You can spend your time writing a post that fits your criteria. Write the blog post that would have helped the past version of yourself. Everyone has a different viewpoint and a different audience, so writing with those things in mind is important.

3) I do have intro to backend posts in my history here. Feel free to check them out if you’re looking for one.

If you end up writing the post you’re asking for here I’d love to see it, please send it along.

Collapse
lumdermaku_30 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
LumDermaku

Uhhh.. you missed the point and took this too personally. So when i make a valid point about your weak way of writing an article, you call it toxic and discouraging? Seems constructive criticism doesn't apply to you because your feelings might get hurt? If you think this is toxic to you, don't generalize this to all authors/writers, if you think that criticism is toxic to you in particular, say that it is toxic to you in particular, not to writers in general. There are probably other writers that will accept the criticism and move on, not reply with "hurt feelings" since this isn't kindergarden. I just kinda feel bad about dev.to since for a while i've seen posts that are very similar to each other and have just a small amount of different nuances here and there.
You can look at this this way: how about you don't give any examples of the front end part and jump directly in the bac-end? Most people (beginners) already assume that web-development is just UI design, a button here and there, etc (that's what i've thought a long time ago and all other beginners i've been around with while starting to learn programming). You're introducing newbies to web development and when you come to the back end part, you immediately jump into assumptions that they might get overwhelmed? So every "web developer" should start with front end and later on start with backend bwcause of the fear that they will get overwhelmed? Newbies don't get overwhelmed by clicking "download node.js" and "install node.js". This (the basics of backend) are also essential to teach (what you said at 1) ) in posts like these.

Seems like not everyone has a different viewpoint and different audience when clearly your viewpoint is so general, basic and not original at all. You're clearly contradicting yourself. My idea is also not original at all(to include back end examples in these "intro to web dev" posts) but at least i'm not saying that i have a different viewpoint. It just would've been great to see more articles like yours with examples based on other aspects of web dev besides just front end.

Thread Thread
aspittel profile image
Ali Spittel Author • Edited on

I responded super calmly to your points not for you but for the people reading this post who may now be discouraged from writing their own posts.

You are inferring a lot about my emotions here.

You could have also framed the criticism in a much more constructive way.

“I would have loved to also see x in this post, that was something I was looking for when I was a new programmer.” Simple as that without any insults or "Sorry but i don't find this posts any good"

:)

Thread Thread
lumdermaku_30 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
LumDermaku

I never insulted or inteded to insult your work but i don't know what went through your thoughts, you can expand your imagination for as much as you can. Since your last reply was super cringe, i'll kindly back off this thread. You can keep replying though.

Some comments have been hidden by the post's author - find out more