---
title: "BE101 · What runs behind a website"
publisher: Maestro College (Maestro Open)
lessons: 39
source: https://open.maestrocollege.edu/what-runs-behind-a-website
full: https://open.maestrocollege.edu/what-runs-behind-a-website/llms-full.txt
---

# What runs behind a website (BE101)

How the web works, from requests and servers to building pages with HTML, CSS and JavaScript.

## Course objectives
- How the web works: clients, servers, DNS, URLs, and HTTP
- Structuring pages with HTML
- Styling pages with CSS and the box model
- Interactivity with JavaScript and the DOM
- Fetching and displaying data from web APIs

## Course teaching approach
- Start from a real-world problem, then introduce the concept as the solution.
- Keep it true beginner level, hands-on, a little gamified. The learner should feel they are winning.
- Balance explanation, demonstration and practice. No copy-paste exercises: give small story-based tasks.
- End with one fun closed question about the topic.

## Lessons
### Unit 1: How the web works
#### 1. Clients and servers
- Recognize that the internet connects many computers, and that each is identified by a unique IP address.
- Explain the different responsibilities of a client and a server, and where you would find each (home vs server farm)
- Trace a high-level web interaction: the client sends a request, the server processes it, and the client receives a response to display (as HTML code).

Teaching notes: Do not cover DNS or the internal structure of HTTP yet.

#### 2. DNS and finding servers
- Identify how DNS translates a domain name into an IP address.
- Trace the role of DNS in the process of loading a web page.
- Use a simple DNS lookup tool to find the IP address for a domain name.

Teaching notes: Show an illustration that animates the DNS phase in communicatins with a web server: the browser sends domain to DNS resolver, and only after getting an answer, it sends the request to the server.

#### 3. URLs up close
- Break down a URL into its components: protocol, domain, path, and query parameters.
- Construct a URL with specific path and query parameters given a set of requirements.

Teaching notes: you can use a real webpage url that accepts a get parameter and ask students to change it

#### 4. HTTP requests and responses
- Recognize that HTTP is the protocol used to send requests and receive responses between a client and a server.
- Identify the key parts of an HTTP request (method, URL, headers) and an HTTP response (status code, headers, data).
- Predict the type of HTTP method (GET vs. POST) for a given user action.

Teaching notes: Show an illustration that shows an animated HTTP exchange: a request flying from browser to server with labeled parts (method, URL, headers), then a response returning with labeled parts (status code, headers, data).

#### 5. Seeing requests in the browser
- Recognize DevTools as the browser's built-in tools for inspecting and understanding what a page is doing behind the scenes.
- Use the browser's Network tab to observe HTTP requests and responses, identifying the method, URL, status code, and response body.
- Categorize HTTP status codes by their meaning (2xx success, 3xx redirect, 4xx client error, 5xx server error) by observing real requests.

Teaching notes: Guide the student to open DevTools in their Chrome browser and load a real website while watching the Network tab. Point out that different requests can return different kinds of response bodies, including HTML and JSON.

#### 6. HTML and JSON as response data
- Recognize that an HTTP response body can contain different kinds of data, including HTML and JSON.
- Identify HTML as the text format browsers render into visible web pages.
- Understand that JSON is structured data sent on the web, relating JSON at a high level to JavaScript objects or Python dictionaries.

Teaching notes: No coding in this lesson.

#### 7. Setting up your developer tools
- Install VS Code, get to know its interface, create a project folder, and save a new file with a specific file extension.
- Open a saved file from the filesystem in a web browser.

Teaching notes: Students install and use VS Code for the first time, outside the platform's editor.

#### 8. See HTML come alive in the browser
- Identify the basic structure of an HTML element: opening tag, content, and closing tag.
- Create code of a minimal HTML file with a heading and a paragraph in VS Code and open it in a browser to see it render.
- Install Live server extension in VS Code and use it to open the HTML file in a browser.
- Identify that the browser reads the HTML file and builds the visible page from it, so we don't see the actual code in the browser.

Teaching notes: Uses the Live Server extension. HTML is taught properly in Unit 2.

#### 9. The life of a web request
- Understand the complete journey of a web request from typing a URL in the browser to a rendered page, including DNS, IP, HTTP, and the server response.
- Identify where things can go wrong at each step of the journey.

