fix: improvements from recording 04.04.2025

Author: danieldanielecki

README.md

@@ -3966,27 +3966,27 @@ In `script.js`, write a simple script:
 
 ```javascript
 document.addEventListener("DOMContentLoaded", function () {
-    alert("Welcome to My First Website!");
+  alert("Welcome to My First Website!");
 });
 ```
 
 In `styles.css`, add simple styling:
 
 ```css
 body {
-    font-family: Arial, sans-serif;
+  font-family: Arial, sans-serif;
 }
 
 h1 {
-    color: navy;
+  color: navy;
 }
 ```
 
 [![Edit 104-HTML Performance Optimization Techniques](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/104-html-performance-optimization-techniques-qm3w7j)
 
 [^104]CodeSandbox: HTML Performance Optimization Techniques.
 
-[^104]:[CodeSandbox: HTML Performance Optimization Techniques](https://qm3w7j.csb.app/), last access: September 10, 2024.
+[^104]:[CodeSandbox: HTML Performance Optimization Techniques](https://qm3w7j.csb.app/), last access: April 4, 2025.
 
 - In this example, the `<link rel="preload">` tag is used to prioritize the loading of critical resources (CSS and JavaScript files) by indicating their importance and specifying the `as` attribute to define the resource type.
 - **There is a problem with this example in CodeSandbox environment to get it fully working, it's just for your information how it should work, sorry for that. Follow [https://github.com/codesandbox/codesandbox-client/issues/8610](https://github.com/codesandbox/codesandbox-client/issues/8610) for more information.**
@@ -4001,7 +4001,7 @@ h1 {
 
 [^105]CodeSandbox: HTML Minification and Compression.
 
-[^105]:[CodeSandbox: HTML Minification and Compression](https://vdpynt.csb.app/), last access: September 11, 2024.
+[^105]:[CodeSandbox: HTML Minification and Compression](https://vdpynt.csb.app/), last access: April 4, 2025.
 
 - This example demonstrates a minified HTML document where unnecessary whitespace, comments, and redundant attributes have been removed to reduce file size and improve load times.
 
@@ -4017,7 +4017,7 @@ h1 {
 
 [^106]CodeSandbox: Lazy Loading of Images.
 
-[^106]:[CodeSandbox: Lazy Loading of Images](https://mx2q9r.csb.app/), last access: September 12, 2024.
+[^106]:[CodeSandbox: Lazy Loading of Images](https://mx2q9r.csb.app/), last access: April 4, 2025.
 
 - The `loading="lazy"` attribute is applied to the `<img>` tag, instructing the browser to lazily load the image when it enters the viewport, reducing initial page load times and improving performance.
 
@@ -4061,7 +4061,7 @@ body{font-family:Arial,sans-serif}h1{color:navy}
 
 [^107]CodeSandbox: CSS and JavaScript Optimization.
 
-[^107]:[CodeSandbox: CSS and JavaScript Optimization](https://nz9jsn.csb.app/), last access: September 29, 2024.
+[^107]:[CodeSandbox: CSS and JavaScript Optimization](https://nz9jsn.csb.app/), last access: April 4, 2025.
 
 - In this example, CSS and JavaScript files are minified and combined into single files (`styles.min.css` and `scripts.min.js`) to minimize the number of HTTP requests required for fetching external resources, thereby improving page load times.
 

__extra-resources/preload-as.md

@@ -0,0 +1,10 @@
+# Issue with Code
+
+We apologize for the inconvenience caused during the recording when the code example didn't work as expected.
+This issue has been identified as a bug and has been reported to CodeSandbox.
+You can track the progress of the issue here: [CodeSandbox Issue #8610](https://github.com/codesandbox/codesandbox-client/issues/8610).
+
+For further reference and to deepen your understanding, you can consult the relevant documentation on MDN:
+[MDN Web Docs - rel="preload"](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload).
+
+Thank you for your patience and understanding!

__presentation-slides/index.html

@@ -2792,6 +2792,10 @@ <h2>Main Section</h2>
 
 ---
 
+### HTML Performance Optimization Techniques <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
+
+---
+
 #### HTML Performance Optimization Techniques <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->
 
 ```html[|6|7|3,8]
@@ -2841,6 +2845,10 @@ <h1>Hello, World!</h1>
 <p>Welcome to our optimized website.</p>
 ```
 
+[![Edit 106-Lazy Loading of Images](images/codesandbox.svg)](https://codesandbox.io/p/sandbox/106-lazy-loading-of-images-mx2q9r)
+
+[CodeSandbox: Lazy Loading of Images](https://mx2q9r.csb.app/).
+
 ---
 
 ### Minimizing HTTP Requests <!-- .slide: data-transition="zoom" data-transition-speed="slow" -->