Categories
CSS HTML JavaScript Web browsers

How a web browser builds a website

If you want to learn how to build websites, program in JavaScript, become a front end web developer or are just genuinely curious about how websites work  —  you need to understand how a web browser (browser) builds a website.

This post will help you do just that.

Have you ever read something online? I’m willing to bet you have. Was it a news article or a long-form travel story? A Wikipedia article or maybe a serialized choose your own adventure Harry Potter fan fiction? Perhaps it was this very blog post?

Regardless, do you remember when it was written and what it was about? Do you remember how it looked and who wrote it? Or, better yet, can you tell me what wrote it?

That’s right, what.

Not sure? Here’s a hint: when you look at a blog post, news article, or any written content on your browser you are looking at the end result of a set of precisely followed instructions. These instructions tell your browser how to build, present and interact with the content on your screen. So, in answer to the question, your browser is the what. The who, I’ll leave to you.

The how? The precisely followed instructions!

These instructions come in three flavours: HTML, CSS and JavaScript, each of which contains directions that your browser follows to build a webpage. Coincidentally, someone who specializes in the three aforementioned technologies is called a front end developer or a web developer (I guess I didn’t leave the who to you after all).

Let’s take this one step further by using an analogy.

Imagine for a moment that your browser is a construction worker who needs to build a house. The house, in this case, is a website, and HTML, CSS and JavaScript are the blueprints for different parts of the house: the architecture, the style and the interactivity.

HTML (hypertext markup language)

This is the architecture of your house — it tells your browser how to organize the content on the page and what that content is.

It also tells your browser where it can find the other resources necessary to finish building the page, specifically the location of the CSS and JavaScript files. 

HTML is the first thing a browser reads when building a website and while it has has a specific initial structure, this structure can be expanded, reduced or transformed by CSS and JavaScript, in the same way you can add rooms, remove them or transform them on a blueprint. A kitchen can become a living room after all — especially on a blueprint.

HTML tells your browser the semantic meaning of the content on your website. This is similar to a legend on a map. Without this legend, your browser would not be able to distinguish the difference between content types on your web page (paragraphs, lists, titles, etc.). Consequentially, without this legend, your brows would not be able to correctly assign the styles and behaviours that distinguish one content type from another. You don’t want your lists displaying as paragraphs, do you?

In other words, HTML provides a reference so the browser can understand what the content is:

That content is a paragraph.

  • This content over here?
  • It’s different from the paragraph!
  • It’s a list!

HTML provides the distin level of detail so your browser can distinguish the content types.

For these reasons, I like to think of HTML as the architectural blueprint of your house.

CSS (Cascading Style Sheets)

This is the style of your house  —  from the carpet to the curtains, wallpaper to shingles, CSS is responsible for telling the browser how your web page should look and, if you desire, how it should transform.

CSS builds upon the architecture which HTML provides and references it to know which items it needs to apply styles to. Things like colours, spacing, animation and layout are controlled by CSS — without it, your webpage is boring.

Progressively, after the HTML is loaded, your browser then consults with CSS to understand how it should style all of the architecture laid out by HTML. Specifically, your browser references CSS to determine what the content defined in HTML should look like.

Everything from how the page should look on a phone, tablet or laptop to the colour of text, the spacing between lines and, as mentioned, the animation is provided by CSS.

For these reasons, I like to think of CSS as the style blueprint for your house.

JavaScript

This is the interactivity of your house — from when the lights should turn on to when the thermostat should lower, what time your alarm clock goes off to what temperature your oven should pre-heat to.

If it’s something that you can interact with, it’s probably governed by JavaScript.

Like CSS, JavaScript builds upon the architecture that HTML provides, and after the architecture of your house is built and styled, JavaScript goes to work defining what can be interacted with and how.

JavaScript governs interactions through event triggers and outputs:

An event trigger is something that needs to happen before an output can take place. JavaScript can tell your browser to listen for a specific event trigger (perhaps a click or a scroll), and when this trigger takes place, to perform a specific action.

