The Backend Developer Roadmap: Part 2: Basic Frontend Knowledge vol. 1

6 min readApr 13, 2021

Welcome to part 2 of this blog series. In part 1, we learned how the internet works, what web browsers are, what HTTP and DNS are, and most importantly, what web hosting is and its role in website development. Now, as promised, it is time to learn some basic information about what goes into the frontend. How I plan on doing part 2 of the series is by providing a history of HTML in vol. 1, CSS in vol. 2, and JavaScript in vol. 3, followed by creating and updating a basic webpage utilizing the the respective language. There were two articles that helped me learn about the history of HTML. They have been stated in the bibliography. On top of those, I utilized w3schools to help me touch up on some of the HTML tags and their uses. I included a link to a list w3schools created that has all of the HTML tags as well as a brief description of each. And without further ado, let’s learn.

HTML

HTML stands for Hypertext Markup Language. It was created by a man named Sir Tim Berners-Lee in 1991. HTML 1.0 was officially released in 1993, however, there were not many developers creating websites at the time so HTML didn’t take off until the release of HTML 2.0 in 1995. HTML 2.0 could do all the things 1.0 could and then some. This helped skyrocket HTML to the forefront of website development.

In 1997, HTML 3.0 was released with the hope that users would get access to even more powerful features. However, a speed bump arose when it was discovered that these features actually slowed the browser down, An issue that kept HTML 2.0 the standard in web development until 1999 when HTML 4.0 was introduced into the world. HTML 4.0 was, in fact, so successful that it remained the standard of web development until 2014! In 2014… you guessed it… the current version of HTML, HTML 5.0, was introduced. HTML is indeed what is used today and it is utilized worldwide when developing websites.

The Project

Now that we have a super brief history of HTML, let’s dive right into seeing how it works through a small example project.

First, we must start by telling the browser what type of document to expect. We do this by placing an HTML declaration at the top of the HTML file.

<!DOCTYPE html>

Next, we will encase all of our HTML inside of an “html” tag. We will also give this “html” tag a “lang” attribute to tell the browser what language the webpage will be in.

<!DOCTYPE html>
<html lang="en"></html>

Next, we will add our “head” tag. Our “head” tag holds the metadata for our webpage. For example, the “head” tag may hold information about what characters and symbols the webpage will use, what version of Internet Explorer to use, or even metadata that helps the webpage become responsive to different size screens. The “head” tag is usually also where the title for the webpage will rest.

<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>This Is Our Webpage Title</title>
</head>

Now comes the real meat of an HTML file. After closing in our metadata with the “head” tag, we will want to close in everything else inside of a “body” tag.

<head>
...
</head>
<body></body>

Now, before we go any further I would like to provide a warning. The webpage I am going to be building is a representation of my side of a very sensitive topic. If you feel otherwise then I would suggest finding another blog post to read. Or simply skip ahead to part 3 of this blog series. My objective with this part of the series is to teach people about the basics of frontend development. That being said, if you find yourself offended by my views then I’m sorry you are so sensitive.

Alright with that out of the way let’s talk about what goes into the body of an HTML file. We will be building this webpage from top to bottom and the body of the HTML file will represent that. So, we will start with an “h1" tag. The “h” tags can be thought of as headers, sub-headers, sub-sub-headers, and so on with 1 being header and 6 being sub-sub-sub-sub-sub-header. Let’s put a header on our page, shall we?

<body>
    <h1>HTML Is A Programming Language</h1>
<body>

Great. Now, let’s add an image underneath our title using the “img” tag. The “img” tag must have two attributes. First, the “src” attribute tells the browser the location of the image whether it is from a URL or a route to a file on your computer. Second, the “alt” attribute is used to give a text definition as to what the picture is. This is used in case the picture can’t load, the “alt” attribute’s text will appear instead, or it will be used by a screen reader in the case that someone who is blind is using your webpage. The screen reader will read the “alt” attribute’s text to the user.

<body>
    <h1>HTML Is A Programming Language</h1>
    <img src="images/html-logo.png" alt="HTML Logo" />
</body>

Now our webpage looks like this…

Not too shabby. Let’s add some text now. We will do this first by using the “p” tag. The “p” tag is meant to add paragraphs to your HTML file.

<body>
    <h1>HTML Is A Programming Language</h1>
    <img src="images/html-logo.png" alt="HTML Logo" />
    <p>Here is some text about HTML being a programming language</p>
</body>

Now let’s add a list. We can do this in one of two ways. We can use the “ol” tag, which would give us a numbered ordered list. Or, we can use the “ul” tag which would give us an unordered list of bullet points. Either way, the “ol” and “ul” tags act as containers. Inside we place the list items using the “li” tag.

<body>
...
    <ol>
        <li>Item número 1</li>
        <li>Item número 2</li>
        <li>Item número 3</li>
    </ol>
</body>

Now, let’s add some more text followed by an unordered list.

<body>
...
    <p>Here is some more text about HTML being a language</p>
    <ul>
        <li>Bulleted item número 1</li>
        <li>Bulleted item número 2</li>
        <li>Bulleted item número 3</li>
    </ul>
</body>

The last tag I will go over in this project will be the “a” tag. The “a” tag is used to add links to your webpage. This tag is considered an inline tag meaning it can be placed inside of another tag. For example, if I was writing a paragraph with a “p” tag and wanted a single word to be a link to another website, I can place the “a” tag inside of the paragraph around the one word to make it a link.

<body>
....
    <p>
        The link can be found 
        <a href="https://www.google.com">here</a>
    </p>
</body>

Now our webpage looks like…

Nice. To keep this blog post’s read time around 5ish minutes, I will be stopping here. However, there are a TON more tags that can be used on an HTML file. Here is a link to w3schools HTML Element Reference post. That is a list of all HTML tags sorted alphabetically with a brief description of what each tag does. The next post will cover CSS and how to style a webpage to give it some pizzazz. With that, I will also go over HTML classes and ids since that did not get covered here. I thank you for taking the time to read this post and I hope to see you next time!

Bibliography

“HTML History”. W3schools.In, https://www.w3schools.in/html-tutorial/history/. Accessed 12 Apr 2021.
“Webd2: A Brief History Of HTML”. Washington.Edu, 2005, https://www.washington.edu/accesscomputing/webd2/student/unit1/module3/html_history.html#:~:text=The%20first%20version%20of%20HTML,HTML%20as%20an%20XML%20language. Accessed 12 Apr 2021.

The Backend Developer Roadmap: Part 2: Basic Frontend Knowledge vol. 1

HTML

The Project

Bibliography

Written by David Viodes