Published on

Understanding How the Web Works: A Guide for Self-Taught Web Developers

Authors
Buy Me A Coffee

Table of Contents

Introduction

The web is a complex ecosystem made up of many interconnected technologies. As a self-taught developer, diving into the world of web development can be both exciting and overwhelming. While you may have mastered or in the process of mastering the basics of HTML, CSS, and JavaScript, understanding how the web actually works "under the hood" is crucial for building robust and efficient web applications.

Your other counterparts who have formal education in computer science or IT may have learned about core web concepts like Client-Server Architecture, HTTP, DNS etc. However, as a self-taught developer, it's easy to overlook or take for granted how these fundamental concepts work together to make the web function.

This guide aims to explain the key underlying technologies and protocols that power the web in simple terms. By the end, you'll have a better understanding of how the web works and how you can leverage this knowledge to become a more effective web developer. Let's get started!

Client-Server Architecture

At the core of the web is the client-server architecture. When you type a URL into your browser and hit enter, your browser acts as the client, sending a request to a remote server hosting the desired web page. The server processes the request and sends back the requested page, which the browser then renders for you to view.

This architecture allows for the separation of concerns between the client and the server. The client is responsible for presenting the user interface and handling user interactions, while the server is responsible for processing requests, interacting with databases, and generating dynamic content.

Example: Let's say you want to visit a website like www.tenxdeveloper.com. Your web browser (the client) sends an HTTP request to the server hosting tenxdeveloper.com. The server then processes the request and responds by sending back the HTML, CSS, JavaScript, images, and other files needed to display the webpage on your screen.

HTTP and HTTPS

The Hypertext Transfer Protocol (HTTP) is the foundation of data communication on the web. It defines how messages are formatted and transmitted between clients and servers.

HTTPS(Hypertext Transfer Protocol Secure) is the secure version of HTTP. It uses encryption to protect the data being transmitted between the client and the server, making it more secure than HTTP.

HTTP uses methods like GET and POST to request resources from the server. The server responds with status codes like 200(OK), 404(Not Found), 500(Server Error) etc. to indicate the success or failure of the request. I'll soon be writing an extensive guide on HTTP methods, status codes and how to make requests using the Fetch API. Stay tuned!

Domain Name System(DNS)

DNS is like a phonebook for the internet that translates human-friendly domain names like www.tenxdeveloper.com into IP addresses like 192.0.2.1 that computers use to locate each other on the network.

When you type a URL into your browser, your computer sends a request to a DNS server to look up the IP address associated with that domain name. Once the IP address is resolved, your browser can then send an HTTP request to the server hosting the website.

DNS servers are located throughout the world and work together to efficiently route domain name lookups. Large companies and internet providers operate authoritative DNS servers that contain records for their domains and can resolve requests for those domains.

Example

Here is an overview of the DNS lookup process for tenxdeveloper.com:

  1. User enters www.tenxdeveloper.com in browser.
  2. The user's computer first checks its local DNS cache to see if it already has the IP address stored for that domain name.
  3. If not found locally, the request is sent to the user's DNS resolver(operated by their ISP).
  4. If the ISP DNS server doesn't have the record, it will query the root DNS servers to find the authoritative DNS server for the ".com" domain.
  5. The root server then directs the request to the authoritative DNS server for "tenxdeveloper.com", which will return the IP address (e.g 192.168.1.100) for www.tenxdeveloper.com.
  6. The IP address is then sent back through the DNS servers until it reaches the user's computer. Their browser can then use that IP address to connect to the website server and load the page.

HTML, CSS, and JavaScript

HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript form the building blocks of web development. HTML provides the structure of a web page, CSS adds styling and layout, and JavaScript adds interactivity and dynamic behavior. You're probably already familiar with these technologies.

Understanding these core web languages before diving into framewors like React, Angular, or Vue is important for building solid foundations. I therefere reccomend focusing your efforts on mastering HTML semantics, CSS layout and styling techniques, and JavaScript fundamentals like DOM manipulation, events, and asynchronous programming before moving on. This will serve you well as your skills and projects become more advanced.

Cookies and Sessions

Cookies and sessions are mechanisms for maintaining stateful communication between the client and server. Cookies are small pieces of data stored in the client's browser, while sessions are stored on the server. They're commonly used for user authentication, tracking user preferences, and maintaining shopping cart contents.

Example: When you log into a website, the server may create a session for you and send back a cookie containing a session ID. The client's browser then includes this cookie in subsequent requests, allowing the server to identify and maintain your session across multiple requests. This way, you stay logged in even as you navigate between different pages on the site.

Different web frameworks provide utilities and APIs for easily managing cookies and sessions in your applications. Therefore, find out what tools the framework you're using (e.g. Express, Django, Rails etc) provides out-of-the-box for handling user authentication, authorization and maintaining state.

Web Standards and Accessibility

Web standards help ensure compatibility and accessibility across different browsers and devices. They are developed through open processes at organizations like the W3C (World Wide Web Consortium) and the WHATWG (Web Hypertext Application Technology Working Group).

Accessibility standards promote inclusivity and ensure that web content is accessible to all users, including those with disabilities.

You can integrate accessibility best practices into your workflows by:

  • Using semantic HTML elements like header, nav, main, footer etc to convey meaning rather than just presentation.
  • Adding alt attributes to img elements to describe image content for screen readers.
  • Ensuring sufficient color contrast between foreground and background text/elements.
  • Providing text alternatives for non-text content like captions for videos
  • Creating logical tab order and focus order using ARIA roles and attributes.
  • Making sure all content and functionality is operable via keyboard alone.

Web APIs and Services

The web platform provides powerful APIs that allow frontend code to access useful functionality like geolocation, making network requests, storing data locally etc. Some commonly used web APIs include:

  • The Fetch API for making HTTP requests to APIs and services.
  • The Geolocation API to get the user's physical location.
  • IndexedDB for client-side database functionality like storing cached responses.
  • Web Storage APIs like localStorage and sessionStorage for persistent/session-based key-value storage.
  • Web Sockets for full-duplex communication channels over a single TCP connection.

Understanding and leveraging these useful web APIs will allow you to build richer, more engaging experiences for users and will serve you well as your skills progress. Be sure to consider browser support and fallbacks for less capable environments.

Conclusion

Understanding how the web works is essential for every web developer, whether self-taught or formally educated. By grasping the fundamentals of client-server architecture, HTTP/HTTPS, DNS, HTML/CSS/JavaScript, and cookies/sessions, you'll be better equipped to build secure, efficient, and interactive web applications.

I hope this overview provided a helpful high-level introduction to some core web technologies and concepts. Please feel free to research any areas that need more clarification. With continued learning and practice, you'll be well on your way to becoming a skilled full-stack developer.

Happy coding!

Discuss on Twitter • View on GitHub