An output is the action that happens after the trigger is activated. For example, let’s say someone pressed the doorbell at your house (event trigger) the output would be the specific sound that plays. Another example: you turn your stove on. The temperature which it rises to before turning off is the output.

Like cause and effect — the web browser equivalent is JavaScript — and through event triggers and outputs, JavaScript brings interactivity to your page. And interactivity is an absolutely essential component of modern websites

For these reasons, I like to think of JavaScript as the blueprint for the interactivity of your house.

Wrapping it all up: HTML, CSS and JavaScript

  • HTML is the architecture
  • CSS is the style
  • JavaScript interactivity
  • Each of these technologies makes up the front end of your website and each is essential to what most users expect from a modern website.
  • Your web browser follows the blueprints laid out in HTML, CSS and JavaScript to determine how to build a webpage, how this webpage should look and how you’ll be allowed to interact with it.
  • Someone who specializes in these technologies is called a web developer or front end developer.

So, hopefully after reading this post you now feel more familiar with how your browser constructs a web page.

Next, it’s time to learn about HTML, the most important part of a website.

Categories
JavaScript

Beginner’s guide to JavaScript variables


One of the most useful capabilities of JavaScript is that it lets you manipulate almost anything on a webpage, even if you don’t have access to the HTML or CSS.

What’s the use of manipulating something on a webpage? Well, if you can manipulate something on a webpage you can change the webpage. 

Need to build an email form to collect emails for your event? Create an image gallery that allows people to share your pictures? Make the page dance, sing and be merry?

Whatever you need to do, you can almost always do it with JavaScript. This is why it’s one of the most popular programming languages today, its versatility and flexibility allow you countless opportunities to change a website as you desire.

When programming with JavaScript you will inevitably be interacting with data, usually, but not always, you’ll be trying to change this data somehow.

Here’s an example of a data interaction with JavaScript: think of a news website that publishes stories about apartments. Perhaps they have a style guide that says every time the words “tenant association” appears they should be capitalized.

Let’s say the news website also works with hundreds of writers and not all these writers remember to capitalize tenant association.

In this instance, as a savvy JavaScript programmer, you’d want to use JavaScript to automatically capitalize tenant association every time it appears on your webpage, regardless of if the writer remembers to or not.

In this example the words “tenant association” are data (text data is called a string in JavaScript) and uppercasing the words is a form of interacting with the data, specifically changing it. 

Before you can interact with data in JavaScript you’ll need to store it somewhere and provide a reference to it. To store data and reference it you’ll use something called a variable.

Variables are one of the most frequent tools you’ll be using as a JavaScript programmer and they allow you to store data and reference it. While there are many reasons why you must do this, for the sake of keeping things simple you’ll have to take my word for it.

Storing data and creating a reference to it in JavaScript is called declaring a variable and variables are, as mentioned, one of the core building blocks of JavaScript programming.

There are three parts to creating a variable in JavaScript: creating and naming the variable, assigning some data to the variable and referencing the variable.

Creating and naming the variable

To create and name a variable in JavaScript you use the following syntax.

var nameOfVariable;
  1. var tells JavaScript that you want it to create a new variable.
  2. nameOfVariable tells JavaScript the name you want it to assign to the new variable.

All JavaScript variables must be given a unique name, and generally, the rules for constructing names for variables (unique identifiers) are:

  • Names can contain letters, digits, underscores, and dollar signs
  • Names must begin with a letter
  • Names can also begin with $ and _ (this is not recommended)
  • Names are case sensitive (y and Y are different variables)
  • Reserved words (like JavaScript keywords) cannot be used as names
  • camelCase is preferred
  • Try to be descriptive when naming your variables. This makes your code easier to read. 

Try following the steps below to create a variable named myVariable in your browser console now. If you need some help accessing your browser console this guide will show you how.

  1. Navigate to your browser’s JavaScript console
  2. Type var myVariable in the console window
  3. Press enter

You should see something similar to this:

Congratulations, you’ve just created your very first JavaScript variable.

This may seem trivial, but it’s one of the most important steps in JavaScript programming, and now that you’ve created your variable it’s time to assign some data to it.

Assigning data to the variable

To assign data to the variable you just created use the following syntax:

