Created by Manuel Lorenz
Last Updated on February 05, 2018

# Understanding the Basics

What is the best starting point to become a web developer? Well, we want to build a website, so we should understand how the web works, right? The good news is: It’s actually not that complicated as the following slide shows: How the Web Works - Illustration We see you or me (the “Client”) typing a URL into the browser - the URL in our case is https://www.apple.com. With that, we send a so called “GET” request to a server, because we want to display the content of apple.com, so we need to fetch that information from the Apple server.

But what do we request? For displaying a website, the browser must retrieve HTML code (which is part of an .html file). Without HTML, no website would work as this file defines the content and the structure of our website, which means that getting HTML is a must.

So the browser requests an .html file and if our request was successful, we get back an .html file as a response. This file is called index.html in most cases, more about that later this series. With this response, we are able to display a website, the first steps are as simple as that.

Of course there is more, like CSS (“Cascading Style Sheets”) or JS (“JavaScript”), but this is nothing we should worry about right now. In case you already want to find out more about these topics though, you can find additional information in our CSS Section and our JavaScript Section. But for this series, we’ll stick to HTML.

# Frontend vs Backend

We got HTML, CSS and JavaScript and that’s everything we need to create awesome websites. Unfortunately this is not true, there is more to discover to fully understand all aspects of modern web development. HTML, CSS and JavaScript run in the browser only, which means that the code can be accessed by everybody. Is this a problem for the information that should be displayed in the browser (like the actual content of the website)? No, because this is the purpose of a website, we want to show information to our users.

But what about user specific data, like login data or payment information? This should definitely not be accessible by everybody, or do you want to share your Amazon account data with the world? Probably not and the good news is, web development has a solution for that - the differentiation between the frontend and the backend. Frontend vs Backend Illustration What’s the difference? Frontend web development includes the part of web development that runs directly in the browser, so as written before, frontend web development is HTML, CSS and JavaScript.

But what about the backend? The backend is that part of the code that runs on the server only. With this code, we can for example run a database (on the server), which allows Amazon to store your data (e-mail, password, credit card information, etc.). This information can not be accessed in the browser, as it is saved on the server only. If you enter your valid credentials, the server checks whether the information you entered matches the one saved on the server. In case this is true, you are identified as the owner of the account and you can log in.

We won’t dive into the backend in this series though, as we want to focus onto HTML and therefore onto the frontend. But it’s important for you to keep in mind, that there is code running in the browser and code running on the server only.

# Enough of the Theory - Let’s See Some Code

We learned that every website is based on HTML - so can we actually see what HTML looks like on existing websites? Yes we can and as HTML runs in the browser we can use tools which are integrated into all modern browsers - the developer tools. Specifically, I will use Google’s Chrome browser throughout this series as it comes with, in my opinion, very powerful developer tools.

We access the developer tools in Chrome by pressing CMD + OPTION (ALT) + I (MacOS) or F12 (Windows). In the developer tools, different tabs are available. Selecting the “Network” tab and reloading our current website, will show us all files loaded in the browser after entering the URL: Chrome Developer Tools Network Tab Scrolling to the beginning of the list of loaded files, let’s us find the first file loaded - the .html file (“www.apple.com”), but where is the code? Let’s click onto the file and select the “Preview” tab. There you see it, this is the .html code of apple.com: Chrome Developer Tools Preview Tab In case you never saw HTML code before, having a closer look at this code can be overwhelming - it’s a lot! No need to worry though, apple.com offers a lot of content and therefore a lot of code is required. But if we take a closer look, we can already see the core concept behind HTML - elements.

Elements?

At the beginning of the code we see <html>, then <head> and </head>, <body> and a lot more. These are tags and elements and this is the way HTML code is written. We’ll of course dive deeper into that, but apparently the browser is able to interpret the code with these elements. But why don’t we take the chance and create our own .html file and add such elements to better understand how the browser interprets these?

# Writing Our First HTML Code

No matter if you are working on a Mac or a Windows machine, writing our first HTML code only requires one thing: A text editor. On the Mac we can use TextEdit, on Windows, NotePad would be a good choice to get started.

Writing code is easy now, let’s just add some text in the editor of our choice: “Hello I am a webpage”.

Saving this file as index.html will build the starting point for our website: Save file as .html With the .html file created, how can we now display the content in the browser? We have two options - we could use a development server or we could simply double click onto the file.
A development server would be the path you normally follow, as this allows you to simulate a real server and therefore to test the website in a “real-world” environment (you remember “sending a GET request”? This requires a running server). We currently do not have a server - neither a real one nor a development server - as our file is saved locally on our computer. Although this may not allow us to display and test all features of a website, for our small beginner’s project this is not a problem at all. So we will again keep things simple and just onto double click our file to see this: HTML code is displayed in the browser Although you may not be totally impressed by the result, it shows us one important thing: The browser is able to interpret the content of our .html file and with that knowledge we can add more code in our text editor. Hitting enter and adding “And this is line 2.” in the second row, then should display this sentence in the second row in our browser, shouldn’t it? Saving the .html file (really important, otherwise the browser cannot display the latest code) and reloading the browser gives us the following result: Adding a second line to the code This somehow didn’t work, as the browser is not able to interpret the paragraph we added in the text editor and therefore displays the second sentence also in row 1. So we need to find a way to tell the browser that we want to add a paragraph here.

At this point, these “Elements” we talked about before come into play. And with an element, we also introduce tags. Now you might be lost, right? Don’t panic, it’s simple:

Tags, content and elements in HTML The “Content” is what should be displayed, so our sentence. The “Tags”, specifically the opening tag at the beginning and the closing tag after the content, provide additional information to the browser. In our example <p> tells the browser, that the content should be displayed in a new line. The combination of these tags and the content finally creates an element.
We will of course dive deeper into elements and understand which elements we have, how they work etc. throughout this series, but for the moment, let’s just add these tags to our sentence and see how this affects the text in our browser: Adding a paragraph to the code Great news - Now the browser interprets the paragraph correctly and displays the second sentence in a new row. And with that, we created our first element, but there are some more things about tags to consider when learning HTML.

# The Importance of Using Tags

So why are tags important? The simple answer is: Because they add the content but also the structure to our website. With that they make our code easier to understand (for other coders or our colleagues) and more efficient to interpret for our browser, i.e. our website loads faster, which is definitely something we’d like to achieve as a developer.

Therefore, any content on our website should be surrounded by tags, which is currently not the case in our example as the first sentence is just plain text. Although the .html file can still be interpreted and the text is displayed correctly, which shows us that HTML forgives a lot of mistakes or “incorrect” semantics, this code does not follow a best practice approach. So adding <p> also to the first sentence, will not change the way it is displayed, but create a better structured code.

As written before, there are a lot of different tags/elements available in HTML and we’ll have a look at some of these throughout this series (e.g. the <h1> tag as presented in the video).

But with the information covered in this part of this series, we are now ready to further work on our HTML skills and to do so we need the right tools. The “normal” text editors are ok, but not a coder’s dream, so there must be better ways to write code. Turns our there are, so let’s have look at the options we have in the next part of this series.