How does a webpage work?

With HTML, CSS, and Javascript.

22 Oct 2016

Your web browser is a specialized piece of software that loads webpages. It is designed to read and understand the contents of the webpage with lightning-fast speeds in order to display information to you, the user.

A single webpage is really made up of 3 parts working together–HTML, CSS, and Javascript–just as a human body can be divided into its 3 major components–the skeleton, the muscles, and the skin.

skeleton

  • Creates the skeleton of the web page. It provides the structure of how things should be layed out, in which order, etc.
  • Written in text files that denote themselves as being HTML. This is done in 2 main ways:
  • The filenames of all HTML documents end with the extension .html
  • All HTML documents should start with <!DOCTYPE html>
    • The browser will likely load the document just fine without this, but only because of Quirks Mode.
      • No need to really know more about this other than it is extra work / uncertainty from the browser that can easily (and therefore should) be avoided by just declaring the DOCTYPE explicitly
    • This tag also helps the browser understand which version of HTML you are using. You might encounter DOCTYPES from older versions of HTML but I can’t imagine ever using them now
  • Web browsers are just software that read this text, apply the rules of HTML accordingly, and so are able to discern how the skeleton should be structured. Two things are crucial in doing this:
    1. Using different elements (e.g. for paragraphs, bulleted / numbered lists, links, embedded media, etc.)
    2. Nesting these elements to create complex layouts (the same way these bullets themselves are in nested structure)

muscle

  • JS provides the actions / interactions that turn static webpages function into app-like experiences
  • Written as text files with file extension .js
  • Due mostly to historical reasons, JS has the unique distinction of being the only programming language that works within all web browsers, therefore:
  • Javascript is read by the web browser the way humans might read any set of instructions (e.g. for a recipe or IKEA furniture) and executed accordingly. Though Javascript was first and most-often run within browsers, it is a true programming language and can run independently of the browser, as well.
    • How Javacript actually works behind the scenes is a topic for later discussion.

man

  • CSS creates the styling.
  • Written as text files with the file extension .css
  • CSS works using a 2-step process:
    1. There is a rules-based method to select which HTML elements to style
    2. Applying specific styles to the selected elements
  • By applying different rules to the same elements, CSS can create complex transitions, transformations, and animations as well.

So when you make a webpage, you don’t really use 1 technology but rather 3 separate technologies–HTML, CSS, and Javascript–that work together.

Here is what my main page looks like in pure HTML–note that it is basically just text, links and bullets:

See the Pen bBGzGJ by Muhammad Naqvi (@monaqvi) on CodePen.

Now, with some styling with CSS–notice the added colors, fonts, alignment, and background images:

See the Pen QGWzee by Muhammad Naqvi (@monaqvi) on CodePen.

And, lastly, some typewriter animation with Javascript:

See the Pen PboVwX by Muhammad Naqvi (@monaqvi) on CodePen.

Because HTML and CSS are concerned with how a page looks, they are most-often mentioned together, separately from Javascript. Designers tend to specialize with HTML and CSS, while programmers are usually more comfortable with Javascript. A developer with proficiency in both HTML + CSS and Javascript is highly desirable.

In the old days, CSS and Javascript were created inside of HTML but people very quickly realized that it was just a hot mess and decided to separate the three into their individual parts. Ironically, there is now a movement to put them all back together again.

Sometimes people like to go a little overboard with the CSS, which can create a huge mess of styles that clash and contradict one another, while increasing overhead for the webpage.

Outlandish fashion

People also tend to add a lot of Javascript to their page in the hopes of bulking it up with fancy interactions, animations, and functionality. If this code is not properly maintained, however, it can become a source of huge problems and headaches over time.

Beware of your sleek & sexy application becoming a blundering bohemoth beleagered by bugs.

Muscle to fat

As with most things, the goal should be to keep things as simple as possible!

Want to make changes to this post? Contribute directly via GitHub or leave a comment below!