var nameOfVariable = data;
  1. var tells JavaScript the name you want it to assign to the new variable.
  2. nameOfVariable tells JavaScript the name you want it to assign to the new variable.
  3. = tells JavaScript to assign everything to the right of the = to the variable. This is called an assignment operator.
  4. data tells JavaScript the specific data you want to assign to the variable.

Try following the steps below to assign the word "Hello" to the variable you created called myVariable.

  1. Navigate to your browser’s JavaScript console
  2. Type var myVariable = "Hello" in the console window
  3. Press enter
  4. Type myVariable (without the var this time)
  5. Press enter

You should see something similar to this:

Congratulations again, you’ve just assigned data to your very first JavaScript variable.

In this case, you’ve assigned a string to myVariable.

You are now well on your way to using JavaScript to do some incredible things. And just so you know, you can assign more than strings to variables. Data types can also be numbers, boolean, null, undefined, and symbol.

This guide from W3C provides an overview of datatypes in JavaScript.

Referencing the variable

When you named your variable a few moments ago you created a way to reference it, and referencing it makes changing the data stored within it much easier.

Referencing your data in JavaScript is pretty straightforward, you just use its name. Try the following example in your browser console to reference your variable:

  1. Navigate to your browser’s JavaScript console
  2. Type var myVariable = "Hello" in the console window
  3. Press enter
  4. Type myVariable (without the var this time)
  5. Press enter
  6. Type alert(myVariable)

You should see something similar to the screenshot from the previous step with one difference: a popup should appear that says "Hello".

What happened here? Magic!

When you typed alert(myVariable) you told JavaScript you wanted it to create a popup with the text "Hello", but instead of writing "Hello" you referenced the variable you created with the name myVariable.  In essence, the name you give to a variable with data is the data and using named variables helps you add meaning to your code, keeps it cleaner and easier to manage. 

Here’s another example, imagine you wanted to calculate the age of someone born in 1950. Without a named variable you’d do the following:

2020 - 1950 = 70;

Now imagine you had ten different age calculations. You’d have to write something like this:

2020 - 1950 = 70;
2020 - 1954 = 66;
2020 - 1990 = 30;
2020 - 1967 = 53;
2020 - 1989 = 31;
2020 - 1988 = 32;
2020 - 2001 = 19;
2020 - 2004 = 16;
2020 - 1963 = 57;
2020 - 1999 = 21;

As you can see, there’s lots of repetition and by using a named variable you can greatly simplify this process. Here’s what the above looks like using a variable named currentYear.

var currentYear = 2020;
currentYear - 1950 = 70;
currentYear - 1954 = 66;
currentYear - 1990 = 30;
currentYear - 1967 = 53;
currentYear - 1989 = 31;
currentYear - 1988 = 32;
currentYear - 2001 = 19;
currentYear - 2004 = 16;
currentYear - 1963 = 57;
currentYear - 1999 = 21;

At first, it may seem odd subtracting a word from a number, but remember, you are actually subtracting data, the words are simply the reference you gave to the data through a variable. 

Don’t get caught up on the example above which is very simple and not a great use case for variables, it’s only an example. The real magic of named variables becomes evident when you are dealing with thousands of lines of code. 

Go ahead and try subtracting two named variables in your console.

  1. type var currentYear = 2020;
  2. press enter
  3. type var yearOfBirth = 1950;
  4. press enter
  5. type currentYear - yearOfBirth;
  6. press enter

You should see something similar to this:

Pretty cool, right?

Alright, so now you know how to create, name and reference variables. Here’s a recap to help you solidify your understanding of JavaScript variables.

Recap

  • When programming with JavaScript you will often be interacting with data
  • Before you can interact with data in JavaScript you’ll need to store it somewhere and provide a reference to it
  • To store data and reference it you’ll use a variable.
  • Variables allow you to store data and reference it
  • To create and name a variable in JavaScript you use the following syntax.
    • var myVariable
  • To assign data to the variable use the following syntax
    • var myVariable = “Hello”

Now let’s learn how to start applying what we’ve learned so far. Let’s write and execute some code in our JavaScript console!

