diff --git a/exercises/hello-html/index.html b/exercises/hello-html/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..5c952d4a4a7b8ef9fc20359c491290db3b855c91
--- /dev/null
+++ b/exercises/hello-html/index.html
@@ -0,0 +1,10 @@
+<!-- index.html -->
+<html>
+ <body>
+ <div id="app"></div>
+ <script type="text/javascript">
+ const app = document.getElementById('app');
+ app.innerHTML = '<h1>Hello World!</h1>';
+ </script>
+ </body>
+</html>
diff --git a/slides/images/dom-to-ui.png b/slides/images/dom-to-ui.png
new file mode 100644
index 0000000000000000000000000000000000000000..73e8367a733a8243011d350636b73cb62ab5798b
Binary files /dev/null and b/slides/images/dom-to-ui.png differ
diff --git a/slides/images/html-to-dom.png b/slides/images/html-to-dom.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b6aebc8e71b822046308bc2dbf309cedba83791
Binary files /dev/null and b/slides/images/html-to-dom.png differ
diff --git a/slides/images/reactjs.webp b/slides/images/reactjs.webp
new file mode 100644
index 0000000000000000000000000000000000000000..a57a53ab75449b02e5d3a361cd3bb8282c8ea04e
Binary files /dev/null and b/slides/images/reactjs.webp differ
diff --git a/slides/pages/recap.md b/slides/pages/recap.md
index 7d6d5031db29d57ec6627d9731462ca135e3e52b..41b48fea6741cef052d4993717f45c774307e3bd 100644
--- a/slides/pages/recap.md
+++ b/slides/pages/recap.md
@@ -105,3 +105,105 @@ title: HTTP(s) IV
<div class="container flex justify-center">
<img src="/images/https-detailed.webp" class="block w-md"/>
</div>
+
+---
+title: HTTP(s) V
+layout: center
+---
+
+- What are the differences between HTTP and HTTPS?
+- What are the benefits/drawbacks of using HTTPS?
+
+---
+title: Foundation of Web Development
+layout: center
+---
+
+# Foundations of Web Developments
+
+Mostly Frontend here
+
+---
+title: Web Development I
+---
+
+## Rendering User Interfaces
+
+When a user visits a web page, the server returns an HTML file to the browser that may look like this:
+
+<div class="container flex justify-center">
+ <img src="/images/html-to-dom.png" class="block w-lg"/>
+</div>
+
+The browser then reads the HTML and constructs the Document Object Model (DOM).
+
+---
+title: Web Development II
+---
+
+## What is DOM?
+
+The DOM is an object representation of the HTML elements.
+
+It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.
+
+<div class="container flex justify-center">
+ <img src="/images/dom-to-ui.png" class="block w-lg"/>
+</div>
+
+---
+title: Web Development III
+---
+
+## DOM Manipulation
+
+The DOM can be manipulated using JavaScript.
+
+```html
+<!-- index.html -->
+<html>
+ <body>
+ <div id="app"></div>
+ <script type="text/javascript">
+ const app = document.getElementById('app');
+ app.innerHTML = '<h1>Hello World!</h1>';
+ </script>
+ </body>
+</html>
+```
+
+See live demo.
+
+---
+title: Web Development IV
+---
+
+## Too much DOM manipulation?
+
+**Use a framework!**
+
+<div class="container flex justify-left">
+ <img src="/images/reactjs.webp" class="block w-sm"/>
+</div>
+
+<br/>
+
+- [React](https://react.dev/) is a JavaScript library for building user interfaces
+- Write declarative code to describe the UI
+- The framework will handle DOM manipulation for you
+- Organize your code into reusable components
+- Alternative: [Vue.js](https://vuejs.org/), [Angular](https://angular.io/), etc.
+
+---
+title: Web Development V
+---
+
+## Useful Resources
+
+<br/>
+
+- [Mozilla - Learn web development](https://developer.mozilla.org/en-US/docs/Learn)
+- [The Modern JavaScript Tutorial](https://javascript.info/)
+- [Learn React](https://react.dev/learn)
+- [Learn CSS](https://web.dev/learn/css/)
+- **Don't want to configure your own local development environment?** Try [CodeSandbox!](https://codesandbox.io/)