lim jia sheng,

.Interactive Design


[1]: The Web & How it Works

We were first brought in & briefed through the MIB. Then, we were given a little """lecture""" about blogging & their integration into a designer's journey. So if you're reading this blog, hello.

What are Webpages, Browsers, & Websites

A Webpage

A document with all/a subset of text, images, sound, & video accessible from the web via any internet connected device with a web browser.

Single web page sites (Parallax sites/Landing page)

They are long. (A single long page)

Example of a single web page site, 27/8/2021

Figure 1.1.1, Example of a single web page site, 27/8/2021

A web browser

A program that fetches data via HTTP & renders the retrieved data onto the screen.

2021 Browser marketshare, 8/2021

Figure 1.1.2, 2021 Browser marketshare, 8/2021

Browsers are lucrative because of SEO optimization, as they provide data & charge for rankings in their algorithms.

A website

A set of webpages that are stored/hosted on servers. They're typically designed for specific purposes & have domain names to be identified.

Figure 1.1.3, Example of a website, 27/8/2021

It's made with 3 web technologies:

  • HTML (Hypertext Markup Language)
    • Provides structure & meaning of the webpage.
  • CSS (Cascading Stylesheets)
    • Styles & lays out the webpage.
  • JavaScript
    • Dynamizes the webpage.
Website vs Landing page

A landing page has one single purpose, a microsite if you will.

Differences between a typical page & the landing page

Figure 1.1.4, Differences between a typical page & the landing page

Static vs Dynamic Websites

To change or not to change — A philosopher somewhere, probably.


  • Fixed number of pages.
  • Fixed content & structure.
  • Same content from whoever, wherever, whenever.


  • Generates pages in real-time.
  • Possible different content per person, place, time.
  • Can be controlled from a Content Management System (CMS).

Hi to whoever's curious, client-side statically rendered pages using hash routing/JS's history API, can emulate dynamic/server-side rendered pages. SEO suffers the same though.

Big fat infographic to choose between them, 27/8/2021

Figure 1.1.5, Big fat infographic to choose between them, 27/8/2021

Domain & Web Hosting


A domain is a unique set of characters that identifies a website. It's equivalent to a street address.

The browser will look up a Domain Name Server (DNS) to find the actual location of the website on the internet when a URL is requested.

Infographic splitting apart a URL, 27/8/2021

Figure 1.1.6, Infographic splitting apart a URL, 27/8/2021

Web Hostings

A hosting server is where a website's data — media, formatting, backups — is stored. It's equivalent to a landlord, leasing out & maintaining server space.

Frontend vs Backend vs Fullstack


Client-side — the part that's build to interact with users directly.


Server-side — the part where the front-end interacts with to get stuff from databases, servers, applications.


Client & server side — Normally describes a person who can play magic with both equally.

Types of Websites

Types of websites + task instructions, 27/8/2021

Figure 1.1.7, Types of websites + task instructions, 27/8/2021

Figure 1.1.8, Week 1 task thing, 27/8/2021

[2]: Web Standards & HTML

What are web standards

The World Wide Web (WWW) as an information ecosystem where content created is fed into the web, & passed through the browser to allow others to access that information. Let the browsers be the different shaped holes, & the information being the pegs — a square peg won't fit in a round hole.

Without web standards, every website would have to be crafted per browser, to be able to pass through the "Chrome-shaped hole" for example. Web developers actually had to go through this in the 90s with the lack of standardization, & create 3 or 4 versions of a website for compatibility with all browsers. Feature updates would have to be cross-ported to each version as well. Hell.

Fortunately, web content was largely text based, so a website block would fit through the majority of the holes. However, browsers further developed, more & more stuff were implemented. If one would want to take advantage of it, they'd no longer fit through other browser holes. Browser versions were now tied with your own website's versions, as they'd possibly break your sh*t.

& that's how web standards were introduced.


To ensure browser makers adhered to a standardized way of doing things, prioritizing cross-compatibility between them.


  • Keeps the web free & accessible.
  • Simplifies source code; reduces dev & maintenance time.
  • Enable backward compatibility.
  • Maintain good SEO

Standards Development Organisations (SDOs)

  • Internet Engineering Task Force (IETF)
  • World Wide Web Consortium (W3C)
  • ECMA TC39
  • Web Standards Project (WaSP)

The Web Accessibility Initiative (WAI)

A standard by the W3C to facilitate accessibility with features for HTML.

HTML scripting

HyperText Markup Language (HTML) is used to design web pages using a markup language. It annotates text so that it's both machine & human readable.


The link between web pages.


The definition of a text document's structure with HTML tags.

HTML Anatomy, 3/9/2021

Figure 1.1.9, HTML Anatomy, 3/9/2021

WWW vs Internet

  • WWW
    • encapsulates the way information is accessed on the internet.
  • Internet
    • encapsulates the devices connected.
HTML Page Structure

The essential building block elements (eg. !DOCTYPE, html, head, title, body)

HTML structured anatomy, 3/9/2021

Figure 1.1.10, HTML structured anatomy, 3/9/2021

Elements & tags

Predefined tags & elements tell the browser how to display stuff.

    • Declares that the document is of HTML type.
    • Base container for everything in the webpage.
    • Container for "behind the scenes" elements; mostly boilerplate.
    • eg.

HTML source vs rendered, 3/9/2021

Figure 1.1.11, HTML source vs rendered, 3/9/2021


Each container/element encapsulates each other; the parent element contains the child element.

Nesting structure of basic HTML page, 3/9/2021

Figure 1.1.12, Nesting structure of basic HTML page, 3/9/2021

Text formatting elements

    • Bold.
    • Itallics.
    • Underlines.

NOTE: u & i is only typically displayed as itallic & underlined. Per spec, they only signify "an alternate voice or mood" & "unarticulated" respectfully.

List elements


i Hidden Talent said…
You have written impressive articles on web application development, I really commend your work. Thanks for posting it. Keep sharing your valuable knowledge and expertise. Looking forward to learn more, great blog. Top Full Stack Development Company USA