diff --git a/fastapi-jinja2-template/README.md b/fastapi-jinja2-template/README.md
new file mode 100644
index 0000000000..bfe173e807
--- /dev/null
+++ b/fastapi-jinja2-template/README.md
@@ -0,0 +1,15 @@
+# How to Serve a Website With FastAPI Using HTML and Jinja2
+
+This repository contains the code discussed in the associated tutorial [Get Started With FastAPI](https://realpython.com/fastapi-jinja2-template/).
+
+## Installation
+
+The [recommended way to install FastAPI](https://realpython.com/get-started-with-fastapi/#install-fastapi-the-right-way) is with the `[standard]` extra dependencies. This ensures you get all the tools you need for developing an API without having to hunt down additional packages later:
+
+```console
+$ python -m pip install "fastapi[standard]"
+```
+
+The quotes around `"fastapi[standard]"` ensure the command works correctly across different [terminals](https://realpython.com/terminal-commands/) and operating systems. With the command above, you install several useful packages, including the [FastAPI CLI](https://fastapi.tiangolo.com/fastapi-cli/) and [uvicorn](https://www.uvicorn.org/), an [ASGI](https://en.wikipedia.org/wiki/Asynchronous_Server_Gateway_Interface) server for running your application.
+
+You can also use the `requirements.txt` file in this folder and run `python -m pip install -r requirements.txt` to install the standard dependencies of FastAPI.
diff --git a/fastapi-jinja2-template/main.py b/fastapi-jinja2-template/main.py
new file mode 100644
index 0000000000..68564d59a5
--- /dev/null
+++ b/fastapi-jinja2-template/main.py
@@ -0,0 +1,25 @@
+import random
+from string import hexdigits
+
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+from fastapi import FastAPI, Request
+
+app = FastAPI()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+ hex_chars = "".join(random.choices(hexdigits.lower(), k=6))
+ hex_color = f"#{hex_chars}"
+ context = {
+ "color": hex_color,
+ }
+ return templates.TemplateResponse(
+ request=request, name="color.html", context=context
+ )
diff --git a/fastapi-jinja2-template/requirements.txt b/fastapi-jinja2-template/requirements.txt
new file mode 100644
index 0000000000..36d21e2539
--- /dev/null
+++ b/fastapi-jinja2-template/requirements.txt
@@ -0,0 +1 @@
+fastapi[standard]==0.118.0
diff --git a/fastapi-jinja2-template/static/script.js b/fastapi-jinja2-template/static/script.js
new file mode 100644
index 0000000000..12740cabdb
--- /dev/null
+++ b/fastapi-jinja2-template/static/script.js
@@ -0,0 +1,4 @@
+document.querySelector('#copy-button').addEventListener('click', function() {
+ const colorCode = document.querySelector('#color-code').textContent;
+ navigator.clipboard.writeText(colorCode);
+});
diff --git a/fastapi-jinja2-template/static/style.css b/fastapi-jinja2-template/static/style.css
new file mode 100644
index 0000000000..03a586b0d5
--- /dev/null
+++ b/fastapi-jinja2-template/static/style.css
@@ -0,0 +1,9 @@
+body {
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-size: 120px;
+ font-family: monospace;
+}
diff --git a/fastapi-jinja2-template/templates/base.html b/fastapi-jinja2-template/templates/base.html
new file mode 100644
index 0000000000..dbc604d57f
--- /dev/null
+++ b/fastapi-jinja2-template/templates/base.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Random Color Generator
+
+
+
+ {% block content %}{% endblock content %}
+
+
+
diff --git a/fastapi-jinja2-template/templates/color.html b/fastapi-jinja2-template/templates/color.html
new file mode 100644
index 0000000000..05d54c7cdd
--- /dev/null
+++ b/fastapi-jinja2-template/templates/color.html
@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+ {{ color }}
+
+{% endblock %}