Understanding How Websites Work: A Beginners Guide - part 1
The Web Development Series
Welcome to the first post in the Web Development series, where we will explore the basic fundamentals of frontend web development: HTML, CSS, and Javascript.
We will look at how websites are built using HTML as the building blocks, CSS to enhance the appearance and javascript to create dynamic behavior.
In the following posts we will explore web development with practical examples and hands-on exercises, but first we need to explore the basics of what a website is and how it works.
What is a Website
A website is basically a collection of webpages that are usually identified by a common domain name and are accessible over the internet.
Each webpage is made up from:
- HTML - that defines its structure
- CSS - that defines its style
- JavaScript - that provides interactivity
How Webpage Requests Work
When a user enters a URL in a web browser, a series of processes, involving both client-side and server-side actions, takes place to request, retrieve, and render the webpage content in a users browser.
1. Requested URL
The URL (Uniform Resource Locator) represents the web address of the desired webpage. Is the address to a resource (like a webpage, stylesheet, image, etc.)
For example: https://darrylch.com or https://darryl.com/assets/styles.css.
2. DNS Resolution
When a page request is sent, the browser will first check its own cache to see if it already knows the IP address associated with the DNS. If not, its performs a DNS (Domain Name System) resolution.
The DNS is a human readable name like: darrylch.com, which it translates into an IP (Internet Protocol) address.
3. HTTPS Request
A HTTPS (HyperText Transfer Protocol Secure) request to the server, to retrieve the webpage.
HTTPS and HTTP
HTTPS is the secure version of HTTP, it ensures that the data being transmitted between a user’s browser and the website they are accessing remains encrypted, providing an additional layer of security against potential threats.
By utilizing HTTPS, sensitive information like passwords, credit card details, and personal data can be safeguarded from unauthorized access or interception by malicious entities. In fact, such encryption has become a web standard due to increased measures to protect user privacy and enhance online security.
Notably, major search engines like Google now prioritize websites with HTTPS connections in their search engine optimization (SEO) algorithms.
4. Server Processing
The server receives the HTTPS request and processes it, which may involve server-side programming languages (e.g., PHP, Python, Ruby, Node.js) to generate dynamic content, fetch data from databases, or perform other server-side tasks.
You can read more about the difference between frontend and backend development.
5. Server Response
The server sends back an HTTP response to the browser.
Which includes:
- The requested HTML document (or other resources such as CSS, JavaScript, images, etc.).
- A HTTP status codes (e.g., 200 OK, 404 Not Found) indicating the success or failure of the request.
- HTTP headers that provide additional information about the response.
6. Browser Rendering
Once the browser receives the response, its rendering engine processes the received HTML, CSS, and JavaScript, and constructs the DOM (Document Object Model) and renders the webpage on the user’s screen.
The DOM
The DOM, or Document Object Model, is a programming interface that represents the structure of a document as a tree of objects. In the context of web development and HTML, the DOM represents the structure of an HTML document. It provides a way for programs (such as JavaScript) to manipulate the content, structure, and style of a webpage dynamically.
7. Displaying Content
The browser displays the webpage, including text, images, and interactive elements, based on the instructions in the HTML, CSS, and JavaScript files.
8. User Interaction
Users can interact with the webpage, triggering additional requests for resources (e.g., submitting a form, clicking a link, watching a video, etc.) which will trigger the interaction again.
9. Browser Caching
The browser may store (or cache) certain resources locally on a user’s device. This storage helps improve the loading speed and performance of websites during subsequent visits or when navigating between pages.
Types of Resources Cached
- HTML Documents: The main content of a webpage.
- CSS Stylesheets: Styles and layouts applied to HTML elements.
- JavaScript Files: Code responsible for interactivity and dynamic behavior.
- Images: Graphics and pictures displayed on the webpage.
- Fonts: Typeface files used for text rendering.
- Other Assets: Any other resources like audio, video, or data files.
Summary and Next Steps
This interaction is a continuous loop as users navigate through different pages or interact with dynamic elements on a website. Each step involves communication between the user’s browser and the server, enabling the delivery of dynamic and interactive content to the user.