Front-End Development

Technologies that comprise front-end web development

1. HTML/CSS

I know, these two terms keep coming up. There’s a good reason, though. You won’t find a single front end developer job listing that doesn’t call for (or assume) proficiency in these two languages.

But let’s take a step back and look at what HTML and CSS are.

HyperText Markup Language (HTML) is the standard markup language used to create web pages. A markup language is your way of making notes in a digital document that can be distinguished from regular text. It’s the most basic building block you’ll need for developing websites.

CSS (Cascading Style Sheets) is the language used to present the document you create with HTML. Where HTML comes first and creates the foundation for your page, CSS comes along next and is used to create the page’s layout, color, fonts, and…well, the style!

Both of these languages are absolutely essential to being a front end developer. Simply put, no HTML/CSS, no web development.

2. JAVASCRIPT/JQUERY

Another MAJOR tool in your front end developer toolbox is going to be JavaScript (JS). Where HTML is a markup language and CSS is a style sheet language, JS is the first language I’ve mentioned that’s a bonafide programming language. What’s the difference? Where HTML and CSS determine the presentation of a page, JS determines the function.

In some instances a very simple website or web page is fine, but for situations where you need interactive features — audio and video, games, scrolling abilities, page animations — JS is the tool you’ll use to implement them (though as CSS evolves, it’s starting to handle a lot of these duties as well).

One cool thing to keep in mind about JS is the existence of libraries like jQuery, a collection of plugins and extensions that make it faster and easier to use JS on your website. jQuery takes common tasks that require multiple lines of JS code and compresses them into a format that can be executed with a single line. This will be a big help when you’re coding with JS. Unless, of course, you don’t like saving time. ;)

3. CSS AND JAVASCRIPT FRAMEWORKS

Wait, we already covered CSS and Javascript, right?

We did, but they’re both such a big part of front end development that a lot of other skills you’ll need are going to build off of them.

CSS and JavaScript frameworks are collections of CSS or JS files that do a bunch of the work for you by providing common functionality (think logging into a website or searching a blog). Instead of starting with an EMPTY text document you start with a code file that has lots of awesome JS already in it.

Frameworks have their strengths and weaknesses — don’t we all! — and it’s important to choose the best framework for the type of website you’re building. For example, some JS frameworks are great for building complex user interfaces, while others excel at displaying all of your site’s content.

To make things even MORE fun you can use frameworks together. It’s common to pair Bootstrap with another JavaScript framework like AngularJS. The content is handled by Angular, and the look & feel is handled by Bootstrap (with some CSS sprinkled in, too).

How the browser renders documents

How exactly do browsers render websites? I’ll deconstruct the process shortly, but first, it’s important to recap some basics.

A web browser is a piece of software that loads files from a remote server (or perhaps a local disk) and displays them to you — allowing for user interaction. I know you know what a browser is 🙂

However, within a browser, there’s a piece of software that figures out what to display to you based on the files it receives. This is called the browser engine.

The browser engine is a core software component of every major browser, and different browser manufacturers call their engines by different names. The browser engine for Firefox is called Gecko, and Chrome’s is called Blink, which happens to be a fork of WebKit.

You can have a look at a comparison of the various browser engines if that interests you. Don’t let the names confuse you — they are just names. Nothing serious.

For illustrative purposes, let’s assume we’ve got a universal browser engine. This browser engine will be graphically represented as seen below.

Illustration Of Our Fictional Universal Browser Engine

In this article, I use “browser” and “browser engine” interchangeably. Don’t let that confuse you; what’s important is that you know the browser engine is the key software responsible for what we’re discussing.

Sending and receiving information

This is not supposed to be a computer science networks class, but you may remember that data is sent over the internet as packets sized in bytes.

Computers Receive Packets Of Data In Bytes

Computer says, “Send me bytes of data!”

The point I’m trying to make is that when you write some HTML, CSS, and JS, and attempt to open the HTML file in your browser, the browser reads the raw bytes of HTML from your hard disk (or network).

Computer Receiving Bytes Of Data

The computer receives bytes of data.

Got that? The browser reads the raw bytes of data, and not the actual characters of code you have written. Let’s move on.

The browser receives the bytes of data, but it can’t really do anything with it; the raw bytes of data must be converted to a form it understands. This is the first step.

Data Must Be Converted To Be Understood

From raw bytes of HTML to DOM

What the browser object needs to work with is a Document Object Model (DOM) object. So, how is the DOM object derived? Well, pretty simple.

First, the raw bytes of data are converted into characters.

Bytes Are Converted To Characters

Yeah — from bytes to characters!

You may see this with the characters of code you have written. This conversion is done based on the character encoding of the HTML file.

At this point, the browser’s gone from raw bytes of data to the actual characters in the file. Characters are great, but they aren’t the final result. These characters are further parsed into something called tokens.

Characters Are Converted To Tokens

From characters to tokens!

So, what are these tokens?

A bunch of characters in a text file does not do the browser engine a lot of good. Without this tokenization process, the bunch of characters will just result in a bunch of meaningless text, i.e., HTML code — and that doesn’t produce an actual website.