Categories
JavaScript

Why should I learn JavaScript?

Learning to program in JavaScript has been one of the most interesting decisions of my life.

Almost every day I find something that can be improved with a few lines of code, and the more I learn how to code, the more I realize how many things I have been doing inefficiently. 

If you are considering a career in digital media, web development, online marketing or are just interested in learning something — learning to program will change your life. Not only will you uncover how to leverage the power of computing to become more efficient, accurate and useful at work, but along your coding journey you’ll also unlock new ways of thinking that will help you solve problems, learn faster, meet new people and contribute to world-changing open-source projects.

Sounds great, right? Well, it is pretty great! Except…

Programming is not something you can pick-up in a few days with a crash course (trust me, I have tried plenty of crash courses). It takes commitment — and the learning curve can be unforgiving.

So, to ensure the best use of your time you’ll want to start with a programming language that is:

  • Well documented: meaning lots has been written about how to use it to solve problems.
  • Widely used: meaning many websites use the programming language and it’s likely to be around for a long time.
  • Easy to apply: meaning you don’t need any fancy or expensive software to get started.

JavaScript is well documented

One of the challenges of learning something new is figuring out the stuff that your guide or tutorial didn’t tell you.

Classes and textbooks are wonderful, but none are complete on their own, so having access to extensive collections of writing, tutorials, and guides that cover everything from practical application to theoretical concepts is extremely helpful.

The JavaScript category on Stack Overflow — the most widely used user-generated programming reference in existence — has over a million questions and answers.

If you are ever struggling to solve a JavaScript programming problem you can bet someone has probably already documented and solved the exact same issue. It’s so likely that I now make it a habit to search Stack Overflow for the problem before I try anything else. Ninety percent of the time I’m able to find a solution in under 15 minutes.

Well documented? Check.

JavaScript is Widely Used

According to w3techs.com approximately 95% of all websites use JavaScript.

If we estimate that there are more than 1 billion websites (there are probably more) that gives us around 950,000,000 websites using JavaScript. 

950,000,000 is a lot, so — widely used? Check.

JavaScrip is easy to apply

JavaScript doesn’t need any fancy programs or expensive software to run — you can run it in your browser, any browser. You don’t need to spend money on development environments to get started.

Here, let me show you how easy it is to get started.

Please select your internet browser below and follow the instructions.

Step 1: Activate your browser’s console

Chrome

  • To open the developer console window on Chrome, use the keyboard shortcut Ctrl + Shift + I (on Windows) or Ctrl + Option + J (on Mac).

Safari

  • Follow these steps and then use the shortcut below.
  • Cmd + Opt + C

Edge

  • To open the console on Edge, hit F12 to access the F12 Developer Tools. Once in the F12 Developer Tools, navigate to the Console tab.

Firefox

  • To open the console on Firefox, use the keyboard shortcut Ctrl + Shift + K (on Windows) or Ctrl + Option + K (on Mac). The toolbox will appear at the bottom of the browser window, with the Web Console activated.

Step 2: Type the following in your browser console

alert("Hello World")

After you’ve typed the above in your console press enter. You should get a little message box that pops up and says "Hello World".

Pretty neat huh?

I think so!

At this point, if I have done a good job of writing this post then you’ll be thinking to yourself: yeah Dan! I wanna learn JavaScript!

Alright then, I’m here to help.

Every week I’ll provide an overview of some core concepts in JavaScript and progressively I’ll show you how can use it to not only do some cool stuff but also how to build tools that can help you leverage the power of your computer to automate, enhance and improve many aspects of your personal and professional life.

I hope you are as excited about this learning opportunity as I am, and I hope you’ll join me as I develop this guide to programming in JavaScript for non-technical types — like you.

Oh, by the way, my name is Daniel Puiatti, you can call me Dan.

I have over a decade of experience in digital media. From responsive website design to search engine optimization, social media marketing to accessibility. My experience has allowed me to build, grow and optimize many digital campaigns and products. And like you, I don’t have a technical background.

Now let’s get learning. The next guide to read is my introduction to how a web browser builds a website.