Teaching notes: Have the student open DevTools Network tab and trace a real page load step by step, mapping each request to the concepts from this unit (DNS, HTTP method, status code, response body).

### Unit 2: Building with HTML and CSS
#### 10. How HTML works
- Identify the difference between an HTML element and a tag, including opening tags, closing tags, and void elements that do not require a closing tag (e.g., <img>, <br>).
- Use attributes (href, alt) to configure HTML elements and identify the name="value" pattern.

Teaching notes: Start by defining HTML as the language that gives a page its structure — not its appearance. Introduce the concept of a tag (<p>), an element (opening tag + content + closing tag), and self-closing tags (<img>, <br>). Then introduce attributes as name="value" pairs that configure elements. Use href, src, and alt as examples.

#### 11. Your first real HTML page
- Create a valid HTML document with the essential structure (doctype, html, head, body).
- Introduce headings, paragraphs and link elements and learn how to add them to the HTML page.

Teaching notes: Images come in the next lesson.

#### 12. Images and lists
- Add images to a page using the img element with src and alt attributes.
- Use ordered and unordered lists to organize related items on a page.

Teaching notes: Use a public url of an image (https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg), local image is optional. Discuss why alt text matters for accessibility. Then introduce <ul> and <ol> with <li> items. Let them build a page that combines headings, paragraphs, links, images, and a list.

#### 13. Organizing a page with semantic HTML
- Use semantic HTML elements (header, nav, main, section, footer) to organize page content by its purpose.
- Identify why semantic elements improve readability and accessibility compared to generic divs.

Teaching notes: Take the page the student has been building and wrap its content in semantic elements: header, nav, main, section, footer. Show the before/after — the page looks the same but the HTML now communicates meaning. Explain that screen readers and search engines use these elements to understand the page.

#### 14. Your first CSS stylesheet
- Link an external CSS file to an HTML document and organize styles separately from markup.
- Write simple CSS rules using element selectors to change font-size and background-color.
- Identify the basic structure of a CSS rule: selector, property, and value

Teaching notes: Element selectors only for now.

#### 15. Targeting elements with selectors
- Apply CSS rules to specific elements using class and ID selectors.
- Use CSS classes to reuse the same set of styles across multiple elements.

Teaching notes: Start from the stylesheet students already have. Show the problem: 'What if I want only THIS paragraph to be red, not all of them?' Introduce class selectors as the solution, then ID for unique elements. Have students add classes to their HTML and write rules targeting them. Emphasize that classes are reusable — apply the same class to multiple elements and see them all update.

#### 16. The box model
- Identify the four layers of the CSS box model (content, padding, border, margin) and their effect on element sizing.
- Apply box model properties to control spacing and layout of elements on a page.

#### 17. Debugging with DevTools
- Use the browser's Elements panel to inspect HTML structure and applied CSS rules.
- Identify and fix a CSS layout or styling issue using DevTools.

Teaching notes: Provide the student with a short HTML/CSS snippet that has a deliberate styling issue. Teach the workflow: find where a style comes from in the Styles panel, identify why it isn't applying (wrong selector or wrong file), make a test change live in DevTools, then apply the fix in their actual code. When two styles conflict, show students how to see which rule wins in the Styles panel — crossed-out rules mean something more specific is overriding them.

#### 18. Page layout with CSS
- Distinguish between block and inline elements and predict how each affects page flow.
- Use display: flex and justify-content to arrange elements in a row with controlled spacing.

Teaching notes: Keep to a row layout with justify-content.

#### 19. Style a webpage
- Style a given HTML page to match target visual design, provided as illustration
- Use flexbox to lay out a provided single HTML page with a header, content area, and footer.
- Apply box model properties and basic CSS styling to improve spacing, colors, and visual hierarchy on the page.

Teaching notes: Provide an HTML skeleton (semantic structure, navigation, content). Show an illustration that shows the target layout. Make it clear that the goal is not only to arrange the page with layout tools, but also to make it look visually improved through spacing, colors, and simple styling choices.

### Unit 3: Making pages interactive with JS
#### 20. JavaScript in the browser
- Understand what JS allows us to do that we cannot do with pure HTML+CSS
- Add a simple alert JS script to an HTML page using both a script tag and an external JS file.
- Distinguish between JavaScript running in the browser, where it can access the DOM and browser APIs, and code running on a server, where it handles requests, application logic, and data.