When you save a file with the .html extension, you signal to the browser engine to interpret the file as an HTML document. The way the browser interprets this file is by first parsing it. In the parsing process, and particularly during tokenization, every start and end HTML tags in the file are accounted for.

The parser understands each string in angle brackets (e.g., <html>, <p>) and understands the set of rules that apply to each of them. For example, a token that represents an anchor tag will have different properties from one that represents a paragraph token.

Conceptually, you may see a token as some sort of data structure that contains information about a certain HTML tag. Essentially, an HTML file is broken down into small units of parsing called tokens. This is how the browser begins to understand what you’ve written.

A Conceptual Illustration Of A Token

A conceptual illustration of a token.

Tokens are great, but they are also not our final result. After the tokenization is done, the tokens are then converted into nodes. You may think of nodes as distinct objects with specific properties. In fact, a better way to explain this is to see a node as a separate entity within the document object tree.

Nodes are great, but they still aren’t the final results.

Now, here’s the final bit. Upon creating these nodes, the nodes are then linked in a tree data structure known as the DOM. The DOM establishes the parent-child relationships, adjacent sibling relationships, etc. The relationship between every node is established in this DOM object.

Now this is something we can work with.

An Example DOM Tree Graphic

An example DOM represented graphically.

If you remember from web design 101, you don’t open the CSS or JS file in the browser to view a webpage. No — you open the HTML file, most times in the form index.html. This is exactly why you do so: the browser must go through transforming the raw bytes of HTML data into the DOM before anything can happen.

HTML Goes In First

HTML goes in first — always!

Depending on how large the HTML file is, the DOM construction process may take some time. No matter how small, it does take some time (no matter how minute), regardless of the file size.

From Tokens To Nodes And The DOM

Yeah — from tokens to nodes and the DOM!

But wait — what about CSS?

The DOM has been created. Great.

A typical HTML file with some CSS will have the stylesheet linked as shown below:

<!DOCTYPE html>

<html>

<head>

. <link rel=”stylesheet” type=”text/css” media=”screen” href=”main.css” />

</head>

<body>

.

</body>

</html>

While the browser receives the raw bytes of data and kicks off the DOM construction process, it will also make a request to fetch the main.css stylesheet linked. As soon the browser begins to parse the HTML, upon finding a link tag to a CSS file, it simultaneously makes a request to fetch that.

As you may have guessed, the browser also receives the raw bytes of CSS data, whether from the internet or your local disk. But what exactly is done with these raw bytes of CSS data?

From raw bytes of CSS to CSSOM

You see, a similar process with raw bytes of HTML is also initiated when the browser receives raw bytes of CSS.

In other words, the raw bytes of data are converted to characters, then tokenized. Nodes are also formed, and, finally, a tree structure is formed.

What is a tree structure? Well, most people know there’s something called the DOM. In the same way, there’s also a CSS tree structure called the CSS Object Model (CSSOM).

You see, the browser can’t work with either raw bytes of HTML or CSS. This has to be converted to a form it recognizes — and that happens to be these tree structures.

CSS Bytes Are Converted Into The CSSOM

Same process for CSS bytes!

CSS has something called the cascade. The cascade is how the browser determines what styles are applied to an element. Owing to the fact that styles affecting an element may come from a parent element (i.e., via inheritance), or have been set on the element themselves, the CSSOM tree structure becomes important.

Why? This is because the browser has to recursively go through the CSS tree structure and determine the styles that affect a particular element.

All well and good. The browser has the DOM and CSSOM objects. Can we have something rendered to the screen now?

The render tree

What we’ve got right now are two independent tree structures that don’t seem to have a common goal.

The DOM And CSSOM Are Independent

The DOM and CSSOM are independent tree structures.

The DOM and CSSOM tree structures are two independent structures. The DOM contains all the information about the page’s HTML element’s relationships, while the CSSOM contains information on how the elements are styled.

OK, the browser now combines the DOM and CSSOM trees into something called a render tree.

The DOM And CSSOM Make Up The Render Tree

DOM + CSSOM = Render tree

The render tree contains information on all visible DOM content on the page and all the required CSSOM information for the different nodes. Note that if an element has been hidden by CSS (e.g., by using display; none), the node will not be represented in the render tree.

The hidden element will be present in the DOM but not the render tree. This is because the render tree combines information from both the DOM and the CSSOM, so it knows not to include a hidden element in the tree.

With the render tree constructed, the browser moves on to the next step: layout!

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

HEAD: This contains the information about the HTML document. For Example, Title of the page, version of HTML, Meta Data etc.

BODY: This contains everything you want to display on the Web Page.

Let us now have a look on the basic structure of HTML. That is the code which is must for every webpage to have:

<!DOCTYPE html>

<html>

. <head>

. <title>

. </title>

. </head>

. <body>

. </body>

</html>

Every Webpage must contain this code. Below is the complete explanation of each of the tags used in the above piece of HTML code:

HTML Document structure

The <HTML> is a markup language which is used by the browser to manipulate text, images and other content to display it in required format.

Tags in HTML: Tags are one of the most important part in an HTML Document. HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />).

There are generally two types of tags in HTML:

Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.

Singular Tags: These tags do not required to be closed.

Below is an example of (<b>) tag in HTML, which tells the browser to bold the text inside it.