Web Dev Part 1: The Web Browser

This Is part one of a multi-series post, if you did not read our intro please do so as it will give you a better understanding of what is to come. Writing code that runs on the browser is known as Frontend development, also referred to as Client-Side development. That browser could be Safari, Firefox, Internet Explorer, or any other web browser. In this post, I will review the fundamental technologies involved in Frontend development, which are HTML, CSS, and Javascript.

A webpage is nothing more than a document, similar to a Microsoft Word Doc. Pretend you are writing a word doc but wanted to format it differently from others you have written. This particular document you are working on must has two headings, with two paragraphs under the first heading and three under the second. Finally, you wanted to add a bullet point list to the end. Well, in Microsoft Word, this is easy as they have a button to format this all for you, but to do it on a webpage you will need to know some HTML. The above layout in HTML would look something like this below.

<h1> Heading 1 </h1>
<p> paragraph 1 <p>
<p> paragraph 2 <p>

<h1> Heading 2 </h1>
<p> paragraph 1 <p>
<p> paragraph 2 <p>
<p> paragraph 3 <p>

<ul>
  <li> list item 1</li>
  <li> list item 2</li>
  <li> list item 3</li>
<ul>

The above code shows that we have a document with two headings, the <h1>’s, and paragraphs, the <p>’s. The `<h1>` and `<p>` are referred to as Tags. There are many HTML tags that can be combined to make up a page. These tags are used for formatting and providing semantic meaning for both Bots and E-Readers. When visually impaired users use E-Readers, they need their device to speak to them about what they are hovering/focusing on. In this case HTML semantics plays a significant role. You can read our Post on Web Accessibility if you are interested in this topic.

Not only is having a well-structured document important due to the reasons stated above, but you also need to have the correct metadata associated with it. Metadata are small bits of information that give an overview of what your document is about, metadata is information that describes data. You can use this by way of the HTML meta Tag. 

<meta property="og:title" content="Web Dev Part 1: The Web Browser - The Tech Stacks">
<meta property="og:description" content="This Is part one of a multi series post, if you did not read our intro please do so as it will give you a…">

Metatags are extremely important for SEO, Search Engine Optimization. SEO refers to the quality of your webpage and the process of improving it. The better your SEO is, the more likely it will be for a search engine to display you in their results, such as Google. For more on SEO, you can see our blog post where we go more Google Ranking.

So now we know:

• How to format an HTML document, use tags
• Proving semantics meaning for bots, such as Google through SEO
• Help visually impaired users navigate your page, through semantic HTML tags
• provide some metadata so that you can show up on search results, by using proper meta tags

CSS is an acronym for Cascading Style Sheets. CSS provides the look and feel of your document. For example, if you wanted to change the color or font size of your text, along with the spacing between each paragraph, CSS is what you will need. Note you can style your document using just HTML or javascript, but in this post, we will cover only CSS to give you its role in the overall picture.

<h1 class="my-header"> Heading 1 </h1>
<p class="my-text"> paragraph 1 <p>

Say we updated our HTML document to look something like this above. Notice we added a class to each of our HTML tags. Using this class name, we can now write CSS to tell the document how to make that element look. Below you will see how to add some spacing and color to the document we just created. CSS is very powerful in that you can develop animations and complete layouts that respond to the user’s device.

.my-header {
  color: red;
  margin-bottom: 5px;
}

.my-text {
  color: green;
}

CSS has something called media queries that allow you to apply styles to an element only if its on a device of a certain screen size. This gives us the power to show the same document on different devices in any way we want. Take for example if we would like our document to have different color text or font-size on desktop and mobile, we would use media queries to do this. If you would like to learn more about Media Queries, you can read our post where we go into a bit more detail and use cases for them.

Now that we know how to structure and make our documents look great, what else could be left. Well, not much if you are looking to make a website that just displays information to a user, such as a brochure, this is called a static page. Nowadays, it’s never that easy as we are always looking to populate a page with dynamic information or have user functionality where they can interact with the page. This is where Javascript comes in.

Javascript gives us the ability to provide the page with functionality. We can listen to user interaction and provide feedback, like clicking on a button then showing a message. We could do just about anything with javascript, even render HTML and CSS if we wanted to. Javascript is a very powerful language as it has moved its way from the frontend to the backend. Knowing it will give you the skills to work in many different areas of web development as well as software development, you can read more about this in our NodeJs Post.

// HTML
<h1 id="myTitle" class="my-header"> Heading 1 </h1>

// JavaScript
window.addEventListener("load", function() {
    document.getElementById("myTitle").innerHTML = "Im Loaded";
});

Above is some javascript code that listens for the page to load then updates the text of an html tag that you gave an id of ‘myTitle’ to. This could be extended to allow users to change the content of your document such as generate a form and using javascript to validate then submit it. We won’t be going in-depth with javascript in this Post as that is a massive world on its own. If you are interested in learning more, please lets us know in the comments below, and we would love to go more into it.

So there it is the 3 fundamental languages of all browsers, HTML to define and structure your document, CSS to style it and make it more readable/appealing, and Javascript to provide functionality. If you would like an idea of how this plays a part in today’s front-end development world, you can read our post Invasion of the Libraries.

Now let’s say you open your browser and type in the address bar facebook.com. What happens next is amazing!

Read Part 2 Here!