--- 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 - [Clients and servers](https://open.maestrocollege.edu/what-runs-behind-a-website/clients-and-servers.md) - [DNS and finding servers](https://open.maestrocollege.edu/what-runs-behind-a-website/dns-and-finding-servers.md) - [URLs up close](https://open.maestrocollege.edu/what-runs-behind-a-website/urls-up-close.md) - [HTTP requests and responses](https://open.maestrocollege.edu/what-runs-behind-a-website/http-requests-and-responses.md) - [Seeing requests in the browser](https://open.maestrocollege.edu/what-runs-behind-a-website/seeing-requests-in-the-browser.md) - [HTML and JSON as response data](https://open.maestrocollege.edu/what-runs-behind-a-website/html-and-json-as-response-data.md) - [Setting up your developer tools](https://open.maestrocollege.edu/what-runs-behind-a-website/setting-up-your-developer-tools.md) - [See HTML come alive in the browser](https://open.maestrocollege.edu/what-runs-behind-a-website/see-html-come-alive-in-the-browser.md) - [The life of a web request](https://open.maestrocollege.edu/what-runs-behind-a-website/the-life-of-a-web-request.md) ### Unit 2: Building with HTML and CSS - [How HTML works](https://open.maestrocollege.edu/what-runs-behind-a-website/how-html-works.md) - [Your first real HTML page](https://open.maestrocollege.edu/what-runs-behind-a-website/your-first-real-html-page.md) - [Images and lists](https://open.maestrocollege.edu/what-runs-behind-a-website/images-and-lists.md) - [Organizing a page with semantic HTML](https://open.maestrocollege.edu/what-runs-behind-a-website/organizing-a-page-with-semantic-html.md) - [Your first CSS stylesheet](https://open.maestrocollege.edu/what-runs-behind-a-website/your-first-css-stylesheet.md) - [Targeting elements with selectors](https://open.maestrocollege.edu/what-runs-behind-a-website/targeting-elements-with-selectors.md) - [The box model](https://open.maestrocollege.edu/what-runs-behind-a-website/the-box-model.md) - [Debugging with DevTools](https://open.maestrocollege.edu/what-runs-behind-a-website/debugging-with-devtools.md) - [Page layout with CSS](https://open.maestrocollege.edu/what-runs-behind-a-website/page-layout-with-css.md) - [Style a webpage](https://open.maestrocollege.edu/what-runs-behind-a-website/style-a-webpage.md) ### Unit 3: Making pages interactive with JS - [JavaScript in the browser](https://open.maestrocollege.edu/what-runs-behind-a-website/javascript-in-the-browser.md) - [The DOM: your page as a live tree](https://open.maestrocollege.edu/what-runs-behind-a-website/the-dom-your-page-as-a-live-tree.md) - [Selecting elements](https://open.maestrocollege.edu/what-runs-behind-a-website/selecting-elements.md) - [Changing the page with JavaScript](https://open.maestrocollege.edu/what-runs-behind-a-website/changing-the-page-with-javascript.md) - [Responding to clicks and input](https://open.maestrocollege.edu/what-runs-behind-a-website/responding-to-clicks-and-input.md) - [Debugging JavaScript with DevTools](https://open.maestrocollege.edu/what-runs-behind-a-website/debugging-javascript-with-devtools.md) - [HTML forms and user input](https://open.maestrocollege.edu/what-runs-behind-a-website/html-forms-and-user-input.md) - [Reading form data with JavaScript](https://open.maestrocollege.edu/what-runs-behind-a-website/reading-form-data-with-javascript.md) - [Making a page react](https://open.maestrocollege.edu/what-runs-behind-a-website/making-a-page-react.md) - [Finishing your to-do app](https://open.maestrocollege.edu/what-runs-behind-a-website/finishing-your-to-do-app.md) ### Unit 4: Connecting to data - [From local files to the live web](https://open.maestrocollege.edu/what-runs-behind-a-website/from-local-files-to-the-live-web.md) - [Run your own server with Flask](https://open.maestrocollege.edu/what-runs-behind-a-website/run-your-own-server-with-flask.md) - [Serve pages and data from your server](https://open.maestrocollege.edu/what-runs-behind-a-website/serve-pages-and-data-from-your-server.md) - [Fetching data from an API](https://open.maestrocollege.edu/what-runs-behind-a-website/fetching-data-from-an-api.md) - [Rendering API data on the page](https://open.maestrocollege.edu/what-runs-behind-a-website/rendering-api-data-on-the-page.md) - [Build a data-driven page](https://open.maestrocollege.edu/what-runs-behind-a-website/build-a-data-driven-page.md) - [Wrap-up project pt 1: design a country info card](https://open.maestrocollege.edu/what-runs-behind-a-website/wrap-up-project-pt-1-design-a-country-info-card.md) - [Wrap-up project pt 2: make it interactive](https://open.maestrocollege.edu/what-runs-behind-a-website/wrap-up-project-pt-2-make-it-interactive.md) - [Wrap-up project pt 3: load real data](https://open.maestrocollege.edu/what-runs-behind-a-website/wrap-up-project-pt-3-load-real-data.md) - [Wrap-up project pt 4: explain how your app works](https://open.maestrocollege.edu/what-runs-behind-a-website/wrap-up-project-pt-4-explain-how-your-app-works.md) ## 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: ." (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: ", 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.