update slides

d5f18ace · Chao Zhan · d4fd55a3 · d5f18ace · d5f18ace · d5f18ace
Commit d5f18ace authored 2 years ago by Chao Zhan
--- a/exercises/hello-html/index.html
+++ b/exercises/hello-html/index.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>
--- a/slides/images/dom-to-ui.png
+++ b/slides/images/dom-to-ui.png
--- a/slides/images/html-to-dom.png
+++ b/slides/images/html-to-dom.png
--- a/slides/images/reactjs.webp
+++ b/slides/images/reactjs.webp
--- 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/)