Introduction to Web Fundamentals

TL;DR

Web fundamentals are the basic concepts and technologies that make the internet work, focusing on how websites are built and accessed. You'll learn about clients, servers, and the languages used to create web content like HTML, CSS, and JavaScript. Understanding these basics is your first step to building anything on the web.

1. The Mental Model

Think of the internet like a giant library. You (your web browser) are asking a librarian (a server) for a specific book (a website). The librarian finds the book and sends it back to you, and your browser knows how to display it.

2. The Core Material

When you access a website, a few key things happen behind the scenes. Your computer (the client) sends a request over the internet to another computer (the server) that hosts the website's files. The server finds those files and sends them back to your client. Your client, typically a web browser like Chrome or Firefox, then reads these files and displays the website to you.

What Makes Up a Website?

Websites are generally built using three core technologies:

• HTML (HyperText Markup Language): This is the structure or the "bones" of a webpage. It defines the content, like headings, paragraphs, images, and links. Think of it as the blueprint of a house.
• CSS (Cascading Style Sheets): This handles the presentation or "looks" of a webpage. It dictates colors, fonts, layout, and overall design. This is like the interior design and paint job of your house.
• JavaScript: This provides the interactivity or "brain" of a webpage. It allows for dynamic content, animations, form validations, and anything that responds to user actions. This is like the electrical system, smart home features, or moving parts in your house.

These three work together to create the experience you see and interact with every day on the web.

graph TD
    A["Your Browser (Client)"] --> B["Sends Request (e.g., visit google.com)"]
    B --> C["Internet"]
    C --> D["Web Server"]
    D --> E["Finds Website Files (HTML, CSS, JS)"]
    E --> F["Sends Response (Files)"]
    F --> C
    C --> G["Your Browser (Client)"]
    G --> H["Renders Website (What you see)"]

URLs and HTTP

Photo by Miguel Á. Padriñán on Pexels

• URL (Uniform Resource Locator): This is the "address" of a website, like https://www.example.com. It tells your browser exactly where to find the website on the internet.
• HTTP (HyperText Transfer Protocol): This is the set of rules or the "language" browsers and servers use to talk to each other. When you type a URL, your browser uses HTTP to request the page from the server. HTTPS is simply the secure version of HTTP.

Frontend vs. Backend

• Frontend: This is everything you see and interact with in your browser. It's built with HTML, CSS, and JavaScript. It's also called client-side development.
• Backend: This is the server-side of a website. It handles things you don't directly see, like databases, user authentication, and application logic. It's built with languages like Python, Node.js, PHP, or Ruby.

3. Worked Example

Let's look at a super simple webpage example. Imagine you open your browser and type http://localhost:8080/myfirstpage.html.

1. Your Browser (Client): Sends an HTTP request to the local server running on port 8080, asking for myfirstpage.html.
2. Server (on your computer): Receives the request, finds myfirstpage.html, and sends its content back to your browser.

3. Browser: Receives the following content:

   html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Webpage</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, Web!</h1> <p>This is my first paragraph.</p> <script src="script.js"></script> </body> </html>
   Your browser then sees the <link rel="stylesheet" href="style.css"> and makes another request for style.css.
   It also sees <script src="script.js"></script> and requests script.js.

   Let's say style.css contains:
   css body { font-family: Arial, sans-serif; color: navy; } h1 { color: orange; }
   And script.js contains:
   javascript alert("Welcome to my page!");

4. Browser Renders: It takes the HTML structure, applies the CSS styles (making the heading orange and body text navy), and then executes the JavaScript (showing a "Welcome to my page!" pop-up). You see a nicely styled page with an alert message.

4. Key Takeaways

• The internet works by clients (browsers) requesting information from servers.
• HTML provides the structure, CSS handles the styling, and JavaScript adds interactivity to webpages.
• URLs are website addresses, and HTTP is the communication language between browsers and servers.
• Frontend is what you see, while backend handles behind-the-scenes logic and data.
• Understanding these core concepts is essential for building any web application.

Common Mistakes to Avoid:
- Confusing HTML, CSS, and JavaScript roles; each has a distinct purpose.
- Thinking that a website is just one file; it's often a collection of linked files.
- Not understanding the client-server relationship, which is fundamental to how the web operates.
- Forgetting that your browser interprets the code; it doesn't "run" HTML or CSS like a program.

5. Now Try It

Open a simple text editor (like Notepad on Windows, TextEdit on Mac, or VS Code). Create three new files: index.html, style.css, and script.js in the same folder.
1. In index.html, create a basic HTML structure with an <h1> heading and a <p> paragraph, link style.css, and include script.js at the end of the body.
2. In style.css, add some basic styles: change the body background color and the h1 text color.
3. In script.js, add a simple console.log("Page loaded!");
Save all three files, then open index.html directly in your web browser. Inspect the page (usually right-click -> "Inspect") and check the "Console" tab to see your JavaScript message.

Success looks like: You see a webpage with your heading and paragraph, styled with your chosen colors, and a "Page loaded!" message in your browser's developer console.