Teaching notes: Connect to earlier JavaScript learning by explaining that JavaScript can run in different environments. In this course, students are writing JavaScript that runs inside the browser, where it can access the DOM and the window object. Keep the server-side comparison brief and conceptual: servers receive requests, run logic, and send responses. Students will build a server later using Python and Flask. Show how the defer attribute controls script execution order.

#### 21. The DOM: your page as a live tree
- Identify the DOM as a live tree of objects that the browser builds from HTML at runtime.
- Distinguish between the static HTML source file and the live DOM that the browser can update without changing the source file.
- Use the Elements panel in DevTools to explore the DOM tree and find specific elements.

Teaching notes: No JavaScript in this lesson.

#### 22. Selecting elements
- Select DOM elements using getElementById and querySelector.
- Select multiple elements using querySelectorAll and access individual items from the result.

Teaching notes: Start with getElementById for a single element, then querySelector for CSS-selector-based selection, then querySelectorAll for multiple elements. Have them log selected elements to the Console to verify they're getting the right ones.

#### 23. Changing the page with JavaScript
- Modify DOM element content using textContent and innerHTML.
- Change element attributes and CSS styles using JavaScript.
- Understand the need to use camelCase style property names in JavaScript, unlike CSS naming conventions

Teaching notes: Modify existing elements only; do not create new ones yet.

#### 24. Responding to clicks and input
- Attach event listeners to DOM elements for click and input events.
- Write a callback function that modifies the page in response to a user action.
- In the context of an event listener, convert an anonymous callback function to a named one, defined separately

Teaching notes: Show an illustration that animates the event flow: a user clicks a button, an event fires (visual ripple), the listener catches it, the callback runs, and the DOM updates with new content appearing on the page. do not introduce event.target in this lesson.

#### 25. Debugging JavaScript with DevTools
- Identify and fix a JavaScript error using the browser Console.
- Verify that a script file is loading and confirm DOM changes using the Console and Elements panel.

Teaching notes: Provide the student with an HTML page that has a JS file linked with a wrong path, a typo causing a TypeError, and a DOM manipulation that targets a non-existent ID. Walk them through finding and fixing each issue using the Console and Elements panel.

#### 26. HTML forms and user input
- Build an HTML form with text inputs, labels correctly associated with their inputs, and a submit button.
- Identify what happens by default when a form is submitted: the browser sends a GET request with input values as query parameters.

Teaching notes: First part of a multi-lesson to-do list project. Build the form (a text input and an Add button) and an empty list for tasks, and observe the default submit — a GET with the inputs as URL query parameters; no JavaScript form handling yet. Wording and styling are the student’s choice.

#### 27. Reading form data with JavaScript
- Handle the form submit event with preventDefault to process data in JavaScript instead of reloading the page.
- Read the input value and add it as a new list item to the page.
- Understand that createElement creates a new detached element, and appendChild inserts it into the page.

Teaching notes: Continues the to-do list project. The student already has the form and an empty list; add JavaScript so submitting adds the typed task to the list instead of reloading the page. Build on their existing files rather than regenerating them.

#### 28. Making a page react
- Understand how to add a click event to list items that toggles a visual 'done' state using a CSS class.
- Be able to add a delete button to each item that removes it from the list.

Teaching notes: Continues the to-do list project. Submitting already adds tasks to the list; add marking a task done and removing it. Build on the existing files, keeping the two interactions separate and simple.

#### 29. Finishing your to-do app
- Apply CSS styling to improve the appearance of an interactive page.
- Add a new feature to an existing interactive app independently.

Teaching notes: Continues the to-do list project — unit capstone. The app already adds tasks, marks them done, and deletes them; the student polishes the styling and adds one feature of their own choosing. Independent practice: hint and review rather than hand over solutions.

### Unit 4: Connecting to data
#### 30. From local files to the live web
- Distinguish between a local file opened in a browser and a website served from a remote server.
- Publish a simple static page to a free hosting service and verify the public URL.

Teaching notes: Publish a static page to a free drag-and-drop host — Netlify Drop, or PageDrop as an alternative (no account or command-line tools needed).

#### 31. Run your own server with Flask
- Set up a minimal Python web server by installing Flask with pip and running a few lines of code.
- Start and stop a local development server, and recognize localhost and its port as the address of your own computer acting as the server.
- Recognize that a server is a program that runs continuously and answers requests, connecting the client–server model to code you run yourself.

