feat(curriculum): add Understanding the HTTP request-response model Theory block (#62453)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2025-10-20 01:46:41 +02:00
parent 54ccb1d71c
commit c7fe5d915f
7 changed files with 623 additions and 1 deletions
@@ -4966,6 +4966,12 @@
          "Review relational databases concepts to prepare for the upcoming quiz."
        ]
      },
+      "lecture-understanding-the-http-request-response-model": {
+        "title": "Understanding the HTTP Request-Response Model",
+        "intro": [
+          "Learn the fundamentals of how web communication works through the HTTP request-response model, explore different types of web assets and responses, and understand how forms handle data submission using various HTTP methods."
+        ]
+      },
      "exam-certified-full-stack-developer": {
        "title": "Certified Full Stack Developer Exam",
        "intro": ["Pass this exam to become a Certified Full Stack Developer."]
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Understanding the HTTP request-response model
+block: lecture-understanding-the-http-request-response-model
+superBlock: full-stack-developer
+---
+
+## Introduction to the Understanding the HTTP request-response model
+
+This page is for the Understanding the HTTP request-response model
@@ -0,0 +1,195 @@
+---
+id: 68dd96cf8084504ca0322e98
+title: What Is the HTTP Request-Response Model?
+challengeType: 19
+dashedName: what-is-the-http-request-response-model
+---
+
+# --description--
+
+The HTTP request-response model is the fundamental communication pattern that powers the World Wide Web (WWW). It has many components that make it efficient, so we can all access materials from the web.
+
+Let's look at what the HTTP request-response model is, the components that make it up, and how those components work together to bring efficiency into what powers the web.
+
+The HTTP request-response model is a communication pattern in web interactions in which a client, usually a web browser, sends an **HTTP request** to a server, and the server processes the request and sends back an **HTTP response**.
+
+Here are the components that make up the HTTP request-response model:
+
+* **Client**: A browser, mobile app, or any other software that sends HTTP requests to the server and interprets the HTTP responses it receives back.
+    
+* **Request**: The message sent by the client to the server. It includes the method, URL, headers, and an optional body.
+    
+* **HTTP method**: The action to perform — `GET` for retrieving data, `POST` for sending data, `PATCH` and `PUT` for modifying data, and `DELETE` for removing data.
+    
+* **URL (Uniform Resource Locator)**: The resource being requested from the server.
+    
+* **Headers**: The metadata sent with the request or response. For example, `Content-Type` and `Authorization`.
+    
+* **Body**: The data sent with the `POST`, `PUT`, `PATCH`, `DELETE` requests, often in JSON or form data format.
+    
+* **Server**: The backend system that processes the request and generates a response. It can be written in any programming language that supports server-side programming.
+    
+* **Response**: The message sent back by the server. It contains a status code, headers, and an optional body.
+    
+* **Status Code or Response Code**: A numeric code indicating success, errors, or redirects.
+    
+* **Response Body**: The actual data sent back, typically in HTML, JSON, or XML format.
+
+So how do all these components work together in the HTTP request-response cycle?
+
+1. **The Client Initiates a Request**
+    
+    * A browser, mobile app, or API client sends an HTTP request meant to reach the server.
+        
+    * The request includes a method like `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, URL, headers, and sometimes a body.
+        
+2. **The Request is Sent to the Server**
+    
+    * The request travels over the internet to the server, a backend system written with a programming language.
+        
+    * The server receives the request and extracts relevant information from it.
+        
+3. **The Server Processes the Request**
+    
+    * The server checks the request method and URL.
+        
+    * It may need to validate authentication (via headers like authorization).
+        
+    * If needed, it interacts with a database to fetch or modify the data.
+        
+4. **The Server Prepares a Response**
+    
+    * The server generates a response with a status code like 200, 404, 500, and so on.
+        
+    * The response includes headers, for example, `Content-Type: application/json`.
+        
+    * If applicable, a response body in either JSON, HTML, or XML is added.
+        
+5. **The Response is Sent to the Client**
+    
+    * The server sends the response back over the internet.
+        
+    * The client receives the response and processes the data.
+        
+6. **The Client Handles the Response**
+    
+    * If the response is successful (status code 200), the client displays the data, for example, renders the data on a webpage.
+        
+    * If an error occurs (`404 Not Found`, `500 Internal Server Error`, and so on), the client may show an error message.
+
+This cycle repeats for every new request the client makes.
+
+Here's a diagram that simplifies this process:
+
+<img src="https://cdn.freecodecamp.org/curriculum/lecture-transcripts/lecture-what-is-the-HTTP-request-response-model.png" alt="Diagram that shows HTTP Request going from the client to the server and HTTP Response going from the server to the client.">
+
+# --questions--
+
+## --text--
+
+What is the role of the server in a request-response model?
+
+## --answers--
+
+It processes requests and generates responses.
+
+---
+
+It only stores data but does not process requests.
+
+### --feedback--
+
+Review the middle part of the lesson.
+
+---
+
+It only forwards requests to another system.
+
+### --feedback--
+
+Review the middle part of the lesson.
+
+---
+
+It must be written in a specific programming language.
+
+### --feedback--
+
+Review the middle part of the lesson.
+
+## --video-solution--
+
+1
+
+## --text--
+
+What does the HTTP method specify in an HTTP request?
+
+## --answers--
+
+The data format to be sent
+
+### --feedback--
+
+It defines what kind of operation the request performs on the resource.
+
+---
+
+The action to perform, such as retrieving, sending, modifying, or deleting data
+
+---
+
+The request headers
+
+### --feedback--
+
+It defines what kind of operation the request performs on the resource.
+
+---
+
+The server location
+
+### --feedback--
+
+It defines what kind of operation the request performs on the resource.
+
+## --video-solution--
+
+2
+
+## --text--
+
+How does the client handle an HTTP response?
+
+## --answers--
+
+It always displays the data, regardless of the response status.
+
+### --feedback--
+
+The client must handle both successful and error responses appropriately.
+
+---
+
+It only processes responses with a 200 status code.
+
+### --feedback--
+
+The client must handle both successful and error responses appropriately.
+
+---
+
+It ignores error responses and retries automatically.
+
+### --feedback--
+
+The client must handle both successful and error responses appropriately.
+
+---
+
+It handles successful responses by displaying data and errors by showing messages.
+
+## --video-solution--
+
+4
+
@@ -0,0 +1,170 @@
+---
+id: 68dd97fbd18ede5ae983e342
+title: What Are the Different Kinds of Assets That Are Returned in an HTTP Response?
+challengeType: 19
+dashedName: what-are-the-different-kinds-of-assets-that-are-returned-in-an-http-response
+---
+
+# --description--
+
+In the last lesson, you learned that the server processes an HTTP request and sends back a response. That response includes various assets you see on the web.
+
+The assets returned by an HTTP response include text-based assets, media assets, fonts, and so on. Each of these assets comes with a **Content-Type** header, which tells the browser how to process and display the asset correctly.
+
+Text-based assets have always been a fundamental part of the web. In fact, the web started as pure text. These days, text-based assets include the following:
+
+* **HTML (Hypertext Markup Language)**: The basic structure of any webpage. Without HTML, a webpage can't exist.
+    
+* **CSS (Cascading Stylesheet)**: The asset that controls how a webpage looks. With CSS, you apply styles like colors, fonts, and layout to the HTML.
+    
+* **JavaScript**: JavaScript adds interactivity and dynamic content to HTML and CSS.
+    
+* **JSON and XML**: These two formats let you transfer structured data between servers and browsers.
+    
+Media assets include images, audios, and videos. They bring the web to life with visuals and sound.
+
+Many websites rely on images to communicate visual information. Images come in different formats like `JPG`, `JPEG`, `PNG`, `WEBP`, and `GIF`.
+
+Websites like YouTube and Vimeo serve video content with formats like `MP4`, `MOV`, `AVI`, `WebM`, and more.
+
+Audio is a key part of many platforms as it lets users stream music, podcasts, and other sound content. Common audio formats include `MP3`, `AAC`, Ogg, and `WAV`. Platforms like Spotify and YouTube Music rely on these formats to deliver high-quality audio experiences.
+
+Other assets that are returned in an HTTP response are documents like `PDF`, `DOCX`, and `PAGES`, compressed archives like `ZIP` and `RAR`, font files like `WOFF`, `WOFF2`, and `TTF`, and executables like `EXE`.
+
+Here's a table of these common assets and their content types:
+
+| Asset Type | Content-Type Header |
+| --- | --- |
+| HTML | text/html |
+| CSS | text/css |
+| JavaScript | application/javascript |
+| JPEG | image/jpeg |
+| PNG | image/png |
+| GIF | image/gif |
+| SVG | image/svg+xml |
+| WebP | image/webp |
+| WOFF | font/woff |
+| WOFF2 | font/woff2 |
+| TTF | font/ttf |
+| OTF | font/otf |
+| MP4 | video/mp4 |
+| WebM | video/webm |
+| Ogg (Video) | video/ogg |
+| MP3 | audio/mpeg |
+| AAC | audio/aac |
+| WAV | audio/wav |
+| Ogg (Audio) | audio/ogg |
+| JSON | application/json |
+| XML | application/xml |
+| PDF | application/pdf |
+| ZIP | application/zip |
+
+# --questions--
+
+## --text--
+
+Which of the following is a text-based asset used for structuring a webpage?
+
+## --answers--
+
+JSON
+
+### --feedback--
+
+This asset defines the fundamental structure of a webpage.
+
+---
+
+CSS
+
+### --feedback--
+
+This asset defines the fundamental structure of a webpage.
+
+---
+
+JavaScript
+
+### --feedback--
+
+This asset defines the fundamental structure of a webpage.
+
+---
+
+HTML
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the correct `Content-Type` header for serving a PDF file?
+
+## --answers--
+
+application/xml
+
+### --feedback--
+
+Look out for the MIME type for PDF files that maintain formatting across devices.
+
+---
+
+application/json
+
+### --feedback--
+
+Look out for the MIME type for PDF files that maintain formatting across devices.
+
+---
+
+application/pdf
+
+---
+
+text/html
+
+### --feedback--
+
+Look out for the MIME type for PDF files that maintain formatting across devices.
+
+## --video-solution--
+
+3
+
+## --text--
+
+Which of the following is a common audio format used for streaming music and podcasts?
+
+## --answers--
+
+PNG
+
+### --feedback--
+
+Think about the format widely used for compressing and streaming sound files.
+
+---
+
+MP3
+
+---
+
+SVG
+
+### --feedback--
+
+Think about the format widely used for compressing and streaming sound files.
+
+---
+
+GIF
+
+### --feedback--
+
+Think about the format widely used for compressing and streaming sound files.
+
+## --video-solution--
+
+2
@@ -0,0 +1,220 @@
+---
+id: 68dd97fbd18ede5ae983e343
+title: What Happens When a Form Is Submitted and How Do the Different Form Submissions Work?
+challengeType: 19
+dashedName: what-happens-when-a-form-is-submitted-and-how-do-the-different-form-submissions-work
+---
+
+# --description--
+
+Websites and apps need to collect data and process it, or generate something the user needs such as search results. So, just like text, forms are also a fundamental part of the web.
+
+With forms, users can register and log in to a site, send messages, and search for items. For instance, you get access to the Google search results page by typing your query in the most popular form on the web, the Google search input.
+
+Let's look at what makes up a form, like input fields, the `action` attribute, form methods, and most importantly, what happens when you submit a form.
+
+Forms are embedded on a web page with the `form` element, but to get inputs to show up, you also need the `input` elements, based on your need. Some of those input elements are text, email, password, selection, file, hidden inputs, and more.
+
+To use these input fields, you have to wrap them with the `form` element. Each of the inputs needs a `name` attribute so the server knows what data corresponds to each field.
+
+Here is an example:
+
+```html
+<form>
+   <input type="text" name="username" />
+   <input type="email" name="email" />
+   <input type="file" name="profilePicture" />
+   <input type="radio" name="gender" />
+   <input type="checkbox" name="subscribe" />
+   <input type="hidden" name="userId" />
+</form>
+```
+
+The input fields also need to be validated to ensure the user enters the correct information.
+
+This validation can happen on both the client-side and the server-side. HTML lets you do basic client-side validation with the `required` and `pattern` attributes. Even so, you should also validate server-side for added security, as HTML validation is mostly for user experience and immediate feedback.
+
+The `required` attribute specifies that the input field must be filled out, while the `pattern` attribute lets you enter regular expressions that force the user to type in the information the way you need it.
+
+Here's an example of that for a username field:
+
+```html
+<input type="text" name="username" required pattern="[A-Za-z0-9]{3,}" />
+```
+
+After the input fields are validated, submission should take place. So what happens when the form is submitted?
+
+First, for submission to happen, the form needs to have an `action` attribute that specifies where the browser should send the values of the input fields to and a `method` attribute that specifies how the form data is submitted. More on the `method` attribute later.
+
+Here's what an action attribute could look like:
+
+```html
+<form action="/register">
+	<!-- input fields -->
+</form>
+```
+
+The `method` attribute can either be `GET`, `POST`, `PUT`, `PATCH`, or `DELETE`:
+
+* `GET` retrieves something from the server, for example, search results.
+    
+* `POST` sends something to the server, for example, login or register information entered through the input fields.
+    
+* `PUT` modifies something on the server.
+    
+* `PATCH` partially modifies something on the server.
+    
+* `DELETE` removes something from the server.
+    
+Note that HTML doesn't support the `PUT`, `PATCH`, and `DELETE` methods directly, but there are workarounds. If you work with vanilla JavaScript, you can use the Fetch API to specify the method, and in Node.js and Express, you can use the `method-override` package.
+
+Here's what a form making a `GET` request could look like:
+
+```html
+<form action="/search" method="GET">
+   <input type="text" name="q">
+   <button type="submit">Search</button>
+</form>
+```
+
+And here's what a form making a `POST` request could look like:
+
+```html
+<form action="/submit" method="POST">
+   <input type="text" name="username" required pattern="[A-Za-z0-9]{3,}" />
+   <input type="password" name="password" />
+   <button type="submit">Submit</button>
+</form>
+```
+
+After the `GET` or `POST` request, the server checks for server-side validation and either processes or rejects the input values.
+
+If the validation is successful, the server sends out the requested information or throws an error if the validation is unsuccessful. 
+
+If the validation is successful, the response from the server could be a redirect in case of authentication or search, or a success message confirming the action.
+
+Here's a recap of what happens when a form is submitted:
+
+* The user fills out the form fields.
+    
+* The browser checks for client-side validation (if any) and proceeds of the validation is successful.
+    
+* The browser sends the form data to the server based on the action and method attributes.
+    
+* The server receives the data and processes it (storing it in a database, registering a user, logging in a user, sending out search query, and so on).
+    
+* If there's a server-side validation, the server rechecks the data before processing.
+    
+* The server responds with a success message, error, or redirects the user based on the validation state (success or failure).
+    
+* The user sees feedback based on the server response.
+
+# --questions--
+
+## --text--
+
+How can you perform client-side validation using HTML?
+
+## --answers--
+
+By using the `validate` attribute
+
+### --feedback--
+
+Think about the attributes that help enforce input rules without JavaScript.
+
+---
+
+By using JavaScript only
+
+### --feedback--
+
+Think about the attributes that help enforce input rules without JavaScript.
+
+---
+
+By using the `required` and `pattern` attributes
+
+---
+
+By using server-side validation only
+
+### --feedback--
+
+Think about the attributes that help enforce input rules without JavaScript.
+
+## --video-solution--
+
+3
+
+## --text--
+
+What workaround is available for using the `PUT`, `PATCH`, and `DELETE` methods in an HTML form while working with Node.js or Express?
+
+## --answers--
+
+HTML natively supports these methods
+
+### --feedback--
+
+HTML forms don't support these methods directly, but workarounds exist.
+
+---
+
+By using the Fetch API in JavaScript
+
+### --feedback--
+
+HTML forms don't support these methods directly, but workarounds exist.
+
+---
+
+By using the `method="PUT"` attribute in a form
+
+### --feedback--
+
+HTML forms don't support these methods directly, but workarounds exist.
+
+---
+
+By using the `method-override` package
+
+## --video-solution--
+
+4
+
+## --text--
+
+What is the difference between the `PUT` and `PATCH` HTTP methods?
+
+## --answers--
+
+`PUT` modifies something on the server, while `PATCH` partially modifies it
+
+---
+
+`PATCH` deletes data, while `PUT` updates it
+
+### --feedback--
+
+One updates the whole resource, while the other makes partial changes.
+
+---
+
+`PUT` is used for retrieving data, while `PATCH` is for sending data
+
+### --feedback--
+
+One updates the whole resource, while the other makes partial changes.
+
+---
+
+`PATCH` replaces the entire resource, while `PUT` modifies only parts of it
+
+### --feedback--
+
+One updates the whole resource, while the other makes partial changes.
+
+## --video-solution--
+
+1
@@ -0,0 +1,22 @@
+{
+  "name": "Understanding the HTTP request-response model",
+  "isUpcomingChange": true,
+  "dashedName": "lecture-understanding-the-http-request-response-model",
+  "helpCategory": "Backend Development",
+  "blockLayout": "challenge-list",
+  "challengeOrder": [
+    {
+      "id": "68dd96cf8084504ca0322e98",
+      "title": "What Is the HTTP Request-Response Model?"
+    },
+    {
+      "id": "68dd97fbd18ede5ae983e342",
+      "title": "What Are the Different Kinds of Assets That Are Returned in an HTTP Response?"
+    },
+    {
+      "id": "68dd97fbd18ede5ae983e343",
+      "title": "What Happens When a Form Is Submitted and How Do the Different Form Submissions Work?"
+    }
+  ],
+  "blockType": "lecture"
+}
@@ -879,7 +879,7 @@
        {
          "dashedName": "http-and-the-web-standards-model",
          "comingSoon": true,
-          "blocks": []
+          "blocks": ["lecture-understanding-the-http-request-response-model"]
        },
        {
          "dashedName": "rest-api-and-web-services",