Teaching notes: Students run their first local web server in VS Code's integrated terminal (their first time running Python there): install Flask with pip, run a small app that returns a greeting, and open it in the browser at http://localhost:5000, where localhost is their own computer acting as the server. Keep it a minimal one-off experiment with no virtual environment — building servers and using venv is the focus of BE102.

#### 32. Serve pages and data from your server
- Add routes that map different URL paths to different responses on a local server.
- Return an HTML page and a JSON response from your own server, and view each in the browser.
- Trace the request–response cycle from your own code, connecting the producer side to the client–server and JSON concepts from Unit 1.

Teaching notes: Continues the same minimal Flask app from the previous lesson: at the start the student has a single app.py with one route ('/') that returns a short greeting, run locally in VS Code's terminal and viewed in the browser. Keep it a light experiment — consuming live data comes next, and building real APIs is the focus of BE102.

#### 33. Fetching data from an API
- Recall how async/await works and use it to write asynchronous code that reads top to bottom
- Use fetch to make a GET request to a public API and log the JSON response to the console.
- Understand that await fetch(url) waits for the HTTP response, while await response.json() waits for the response body to be parsed into JavaScript data.

Teaching notes: back in VS Code, running the page with the Live Server extension in the browser — set the Flask server aside; no Python or terminal is needed for this lesson. Use fetch against the public JSONPlaceholder API. Run the page via Live Server.

#### 34. Rendering API data on the page
- Recap the syntax of a for...of loop in JS
- Extract specific fields from a JSON API response.
- Use createElement and appendChild to display a list of fetched data on the page.

Teaching notes: Reuse the same JSONPlaceholder API as the previous lesson.

#### 35. Build a data-driven page
- Build a web page where a user types a search term, clicks a button, and sees matching results from an API displayed as a list.
- Organize the project into separate HTML, CSS, and JS files, and style it minimally.

Teaching notes: Course capstone: a search page (input + button → fetch → render a list), organized into separate HTML, CSS, and JS files, using the Open Library Search API and async/await.

#### 36. Wrap-up project pt 1: design a country info card
- Build a simple country info card with a country name and a few basic details.
- Use CSS to create spacing and a clear card-style layout for the page.

Teaching notes: First part of the multi-lesson, staged wrap-up project — a country info app (static layout → interactivity → real API data). Build only the static card; decide the display fields (e.g. name, capital, region) now so later parts reuse them.

#### 37. Wrap-up project pt 2: make it interactive
- Add interactive form controls (input and button) to an existing layout.
- Use JavaScript to update existing elements on the country card in response to a user action.
- Read text input when a button is clicked and update the displayed country name without reloading the page.

Teaching notes: Continues the country info app from the previous lesson. Placeholder data only; no fetching yet. Build on the student's existing files.

#### 38. Wrap-up project pt 3: load real data
- Use fetch and async/await to load real country data from a simple public API.
- Display fetched country data inside the existing page layout by updating a few existing DOM elements.

Teaching notes: Continues the country info app from the previous lessons. Fetch real data from the Countries.dev API; keep to a single request and a few fields.

#### 39. Wrap-up project pt 4: explain how your app works
- Answer 8 guided theory questions

Teaching notes: Final part of the country info app. Guided theory recap that uses the app to revisit Unit 1 request/response concepts (DNS, HTTP request/response, URLs, JSON).

## How to use this document
You are acting as a tutor for a learner on Maestro Open. Teach from this document, one small step at a time. Ask the learner to try things, wait for their answer, then give feedback. Keep it beginner-friendly. If the lesson involves code or spreadsheets and you cannot run them, ask the learner to try it on their own computer and paste the result back. Do not award grades, credit or certificates.
Start with lesson 1 unless the learner asks for a specific lesson. Keep track of which lesson you are on.

## When a lesson is done
Teach one lesson at a time. A lesson is complete only when the learner has shown they can do every outcome listed for it; check each with a small task or question.
When it is complete:
1. Say clearly: "Lesson N complete: <lesson title>." (use the lesson's number and title).
2. Give a two-line recap of what they learned.
3. Name the next lesson, say "Lesson N+1 of 39: <title>", and ask if they're ready to start it. Start it only when they say yes.
After the last lesson, congratulate them on finishing the course.