diff --git a/package-lock.json b/package-lock.json
index 89fc906..43a489a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,6 +76,7 @@
       "version": "7.29.7",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -445,6 +446,7 @@
     "node_modules/@firebase/app": {
       "version": "0.14.13",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/component": "0.7.3",
         "@firebase/logger": "0.5.1",
@@ -501,6 +503,7 @@
     "node_modules/@firebase/app-compat": {
       "version": "0.5.13",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/app": "0.14.13",
         "@firebase/component": "0.7.3",
@@ -515,6 +518,7 @@
     "node_modules/@firebase/app-types": {
       "version": "0.9.5",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@firebase/logger": "0.5.1"
       }
@@ -904,6 +908,7 @@
       "version": "1.15.1",
       "hasInstallScript": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       },
@@ -1083,6 +1088,7 @@
     "node_modules/@mdx-js/loader": {
       "version": "3.1.1",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@mdx-js/mdx": "^3.0.0",
         "source-map": "^0.7.0"
@@ -1138,6 +1144,7 @@
     "node_modules/@mdx-js/react": {
       "version": "3.1.1",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/mdx": "^2.0.0"
       },
@@ -1552,9 +1559,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1571,9 +1575,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1590,9 +1591,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1609,9 +1607,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1796,6 +1791,7 @@
     "node_modules/@types/react": {
       "version": "19.2.15",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -1804,6 +1800,7 @@
       "version": "19.2.3",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -1861,6 +1858,7 @@
       "version": "8.60.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.60.0",
         "@typescript-eslint/types": "8.60.0",
@@ -2120,9 +2118,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2136,9 +2131,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2152,9 +2144,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2168,9 +2157,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2248,6 +2234,7 @@
     "node_modules/acorn": {
       "version": "8.16.0",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2565,6 +2552,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -2859,6 +2847,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -3326,6 +3315,7 @@
       "version": "9.39.4",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3495,6 +3485,7 @@
       "version": "2.32.0",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5125,9 +5116,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5148,9 +5136,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5171,9 +5156,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -5194,9 +5176,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MPL-2.0",
       "optional": true,
       "os": [
@@ -6873,6 +6852,7 @@
     "node_modules/react": {
       "version": "19.2.4",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6880,6 +6860,7 @@
     "node_modules/react-dom": {
       "version": "19.2.4",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -7448,6 +7429,7 @@
     "node_modules/shiki": {
       "version": "4.2.0",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@shikijs/core": "4.2.0",
         "@shikijs/engine-javascript": "4.2.0",
@@ -7796,7 +7778,8 @@
     },
     "node_modules/tailwindcss": {
       "version": "4.3.0",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -7845,6 +7828,7 @@
       "version": "4.0.4",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8001,6 +7985,7 @@
       "version": "5.9.3",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8459,6 +8444,7 @@
       "version": "4.4.3",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/project/src/data/docs/css.ts b/project/src/data/docs/css.ts
index b447425..45f3050 100644
--- a/project/src/data/docs/css.ts
+++ b/project/src/data/docs/css.ts
@@ -3,384 +3,633 @@ import { TopicContent } from './contentMap';
 export const cssData: Record<string, TopicContent> = {
   introduction: {
     title: "CSS Introduction",
-    description: "CSS is the language we use to style an HTML document.",
-    intro: "CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.",
+    description: "CSS controls the visual design of an HTML document.",
+    intro: "CSS determines how HTML elements look on the screen. It stands for Cascading Style Sheets. Developers use CSS to set colors, fonts, layouts, and animations across entire websites.",
     keyPoints: [
-      "CSS stands for Cascading Style Sheets.",
-      "CSS saves a lot of work. It can control the layout of multiple web pages all at once.",
-      "External stylesheets are stored in CSS files."
+      "CSS saves time by styling multiple pages at once.",
+      "External stylesheets live in separate CSS files.",
+      "It separates content (HTML) from design (CSS).",
+      "CSS handles layouts for different screen sizes."
     ]
   },
   syntax: {
     title: "CSS Syntax",
-    description: "A CSS rule consists of a selector and a declaration block.",
-    intro: "The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.",
+    description: "CSS syntax connects styling rules to HTML elements.",
+    intro: "A CSS rule needs a selector and a declaration block. The selector targets the specific HTML element. The declaration block holds properties and values to style that element.",
     syntax: {
       language: "css",
-      code: `h1 {\n  color: blue;\n  font-size: 12px;\n}`
+      code: `/* css syntax */\nselector {\n  property: value;\n}`
     },
     tryItYourself: {
-      html: `<h1>Hello World!</h1>\n<p>This paragraph is styled with CSS.</p>`,
-      css: `h1 {\n  color: white;\n  text-align: center;\n}\np {\n  font-family: verdana;\n  font-size: 20px;\n}`
-    }
+      html: `<!-- this links to the css -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>CSS Syntax</title>\n  </head>\n  <body>\n    <h1>Hello World!</h1>\n    <p>This text uses CSS.</p>\n  </body>\n</html>`,
+      css: `/* this styles the elements */\nh1 {\n  color: blue;\n  text-align: center;\n}\n\np {\n  font-size: 20px;\n}`
+    },
+    keyPoints: [
+      "The selector targets the HTML tag.",
+      "Curly braces surround the declaration block.",
+      "A colon separates properties and values.",
+      "Every declaration ends with a semicolon."
+    ]
   },
   selectors: {
     title: "CSS Selectors",
-    description: "CSS selectors are used to find (or select) the HTML elements you want to style.",
-    intro: "We can divide CSS selectors into five categories: Simple selectors, Combinator selectors, Pseudo-class selectors, Pseudo-elements selectors, and Attribute selectors.",
+    description: "CSS selectors target the HTML elements you want to style.",
+    intro: "CSS uses selectors to find elements on the page. You can target elements by their tag name, class, or id. This allows developers to style specific sections without affecting the entire site.",
     example: {
       language: "css",
-      code: `/* Element Selector */\np {\n  text-align: center;\n  color: red;\n}\n\n/* ID Selector */\n#para1 {\n  text-align: center;\n  color: red;\n}\n\n/* Class Selector */\n.center {\n  text-align: center;\n  color: red;\n}`
-    }
+      code: `/* this shows different selectors */\np {\n  color: red;\n}\n\n#special {\n  color: blue;\n}\n\n.highlight {\n  color: yellow;\n}`
+    },
+    keyPoints: [
+      "Element selectors target specific HTML tags.",
+      "ID selectors target one unique element.",
+      "Class selectors target a group of elements.",
+      "The asterisk targets every element on the page."
+    ]
   },
   "how-to": {
     title: "CSS How To",
-    description: "How to add CSS to your HTML.",
-    intro: "There are three ways of inserting a style sheet: External CSS, Internal CSS, and Inline CSS.",
+    description: "CSS connects to HTML documents in three different ways.",
+    intro: "Developers attach CSS to HTML using external files, internal style tags, or inline attributes. External stylesheets keep code organized and cacheable. Inline styles mix design with content and should be avoided.",
     keyPoints: [
-      "External CSS is ideal for styling multiple pages.",
-      "Internal CSS is used for styling a single page.",
-      "Inline CSS is used for styling a single element."
+      "External CSS uses the `<link>` tag inside the head.",
+      "Internal CSS uses the `<style>` tag inside the head.",
+      "Inline CSS uses the `style` attribute directly on elements.",
+      "External stylesheets end with a `.css` file extension."
     ]
   },
   comments: {
     title: "CSS Comments",
-    description: "Comments are used to explain the code.",
-    intro: "Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.",
+    description: "CSS comments leave helpful notes inside the code.",
+    intro: "CSS comments explain styling choices to other developers. The browser completely ignores these comments when rendering the page. Developers use them to organize large files or temporarily disable code.",
     syntax: {
       language: "css",
-      code: `/* This is a single-line comment */\np {\n  color: red;\n}\n/* This is\na multi-line\ncomment */`
+      code: `/* css comment syntax */\n/* this is a comment */`
+    },
+    example: {
+      language: "css",
+      code: `/* this shows a css comment */\np {\n  color: red; /* makes text red */\n}`
     }
   },
   colors: {
     title: "CSS Colors",
-    description: "Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.",
-    intro: "You can set the background color, text color, and border color for HTML elements.",
+    description: "CSS colors change the background and text colors of elements.",
+    intro: "CSS applies colors using predefined names, HEX codes, or RGB values. Developers change the background color to define sections or change the text color to improve readability.",
     example: {
       language: "css",
-      code: `body {\n  background-color: lightblue;\n}\n\nh1 {\n  color: white;\n  text-align: center;\n}\n\np {\n  font-family: verdana;\n  font-size: 20px;\n}`
-    }
+      code: `/* this applies colors */\nbody {\n  background-color: black;\n}\n\nh1 {\n  color: white;\n}`
+    },
+    keyPoints: [
+      "CSS supports standard color names like red.",
+      "HEX codes provide millions of exact colors.",
+      "RGB values control red, green, and blue levels.",
+      "The `color` property changes text color."
+    ]
   },
   backgrounds: {
     title: "CSS Backgrounds",
-    description: "The CSS background properties are used to add background effects for elements.",
-    intro: "CSS background properties include `background-color`, `background-image`, `background-repeat`, `background-attachment`, and `background-position`.",
+    description: "CSS backgrounds add colors and images behind elements.",
+    intro: "CSS controls the background area of any HTML element. Developers set solid colors, attach background images, or create smooth gradients. The background properties handle how these images repeat and position.",
     example: {
       language: "css",
-      code: `body {\n  background-color: lightblue;\n  background-image: url("paper.gif");\n  background-repeat: repeat-x;\n}`
-    }
+      code: `/* this sets a background */\nbody {\n  background-color: black;\n  background-image: url('stars.png');\n  background-repeat: no-repeat;\n}`
+    },
+    keyPoints: [
+      "The `background-color` property sets a solid color.",
+      "The `background-image` property links an image file.",
+      "The `background-repeat` property prevents tiling.",
+      "The `background-size` property scales the image."
+    ]
   },
   borders: {
     title: "CSS Borders",
-    description: "The CSS border properties allow you to specify the style, width, and color of an element's border.",
-    intro: "The `border-style` property specifies what kind of border to display. Values include dotted, dashed, solid, double, groove, ridge, inset, outset, none, and hidden.",
+    description: "CSS borders draw lines around HTML elements.",
+    intro: "CSS border properties control the style, width, and color of an element's border. Developers create solid boxes, dashed outlines, or thick dividing lines. A border sits between the padding and the margin.",
     syntax: {
       language: "css",
-      code: `p.dotted {border-style: dotted;}\np.dashed {border-style: dashed;}\np.solid {border-style: solid;}`
-    }
+      code: `/* border syntax */\ndiv {\n  border: 2px solid red;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this creates borders */\np.solid {\n  border-style: solid;\n  border-width: 5px;\n  border-color: blue;\n}`
+    },
+    keyPoints: [
+      "The `border-style` property is required to show a border.",
+      "The `border-width` property changes the thickness.",
+      "The `border-color` property sets the line color.",
+      "The `border` shorthand property combines all three."
+    ]
   },
   margins: {
     title: "CSS Margins",
-    description: "Margins are used to create space around elements, outside of any defined borders.",
-    intro: "The CSS `margin` properties are used to create space around elements, outside of any defined borders. You can specify margins for each side of an element: top, right, bottom, and left.",
+    description: "CSS margins create empty space completely outside an element.",
+    intro: "CSS creates transparent space around the outside of an element's border. Developers use margins to push elements apart from each other on the page. You can set the margin for all four sides independently.",
     example: {
       language: "css",
-      code: `p {\n  margin-top: 100px;\n  margin-bottom: 100px;\n  margin-right: 150px;\n  margin-left: 80px;\n}`
-    }
+      code: `/* this sets margins */\ndiv {\n  margin-top: 50px;\n  margin-bottom: 20px;\n  margin-right: 10px;\n  margin-left: 10px;\n}`
+    },
+    keyPoints: [
+      "Margins sit outside the element's border.",
+      "The space is completely transparent.",
+      "Margins push neighboring elements away.",
+      "The \`margin\` shorthand sets all four sides at once."
+    ]
   },
   padding: {
     title: "CSS Padding",
-    description: "Padding is used to create space around an element's content, inside of any defined borders.",
-    intro: "The CSS `padding` properties are used to generate space around an element's content, inside of any defined borders. You can specify padding for each side of an element.",
+    description: "CSS padding creates empty space inside an element.",
+    intro: "CSS generates transparent space inside the border of an element, pushing its content inward. Developers use padding to give text breathing room so it doesn't touch the borders. You can set padding for all four sides.",
     syntax: {
       language: "css",
-      code: `div {\n  padding: 70px;\n  border: 1px solid #4CAF50;\n}`
-    }
+      code: `/* padding syntax */\ndiv {\n  padding: 20px;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this adds padding */\np {\n  padding-top: 10px;\n  padding-left: 15px;\n  border: 1px solid black;\n}`
+    },
+    keyPoints: [
+      "Padding sits inside the element's border.",
+      "The padding area inherits the background color.",
+      "Padding pushes the inner content inward.",
+      "The \`padding\` shorthand sets all four sides at once."
+    ]
   },
   "height-width": {
     title: "CSS Height and Width",
-    description: "The height and width properties are used to set the height and width of an element.",
-    intro: "The `height` and `width` properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.",
+    description: "CSS controls the exact height and width of an element.",
+    intro: "CSS defines the physical dimensions of an element's content area. These properties do not include padding, borders, or margins. Setting these values ensures an element takes up the correct amount of space on the screen.",
     example: {
       language: "css",
-      code: `div {\n  height: 200px;\n  width: 50%;\n  background-color: powderblue;\n}`
-    }
+      code: `/* this sets dimensions */\ndiv {\n  width: 50%;\n  height: 200px;\n  background-color: blue;\n}`
+    },
+    keyPoints: [
+      "The \`width\` sets the horizontal size.",
+      "The \`height\` sets the vertical size.",
+      "Dimensions exclude padding and borders by default.",
+      "You can use pixels or percentages."
+    ]
   },
   "box-model": {
     title: "CSS Box Model",
-    description: "All HTML elements can be considered as boxes.",
-    intro: "The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.",
+    description: "The CSS box model wraps every HTML element.",
+    intro: "The CSS box model is a conceptual box wrapping all HTML elements. It consists of the content itself, padding, borders, and margins. Understanding this model is the most important part of building accurate layouts.",
     keyPoints: [
-      "Content - The content of the box, where text and images appear",
-      "Padding - Clears an area around the content. The padding is transparent",
-      "Border - A border that goes around the padding and content",
-      "Margin - Clears an area outside the border. The margin is transparent"
+      "Content sits directly in the center.",
+      "Padding surrounds the content area.",
+      "Borders wrap around the padding area.",
+      "Margins create space outside the borders."
     ]
   },
   outline: {
     title: "CSS Outline",
-    description: "An outline is a line drawn outside the element's border.",
-    intro: "An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element \"stand out\".",
+    description: "CSS outlines draw a line outside the border.",
+    intro: "CSS draws outlines outside an element's border to make it stand out. Unlike borders, outlines do not take up space or affect the layout of surrounding elements. Browsers use outlines to highlight focused inputs.",
     syntax: {
       language: "css",
-      code: `p {\n  border: 1px solid black;\n  outline: 2px solid red;\n  outline-offset: 15px;\n}`
-    }
+      code: `/* outline syntax */\ninput:focus {\n  outline: 2px solid blue;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this draws an outline */\np {\n  border: 1px solid black;\n  outline: 3px dashed red;\n  outline-offset: 5px;\n}`
+    },
+    keyPoints: [
+      "Outlines sit completely outside the border.",
+      "Outlines do not affect the element's physical size.",
+      "Outlines can overlap other elements.",
+      "The \`outline-offset\` property adds space before the outline."
+    ]
   },
   text: {
     title: "CSS Text",
-    description: "CSS has a lot of properties for formatting text.",
-    intro: "You can format text color, alignment, decoration, transformation, spacing, and more.",
+    description: "CSS formats the layout and spacing of text.",
+    intro: "CSS provides numerous properties to control how text sits on the screen. Developers use these properties to align text, add underlines, transform case, and adjust spacing. This gives complete control over typography.",
     example: {
       language: "css",
-      code: `h1 {\n  color: blue;\n  text-align: center;\n  text-decoration: underline;\n  text-transform: uppercase;\n  letter-spacing: 3px;\n}`
-    }
+      code: `/* this formats text */\nh1 {\n  text-align: center;\n  text-decoration: underline;\n  text-transform: uppercase;\n  letter-spacing: 2px;\n}`
+    },
+    keyPoints: [
+      "The \`text-align\` property centers or justifies text.",
+      "The \`text-decoration\` property adds or removes underlines.",
+      "The \`text-transform\` property forces uppercase or lowercase.",
+      "The \`letter-spacing\` property changes character gaps."
+    ]
   },
   fonts: {
     title: "CSS Fonts",
-    description: "Choosing the right font for your website is important.",
-    intro: "The CSS font properties define the font family, boldness, size, and the style of a text.",
+    description: "CSS changes the font family, size, and weight of text.",
+    intro: "CSS controls the actual typography used to display text. Developers can select specific font families, increase the font size, or make the text bold. Choosing the right font drastically impacts readability and design.",
     example: {
       language: "css",
-      code: `p.serif {\n  font-family: "Times New Roman", Times, serif;\n}\n\np.sansserif {\n  font-family: Arial, Helvetica, sans-serif;\n}`
-    }
+      code: `/* this changes fonts */\np {\n  font-family: Arial, sans-serif;\n  font-size: 16px;\n  font-weight: bold;\n}`
+    },
+    keyPoints: [
+      "The \`font-family\` property sets the typeface.",
+      "The \`font-size\` property controls text scaling.",
+      "The \`font-weight\` property makes text bold.",
+      "Fallback fonts ensure the text always renders."
+    ]
   },
   icons: {
     title: "CSS Icons",
-    description: "How to add icons to your HTML page.",
-    intro: "The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element.",
+    description: "CSS imports and styles vector icons on the page.",
+    intro: "CSS adds visual icons using third-party libraries like Font Awesome or Google Icons. These libraries provide vector shapes that developers insert into the HTML. You can then style these icons exactly like text fonts.",
     syntax: {
+      language: "css",
+      code: `/* icon syntax */\ni.fas {\n  color: red;\n  font-size: 24px;\n}`
+    },
+    example: {
       language: "html",
-      code: `<!-- Example using Font Awesome -->\n<i class="fas fa-cloud"></i>\n<i class="fas fa-heart"></i>\n<i class="fas fa-car"></i>\n<i class="fas fa-file"></i>\n<i class="fas fa-bars"></i>`
-    }
+      code: `<!-- this displays an icon -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">\n  </head>\n  <body>\n    <i class="fas fa-heart" style="color:red;"></i>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Icons load from external stylesheets.",
+      "Developers style icons using standard text properties.",
+      "The \`font-size\` property changes the icon size.",
+      "The \`color\` property changes the icon color."
+    ]
   },
   links: {
     title: "CSS Links",
-    description: "Links can be styled in different ways.",
-    intro: "Links can be styled with any CSS property (e.g. color, font-family, background, etc.). In addition, links can be styled differently depending on what state they are in.",
+    description: "CSS styles clickable anchor links in different states.",
+    intro: "CSS targets anchor tags to change how links look. Because users interact with links, CSS provides pseudo-classes to style them when hovered, clicked, or previously visited. This gives users visual feedback while navigating.",
     example: {
       language: "css",
-      code: `/* unvisited link */\na:link {\n  color: red;\n}\n\n/* visited link */\na:visited {\n  color: green;\n}\n\n/* mouse over link */\na:hover {\n  color: hotpink;\n}\n\n/* selected link */\na:active {\n  color: blue;\n}`
-    }
+      code: `/* this styles links */\na:link { color: blue; }\na:visited { color: purple; }\na:hover { color: red; }\na:active { color: yellow; }`
+    },
+    keyPoints: [
+      "The \`:link\` pseudo-class styles unvisited links.",
+      "The \`:visited\` pseudo-class styles clicked links.",
+      "The \`:hover\` pseudo-class triggers when the mouse is over the link.",
+      "The \`:active\` pseudo-class triggers during the exact moment of a click."
+    ]
   },
   lists: {
     title: "CSS Lists",
-    description: "The CSS list properties allow you to set list item markers, images, etc.",
-    intro: "The CSS list properties allow you to set different list item markers for ordered lists, unordered lists, set an image as the list item marker, or add background colors to lists.",
+    description: "CSS customizes the bullet points and numbers of lists.",
+    intro: "CSS controls the marker style of both ordered and unordered lists. Developers change standard bullets into squares, Roman numerals, or completely custom images. You can also remove the markers entirely for navigation menus.",
     example: {
       language: "css",
-      code: `ul.a {\n  list-style-type: circle;\n}\n\nul.b {\n  list-style-type: square;\n}\n\nol.c {\n  list-style-type: upper-roman;\n}`
-    }
+      code: `/* this styles lists */\nul {\n  list-style-type: square;\n}\n\nol {\n  list-style-type: lower-alpha;\n}`
+    },
+    keyPoints: [
+      "The \`list-style-type\` property changes the marker shape.",
+      "The \`list-style-image\` property uses a custom image.",
+      "The \`list-style-position\` controls whether markers sit inside or outside the text block.",
+      "Setting \`list-style-type: none\` removes the markers entirely."
+    ]
   },
   tables: {
     title: "CSS Tables",
-    description: "The look of an HTML table can be greatly improved with CSS.",
-    intro: "To specify table borders in CSS, use the `border` property. You can also collapse borders, set width/height, align text, add padding, set horizontal dividers, hoverable tables, striped tables, and more.",
+    description: "CSS formats the borders, alignment, and spacing of HTML tables.",
+    intro: "CSS transforms basic HTML tables into readable data grids. Developers use properties like borders, padding, and text alignment to space out the content. You can collapse the double borders into a single clean line.",
     example: {
       language: "css",
-      code: `table, th, td {\n  border: 1px solid black;\n  border-collapse: collapse;\n}\nth, td {\n  padding: 15px;\n  text-align: left;\n}`
-    }
+      code: `/* this styles tables */\ntable {\n  border-collapse: collapse;\n  width: 100%;\n}\n\nth, td {\n  border: 1px solid black;\n  padding: 8px;\n}`
+    },
+    keyPoints: [
+      "The \`border-collapse\` property merges double table borders.",
+      "Padding inside \`<th>\` and \`<td>\` adds breathing room.",
+      "Text aligns left by default in data cells.",
+      "The \`nth-child\` selector creates striped rows."
+    ]
   },
   display: {
     title: "CSS Display",
-    description: "The display property is the most important CSS property for controlling layout.",
-    intro: "The `display` property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.",
+    description: "CSS display changes how elements flow in the document layout.",
+    intro: "The CSS `display` property dictates whether an element acts as a block, inline text, or a flex container. Every HTML element has a default display value. Developers change this property to build complex page structures.",
     example: {
       language: "css",
-      code: `li {\n  display: inline;\n}\n\nspan {\n  display: block;\n}`
-    }
+      code: `/* this changes display behavior */\nli {\n  display: inline;\n}\n\nspan {\n  display: block;\n}`
+    },
+    keyPoints: [
+      "Block elements take up the full width of the page.",
+      "Inline elements only take up as much space as their content.",
+      "The \`none\` value hides the element completely from the page.",
+      "Flex and grid values enable advanced layout systems."
+    ]
   },
   position: {
     title: "CSS Position",
-    description: "The position property specifies the type of positioning method used for an element.",
-    intro: "There are five different position values: `static`, `relative`, `fixed`, `absolute`, and `sticky`.",
+    description: "CSS position changes where an element sits on the screen.",
+    intro: "CSS removes elements from the normal document flow to place them exactly where you want. You can lock navigation bars to the top of the screen or layer images over one another. Top, bottom, left, and right properties adjust the final spot.",
+    example: {
+      language: "css",
+      code: `/* this locks an element in place */\n.nav {\n  position: fixed;\n  top: 0;\n  width: 100%;\n}`
+    },
     keyPoints: [
-      "`static`: Default. Rendered in order, as they appear in the document flow.",
-      "`relative`: Positioned relative to its normal position.",
-      "`fixed`: Positioned relative to the viewport.",
-      "`absolute`: Positioned relative to the nearest positioned ancestor.",
-      "`sticky`: Toggles between relative and fixed, depending on the scroll position."
+      "The \`static\` value is the default document flow.",
+      "The \`relative\` value moves an element from its normal spot.",
+      "The \`absolute\` value positions an element inside its nearest positioned parent.",
+      "The \`fixed\` value locks the element to the browser window."
     ]
   },
   "z-index": {
-    title: "CSS Z-index",
-    description: "The z-index property specifies the stack order of an element.",
-    intro: "An element can have a positive or negative stack order. An element with greater stack order is always in front of an element with a lower stack order.",
+    title: "CSS Z-Index",
+    description: "CSS z-index controls the vertical stacking order of elements.",
+    intro: "CSS layers elements on top of each other when they overlap. The `z-index` property tells the browser which element sits in front. Higher numbers stay on top, while negative numbers sink to the back.",
     syntax: {
       language: "css",
-      code: `img {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  z-index: -1;\n}`
-    }
+      code: `/* z-index syntax */\ndiv {\n  z-index: 10;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this puts an image behind text */\nimg {\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: -1;\n}`
+    },
+    keyPoints: [
+      "Elements with a higher \`z-index\` sit in front.",
+      "Elements with a lower \`z-index\` hide behind.",
+      "The property only works on positioned elements.",
+      "It accepts positive and negative whole numbers."
+    ]
   },
   overflow: {
     title: "CSS Overflow",
-    description: "The overflow property specifies what happens if content overflows an element's box.",
-    intro: "The `overflow` property controls what happens to content that is too big to fit into an area. The values are: `visible`, `hidden`, `scroll`, and `auto`.",
+    description: "CSS overflow handles content that spills out of its container.",
+    intro: "CSS controls what happens when a box contains too much text or media. By default, content visibly spills out. Developers can hide this extra content or add scrollbars to keep the layout neat.",
     example: {
       language: "css",
-      code: `div {\n  width: 200px;\n  height: 50px;\n  background-color: #eee;\n  overflow: scroll;\n}`
-    }
+      code: `/* this adds a scrollbar */\ndiv {\n  width: 200px;\n  height: 100px;\n  overflow: scroll;\n}`
+    },
+    keyPoints: [
+      "The \`visible\` value shows content outside the box.",
+      "The \`hidden\` value clips overflowing content completely.",
+      "The \`scroll\` value adds permanent scrollbars.",
+      "The \`auto\` value adds scrollbars only when needed."
+    ]
   },
   float: {
     title: "CSS Float",
-    description: "The float property specifies how an element should float.",
-    intro: "The `float` property is used for positioning and formatting content e.g. let an image float left to the text in a container. The `clear` property is used to control behavior after floating elements.",
+    description: "CSS float wraps text around images and block elements.",
+    intro: "CSS originally used float to push images to the side and let text flow around them. While flexbox replaced it for main page layouts, developers still use float for its original purpose. Floating elements removes them from the normal document flow.",
     syntax: {
       language: "css",
-      code: `img {\n  float: right;\n}`
-    }
+      code: `/* float syntax */\nimg {\n  float: right;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this wraps text around an image */\nimg {\n  float: left;\n  margin-right: 15px;\n}`
+    },
+    keyPoints: [
+      "Float pushes elements to the left or right.",
+      "Text wraps around floated elements automatically.",
+      "The \`clear\` property stops the floating behavior below.",
+      "Flexbox and Grid offer better modern layout controls."
+    ]
   },
   "inline-block": {
-    title: "CSS Inline-block",
-    description: "Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.",
-    intro: "Also, with `display: inline-block`, the top and bottom margins/paddings are respected, but with `display: inline` they are not.",
+    title: "CSS Inline-Block",
+    description: "CSS inline-block combines inline flow with block dimensions.",
+    intro: "CSS `inline-block` lets elements sit side-by-side like text while accepting exact width and height values. Standard inline elements ignore physical dimensions. Developers use this heavily for navigation links and buttons.",
     example: {
       language: "css",
-      code: `.nav-item {\n  display: inline-block;\n  width: 100px;\n  height: 100px;\n  padding: 5px;\n  border: 1px solid blue;\n}`
-    }
+      code: `/* this styles a button grid */\n.btn {\n  display: inline-block;\n  width: 120px;\n  padding: 10px;\n}`
+    },
+    keyPoints: [
+      "Elements flow horizontally like text.",
+      "Elements accept specific width and height values.",
+      "Top and bottom margins apply properly.",
+      "It prevents unexpected line breaks."
+    ]
   },
   align: {
     title: "CSS Align",
-    description: "How to align elements horizontally and vertically.",
-    intro: "To center text, use `text-align: center`. To center an image, use `margin: auto` and make it a `block` element. To center a block element, use `margin: auto`.",
+    description: "CSS centers and aligns elements horizontally and vertically.",
+    intro: "CSS provides multiple ways to center text and elements. You can center text easily using text alignment. To center a physical block element, developers set an exact width and use auto margins.",
     syntax: {
       language: "css",
-      code: `.center {\n  margin: auto;\n  width: 50%;\n  border: 3px solid green;\n  padding: 10px;\n}`
-    }
+      code: `/* center alignment */\n.box {\n  margin: 0 auto;\n  width: 50%;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this centers a container */\ndiv.center {\n  margin: auto;\n  width: 300px;\n  border: 2px solid blue;\n}`
+    },
+    keyPoints: [
+      "The \`text-align: center\` property centers inner text.",
+      "The \`margin: auto\` property horizontally centers block elements.",
+      "Centering a block requires a defined width.",
+      "Flexbox provides simpler centering tools today."
+    ]
   },
   combinators: {
     title: "CSS Combinators",
-    description: "A combinator is something that explains the relationship between the selectors.",
-    intro: "A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.",
-    referenceTable: {
-      headers: ["Combinator", "Example", "Description"],
-      rows: [
-        ["Space", "div p", "Descendant selector (matches all p inside div)"],
-        [">", "div > p", "Child selector (matches all p that are direct children of div)"],
-        ["+", "div + p", "Adjacent sibling selector (matches the first p immediately after div)"],
-        ["~", "div ~ p", "General sibling selector (matches all p that follow div)"]
-      ]
-    }
+    description: "CSS combinators target elements based on their relationships.",
+    intro: "CSS targets elements based on where they live inside the HTML structure. Combinators connect simple selectors together. This allows developers to style all paragraphs inside a specific section without needing extra class names.",
+    example: {
+      language: "css",
+      code: `/* this styles direct children */\ndiv > p {\n  background-color: yellow;\n}`
+    },
+    keyPoints: [
+      "The space targets all descendants inside an element.",
+      "The \`>\` targets only direct children.",
+      "The \`+\` targets the very next adjacent sibling.",
+      "The \`~\` targets all subsequent general siblings."
+    ]
   },
   "pseudo-classes": {
-    title: "CSS Pseudo-classes",
-    description: "A pseudo-class is used to define a special state of an element.",
-    intro: "For example, it can be used to style an element when a user mouses over it, style visited and unvisited links differently, or style an element when it gets focus.",
+    title: "CSS Pseudo-Classes",
+    description: "CSS pseudo-classes style elements based on their current state.",
+    intro: "CSS pseudo-classes change an element's appearance when a user interacts with it. A common example is changing a button's color when the mouse hovers over it. They attach to regular selectors using a single colon.",
     syntax: {
       language: "css",
-      code: `selector:pseudo-class {\n  property: value;\n}`
+      code: `/* pseudo-class syntax */\nselector:pseudo-class {\n  property: value;\n}`
     },
     example: {
       language: "css",
-      code: `/* Mouse over link */\na:hover {\n  color: #FF00FF;\n}`
-    }
+      code: `/* this changes color on hover */\nbutton:hover {\n  background-color: green;\n}`
+    },
+    keyPoints: [
+      "Pseudo-classes reflect user interactions.",
+      "The \`:hover\` pseudo-class triggers on mouse over.",
+      "The \`:focus\` pseudo-class triggers when clicking an input field.",
+      "The \`:nth-child()\` pseudo-class targets specific items in a list."
+    ]
   },
   "pseudo-elements": {
-    title: "CSS Pseudo-elements",
-    description: "A CSS pseudo-element is used to style specified parts of an element.",
-    intro: "For example, it can be used to style the first letter, or line, of an element, or insert content before, or after, the content of an element.",
+    title: "CSS Pseudo-Elements",
+    description: "CSS pseudo-elements style specific parts of an element.",
+    intro: "CSS pseudo-elements target sub-sections of an HTML element without needing extra tags. Developers use them to style just the first letter of a paragraph or inject decorative icons before a heading. They use a double colon syntax.",
     syntax: {
       language: "css",
-      code: `selector::pseudo-element {\n  property: value;\n}`
+      code: `/* pseudo-element syntax */\nselector::pseudo-element {\n  property: value;\n}`
     },
     example: {
       language: "css",
-      code: `p::first-line {\n  color: #ff0000;\n  font-variant: small-caps;\n}`
-    }
+      code: `/* this styles the first line */\np::first-line {\n  font-weight: bold;\n  color: red;\n}`
+    },
+    keyPoints: [
+      "Pseudo-elements target partial element contents.",
+      "The \`::first-letter\` creates drop caps.",
+      "The \`::before\` injects visual content before the element.",
+      "The \`::after\` injects visual content after the element."
+    ]
   },
   opacity: {
     title: "CSS Opacity",
-    description: "The opacity property specifies the opacity/transparency of an element.",
-    intro: "The `opacity` property can take a value from 0.0 - 1.0. The lower value, the more transparent.",
+    description: "CSS opacity controls the transparency of an entire element.",
+    intro: "CSS opacity makes elements see-through. Developers use it to fade images or create subtle overlay effects. The property affects the element and everything inside it, including text and children elements.",
     example: {
       language: "css",
-      code: `img {\n  opacity: 0.5;\n}\n\nimg:hover {\n  opacity: 1.0;\n}`
-    }
+      code: `/* this makes an image transparent */\nimg {\n  opacity: 0.5;\n}\n\nimg:hover {\n  opacity: 1.0;\n}`
+    },
+    keyPoints: [
+      "Opacity values range from 0.0 to 1.0.",
+      "A value of 0.0 makes the element completely invisible.",
+      "A value of 1.0 makes the element fully solid.",
+      "Child elements inherit the transparency."
+    ]
   },
   "attribute-selectors": {
     title: "CSS Attribute Selectors",
-    description: "Style elements with specific attributes or attribute values.",
-    intro: "The `[attribute]` selector is used to select elements with a specified attribute.",
+    description: "CSS attribute selectors target elements by their HTML attributes.",
+    intro: "CSS styles elements based on the specific attributes they carry. Developers can target all links that open in a new tab or all input fields of a certain type. This avoids cluttering the HTML with extra class names.",
     example: {
       language: "css",
-      code: `/* Selects all <a> elements with a target attribute */\na[target] {\n  background-color: yellow;\n}\n\n/* Selects all <a> elements with target="_blank" */\na[target="_blank"] {\n  background-color: yellow;\n}`
-    }
+      code: `/* this targets target attributes */\na[target="_blank"] {\n  background-color: yellow;\n}\n\ninput[type="text"] {\n  border: 1px solid black;\n}`
+    },
+    keyPoints: [
+      "Square brackets define an attribute selector.",
+      "You can target the mere presence of an attribute.",
+      "You can target an exact attribute value.",
+      "You can target partial attribute values."
+    ]
   },
   flexbox: {
     title: "CSS Flexbox",
-    description: "A Flexible Box Layout makes it easier to design flexible responsive layout structure without using float or positioning.",
-    intro: "To start using the Flexbox model, you need to first define a flex container.",
+    description: "CSS Flexbox builds flexible one-dimensional layouts easily.",
+    intro: "CSS Flexbox organizes elements in a single row or column. It automatically handles spacing, alignment, and responsiveness without relying on float hacks. Developers define a flex container, and the browser positions the child items perfectly.",
     syntax: {
       language: "css",
-      code: `.flex-container {\n  display: flex;\n}`
+      code: `/* flexbox syntax */\n.container {\n  display: flex;\n  justify-content: center;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this creates a flex row */\n.row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}`
     },
     keyPoints: [
-      "`flex-direction` defines in which direction the container wants to stack the flex items.",
-      "`justify-content` aligns the flexible container's items horizontally.",
-      "`align-items` aligns the flexible container's items vertically."
+      "The \`display: flex\` property activates the layout mode.",
+      "The \`flex-direction\` determines row or column flow.",
+      "The \`justify-content\` aligns items along the main axis.",
+      "The \`align-items\` aligns items along the cross axis."
     ]
   },
   grid: {
     title: "CSS Grid Layout",
-    description: "The CSS Grid Layout Module offers a grid-based layout system, with rows and columns.",
-    intro: "A grid layout consists of a parent element, with one or more child elements. An HTML element becomes a grid container when its display property is set to grid or inline-grid.",
+    description: "CSS Grid builds complex two-dimensional layouts easily.",
+    intro: "CSS Grid creates exact rows and columns for advanced page structures. While Flexbox handles single rows, Grid manages the entire page layout at once. Developers can precisely place elements into specific cells or stretch them across multiple tracks.",
     syntax: {
       language: "css",
-      code: `.grid-container {\n  display: grid;\n  grid-template-columns: auto auto auto;\n  padding: 10px;\n}`
-    }
+      code: `/* grid syntax */\n.grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this creates a simple grid */\n.container {\n  display: grid;\n  grid-template-columns: 200px auto;\n  gap: 15px;\n}`
+    },
+    keyPoints: [
+      "The \`display: grid\` property activates the layout mode.",
+      "The \`grid-template-columns\` defines column widths.",
+      "The \`grid-template-rows\` defines row heights.",
+      "The \`gap\` property creates spacing between grid cells."
+    ]
   },
   responsive: {
     title: "CSS Responsive Web Design",
-    description: "Responsive Web Design makes your web page look good on all devices.",
-    intro: "Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).",
+    description: "Responsive web design adapts layouts to any screen size.",
+    intro: "Responsive CSS ensures a website looks perfect on phones, tablets, and massive desktop monitors. Developers build flexible grids and use CSS to rearrange elements as the screen shrinks. This provides a seamless experience for all users.",
+    example: {
+      language: "css",
+      code: `/* responsive image trick */\nimg {\n  max-width: 100%;\n  height: auto;\n}`
+    },
     keyPoints: [
-      "Use the Viewport `<meta>` tag.",
-      "Use responsive images (`max-width: 100%`).",
-      "Use fluid grids.",
-      "Use CSS media queries."
+      "Mobile traffic requires responsive layouts.",
+      "Fluid grids use percentages instead of pixels.",
+      "Flexible images shrink to fit their containers.",
+      "The viewport meta tag is mandatory in the HTML."
     ]
   },
   "media-queries": {
     title: "CSS Media Queries",
-    description: "Media queries can modify the appearance of a website depending on the device's general type or specific characteristics.",
-    intro: "Media queries look at the capability of the device, and can be used to check many things, such as width and height of the viewport.",
+    description: "CSS media queries apply styling rules based on screen size.",
+    intro: "CSS media queries detect the user's screen width and apply specific styles accordingly. Developers use them to stack side-by-side columns on mobile phones or hide complex navigation bars on small screens.",
     syntax: {
       language: "css",
-      code: `@media only screen and (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}`
-    }
+      code: `/* media query syntax */\n@media (max-width: 768px) {\n  .sidebar {\n    display: none;\n  }\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this changes color on small screens */\nbody {\n  background-color: lightgreen;\n}\n\n@media (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}`
+    },
+    keyPoints: [
+      "The \`@media\` rule wraps the conditional CSS.",
+      "The \`max-width\` targets screens smaller than the value.",
+      "The \`min-width\` targets screens larger than the value.",
+      "Media queries drive all modern responsive design."
+    ]
   },
   variables: {
     title: "CSS Variables",
-    description: "The var() function is used to insert the value of a CSS variable.",
-    intro: "CSS variables have access to the DOM, which means that you can create variables with local or global scope, change the variables with JavaScript, and change the variables based on media queries.",
+    description: "CSS variables store reusable values throughout a stylesheet.",
+    intro: "CSS custom properties act as variables holding colors, fonts, or sizes. Instead of typing the same exact color code fifty times, developers store it in a variable. Changing the variable updates the color everywhere instantly.",
     syntax: {
       language: "css",
-      code: `:root {\n  --blue: #1e90ff;\n  --white: #ffffff;\n}\n\nbody {\n  background-color: var(--blue);\n}`
-    }
+      code: `/* variable syntax */\n:root {\n  --main-color: red;\n}\np {\n  color: var(--main-color);\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this sets a theme color */\n:root {\n  --primary: #3498db;\n}\n\nbutton {\n  background-color: var(--primary);\n  border: 2px solid var(--primary);\n}`
+    },
+    keyPoints: [
+      "The \`:root\` selector creates global variables.",
+      "Variable names must begin with two dashes.",
+      "The \`var()\` function accesses the stored value.",
+      "JavaScript can update these variables live."
+    ]
   },
   animations: {
     title: "CSS Animations",
-    description: "CSS allows animation of most HTML elements without using JavaScript or Flash!",
-    intro: "An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times you want. To use CSS animation, you must first specify some keyframes.",
+    description: "CSS animations move and change elements over time.",
+    intro: "CSS creates smooth, complex animations without needing JavaScript. Developers define a sequence of styles inside keyframes. The browser then automatically calculates the frames needed to transition the element from start to finish.",
     example: {
       language: "css",
-      code: `/* The animation code */\n@keyframes example {\n  from {background-color: red;}\n  to {background-color: yellow;}\n}\n\n/* The element to apply the animation to */\ndiv {\n  width: 100px;\n  height: 100px;\n  background-color: red;\n  animation-name: example;\n  animation-duration: 4s;\n}`
-    }
+      code: `/* this spins an element */\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n.loader {\n  animation: spin 2s linear infinite;\n}`
+    },
+    keyPoints: [
+      "The \`@keyframes\` rule defines the animation stages.",
+      "The \`animation-name\` links the element to the keyframes.",
+      "The \`animation-duration\` sets the total runtime.",
+      "The \`animation-iteration-count\` makes it loop."
+    ]
   },
   transitions: {
     title: "CSS Transitions",
-    description: "CSS transitions allows you to change property values smoothly, over a given duration.",
-    intro: "To create a transition effect, you must specify two things: the CSS property you want to add an effect to, and the duration of the effect.",
+    description: "CSS transitions smoothly animate single property changes.",
+    intro: "CSS transitions create simple animations when an element changes state, like hovering over a button. Instead of instantly changing colors, the transition tells the browser to slowly blend the old color into the new one.",
     syntax: {
       language: "css",
-      code: `div {\n  width: 100px;\n  height: 100px;\n  background: red;\n  transition: width 2s;\n}\n\ndiv:hover {\n  width: 300px;\n}`
-    }
+      code: `/* transition syntax */\n.btn {\n  transition: background-color 0.3s ease;\n}`
+    },
+    example: {
+      language: "css",
+      code: `/* this fades a hover effect */\ndiv {\n  background: blue;\n  transition: background 0.5s;\n}\n\ndiv:hover {\n  background: red;\n}`
+    },
+    keyPoints: [
+      "Transitions only fire when a property value changes.",
+      "You must specify the property to transition.",
+      "You must specify the duration of the effect.",
+      "The \`ease\` timing function creates a natural slow-down effect."
+    ]
   },
   transforms: {
-    title: "CSS 2D and 3D Transforms",
-    description: "CSS transforms allow you to move, rotate, scale, and skew elements.",
-    intro: "The `transform` property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.",
+    title: "CSS Transforms",
+    description: "CSS transforms rotate, scale, and move elements visually.",
+    intro: "CSS transforms manipulate the geometry of an element. Developers use them to spin icons, zoom into images on hover, or slightly nudge an element without disrupting the surrounding layout. The browser renders transforms efficiently using hardware acceleration.",
     example: {
       language: "css",
-      code: `div {\n  transform: rotate(20deg);\n}\n\ndiv#scale {\n  transform: scale(2, 3);\n}`
-    }
+      code: `/* this scales an element */\ndiv {\n  transform: rotate(45deg);\n}\n\n.zoom:hover {\n  transform: scale(1.2);\n}`
+    },
+    keyPoints: [
+      "The \`rotate()\` function spins the element.",
+      "The \`scale()\` function shrinks or enlarges the element.",
+      "The \`translate()\` function pushes the element horizontally or vertically.",
+      "The \`skew()\` function tilts the element on its axes."
+    ]
   }
 };
diff --git a/project/src/data/docs/html.ts b/project/src/data/docs/html.ts
index b202c53..b438b92 100644
--- a/project/src/data/docs/html.ts
+++ b/project/src/data/docs/html.ts
@@ -3,107 +3,156 @@ import { TopicContent } from './contentMap';
 export const htmlData: Record<string, TopicContent> = {
   introduction: {
     title: "HTML Introduction",
-    description: "HTML is the standard markup language for creating Web pages.",
-    intro: "HTML stands for Hyper Text Markup Language. It describes the structure of a Web page using markup. HTML elements are the building blocks of HTML pages, represented by tags.",
+    description: "HTML is the standard language for creating web pages.",
+    intro: "HTML describes the structure of web content using elements. An element represents content wrapped in tags, which are labels enclosed in angle brackets. Browsers read these elements and render them into a visual page.",
     syntax: {
       language: "html",
-      code: `<!DOCTYPE html>\n<html>\n<head>\n<title>Page Title</title>\n</head>\n<body>\n\n<h1>My First Heading</h1>\n<p>My first paragraph.</p>\n\n</body>\n</html>`
+      code: `<!-- NOTE: reference file does not cover syntax fully — placeholder used -->\n<tagname>Content goes here...</tagname>`
     },
     example: {
       language: "html",
-      code: `<h1>Hello World</h1>\n<p>Welcome to HTML.</p>`
+      code: `<!-- this defines a basic html file -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>My Page</title>\n    <link rel="stylesheet" href="styles.css">\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>Welcome to my first web page.</p>\n    <script src="app.js"></script>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<h1>Hello World</h1>\n<p>Modify this text.</p>`
+      html: `<!-- this defines a basic html file -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>My Page</title>\n    <link rel="stylesheet" href="styles.css">\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>Welcome to my first web page.</p>\n    <script src="app.js"></script>\n  </body>\n</html>`
     },
     keyPoints: [
-      "The `<!DOCTYPE html>` declaration defines that this document is an HTML5 document.",
-      "The `<html>` element is the root element of an HTML page.",
-      "The `<head>` element contains meta information about the HTML page."
+      "HTML stands for HyperText Markup Language.",
+      "HTML defines the structure of a web page.",
+      "Browsers render HTML into a visual page.",
+      "CSS handles page styling.",
+      "JavaScript handles page behavior."
     ]
   },
   editors: {
     title: "HTML Editors",
-    description: "Write HTML using Notepad, TextEdit, or VS Code.",
-    intro: "Web pages can be created and modified by using professional HTML editors like VS Code, WebStorm, or Sublime Text. However, for learning HTML, a simple text editor like Notepad (PC) or TextEdit (Mac) works fine.",
+    description: "HTML files are plain text documents.",
+    intro: "HTML files are plain text documents. A text editor creates and modifies these files. Browsers read the files and display the result.",
+    syntax: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover editors syntax template fully — placeholder used -->`
+    },
+    example: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover editors fully — placeholder used -->`
+    },
+    tryItYourself: {
+      html: `<!-- NOTE: reference file does not cover editors fully — placeholder used -->`
+    },
     keyPoints: [
-      "Step 1: Open your text editor.",
-      "Step 2: Write some HTML.",
-      "Step 3: Save the HTML page as index.html.",
-      "Step 4: View the HTML page in your browser."
+      "Editors create text files.",
+      "HTML requires no special software.",
+      "Browsers render the saved files."
     ]
   },
   basic: {
     title: "HTML Basic Examples",
-    description: "Basic HTML examples including documents, headings, paragraphs, and links.",
-    intro: "All HTML documents must start with a document type declaration: `<!DOCTYPE html>`. The HTML document itself begins with `<html>` and ends with `</html>`. The visible part of the HTML document is between `<body>` and `</body>`.",
+    description: "HTML files require a specific structure to work correctly.",
+    intro: "HTML files require a specific structure to work correctly. A doctype declaration tells the browser to expect HTML5. The html element wraps all other content on the page.",
     syntax: {
       language: "html",
-      code: `<body>\n  <h2>Subheading</h2>\n  <a href="https://example.com">This is a link</a>\n</body>`
+      code: `<!DOCTYPE html>\n<html lang="en">\n  <head>\n  </head>\n  <body>\n  </body>\n</html>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines a basic html file -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>My Page</title>\n    <link rel="stylesheet" href="styles.css">\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>Welcome to my first web page.</p>\n    <script src="app.js"></script>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<h1>Heading 1</h1>\n<p>Paragraph</p>\n<a href="#">Link</a>`
-    }
+      html: `<!-- this defines a basic html file -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>My Page</title>\n    <link rel="stylesheet" href="styles.css">\n  </head>\n  <body>\n    <h1>Hello, World!</h1>\n    <p>Welcome to my first web page.</p>\n    <script src="app.js"></script>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The doctype declares the document version.",
+      "The html element contains all page content.",
+      "The head holds hidden metadata.",
+      "The body contains visible elements."
+    ]
   },
   elements: {
     title: "HTML Elements",
-    description: "An HTML element is defined by a start tag, some content, and an end tag.",
-    intro: "The HTML element is everything from the start tag to the end tag. Some HTML elements have no content (like the `<br>` element) and are called empty elements.",
+    description: "HTML elements build the structure of a web page.",
+    intro: "HTML elements build the structure of a web page. An element contains an opening tag, content, and a closing tag. Some elements do not have closing tags and are called void elements.",
     syntax: {
       language: "html",
-      code: `<tagname>Content goes here...</tagname>`
+      code: `<!-- anatomy of an element -->\n<p class="intro">Hello!</p>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this is a paragraph element -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Elements</title>\n  </head>\n  <body>\n    <p>Hello!</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this is a paragraph element -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Elements</title>\n  </head>\n  <body>\n    <p>Hello!</p>\n  </body>\n</html>`
     },
     keyPoints: [
-      "HTML elements can be nested.",
-      "Never skip the end tag.",
-      "Empty HTML elements are not closed."
+      "Elements wrap content with tags.",
+      "Block elements start on a new line.",
+      "Inline elements flow with text.",
+      "Void elements lack closing tags."
     ]
   },
   attributes: {
     title: "HTML Attributes",
-    description: "Attributes provide additional information about HTML elements.",
-    intro: "All HTML elements can have attributes. They provide additional information about elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name=\"value\".",
+    description: "HTML attributes provide extra information about elements.",
+    intro: "HTML attributes provide extra information about elements. An attribute sits inside the opening tag and uses a name and value pair. They control things like links, images, and identifiers.",
+    syntax: {
+      language: "html",
+      code: `<!-- attribute syntax -->\n<div id="main" class="container" style="color:red"></div>`
+    },
     example: {
       language: "html",
-      code: `<a href="https://demontech.vercel.app">DemonTech</a>\n<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">`
+      code: `<!-- this is a link with attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Attributes</title>\n  </head>\n  <body>\n    <a href="https://example.com" target="_blank" rel="noopener">Link</a>\n  </body>\n</html>`
     },
-    referenceTable: {
-      headers: ["Attribute", "Description"],
-      rows: [
-        ["href", "Specifies the URL of the page the link goes to"],
-        ["src", "Specifies the path to the image to be displayed"],
-        ["alt", "Specifies an alternate text for an image"],
-        ["style", "Specifies an inline CSS style for an element"]
-      ]
-    }
+    tryItYourself: {
+      html: `<!-- this is a link with attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Attributes</title>\n  </head>\n  <body>\n    <a href="https://example.com" target="_blank" rel="noopener">Link</a>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Attributes add settings to elements.",
+      "Attributes sit in the opening tag.",
+      "Boolean attributes require no value.",
+      "Quoted values prevent syntax errors."
+    ]
   },
   headings: {
     title: "HTML Headings",
-    description: "HTML headings are defined with the <h1> to <h6> tags.",
-    intro: "HTML headings are titles or subtitles that you want to display on a webpage. `<h1>` defines the most important heading. `<h6>` defines the least important heading.",
+    description: "HTML headings define titles and subtitles on a webpage.",
+    intro: "HTML headings define titles and subtitles on a webpage. They create the document structure and outline. The `<h1>` tag defines the most important heading, while `<h6>` defines the least important.",
     syntax: {
       language: "html",
-      code: `<h1>Heading 1</h1>\n<h2>Heading 2</h2>\n<h3>Heading 3</h3>`
+      code: `<h1>Page Title — only ONE per page</h1>\n<h2>Section Heading</h2>\n<h3>Subsection</h3>\n<h4>Sub-subsection</h4>\n<h5>Rarely used</h5>\n<h6>Rarely used</h6>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines an article heading -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Headings</title>\n  </head>\n  <body>\n    <h1>HTML5 Notes</h1>\n    <h2>Syntax</h2>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<h1>Main Title</h1>\n<h2>Subtitle</h2>\n<p>Content goes here.</p>`
+      html: `<!-- this defines an article heading -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Headings</title>\n  </head>\n  <body>\n    <h1>HTML5 Notes</h1>\n    <h2>Syntax</h2>\n  </body>\n</html>`
     },
     keyPoints: [
-      "Search engines use the headings to index the structure and content of your web pages.",
-      "Use HTML headings for headings only. Don't use headings to make text BIG or bold."
+      "Headings structure the document.",
+      "Search engines index page headings.",
+      "Browsers resize headings by default.",
+      "Visual size does not replace headings."
     ]
   },
   paragraphs: {
     title: "HTML Paragraphs",
-    description: "The HTML <p> element defines a paragraph.",
-    intro: "A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.",
+    description: "HTML paragraphs block chunks of text together.",
+    intro: "HTML groups text blocks using paragraphs. A paragraph starts on a new line, and browsers add space above and below it. The browser removes extra spaces and line breaks in the source code.",
     syntax: {
       language: "html",
-      code: `<p>This is a paragraph.</p>\n<p>This is another paragraph.</p>`
+      code: `<p>This is a paragraph.</p>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this is a paragraph example -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Paragraphs</title>\n  </head>\n  <body>\n    <p>This is a paragraph.</p>\n    <br>\n    <p>This is another paragraph.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this is a paragraph example -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Paragraphs</title>\n  </head>\n  <body>\n    <p>This is a paragraph.</p>\n    <br>\n    <p>This is another paragraph.</p>\n  </body>\n</html>`
     },
     keyPoints: [
-      "You cannot be sure how HTML will be displayed with large or small screens.",
-      "Extra spaces and extra lines inside a paragraph will be removed by the browser when rendered."
+      "The `<p>` tag creates paragraphs.",
+      "Paragraphs start on a new line.",
+      "Browsers collapse extra whitespace.",
+      "The `<br>` tag forces line breaks."
     ]
   },
   styles: {
@@ -120,412 +169,904 @@ export const htmlData: Record<string, TopicContent> = {
   },
   formatting: {
     title: "HTML Formatting Elements",
-    description: "Formatting elements were designed to display special types of text.",
-    intro: "HTML contains several elements for defining text with a special meaning, like bold or italic.",
+    description: "HTML formatting elements apply semantic meaning to text.",
+    intro: "HTML formats text to convey special meaning. Elements like `<strong>` and `<em>` highlight importance and emphasis. Browsers apply visual styles like bold or italic by default.",
+    syntax: {
+      language: "html",
+      code: `<!-- formatting elements -->\n<p><strong>Strong</strong> and <em>emphasis</em>.</p>`
+    },
     example: {
       language: "html",
-      code: `<b>Bold text</b>\n<i>Italic text</i>\n<mark>Marked text</mark>\n<del>Deleted text</del>\n<ins>Inserted text</ins>\n<sub>Subscript</sub>\n<sup>Superscript</sup>`
+      code: `<!-- this formats text inline -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Formatting</title>\n  </head>\n  <body>\n    <p>Use <strong>strong</strong> for importance and <em>em</em> for emphasis.</p>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<p>This is <b>bold</b> and this is <i>italic</i>.</p>`
-    }
+      html: `<!-- this formats text inline -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Formatting</title>\n  </head>\n  <body>\n    <p>Use <strong>strong</strong> for importance and <em>em</em> for emphasis.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Formatting elements give text meaning.",
+      "The `<strong>` tag indicates strong importance.",
+      "The `<em>` tag indicates emphasis.",
+      "The `<mark>` tag highlights relevant text."
+    ]
   },
   quotations: {
     title: "HTML Quotation Elements",
-    description: "HTML elements for quoting and citing.",
-    intro: "HTML provides specific elements for short quotes, block quotes, abbreviations, and citations.",
+    description: "HTML quotation elements define quoted text and blockquotes.",
+    intro: "HTML provides specific elements to cite and quote text. Elements like `<blockquote>` indent long quotations, while `<q>` handles short inline quotes. Browsers usually add quotation marks around inline quotes automatically.",
     syntax: {
       language: "html",
-      code: `<blockquote cite="http://www.worldwildlife.org/who/index.html">\n  For 50 years, WWF has been protecting the future of nature.\n</blockquote>`
+      code: `<!-- blockquote syntax -->\n<blockquote cite="https://example.com">\n  Quoted text goes here.\n</blockquote>`
     },
-    referenceTable: {
-      headers: ["Tag", "Description"],
-      rows: [
-        ["&lt;blockquote&gt;", "Defines a section that is quoted from another source"],
-        ["&lt;q&gt;", "Defines a short inline quotation"],
-        ["&lt;abbr&gt;", "Defines an abbreviation or acronym"]
-      ]
-    }
+    example: {
+      language: "html",
+      code: `<!-- this defines quotations -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Quotations</title>\n  </head>\n  <body>\n    <p>She said, <q>HTML is awesome.</q></p>\n    <blockquote>HTML defines the web.</blockquote>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this defines quotations -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Quotations</title>\n  </head>\n  <body>\n    <p>She said, <q>HTML is awesome.</q></p>\n    <blockquote>HTML defines the web.</blockquote>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<blockquote>` tag indents block quotes.",
+      "The `<q>` tag adds inline quotation marks.",
+      "The `<cite>` tag defines the title of a work.",
+      "The `<abbr>` tag defines abbreviations."
+    ]
   },
   comments: {
     title: "HTML Comments",
-    description: "HTML comments are not displayed in the browser.",
-    intro: "You can add comments to your HTML source by using the following syntax. Comments are ignored by the browser, but they can help document your HTML source code.",
+    description: "HTML comments hide text from the browser display.",
+    intro: "HTML comments leave notes inside your source code. Browsers ignore comments and do not display them on the screen. Developers use comments to explain code or temporarily hide elements during testing.",
     syntax: {
       language: "html",
-      code: `<!-- Write your comments here -->`
+      code: `<!-- NOTE: reference file does not cover comments fully — placeholder used -->\n<!-- Write your comment here -->`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this is a comment example -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Comments</title>\n  </head>\n  <body>\n    <!-- This paragraph is hidden -->\n    <!-- <p>Hidden</p> -->\n    <p>Visible</p>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<!-- This is a comment -->\n<p>This is a paragraph.</p>\n<!-- Comments can also span\nmultiple lines -->`
-    }
+      html: `<!-- this is a comment example -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Comments</title>\n  </head>\n  <body>\n    <!-- This paragraph is hidden -->\n    <!-- <p>Hidden</p> -->\n    <p>Visible</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Comments hide text from users.",
+      "Browsers ignore commented code completely.",
+      "Comments help explain code logic.",
+      "Comments span multiple lines easily."
+    ]
   },
   colors: {
     title: "HTML Colors",
-    description: "HTML colors are specified with predefined color names, or RGB, HEX, HSL.",
-    intro: "In HTML, a color can be specified by using a color name (like \"red\"), an RGB value (like \"rgb(255, 0, 0)\"), or a HEX value (like \"#ff0000\").",
+    description: "HTML colors define the visual color of elements.",
+    intro: "HTML applies colors using names, HEX values, or RGB values. Developers mostly control colors through CSS rather than plain HTML. Browsers support standard color names like red, blue, or transparent.",
+    syntax: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover colors fully — placeholder used -->\n<p style="color: red;">Red text</p>`
+    },
     example: {
       language: "html",
-      code: `<h1 style="background-color:Tomato;">Tomato</h1>\n<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>\n<h1 style="color:#ff0000;">Hex Red</h1>`
-    }
+      code: `<!-- this sets inline colors -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Colors</title>\n  </head>\n  <body>\n    <h1 style="color: blue;">Blue Heading</h1>\n    <p style="background-color: black; color: white;">Dark mode</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this sets inline colors -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Colors</title>\n  </head>\n  <body>\n    <h1 style="color: blue;">Blue Heading</h1>\n    <p style="background-color: black; color: white;">Dark mode</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "HTML supports standard color names.",
+      "HEX and RGB values offer precise colors.",
+      "CSS handles most color styling.",
+      "Inline styles apply colors directly."
+    ]
   },
   css: {
     title: "HTML CSS",
-    description: "CSS is used to format the layout of a webpage.",
-    intro: "CSS stands for Cascading Style Sheets. CSS can be added to HTML documents in 3 ways: Inline (using the style attribute), Internal (using a `<style>` element in the `<head>`), and External (using a `<link>` element).",
+    description: "CSS handles the visual styling of HTML elements.",
+    intro: "CSS formats the visual layout of an HTML page. HTML handles the structure, while CSS controls colors, fonts, and spacing. Developers link external CSS files inside the head element.",
     syntax: {
       language: "html",
-      code: `<!-- External CSS -->\n<link rel="stylesheet" href="styles.css">`
+      code: `<!-- NOTE: reference file does not cover CSS connection fully — placeholder used -->\n<link rel="stylesheet" href="styles.css">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this connects a stylesheet -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>CSS Link</title>\n    <link rel="stylesheet" href="styles.css">\n  </head>\n  <body>\n    <h1>Styled Heading</h1>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this connects a stylesheet -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>CSS Link</title>\n    <style>\n      h1 { color: red; }\n    </style>\n  </head>\n  <body>\n    <h1>Styled Heading</h1>\n  </body>\n</html>`
     },
     keyPoints: [
-      "External CSS is the most common and practical way to style HTML."
+      "CSS stands for Cascading Style Sheets.",
+      "CSS controls visual appearance.",
+      "External stylesheets keep HTML clean.",
+      "The `<link>` tag connects external CSS."
     ]
   },
   links: {
     title: "HTML Links",
-    description: "Links are found in nearly all web pages. Links allow users to click their way from page to page.",
-    intro: "HTML links are hyperlinks. You can click on a link and jump to another document. The HTML `<a>` tag defines a hyperlink.",
+    description: "HTML links connect web pages together.",
+    intro: "HTML creates hyperlinks that let users navigate between pages. The `<a>` anchor tag defines a link, and the `href` attribute specifies the destination URL. External links should open in a new tab securely.",
     syntax: {
       language: "html",
-      code: `<a href="url">link text</a>`
+      code: `<!-- external link -->\n<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit</a>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this creates a link -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Links</title>\n  </head>\n  <body>\n    <a href="/about">About Us</a>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<a href="https://example.com" target="_blank">Visit Example.com (opens in new tab)</a>`
+      html: `<!-- this creates a link -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Links</title>\n  </head>\n  <body>\n    <a href="/about">About Us</a>\n  </body>\n</html>`
     },
     keyPoints: [
-      "The `href` attribute specifies the destination address.",
-      "The `target` attribute specifies where to open the linked document (e.g. `_blank` for a new window)."
+      "The `<a>` tag defines hyperlinks.",
+      "The `href` attribute holds the destination address.",
+      "Absolute URLs link to other websites.",
+      "Relative URLs link to local pages."
     ]
   },
   images: {
     title: "HTML Images",
-    description: "Images can improve the design and the appearance of a web page.",
-    intro: "In HTML, images are defined with the `<img>` tag. The `<img>` tag is empty, it contains attributes only, and does not have a closing tag.",
+    description: "HTML images add visual content to web pages.",
+    intro: "HTML embeds images using the `<img>` tag. This tag is a void element, so it requires no closing tag. The `src` attribute tells the browser where to find the image file.",
     syntax: {
       language: "html",
-      code: `<img src="url" alt="alternatetext">`
+      code: `<!-- basic image syntax -->\n<img src="photo.jpg" alt="A description of the photo">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this embeds an image -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Images</title>\n  </head>\n  <body>\n    <img src="/hero.webp" alt="Hero banner" width="1200" height="600">\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<img src="https://via.placeholder.com/150" alt="Placeholder image" width="150" height="150">`
+      html: `<!-- this embeds an image -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Images</title>\n  </head>\n  <body>\n    <img src="/hero.webp" alt="Hero banner" width="1200" height="600">\n  </body>\n</html>`
     },
     keyPoints: [
-      "The `src` attribute specifies the path to the image.",
-      "The `alt` attribute specifies an alternate text for the image, if the image for some reason cannot be displayed."
+      "The `<img>` tag embeds images.",
+      "The `src` attribute defines the file path.",
+      "The `alt` attribute provides accessible text.",
+      "Dimensions prevent layout shifts."
     ]
   },
   favicon: {
     title: "HTML Favicon",
-    description: "A favicon is a small image displayed next to the page title in the browser tab.",
-    intro: "To add a favicon to your website, you use the `<link>` tag inside the `<head>` element. The image file should ideally be a .ico, .png, or .svg file.",
+    description: "HTML favicons display small icons in browser tabs.",
+    intro: "HTML pages show a small icon next to the page title in the browser tab. Developers use the `<link>` tag to attach this icon. Browsers request standard formats like `.ico`, `.png`, or `.svg`.",
     syntax: {
       language: "html",
-      code: `<head>\n  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">\n</head>`
-    }
+      code: `<!-- favicon syntax -->\n<link rel="icon" href="/favicon.ico" sizes="any">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines a favicon -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Favicon</title>\n    <link rel="icon" href="/icon.svg" type="image/svg+xml">\n  </head>\n  <body>\n    <h1>Check the tab icon</h1>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this defines a favicon -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Favicon</title>\n    <link rel="icon" href="/icon.svg" type="image/svg+xml">\n  </head>\n  <body>\n    <h1>Check the tab icon</h1>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Favicons appear in browser tabs.",
+      "The `<link>` tag connects the icon file.",
+      "The `href` attribute points to the image path.",
+      "Browsers cache favicons aggressively."
+    ]
   },
   "page-title": {
     title: "HTML Page Title",
-    description: "The <title> element defines the title of the document.",
-    intro: "The `<title>` element must be text-only, and it is shown in the browser's title bar or in the page's tab. It is very important for Search Engine Optimization (SEO).",
+    description: "HTML page titles name the browser tab and search result.",
+    intro: "HTML uses the `<title>` tag to name the document. Browsers display this title in the tab bar and history logs. Search engines use the title to name search results.",
     syntax: {
       language: "html",
-      code: `<head>\n  <title>HTML Page Title</title>\n</head>`
-    }
+      code: `<!-- title syntax -->\n<title>Page Title | Site Name</title>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines a title -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>HTML5 Roadmap | DemonTech</title>\n  </head>\n  <body>\n    <h1>Main Content</h1>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this defines a title -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>HTML5 Roadmap | DemonTech</title>\n  </head>\n  <body>\n    <h1>Main Content</h1>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<title>` tag names the document.",
+      "Browsers show titles in tabs.",
+      "Search engines display titles in results.",
+      "Each page requires one unique title."
+    ]
   },
   tables: {
     title: "HTML Tables",
-    description: "HTML tables allow web developers to arrange data into rows and columns.",
-    intro: "An HTML table consists of one `<table>` element and one or more `<tr>`, `<th>`, and `<td>` elements.",
+    description: "HTML tables organize structured data into rows and columns.",
+    intro: "HTML tables display data in a grid format. The `<table>` element wraps rows, headers, and data cells. Developers organize complex tables with header, body, and footer sections.",
+    syntax: {
+      language: "html",
+      code: `<!-- table structure -->\n<table>\n  <caption>Monthly Sales</caption>\n  <thead>\n    <tr>\n      <th scope="col">Month</th>\n    </tr>\n  </thead>\n</table>`
+    },
     example: {
       language: "html",
-      code: `<table>\n  <tr>\n    <th>Company</th>\n    <th>Contact</th>\n  </tr>\n  <tr>\n    <td>Alfreds Futterkiste</td>\n    <td>Maria Anders</td>\n  </tr>\n</table>`
+      code: `<!-- this defines a table -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Tables</title>\n  </head>\n  <body>\n    <table>\n      <thead>\n        <tr><th scope="col">Name</th></tr>\n      </thead>\n      <tbody>\n        <tr><td>Alice</td></tr>\n      </tbody>\n    </table>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<table border="1">\n  <tr><th>Name</th><th>Age</th></tr>\n  <tr><td>John</td><td>25</td></tr>\n</table>`
-    }
+      html: `<!-- this defines a table -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Tables</title>\n  </head>\n  <body>\n    <table>\n      <thead>\n        <tr><th scope="col">Name</th></tr>\n      </thead>\n      <tbody>\n        <tr><td>Alice</td></tr>\n      </tbody>\n    </table>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<table>` element creates data grids.",
+      "The `<tr>` tag defines table rows.",
+      "The `<th>` tag defines header cells.",
+      "The `<td>` tag defines data cells."
+    ]
   },
   lists: {
     title: "HTML Lists",
-    description: "HTML lists allow web developers to group a set of related items in lists.",
-    intro: "An unordered list starts with the `<ul>` tag. Each list item starts with the `<li>` tag. An ordered list starts with the `<ol>` tag.",
+    description: "HTML lists group related items together.",
+    intro: "HTML organizes related text into lists. Unordered lists use the `<ul>` tag to display bullet points. Ordered lists use the `<ol>` tag to display numbers. List items always sit inside the `<li>` tag.",
     syntax: {
       language: "html",
-      code: `<ul>\n  <li>Coffee</li>\n  <li>Tea</li>\n</ul>\n\n<ol>\n  <li>First</li>\n  <li>Second</li>\n</ol>`
+      code: `<!-- lists syntax -->\n<ul>\n  <li>Apples</li>\n  <li>Bananas</li>\n</ul>\n<ol start="3" reversed type="A">\n  <li>Third item</li>\n</ol>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this creates lists -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Lists</title>\n  </head>\n  <body>\n    <ul>\n      <li>One</li>\n      <li>Two</li>\n    </ul>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<ul>\n  <li>Apple</li>\n  <li>Banana</li>\n</ul>`
-    }
+      html: `<!-- this creates lists -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Lists</title>\n  </head>\n  <body>\n    <ul>\n      <li>One</li>\n      <li>Two</li>\n    </ul>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Unordered lists show bullet points.",
+      "Ordered lists display numbers or letters.",
+      "The `<li>` tag wraps every list item.",
+      "Description lists group terms and details."
+    ]
   },
   "block-inline": {
-    title: "HTML Block and Inline",
-    description: "Every HTML element has a default display value, depending on what type of element it is.",
-    intro: "There are two display values: block and inline. A block-level element always starts on a new line and takes up the full width available. An inline element does not start on a new line and only takes up as much width as necessary.",
+    title: "HTML Block and Inline Elements",
+    description: "HTML elements display as block or inline by default.",
+    intro: "HTML controls how elements sit on the page. Block-level elements take the full width and start on a new line. Inline elements only take as much width as their content needs.",
+    syntax: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover block-inline syntax template fully — placeholder used -->\n<div>Block</div>\n<span>Inline</span>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this shows element types -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Element Types</title>\n  </head>\n  <body>\n    <p>This is a block.</p>\n    <span>This is inline.</span>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this shows element types -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Element Types</title>\n  </head>\n  <body>\n    <p>This is a block.</p>\n    <span>This is inline.</span>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "Block examples: `<div>`, `<h1>` - `<h6>`, `<p>`, `<ul>`, `<li>`",
-      "Inline examples: `<span>`, `<a>`, `<img>`, `<strong>`"
+      "Block elements take full page width.",
+      "Block elements stack vertically.",
+      "Inline elements flow alongside text.",
+      "Inline elements wrap their contents tightly."
     ]
   },
   div: {
-    title: "HTML Div",
-    description: "The <div> element is often used as a container for other HTML elements.",
-    intro: "The `<div>` element has no special meaning at all. It represents its children. It is easily styled by using the class or id attribute.",
+    title: "HTML Div Element",
+    description: "The HTML div element acts as a generic container.",
+    intro: "HTML provides the `<div>` tag to group elements together. It holds no semantic meaning on its own. Developers use it to apply CSS styles or structure sections of a page.",
     syntax: {
       language: "html",
-      code: `<div class="container">\n  <h2>Heading</h2>\n  <p>Paragraph</p>\n</div>`
-    }
+      code: `<!-- div syntax -->\n<div class="container">\n  <p>Grouped content</p>\n</div>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines a div -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Div Container</title>\n  </head>\n  <body>\n    <div id="main">\n      <h2>Section</h2>\n      <p>Content.</p>\n    </div>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this defines a div -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Div Container</title>\n  </head>\n  <body>\n    <div id="main">\n      <h2>Section</h2>\n      <p>Content.</p>\n    </div>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<div>` tag holds no semantic meaning.",
+      "The `<div>` tag creates a block-level container.",
+      "Classes and IDs style the container.",
+      "Semantic tags replace `<div>` when possible."
+    ]
   },
   classes: {
     title: "HTML Classes",
-    description: "The HTML class attribute is used to specify a class for an HTML element.",
-    intro: "Multiple HTML elements can share the same class. The class attribute is often used to point to a class name in a style sheet.",
+    description: "HTML classes assign reusable identifiers to elements.",
+    intro: "HTML uses the `class` attribute to group elements. Multiple elements can share the exact same class name. CSS and JavaScript target these classes to apply styles or behavior.",
+    syntax: {
+      language: "html",
+      code: `<!-- class syntax -->\n<p class="intro highlight">Text</p>`
+    },
     example: {
       language: "html",
-      code: `<style>\n.city {\n  background-color: tomato;\n  color: white;\n}\n</style>\n\n<h2 class="city">Paris</h2>\n<p class="city">Paris is the capital of France.</p>`
-    }
+      code: `<!-- this applies classes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Classes</title>\n  </head>\n  <body>\n    <p class="error">Something went wrong.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this applies classes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Classes</title>\n  </head>\n  <body>\n    <p class="error">Something went wrong.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `class` attribute groups elements.",
+      "Multiple elements share the same class.",
+      "One element accepts multiple classes.",
+      "CSS targets classes to style pages."
+    ]
   },
   id: {
-    title: "HTML Id",
-    description: "The HTML id attribute is used to specify a unique id for an HTML element.",
-    intro: "You cannot have more than one element with the same id in an HTML document. The id attribute is used to point to a specific style declaration in a style sheet or used by JavaScript to access the element.",
+    title: "HTML Id Attribute",
+    description: "The HTML id attribute uniquely identifies an element on a page.",
+    intro: "HTML uses the `id` attribute to give an element a unique identifier. No two elements on the same page can share the same id. Developers use the id to target an element with CSS or JavaScript.",
+    syntax: {
+      language: "html",
+      code: `<!-- id syntax -->\n<h1 id="main-title">Heading</h1>`
+    },
     example: {
       language: "html",
-      code: `<h1 id="myHeader">My Header</h1>`
-    }
+      code: `<!-- this applies an id -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Id Attribute</title>\n  </head>\n  <body>\n    <p id="unique-paragraph">This is unique.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this applies an id -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Id Attribute</title>\n  </head>\n  <body>\n    <p id="unique-paragraph">This is unique.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `id` attribute is unique per page.",
+      "Elements only accept one id.",
+      "CSS selects IDs with a hash symbol.",
+      "JavaScript finds elements using their id."
+    ]
   },
   buttons: {
     title: "HTML Buttons",
-    description: "The <button> element represents a clickable button.",
-    intro: "Inside a `<button>` element you can put content, like text or images. This is the difference between this element and buttons created with the `<input>` element.",
+    description: "HTML buttons trigger actions when clicked.",
+    intro: "HTML provides the `<button>` element to create clickable buttons. These buttons submit forms or trigger JavaScript functions. Developers can put text, icons, or images inside a button element.",
     syntax: {
       language: "html",
-      code: `<button type="button" onclick="alert('Hello World!')">Click Me!</button>`
+      code: `<!-- button syntax -->\n<button type="button">Click Me</button>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this creates a button -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Buttons</title>\n  </head>\n  <body>\n    <button type="submit">Send Message</button>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<button type="button">Submit</button>`
-    }
+      html: `<!-- this creates a button -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Buttons</title>\n  </head>\n  <body>\n    <button type="submit">Send Message</button>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<button>` tag creates clickable areas.",
+      "Buttons accept child elements like images.",
+      "The `type` attribute defines the button behavior.",
+      "JavaScript attaches click events to buttons."
+    ]
   },
   iframes: {
     title: "HTML Iframes",
-    description: "An HTML iframe is used to display a web page within a web page.",
-    intro: "The `<iframe>` tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.",
+    description: "HTML iframes display external web pages inside a page.",
+    intro: "HTML embeds other documents using the `<iframe>` element. The `src` attribute points to the external URL. Developers set the width and height to control the frame size.",
     syntax: {
       language: "html",
-      code: `<iframe src="https://www.w3schools.com" width="100%" height="300" title="W3Schools Free Online Web Tutorials"></iframe>`
-    }
+      code: `<!-- iframe syntax -->\n<iframe src="https://example.com" width="500" height="400"></iframe>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this embeds an iframe -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Iframes</title>\n  </head>\n  <body>\n    <iframe src="https://example.com" width="100%" height="300" title="Example Site"></iframe>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this embeds an iframe -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Iframes</title>\n  </head>\n  <body>\n    <iframe src="https://example.com" width="100%" height="300" title="Example Site"></iframe>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<iframe>` tag embeds external content.",
+      "The `src` attribute sets the URL.",
+      "The `title` attribute improves accessibility.",
+      "CSS controls the frame dimensions."
+    ]
   },
   javascript: {
     title: "HTML JavaScript",
-    description: "JavaScript makes HTML pages more dynamic and interactive.",
-    intro: "The HTML `<script>` tag is used to define a client-side script (JavaScript). The `<script>` element either contains scripting statements, or it points to an external script file through the src attribute.",
+    description: "HTML JavaScript makes web pages interactive and dynamic.",
+    intro: "HTML links JavaScript code using the `<script>` tag. The script tag either holds inline code or connects to an external file using the `src` attribute. Developers usually place scripts at the bottom of the body.",
     syntax: {
       language: "html",
-      code: `<script>\ndocument.getElementById("demo").innerHTML = "Hello JavaScript!";\n</script>`
-    }
+      code: `<!-- script syntax -->\n<script src="app.js" defer></script>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this connects a script -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript</title>\n  </head>\n  <body>\n    <h1>Interactive Page</h1>\n    <script src="main.js"></script>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this connects a script -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript</title>\n    <script>\n      console.log('Hello World!');\n    </script>\n  </head>\n  <body>\n    <h1>Check the console</h1>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<script>` tag adds JavaScript.",
+      "External scripts use the `src` attribute.",
+      "Inline scripts sit inside the tags.",
+      "The `defer` attribute optimizes loading times."
+    ]
   },
   "file-paths": {
     title: "HTML File Paths",
-    description: "A file path describes the location of a file in a web site's folder structure.",
-    intro: "File paths are used when linking to external files, like Web pages, Images, Style sheets, or JavaScripts. An absolute file path is the full URL. A relative file path points to a file relative to the current page.",
-    referenceTable: {
-      headers: ["Path", "Description"],
-      rows: [
-        ["`<img src=\"picture.jpg\">`", "The picture.jpg file is located in the same folder as the current page"],
-        ["`<img src=\"images/picture.jpg\">`", "The picture.jpg file is located in the images folder in the current folder"],
-        ["`<img src=\"/images/picture.jpg\">`", "The picture.jpg file is located in the images folder at the root of the current web"]
-      ]
-    }
+    description: "HTML file paths locate files within a website.",
+    intro: "HTML needs file paths to link images, styles, and scripts. Absolute URLs point to external websites, while relative paths point to local files. A slash indicates a folder level.",
+    syntax: {
+      language: "html",
+      code: `<!-- file path syntax -->\n<img src="/images/photo.jpg" alt="Photo">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this uses relative paths -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Paths</title>\n  </head>\n  <body>\n    <img src="assets/logo.png" alt="Logo">\n    <a href="../index.html">Go Back</a>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this uses relative paths -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Paths</title>\n  </head>\n  <body>\n    <img src="assets/logo.png" alt="Logo">\n    <a href="../index.html">Go Back</a>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Absolute URLs link to other domains.",
+      "Relative paths point to local website files.",
+      "The `../` syntax moves up one folder.",
+      "The `/` syntax starts at the root folder."
+    ]
   },
   head: {
-    title: "HTML Head",
-    description: "The HTML <head> element is a container for metadata.",
-    intro: "The `<head>` element is a container for the following elements: `<title>`, `<style>`, `<meta>`, `<link>`, `<script>`, and `<base>`.",
+    title: "HTML Head Element",
+    description: "The HTML head element stores hidden metadata for the page.",
+    intro: "HTML uses the `<head>` element to hold information about the document. Browsers do not display this information on the screen. Developers use it to link styles, set the title, and add SEO data.",
+    syntax: {
+      language: "html",
+      code: `<!-- head syntax -->\n<head>\n  <meta charset="UTF-8">\n  <title>Document</title>\n</head>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this defines a head section -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Head Section</title>\n    <link rel="stylesheet" href="style.css">\n  </head>\n  <body>\n    <p>Content</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this defines a head section -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Head Section</title>\n    <link rel="stylesheet" href="style.css">\n  </head>\n  <body>\n    <p>Content</p>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "Metadata is data about the HTML document. Metadata is not displayed.",
-      "Metadata typically define the document title, character set, styles, scripts, and other meta information."
+      "The `<head>` element contains metadata.",
+      "Metadata does not show on the page.",
+      "The `<title>` tag is required.",
+      "Meta tags improve search rankings."
     ]
   },
   layout: {
     title: "HTML Layout Elements",
-    description: "Websites often display content in multiple columns, like a magazine or newspaper.",
-    intro: "HTML has several semantic elements that define the different parts of a web page: `<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`, `<details>`, `<summary>`."
+    description: "HTML layout elements define the structure of a web page.",
+    intro: "HTML uses semantic elements to divide a page into logical sections. Elements like `<header>`, `<nav>`, and `<footer>` describe their purpose clearly. This helps search engines and screen readers understand the page layout.",
+    syntax: {
+      language: "html",
+      code: `<!-- layout syntax -->\n<header>Top bar</header>\n<main>Core content</main>\n<footer>Bottom bar</footer>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this builds a page layout -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Layout</title>\n  </head>\n  <body>\n    <header><h1>Site Logo</h1></header>\n    <nav><a href="#">Home</a></nav>\n    <main><p>Content here.</p></main>\n    <footer><p>Copyright 2026</p></footer>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this builds a page layout -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Layout</title>\n  </head>\n  <body>\n    <header><h1>Site Logo</h1></header>\n    <nav><a href="#">Home</a></nav>\n    <main><p>Content here.</p></main>\n    <footer><p>Copyright 2026</p></footer>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Semantic tags name page sections clearly.",
+      "The `<header>` tag holds the logo and nav.",
+      "The `<main>` tag contains the primary content.",
+      "The `<footer>` tag sits at the bottom."
+    ]
   },
   responsive: {
     title: "HTML Responsive Web Design",
-    description: "Responsive web design is about creating web pages that look good on all devices.",
-    intro: "Responsive web design will automatically adjust for different screen sizes and viewports. To create a responsive website, add the following `<meta>` tag to all your web pages.",
+    description: "HTML responsive design adjusts pages to fit any screen size.",
+    intro: "HTML pages must look good on phones, tablets, and desktops. Developers use a special viewport meta tag to control the page scaling. CSS media queries then adjust the layout based on the screen width.",
     syntax: {
       language: "html",
-      code: `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
-    }
+      code: `<!-- responsive meta tag -->\n<meta name="viewport" content="width=device-width, initial-scale=1.0">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this sets the viewport -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Responsive</title>\n  </head>\n  <body>\n    <p>This text fits the screen.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this sets the viewport -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Responsive</title>\n  </head>\n  <body>\n    <p>This text fits the screen.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Responsive design adapts to all screens.",
+      "The viewport tag controls mobile scaling.",
+      "CSS handles the actual visual changes.",
+      "Modern sites must be responsive."
+    ]
   },
   computercode: {
-    title: "HTML Computer Code Elements",
-    description: "HTML contains several elements for defining user input and computer code.",
-    intro: "Elements like `<code>`, `<kbd>`, `<samp>`, `<var>`, and `<pre>` are used to display computer code or user input with fixed letter size and spacing.",
+    title: "HTML Computer Code",
+    description: "HTML formats computer code differently from normal text.",
+    intro: "HTML provides the `<code>` element to display code snippets. Browsers render this text in a monospace font. Developers use it to share programming examples on web pages.",
+    syntax: {
+      language: "html",
+      code: `<!-- code syntax -->\n<code>const x = 10;</code>`
+    },
     example: {
       language: "html",
-      code: `<code>\nx = 5;\ny = 6;\nz = x + y;\n</code>`
-    }
+      code: `<!-- this displays code -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Code Content</title>\n  </head>\n  <body>\n    <p>Use the <code>let</code> keyword.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this displays code -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Code Content</title>\n  </head>\n  <body>\n    <p>Use the <code>let</code> keyword.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<code>` element wraps code snippets.",
+      "Browsers use monospace fonts for code.",
+      "It displays code inline with text.",
+      "The `<pre>` tag preserves code formatting."
+    ]
   },
   semantics: {
     title: "HTML Semantics",
-    description: "Semantic HTML elements clearly describe their meaning in a human- and machine-readable way.",
-    intro: "Examples of non-semantic elements: `<div>` and `<span>` - Tells nothing about its content. Examples of semantic elements: `<form>`, `<table>`, and `<article>` - Clearly defines its content.",
+    description: "HTML semantic elements describe their meaning clearly.",
+    intro: "Semantic HTML elements explain their purpose to the browser and developer. A `<form>` element clearly holds input fields, while a `<div>` means nothing on its own. Using semantic tags improves accessibility and search engine ranking.",
+    syntax: {
+      language: "html",
+      code: `<!-- semantic tags -->\n<article>\n  <h2>Post Title</h2>\n</article>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this uses semantic tags -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Semantics</title>\n  </head>\n  <body>\n    <header><h1>Blog</h1></header>\n    <article><p>First post!</p></article>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this uses semantic tags -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Semantics</title>\n  </head>\n  <body>\n    <header><h1>Blog</h1></header>\n    <article><p>First post!</p></article>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "Semantic elements help search engines and screen readers understand your page."
+      "Semantic tags describe content clearly.",
+      "Non-semantic tags tell nothing about content.",
+      "Screen readers rely on semantic structure.",
+      "Search engines rank semantic pages higher."
     ]
   },
   "style-guide": {
     title: "HTML Style Guide",
-    description: "Consistent coding style makes HTML readable and easier to maintain.",
-    intro: "Always declare document type. Use lowercase element names. Close all HTML elements. Use lowercase attribute names. Always quote attribute values. Always specify alt, width, and height for images."
+    description: "HTML style guides ensure clean and readable code.",
+    intro: "A consistent coding style keeps HTML readable. Developers follow rules like using lowercase tags and double-quoting attributes. Clean code prevents rendering errors across different browsers.",
+    syntax: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover style-guide syntax template fully — placeholder used -->\n<img src="pic.jpg" alt="Description">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this shows clean code -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Clean HTML</title>\n  </head>\n  <body>\n    <!-- Use lowercase and quotes -->\n    <a href="/home">Home</a>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this shows clean code -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Clean HTML</title>\n  </head>\n  <body>\n    <!-- Use lowercase and quotes -->\n    <a href="/home">Home</a>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Lowercase element names prevent confusion.",
+      "Always close HTML tags properly.",
+      "Quote attribute values with double quotes.",
+      "Indent nested elements logically."
+    ]
   },
   entities: {
     title: "HTML Entities",
-    description: "Some characters are reserved in HTML.",
-    intro: "If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML.",
-    referenceTable: {
-      headers: ["Result", "Description", "Entity Name", "Entity Number"],
-      rows: [
-        ["&nbsp;", "non-breaking space", "&amp;nbsp;", "&amp;#160;"],
-        ["&lt;", "less than", "&amp;lt;", "&amp;#60;"],
-        ["&gt;", "greater than", "&amp;gt;", "&amp;#62;"],
-        ["&amp;", "ampersand", "&amp;amp;", "&amp;#38;"],
-        ["&quot;", "double quotation mark", "&amp;quot;", "&amp;#34;"]
-      ]
-    }
+    description: "HTML entities safely display reserved characters.",
+    intro: "HTML reserves specific characters like angle brackets for tags. If you type a less-than sign, the browser expects an HTML element. Entities use special codes to render these characters safely on the screen.",
+    syntax: {
+      language: "html",
+      code: `<!-- entity syntax -->\n<p>5 &lt; 10</p>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this uses entities -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Entities</title>\n  </head>\n  <body>\n    <p>The &lt;h1&gt; tag creates a heading.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this uses entities -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Entities</title>\n  </head>\n  <body>\n    <p>The &lt;h1&gt; tag creates a heading.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Entities display reserved HTML characters.",
+      "An entity begins with an ampersand.",
+      "An entity ends with a semicolon.",
+      "Non-breaking spaces prevent line breaks."
+    ]
   },
   symbols: {
     title: "HTML Symbols",
-    description: "Many mathematical, technical, and currency symbols, are not present on a normal keyboard.",
-    intro: "To add such symbols to an HTML page, you can use an HTML entity name or number. If no entity name exists, you can use an entity number.",
+    description: "HTML symbols display mathematical and currency characters.",
+    intro: "HTML uses entity codes to display symbols missing from standard keyboards. The browser reads the entity code and outputs the visual symbol. Developers use these for currencies, arrows, and math symbols.",
+    syntax: {
+      language: "html",
+      code: `<!-- symbol syntax -->\n<p>&euro; 50</p>`
+    },
     example: {
       language: "html",
-      code: `<p>I will display &euro;</p>\n<p>I will display &#8364;</p>`
-    }
+      code: `<!-- this shows symbols -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Symbols</title>\n  </head>\n  <body>\n    <p>Price: &euro; 100</p>\n    <p>Direction: &rarr;</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this shows symbols -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Symbols</title>\n  </head>\n  <body>\n    <p>Price: &euro; 100</p>\n    <p>Direction: &rarr;</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Symbols render special visual characters.",
+      "Entity names make code readable.",
+      "Entity numbers cover all Unicode symbols.",
+      "Fonts determine the final symbol design."
+    ]
   },
   emojis: {
     title: "HTML Emojis",
-    description: "Emojis are characters from the UTF-8 character set.",
-    intro: "Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set.",
+    description: "HTML emojis display visual icons using UTF-8 characters.",
+    intro: "Emojis behave like regular text characters rather than images. Browsers render them natively from the UTF-8 character set. Developers can copy and paste emojis directly into the HTML source code.",
     syntax: {
       language: "html",
-      code: `<meta charset="UTF-8">\n<p>I will display &#128512;</p>`
-    }
+      code: `<!-- emoji syntax -->\n<p>I love coding 🚀</p>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this displays an emoji -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Emojis</title>\n  </head>\n  <body>\n    <h1>Welcome back 👋</h1>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this displays an emoji -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Emojis</title>\n  </head>\n  <body>\n    <h1>Welcome back 👋</h1>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Emojis function as standard text characters.",
+      "UTF-8 encoding supports all emojis.",
+      "Browsers render emojis differently based on the OS.",
+      "Emojis scale precisely like font sizes."
+    ]
   },
   charset: {
     title: "HTML Charset",
-    description: "To display an HTML page correctly, a web browser must know the character set used.",
-    intro: "The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world.",
+    description: "HTML charsets ensure the browser displays text correctly.",
+    intro: "A web browser needs to know the correct character set to render text properly. HTML5 recommends the UTF-8 character set. This modern set covers almost all languages and symbols globally.",
     syntax: {
       language: "html",
-      code: `<meta charset="UTF-8">`
-    }
+      code: `<!-- charset syntax -->\n<meta charset="UTF-8">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this sets the charset -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Charset</title>\n  </head>\n  <body>\n    <p>Text displays correctly.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this sets the charset -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Charset</title>\n  </head>\n  <body>\n    <p>Text displays correctly.</p>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Charset defines the text encoding.",
+      "UTF-8 handles all global characters.",
+      "The meta tag sets the charset.",
+      "Missing charsets cause broken text symbols."
+    ]
   },
   "url-encode": {
     title: "HTML URL Encode",
-    description: "URLs can only be sent over the Internet using the ASCII character-set.",
-    intro: "If a URL contains characters outside the ASCII set, the URL has to be converted. URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet. URL encoding replaces unsafe ASCII characters with a \"%\" followed by two hexadecimal digits.",
+    description: "HTML URL encoding translates unsafe characters in web addresses.",
+    intro: "URLs only accept specific ASCII characters over the internet. URL encoding replaces unsafe characters with a percent sign and hexadecimal digits. Browsers automatically encode URLs when submitting forms.",
+    syntax: {
+      language: "html",
+      code: `<!-- url encode syntax -->\n<a href="/search?q=hello%20world">Search</a>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this encodes a URL -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>URL Encode</title>\n  </head>\n  <body>\n    <a href="/login?user=john%20doe">Login John Doe</a>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this encodes a URL -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>URL Encode</title>\n  </head>\n  <body>\n    <a href="/login?user=john%20doe">Login John Doe</a>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "Spaces are typically replaced with a plus (+) sign or with %20."
+      "URLs require safe ASCII characters.",
+      "Encoding replaces spaces with `%20`.",
+      "Forms encode data upon submission.",
+      "Unsafe symbols break URL navigation."
     ]
   },
   "html-vs-xhtml": {
     title: "HTML vs XHTML",
-    description: "XHTML is a stricter, more XML-based version of HTML.",
-    intro: "XHTML stands for EXtensible HyperText Markup Language. It is almost identical to HTML but is stricter. All elements must have an end tag, and all elements must be nested correctly.",
+    description: "XHTML enforces strict rules on traditional HTML.",
+    intro: "XHTML is a stricter version of HTML based on XML. It forces developers to close every tag and nest elements perfectly. Modern web development prefers HTML5 due to its flexibility and rich features.",
+    syntax: {
+      language: "html",
+      code: `<!-- xhtml strictness -->\n<br />`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this shows strict XHTML -->\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n  <head>\n    <meta charset="UTF-8" />\n    <title>XHTML</title>\n  </head>\n  <body>\n    <p>All tags must close.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this shows strict XHTML -->\n<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n  <head>\n    <meta charset="UTF-8" />\n    <title>XHTML</title>\n  </head>\n  <body>\n    <p>All tags must close.</p>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "HTML5 is generally preferred over XHTML today due to its simplicity and rich features."
+      "XHTML requires perfectly closed tags.",
+      "HTML5 allows more relaxed syntax.",
+      "XHTML demands lowercase tag names.",
+      "HTML5 replaced XHTML as the standard."
     ]
   },
   forms: {
     title: "HTML Forms",
-    description: "An HTML form is used to collect user input.",
-    intro: "The `<form>` element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.",
+    description: "HTML forms collect user input securely.",
+    intro: "HTML uses the `<form>` element to gather data from the user. It wraps various input fields like text boxes and checkboxes. The browser sends this collected data to a server when the user clicks submit.",
     syntax: {
       language: "html",
-      code: `<form action="/action_page.php">\n  <label for="fname">First name:</label><br>\n  <input type="text" id="fname" name="fname" value="John"><br>\n  <input type="submit" value="Submit">\n</form>`
+      code: `<!-- form syntax -->\n<form action="/submit" method="POST">\n  <input type="text" name="user">\n</form>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this creates a form -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Forms</title>\n  </head>\n  <body>\n    <form action="/login" method="POST">\n      <label for="username">Name:</label>\n      <input type="text" id="username" name="username">\n      <button type="submit">Submit</button>\n    </form>\n  </body>\n</html>`
     },
     tryItYourself: {
-      html: `<form>\n  <input type="text" placeholder="Username">\n  <button type="submit">Go</button>\n</form>`
-    }
+      html: `<!-- this creates a form -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Forms</title>\n  </head>\n  <body>\n    <form action="/login" method="POST">\n      <label for="username">Name:</label>\n      <input type="text" id="username" name="username">\n      <button type="submit">Submit</button>\n    </form>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<form>` tag wraps input elements.",
+      "Forms collect data for processing.",
+      "The `action` attribute sets the destination URL.",
+      "The `method` attribute defines the HTTP request."
+    ]
   },
   "form-attributes": {
     title: "HTML Form Attributes",
-    description: "The <form> element can have several attributes.",
-    intro: "The `action` attribute defines the action to be performed when the form is submitted. The `method` attribute specifies the HTTP method to be used when submitting the form data (GET or POST).",
+    description: "HTML form attributes control how forms submit data.",
+    intro: "HTML forms require attributes to know where and how to send data. The `action` attribute specifies the server endpoint. The `method` attribute determines if the data is sent securely or appended to the URL.",
+    syntax: {
+      language: "html",
+      code: `<!-- form attributes -->\n<form action="/save" method="POST" target="_blank"></form>`
+    },
     example: {
       language: "html",
-      code: `<form action="/submit" method="POST" target="_blank">\n  ...\n</form>`
-    }
+      code: `<!-- this uses form attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Form Attributes</title>\n  </head>\n  <body>\n    <form action="/search" method="GET" autocomplete="off">\n      <input type="text" name="q">\n      <button type="submit">Search</button>\n    </form>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this uses form attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Form Attributes</title>\n  </head>\n  <body>\n    <form action="/search" method="GET" autocomplete="off">\n      <input type="text" name="q">\n      <button type="submit">Search</button>\n    </form>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `action` attribute defines the URL endpoint.",
+      "The `method` attribute specifies POST or GET.",
+      "POST secures sensitive data submissions.",
+      "GET attaches data to the URL visibly."
+    ]
   },
   "form-elements": {
     title: "HTML Form Elements",
-    description: "The <form> element can contain one or more of the following form elements.",
-    intro: "Form elements include `<input>`, `<label>`, `<select>`, `<textarea>`, `<button>`, `<fieldset>`, `<legend>`, `<datalist>`, `<output>`, `<option>`, and `<optgroup>`.",
+    description: "HTML form elements create different types of user inputs.",
+    intro: "HTML forms house various elements to capture specific data types. The `<select>` tag creates dropdown menus, while `<textarea>` allows multi-line text. The `<label>` tag attaches descriptive text to these inputs.",
+    syntax: {
+      language: "html",
+      code: `<!-- form elements -->\n<select name="cars">\n  <option value="volvo">Volvo</option>\n</select>`
+    },
     example: {
       language: "html",
-      code: `<select id="cars" name="cars">\n  <option value="volvo">Volvo</option>\n  <option value="saab">Saab</option>\n</select>`
-    }
+      code: `<!-- this uses form elements -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Form Elements</title>\n  </head>\n  <body>\n    <form>\n      <label for="bio">Bio:</label>\n      <textarea id="bio" name="bio"></textarea>\n    </form>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this uses form elements -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Form Elements</title>\n  </head>\n  <body>\n    <form>\n      <label for="bio">Bio:</label>\n      <textarea id="bio" name="bio"></textarea>\n    </form>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<label>` tag improves accessibility.",
+      "The `<textarea>` allows multi-line input.",
+      "The `<select>` creates dropdown menus.",
+      "The `<option>` defines dropdown choices."
+    ]
   },
   "input-types": {
     title: "HTML Input Types",
-    description: "The <input> element can be displayed in several ways, depending on the type attribute.",
-    intro: "Here are the different input types you can use in HTML: `<input type=\"button\">`, `<input type=\"checkbox\">`, `<input type=\"color\">`, `<input type=\"date\">`, `<input type=\"email\">`, `<input type=\"file\">`, `<input type=\"password\">`, `<input type=\"radio\">`, `<input type=\"text\">`, etc.",
+    description: "HTML input types change how the input field behaves.",
+    intro: "The HTML `<input>` element transforms based on its `type` attribute. A `password` type hides text, while an `email` type validates the format. Developers use these types to ensure correct data entry.",
+    syntax: {
+      language: "html",
+      code: `<!-- input types -->\n<input type="password" name="pass">\n<input type="date" name="day">`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this uses input types -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Input Types</title>\n  </head>\n  <body>\n    <form>\n      <input type="email" name="email" required>\n      <input type="checkbox" name="agree">\n    </form>\n  </body>\n</html>`
+    },
     tryItYourself: {
-      html: `<input type="color">\n<input type="date">\n<input type="range" min="1" max="100">`
-    }
+      html: `<!-- this uses input types -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Input Types</title>\n  </head>\n  <body>\n    <form>\n      <input type="email" name="email" required>\n      <input type="checkbox" name="agree">\n    </form>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `type` attribute changes input behavior.",
+      "The `email` type requires a valid address.",
+      "The `password` type masks typed characters.",
+      "The `radio` type limits to one selection."
+    ]
   },
   "input-attributes": {
     title: "HTML Input Attributes",
-    description: "Input elements can have many attributes that change their behavior.",
-    intro: "Common input attributes include `value`, `readonly`, `disabled`, `size`, `maxlength`, `min`, `max`, `multiple`, `pattern`, `placeholder`, `required`, `step`, and `autofocus`.",
+    description: "HTML input attributes enforce rules and add hints to fields.",
+    intro: "HTML input fields accept attributes that dictate how they behave. The `placeholder` attribute provides a hint inside an empty field. The `required` attribute stops the form from submitting until the field is filled.",
+    syntax: {
+      language: "html",
+      code: `<!-- input attributes -->\n<input type="text" placeholder="Name" required maxlength="10">`
+    },
     example: {
       language: "html",
-      code: `<input type="text" id="fname" name="fname" placeholder="First Name" required>`
-    }
+      code: `<!-- this applies input attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Input Attributes</title>\n  </head>\n  <body>\n    <form>\n      <input type="text" name="user" value="John" readonly>\n      <input type="number" min="1" max="5">\n    </form>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this applies input attributes -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Input Attributes</title>\n  </head>\n  <body>\n    <form>\n      <input type="text" name="user" value="John" readonly>\n      <input type="number" min="1" max="5">\n    </form>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "Attributes configure input restrictions.",
+      "The `placeholder` shows temporary hint text.",
+      "The `required` prevents empty submissions.",
+      "The `readonly` locks the input value."
+    ]
   },
   canvas: {
     title: "HTML Canvas",
-    description: "The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.",
-    intro: "The `<canvas>` element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.",
+    description: "HTML canvas draws dynamic graphics on a web page.",
+    intro: "HTML provides the `<canvas>` element as a blank container for graphics. Developers use JavaScript to draw shapes, lines, and text inside this container. It works well for interactive games and real-time animations.",
     syntax: {
       language: "html",
-      code: `<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">\n</canvas>`
-    }
+      code: `<!-- canvas syntax -->\n<canvas id="game" width="400" height="400"></canvas>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this creates a canvas -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Canvas</title>\n  </head>\n  <body>\n    <canvas id="board" width="200" height="100" style="border:1px solid black;"></canvas>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this creates a canvas -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Canvas</title>\n  </head>\n  <body>\n    <canvas id="board" width="200" height="100" style="border:1px solid black;"></canvas>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<canvas>` tag acts as a container.",
+      "JavaScript handles all the actual drawing.",
+      "Canvas renders pixels directly to the screen.",
+      "It supports 2D and 3D graphics."
+    ]
   },
   svg: {
     title: "HTML SVG",
-    description: "SVG stands for Scalable Vector Graphics.",
-    intro: "SVG is used to define graphics for the Web. SVG graphics do NOT lose any quality if they are zoomed or resized.",
+    description: "HTML SVG renders scalable vector graphics directly in the browser.",
+    intro: "HTML embeds SVG code to draw graphics using math rather than pixels. These images scale infinitely without losing quality. Developers use SVG for crisp logos, icons, and simple illustrations.",
+    syntax: {
+      language: "html",
+      code: `<!-- svg syntax -->\n<svg width="100" height="100">\n  <circle cx="50" cy="50" r="40" />\n</svg>`
+    },
     example: {
       language: "html",
-      code: `<svg width="100" height="100">\n  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />\n</svg>`
-    }
+      code: `<!-- this draws an SVG shape -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>SVG</title>\n  </head>\n  <body>\n    <svg width="100" height="100">\n      <rect width="100" height="100" fill="blue" />\n    </svg>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this draws an SVG shape -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>SVG</title>\n  </head>\n  <body>\n    <svg width="100" height="100">\n      <rect width="100" height="100" fill="blue" />\n    </svg>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "SVG uses math to draw crisp shapes.",
+      "Vectors never lose quality when zoomed.",
+      "The code lives directly inside the HTML file.",
+      "CSS and JavaScript can animate SVG parts."
+    ]
   },
   media: {
     title: "HTML Media",
-    description: "Multimedia on the web is sound, music, videos, movies, and animations.",
-    intro: "Web browsers have supported multimedia in many formats. Today, modern HTML uses the `<video>` and `<audio>` elements.",
+    description: "HTML media elements embed audio and video into web pages.",
+    intro: "Modern HTML supports rich media without external plugins. Developers embed video clips, songs, and background animations natively. Browsers support different file formats like MP4 and WebM.",
+    syntax: {
+      language: "html",
+      code: `<!-- NOTE: reference file does not cover media syntax template fully — placeholder used -->\n<video src="clip.mp4"></video>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this shows media options -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Media</title>\n  </head>\n  <body>\n    <h2>Multimedia</h2>\n    <p>We use video and audio tags for this.</p>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this shows media options -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Media</title>\n  </head>\n  <body>\n    <h2>Multimedia</h2>\n    <p>We use video and audio tags for this.</p>\n  </body>\n</html>`
+    },
     keyPoints: [
-      "The most common video formats are MP4, WebM, and Ogg.",
-      "The most common audio formats are MP3, WAV, and Ogg."
+      "HTML5 plays media without flash plugins.",
+      "MP4 dominates web video formats.",
+      "MP3 dominates web audio formats.",
+      "File sizes impact page loading speeds."
     ]
   },
   video: {
     title: "HTML Video",
-    description: "The HTML <video> element is used to show a video on a web page.",
-    intro: "The `<video>` element supports MP4, WebM, and Ogg. You can add controls so users can play, pause, and adjust volume.",
+    description: "HTML video tags embed playable movies onto the page.",
+    intro: "HTML uses the `<video>` element to play motion pictures. Developers can provide multiple source files to support different browsers. The `controls` attribute adds a play button and volume slider for the user.",
     syntax: {
       language: "html",
-      code: `<video width="320" height="240" controls>\n  <source src="movie.mp4" type="video/mp4">\n  Your browser does not support the video tag.\n</video>`
-    }
+      code: `<!-- video syntax -->\n<video controls>\n  <source src="vid.mp4" type="video/mp4">\n</video>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this embeds a video -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Video</title>\n  </head>\n  <body>\n    <video width="320" height="240" controls>\n      <source src="movie.mp4" type="video/mp4">\n    </video>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this embeds a video -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Video</title>\n  </head>\n  <body>\n    <video width="320" height="240" controls>\n      <source src="movie.mp4" type="video/mp4">\n    </video>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<video>` tag plays visual media natively.",
+      "The `controls` attribute enables user interaction.",
+      "The `autoplay` attribute starts playback immediately.",
+      "Multiple `<source>` tags ensure browser compatibility."
+    ]
   },
   audio: {
     title: "HTML Audio",
-    description: "The HTML <audio> element is used to play an audio file on a web page.",
-    intro: "The `<audio>` element supports MP3, WAV, and Ogg formats. It can be controlled with the `controls` attribute.",
+    description: "HTML audio tags embed playable sound files onto the page.",
+    intro: "HTML uses the `<audio>` element to play music or sound effects. Like video, developers provide source files and optional controls. Background music generally frustrates users, so manual controls are preferred.",
     syntax: {
       language: "html",
-      code: `<audio controls>\n  <source src="horse.ogg" type="audio/ogg">\n  <source src="horse.mp3" type="audio/mpeg">\n  Your browser does not support the audio element.\n</audio>`
-    }
+      code: `<!-- audio syntax -->\n<audio controls>\n  <source src="song.mp3" type="audio/mpeg">\n</audio>`
+    },
+    example: {
+      language: "html",
+      code: `<!-- this embeds audio -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Audio</title>\n  </head>\n  <body>\n    <audio controls>\n      <source src="music.mp3" type="audio/mpeg">\n    </audio>\n  </body>\n</html>`
+    },
+    tryItYourself: {
+      html: `<!-- this embeds audio -->\n<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Audio</title>\n  </head>\n  <body>\n    <audio controls>\n      <source src="music.mp3" type="audio/mpeg">\n    </audio>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "The `<audio>` tag plays sound natively.",
+      "The `controls` attribute adds a play button.",
+      "The `loop` attribute restarts the track automatically.",
+      "MP3 files offer the best cross-browser support."
+    ]
   }
 };
diff --git a/project/src/data/docs/javascript.ts b/project/src/data/docs/javascript.ts
index 816bddf..d2b1b76 100644
--- a/project/src/data/docs/javascript.ts
+++ b/project/src/data/docs/javascript.ts
@@ -3,404 +3,624 @@ import { TopicContent } from './contentMap';
 export const javascriptData: Record<string, TopicContent> = {
   introduction: {
     title: "JavaScript Introduction",
-    description: "JavaScript is the world's most popular programming language.",
-    intro: "JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced.",
+    description: "JavaScript makes static HTML pages interactive.",
+    intro: "JavaScript acts as the programming language of the web. It is the third layer of web design, following HTML and CSS. Developers use JavaScript to update content dynamically, control multimedia, and animate images.",
     keyPoints: [
-      "JavaScript can change HTML content.",
-      "JavaScript can change HTML attribute values.",
-      "JavaScript can change HTML styles (CSS).",
-      "JavaScript can hide HTML elements."
+      "JavaScript alters HTML content instantly.",
+      "JavaScript changes CSS styles without reloading.",
+      "JavaScript hides and shows elements.",
+      "JavaScript reacts to user clicks and inputs."
     ]
   },
   "where-to": {
     title: "JavaScript Where To",
-    description: "Where to place JavaScript in an HTML document.",
-    intro: "In HTML, JavaScript code is inserted between `<script>` and `</script>` tags. Scripts can be placed in the `<body>`, or in the `<head>` section of an HTML page, or in both.",
+    description: "JavaScript connects to HTML files using script tags.",
+    intro: "HTML uses the `<script>` tag to run JavaScript directly in the browser. Developers place these tags inside the `<head>` or at the very bottom of the `<body>`. Putting scripts at the bottom ensures the HTML loads fully before the code runs.",
     example: {
       language: "html",
-      code: `<body>\n  <h2>JavaScript in Body</h2>\n  <p id="demo"></p>\n  <script>\n    document.getElementById("demo").innerHTML = "My First JavaScript";\n  </script>\n</body>`
-    }
+      code: `<!-- this runs javascript -->\n<!DOCTYPE html>\n<html lang="en">\n  <body>\n    <p id="demo"></p>\n    <script>\n      document.getElementById("demo").innerHTML = "Hello!";\n    </script>\n  </body>\n</html>`
+    },
+    keyPoints: [
+      "JavaScript lives inside `<script>` tags.",
+      "Scripts can go in the `<head>` or `<body>`.",
+      "External files use the `src` attribute.",
+      "External files end with a `.js` extension."
+    ]
   },
   output: {
     title: "JavaScript Output",
-    description: "JavaScript can display data in different ways.",
-    intro: "JavaScript can \"display\" data in different ways: writing into an HTML element (using `innerHTML`), writing into the HTML output using `document.write()`, writing into an alert box using `window.alert()`, or writing into the browser console using `console.log()`.",
+    description: "JavaScript outputs data in four different ways.",
+    intro: "JavaScript does not have built-in print functions. Instead, developers output data by altering HTML elements, writing directly to the document, popping up alert boxes, or logging messages to the browser console.",
     syntax: {
       language: "javascript",
-      code: `console.log("Hello World");\nalert("Hello World");`
-    }
+      code: `/* output syntax */\nconsole.log("Hello World");\nalert("Hello World");`
+    },
+    keyPoints: [
+      "`innerHTML` writes into HTML elements.",
+      "`document.write()` writes to the HTML document.",
+      "`window.alert()` creates a pop-up box.",
+      "`console.log()` sends data to the developer tools."
+    ]
   },
   statements: {
     title: "JavaScript Statements",
-    description: "A computer program is a list of instructions to be executed by a computer.",
-    intro: "In a programming language, these programming instructions are called statements. A JavaScript program is a list of programming statements.",
+    description: "JavaScript statements give the computer direct instructions.",
+    intro: "A computer program consists of a list of instructions called statements. JavaScript executes these statements one by one in the exact order they are written. Each statement usually performs one specific action.",
     example: {
       language: "javascript",
-      code: `let x, y, z;  // Statement 1\nx = 5;        // Statement 2\ny = 6;        // Statement 3\nz = x + y;    // Statement 4`
-    }
+      code: `/* this runs four statements */\nlet x;\nx = 5;\nlet y = 6;\nlet z = x + y;`
+    },
+    keyPoints: [
+      "Statements form the program instructions.",
+      "Semicolons separate multiple statements.",
+      "JavaScript runs them sequentially.",
+      "Code blocks group multiple statements together."
+    ]
   },
   syntax: {
     title: "JavaScript Syntax",
-    description: "JavaScript syntax is the set of rules, how JavaScript programs are constructed.",
-    intro: "JavaScript syntax defines two types of values: Fixed values (Literals) and Variable values (Variables).",
+    description: "JavaScript syntax defines the rules for writing code.",
+    intro: "JavaScript syntax tells the computer how to read the program. The language defines fixed values known as literals and variable values known as variables. Developers must follow these exact rules, or the browser will throw errors.",
     keyPoints: [
-      "Numbers are written with or without decimals.",
-      "Strings are text, written within double or single quotes.",
-      "Variables are used to store data values.",
-      "JavaScript is case sensitive."
+      "Numbers do not require quotes.",
+      "Strings require single or double quotes.",
+      "Variable names are case-sensitive.",
+      "Hyphens are not allowed in names."
     ]
   },
   comments: {
     title: "JavaScript Comments",
-    description: "JavaScript comments can be used to explain JavaScript code, and to make it more readable.",
-    intro: "Single line comments start with `//`. Multi-line comments start with `/*` and end with `*/`.",
+    description: "JavaScript comments leave hidden notes inside the code.",
+    intro: "JavaScript comments explain code logic to other developers. The browser completely ignores these comments when executing the program. Developers use them to organize complex files or temporarily disable code while testing.",
     syntax: {
       language: "javascript",
-      code: `// Change heading:\ndocument.getElementById("myH").innerHTML = "My First Page";\n\n/*\nThe code below will change\nthe heading with id = "myH"\n*/\ndocument.getElementById("myH").innerHTML = "My First Page";`
-    }
+      code: `/* comment syntax */\n// Single line comment\n/* Multi-line \ncomment */`
+    },
+    keyPoints: [
+      "Two slashes \`//\` create a single-line comment.",
+      "A slash-asterisk \`/*\` starts a multi-line comment.",
+      "An asterisk-slash \`*/\` ends a multi-line comment.",
+      "Comments prevent code execution."
+    ]
   },
   variables: {
     title: "JavaScript Variables",
-    description: "Variables are containers for storing data values.",
-    intro: "In JavaScript, variables can be declared using `var`, `let`, or `const`. It is recommended to use `let` and `const` in modern JavaScript.",
+    description: "JavaScript variables store data values for later use.",
+    intro: "JavaScript uses variables as named containers to hold data. Developers declare these variables using specific keywords before assigning them a value. Modern JavaScript strongly encourages using `let` and `const` instead of the older `var` keyword.",
     example: {
       language: "javascript",
-      code: `let x = 5;\nlet y = 6;\nlet z = x + y;`
-    }
+      code: `/* this creates variables */\nlet score = 100;\nconst playerName = "John";\nlet isWinner = true;`
+    },
+    keyPoints: [
+      "Variables store reusable data.",
+      "The \`let\` keyword creates changeable variables.",
+      "The \`const\` keyword creates unchangeable variables.",
+      "The \`var\` keyword is an older way to declare variables."
+    ]
   },
   let: {
     title: "JavaScript Let",
-    description: "The let keyword was introduced in ES6 (2015).",
-    intro: "Variables defined with `let` cannot be Redeclared. Variables defined with `let` must be Declared before use. Variables defined with `let` have Block Scope.",
+    description: "The let keyword declares block-scoped variables that can change.",
+    intro: "JavaScript introduced `let` in 2015 to solve problems with older variable types. Variables declared with `let` only exist inside the specific block of code where they were created. Developers can update their values later.",
     example: {
       language: "javascript",
-      code: `{
-  let x = 2;
-}
-// x can NOT be used here`
-    }
+      code: `/* this uses let */\nlet points = 50;\npoints = 100; // Value changed successfully`
+    },
+    keyPoints: [
+      "\`let\` variables cannot be redeclared.",
+      "\`let\` variables can be reassigned.",
+      "\`let\` variables have block scope.",
+      "\`let\` prevents accidental global variables."
+    ]
   },
   const: {
     title: "JavaScript Const",
-    description: "The const keyword was introduced in ES6 (2015).",
-    intro: "Variables defined with `const` cannot be Redeclared. Variables defined with `const` cannot be Reassigned. Variables defined with `const` have Block Scope.",
+    description: "The const keyword declares variables that never change.",
+    intro: "JavaScript uses `const` for values that must remain exactly the same throughout the entire program. Developers use this for configuration values, arrays, and objects. You must assign a value immediately when declaring a `const`.",
     keyPoints: [
-      "Always declare a variable with const when you know that the value should not be changed.",
-      "Use const when you declare a new Array, Object, Function, or RegExp."
+      "\`const\` variables cannot be redeclared.",
+      "\`const\` variables cannot be reassigned.",
+      "\`const\` requires a starting value.",
+      "Changing properties inside a \`const\` object is allowed."
     ]
   },
   operators: {
     title: "JavaScript Operators",
-    description: "JavaScript operators are used to perform different types of mathematical and logical computations.",
-    intro: "JavaScript operators include Arithmetic Operators, Assignment Operators, Comparison Operators, String Operators, Logical Operators, Bitwise Operators, Ternary Operators, and Type Operators.",
+    description: "JavaScript operators perform mathematical and logical tasks.",
+    intro: "JavaScript uses different operators to assign values, compare data, and perform math. Developers combine variables and operators to create complex logic and calculations. The language supports many different operator types.",
     example: {
       language: "javascript",
-      code: `let x = 5;\nlet y = 2;\nlet z = x * y; // z will be 10`
-    }
+      code: `/* this uses operators */\nlet x = 5;\nlet y = 2;\nlet total = (x * y) + 10;`
+    },
+    keyPoints: [
+      "Arithmetic operators perform math.",
+      "Assignment operators update variable values.",
+      "Comparison operators check if values match.",
+      "Logical operators combine multiple conditions."
+    ]
   },
   arithmetic: {
     title: "JavaScript Arithmetic",
-    description: "Arithmetic operators perform arithmetic on numbers (literals or variables).",
-    intro: "Common arithmetic operators are `+` (addition), `-` (subtraction), `*` (multiplication), `/` (division), `%` (modulus/remainder), `**` (exponentiation), `++` (increment), and `--` (decrement).",
+    description: "JavaScript arithmetic operators perform math on numbers.",
+    intro: "JavaScript acts as a calculator directly in the browser. Developers use arithmetic operators to add scores, calculate discounts, or determine screen coordinates. These operators work exactly like standard algebra.",
     example: {
       language: "javascript",
-      code: `let x = 100 + 50;\nlet y = x * 2;`
-    }
+      code: `/* this calculates a value */\nlet price = 100;\nlet tax = 5;\nlet total = price + tax;`
+    },
+    keyPoints: [
+      "The \`+\` operator adds numbers together.",
+      "The \`-\` operator subtracts one number from another.",
+      "The \`*\` operator multiplies numbers.",
+      "The \`/\` operator divides numbers."
+    ]
   },
   assignment: {
     title: "JavaScript Assignment",
-    description: "Assignment operators assign values to JavaScript variables.",
-    intro: "The simple assignment operator (`=`) assigns a value to a variable. The addition assignment operator (`+=`) adds a value to a variable.",
-    referenceTable: {
-      headers: ["Operator", "Example", "Same As"],
-      rows: [
-        ["=", "x = y", "x = y"],
-        ["+=", "x += y", "x = x + y"],
-        ["-=", "x -= y", "x = x - y"],
-        ["*=", "x *= y", "x = x * y"]
-      ]
-    }
+    description: "JavaScript assignment operators save values into variables.",
+    intro: "JavaScript uses assignment operators to store data inside a variable. The most common assignment operator is the equals sign, but JavaScript provides shortcuts to perform math and assignment simultaneously.",
+    example: {
+      language: "javascript",
+      code: `/* this assigns and updates values */\nlet score = 10;\nscore += 5; // score is now 15\nscore -= 2; // score is now 13`
+    },
+    keyPoints: [
+      "The \`=\` operator assigns the exact right-side value.",
+      "The \`+=\` operator adds a value to the current variable.",
+      "The \`-=\` operator subtracts a value from the current variable.",
+      "Assignment always reads from right to left."
+    ]
   },
   "data-types": {
     title: "JavaScript Data Types",
-    description: "JavaScript variables can hold many data types.",
-    intro: "JavaScript has 8 Datatypes: String, Number, Bigint, Boolean, Undefined, Null, Symbol, Object.",
-    keyPoints: [
-      "The Object Datatype can contain: An object, An array, A date."
-    ],
+    description: "JavaScript variables hold different types of data formats.",
+    intro: "JavaScript categorizes data into different types so the computer knows how to handle it. You can do math with Number types, but you cannot do math with String types. JavaScript figures out the data type automatically based on the value.",
     example: {
       language: "javascript",
-      code: `let length = 16;                               // Number\nlet lastName = "Johnson";                      // String\nlet x = {firstName:"John", lastName:"Doe"};    // Object`
-    }
+      code: `/* this shows different data types */\nlet age = 25; // Number\nlet name = "Alice"; // String\nlet isReady = true; // Boolean`
+    },
+    keyPoints: [
+      "String types hold text inside quotes.",
+      "Number types hold integers or decimals.",
+      "Boolean types hold true or false values.",
+      "Object types hold complex data structures."
+    ]
   },
   functions: {
     title: "JavaScript Functions",
-    description: "A JavaScript function is a block of code designed to perform a particular task.",
-    intro: "A JavaScript function is executed when \"something\" invokes it (calls it).",
+    description: "JavaScript functions bundle reusable blocks of code.",
+    intro: "JavaScript functions store instructions that you want to use multiple times. Instead of copying and pasting the same ten lines of code, developers wrap them inside a function and call its name whenever needed.",
     syntax: {
       language: "javascript",
-      code: `function name(parameter1, parameter2, parameter3) {\n  // code to be executed\n}`
+      code: `/* function syntax */\nfunction myFunc(param) {\n  // Code runs here\n}`
     },
     example: {
       language: "javascript",
-      code: `function myFunction(p1, p2) {\n  return p1 * p2;   // The function returns the product of p1 and p2\n}\n\nlet result = myFunction(4, 3); // result will be 12`
-    }
+      code: `/* this creates a function */\nfunction multiply(a, b) {\n  return a * b;\n}\n\nlet result = multiply(4, 3);`
+    },
+    keyPoints: [
+      "The \`function\` keyword creates the block.",
+      "Parentheses hold incoming variables called parameters.",
+      "Curly braces contain the actual code to execute.",
+      "The \`return\` keyword sends data back."
+    ]
   },
   objects: {
     title: "JavaScript Objects",
-    description: "Objects are variables too. But objects can contain many values.",
-    intro: "You define (and create) a JavaScript object with an object literal.",
+    description: "JavaScript objects group related data into a single structure.",
+    intro: "JavaScript objects store multiple values together like a digital filing cabinet. Instead of making separate variables for a car's color, weight, and model, developers create one car object that holds all those details.",
     example: {
       language: "javascript",
-      code: `const car = {type:"Fiat", model:"500", color:"white"};\n\n// Accessing object properties\nconsole.log(car.type);\nconsole.log(car["model"]);`
-    }
+      code: `/* this creates an object */\nconst car = {\n  type: "Fiat",\n  model: "500",\n  color: "white"\n};\n\nlet carColor = car.color;`
+    },
+    keyPoints: [
+      "Objects use curly braces to hold data.",
+      "Data lives in name-value pairs called properties.",
+      "A colon separates the name from the value.",
+      "A dot or brackets access the object properties."
+    ]
   },
   events: {
     title: "JavaScript Events",
-    description: "HTML events are \"things\" that happen to HTML elements.",
-    intro: "When JavaScript is used in HTML pages, JavaScript can \"react\" on these events. Here are some examples of HTML events: an HTML web page has finished loading, an HTML input field was changed, an HTML button was clicked.",
+    description: "JavaScript events trigger code when users interact with the page.",
+    intro: "JavaScript listens for specific actions happening on the HTML page. Developers write code that waits for a user to click a button, type in an input field, or scroll down the page, and then reacts instantly.",
     example: {
       language: "html",
-      code: `<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>\n<p id="demo"></p>`
-    }
+      code: `/* this triggers an event */\n<button onclick="alert('Clicked!')">Click Me</button>`
+    },
+    keyPoints: [
+      "Events detect user interaction.",
+      "The \`onclick\` event triggers when the user clicks an element.",
+      "The \`onmouseover\` event triggers when the mouse hovers over.",
+      "The \`onkeydown\` event triggers when typing."
+    ]
   },
   strings: {
     title: "JavaScript Strings",
-    description: "JavaScript strings are for storing and manipulating text.",
-    intro: "A JavaScript string is zero or more characters written inside quotes. You can use single or double quotes.",
+    description: "JavaScript strings store and manipulate text data.",
+    intro: "JavaScript uses strings to hold text like names, paragraphs, or passwords. Strings always sit inside quotes so the computer doesn't confuse them with code commands. You can measure, cut, or combine strings easily.",
     syntax: {
       language: "javascript",
-      code: `let text = "John Doe";\nlet carName1 = "Volvo XC60";  // Double quotes\nlet carName2 = 'Volvo XC60';  // Single quotes`
-    }
+      code: `/* string syntax */\nlet name = "John";\nlet greeting = 'Hello';`
+    },
+    keyPoints: [
+      "Strings require single or double quotes.",
+      "The \`length\` property counts the characters.",
+      "Backslashes escape special characters inside strings.",
+      "Template literals use backticks to inject variables."
+    ]
   },
   "string-methods": {
     title: "JavaScript String Methods",
-    description: "String methods help you to work with strings.",
-    intro: "Common string methods include `length`, `slice()`, `substring()`, `substr()`, `replace()`, `replaceAll()`, `toUpperCase()`, `toLowerCase()`, `concat()`, `trim()`, `trimStart()`, `trimEnd()`, `padStart()`, `padEnd()`, `charAt()`, `charCodeAt()`, `split()`.",
+    description: "JavaScript string methods alter text automatically.",
+    intro: "JavaScript provides built-in tools called methods to manipulate strings. Developers use these methods to change text to uppercase, replace specific words, or extract a small section of a larger paragraph.",
     example: {
       language: "javascript",
-      code: `let text = "Apple, Banana, Kiwi";\nlet part = text.slice(7, 13); // part will be "Banana"`
-    }
+      code: `/* this uses string methods */\nlet text = "Apple, Banana";\nlet part = text.slice(7, 13); // part is "Banana"\nlet loud = text.toUpperCase();`
+    },
+    keyPoints: [
+      "The \`toUpperCase()\` method capitalizes every letter.",
+      "The \`slice()\` method extracts a section of text.",
+      "The \`replace()\` method swaps one word for another.",
+      "The \`trim()\` method removes extra spaces at the ends."
+    ]
   },
   arrays: {
     title: "JavaScript Arrays",
-    description: "JavaScript arrays are used to store multiple values in a single variable.",
-    intro: "It is a common practice to declare arrays with the `const` keyword.",
+    description: "JavaScript arrays store multiple values inside a single variable.",
+    intro: "JavaScript uses arrays to hold lists of data, like a shopping list or a catalog of products. Instead of creating ten different variables for ten cars, developers put all ten cars inside one array.",
     example: {
       language: "javascript",
-      code: `const cars = ["Saab", "Volvo", "BMW"];\nlet car = cars[0]; // Accessing the first element`
-    }
+      code: `/* this creates an array */\nconst cars = ["Saab", "Volvo", "BMW"];\nlet firstCar = cars[0];`
+    },
+    keyPoints: [
+      "Arrays use square brackets to hold data.",
+      "Commas separate each item in the array.",
+      "The first item sits at index 0.",
+      "Developers typically declare arrays with \`const\`."
+    ]
   },
   "array-methods": {
     title: "JavaScript Array Methods",
-    description: "Array methods help you to work with arrays.",
-    intro: "Common array methods include `length`, `toString()`, `pop()`, `push()`, `shift()`, `unshift()`, `join()`, `delete`, `concat()`, `flat()`, `splice()`, and `slice()`.",
+    description: "JavaScript array methods manipulate items inside an array.",
+    intro: "JavaScript provides built-in tools called methods to manage array data. Developers use these methods to add new items to the end of a list, remove the first item, or sort everything alphabetically.",
     example: {
       language: "javascript",
-      code: `const fruits = ["Banana", "Orange", "Apple", "Mango"];\nfruits.push("Kiwi"); // Adds a new element ("Kiwi") to fruits`
-    }
+      code: `/* this uses array methods */\nconst fruits = ["Banana", "Orange"];\nfruits.push("Apple"); // Adds Apple to the end\nfruits.pop(); // Removes Apple`
+    },
+    keyPoints: [
+      "The \`push()\` method adds items to the end.",
+      "The \`pop()\` method removes the last item.",
+      "The \`length\` property counts the total items.",
+      "The \`join()\` method converts the array into a string."
+    ]
   },
   conditions: {
-    title: "JavaScript if...else",
-    description: "Conditional statements are used to perform different actions based on different conditions.",
-    intro: "In JavaScript we have the following conditional statements: `if` to specify a block of code to be executed, if a specified condition is true, `else` to specify a block of code to be executed, if the same condition is false, `else if` to specify a new condition to test, if the first condition is false, `switch` to specify many alternative blocks of code to be executed.",
+    title: "JavaScript If...Else",
+    description: "JavaScript if statements run code only when conditions are true.",
+    intro: "JavaScript uses conditional statements to make decisions. Developers tell the computer to check a condition, like if a user is logged in. If true, the code shows the dashboard; if false, it shows the login screen.",
     example: {
       language: "javascript",
-      code: `if (time < 10) {\n  greeting = "Good morning";\n} else if (time < 20) {\n  greeting = "Good day";\n} else {\n  greeting = "Good evening";\n}`
-    }
+      code: `/* this checks a condition */\nif (score > 50) {\n  result = "You pass!";\n} else {\n  result = "You fail.";\n}`
+    },
+    keyPoints: [
+      "The \`if\` block runs when the condition is true.",
+      "The \`else\` block runs when the condition is false.",
+      "The \`else if\` block tests a new condition.",
+      "Conditions go inside parentheses."
+    ]
   },
   switch: {
     title: "JavaScript Switch",
-    description: "The switch statement is used to perform different actions based on different conditions.",
-    intro: "Use the `switch` statement to select one of many code blocks to be executed.",
+    description: "JavaScript switch statements check a value against many cases.",
+    intro: "JavaScript uses the switch statement as a cleaner alternative to writing many `if...else` statements. Developers pass a single value into the switch, and the computer jumps directly to the matching case.",
     example: {
       language: "javascript",
-      code: `switch(new Date().getDay()) {\n  case 6:\n    text = "Today is Saturday";\n    break;\n  case 0:\n    text = "Today is Sunday";\n    break;\n  default:\n    text = "Looking forward to the Weekend";\n}`
-    }
+      code: `/* this uses a switch */\nswitch(day) {\n  case 1:\n    text = "Monday";\n    break;\n  case 2:\n    text = "Tuesday";\n    break;\n}`
+    },
+    keyPoints: [
+      "The \`switch\` statement evaluates one expression.",
+      "The \`case\` keyword defines a possible match.",
+      "The \`break\` keyword stops the switch from running further.",
+      "The \`default\` keyword runs if no cases match."
+    ]
   },
   "for-loop": {
     title: "JavaScript For Loop",
-    description: "Loops can execute a block of code a number of times.",
-    intro: "The `for` statement creates a loop with 3 optional expressions: Statement 1 is executed (one time) before the execution of the code block. Statement 2 defines the condition for executing the code block. Statement 3 is executed (every time) after the code block has been executed.",
+    description: "JavaScript for loops repeat a block of code a specific number of times.",
+    intro: "JavaScript uses loops to run the same code over and over again without copying and pasting. The `for` loop is perfect when developers know exactly how many times the code needs to run.",
     example: {
       language: "javascript",
-      code: `for (let i = 0; i < 5; i++) {\n  text += "The number is " + i + "<br>";\n}`
-    }
+      code: `/* this loops 5 times */\nfor (let i = 0; i < 5; i++) {\n  console.log("Number: " + i);\n}`
+    },
+    keyPoints: [
+      "Statement 1 runs once before the loop starts.",
+      "Statement 2 defines the condition to keep looping.",
+      "Statement 3 runs at the end of every loop.",
+      "Loops are commonly used to read through arrays."
+    ]
   },
   "while-loop": {
     title: "JavaScript While Loop",
-    description: "The while loop loops through a block of code as long as a specified condition is true.",
-    intro: "The `while` loop loops through a block of code as long as a specified condition is true.",
+    description: "JavaScript while loops repeat code as long as a condition remains true.",
+    intro: "JavaScript uses the `while` loop when developers don't know exactly how many times the loop should run. It simply checks a condition, runs the code, and checks the condition again.",
     example: {
       language: "javascript",
-      code: `let i = 0;\nwhile (i < 10) {\n  text += "The number is " + i;\n  i++;\n}`
-    }
+      code: `/* this loops until i is 10 */\nlet i = 0;\nwhile (i < 10) {\n  console.log(i);\n  i++;\n}`
+    },
+    keyPoints: [
+      "The loop runs continuously while the condition is true.",
+      "The loop stops instantly when the condition becomes false.",
+      "You must update the condition inside the loop.",
+      "Forgetting to update the condition causes an infinite loop."
+    ]
   },
   break: {
-    title: "JavaScript Break and Continue",
-    description: "The break statement \"jumps out\" of a loop.",
-    intro: "The `break` statement jumps out of a loop. The `continue` statement jumps over one iteration in the loop.",
+    title: "JavaScript Break",
+    description: "JavaScript break statements jump out of a loop early.",
+    intro: "JavaScript uses the `break` statement to stop a loop immediately, even if the condition is still true. Developers use this when searching for a specific item; once they find it, there is no need to keep searching.",
     example: {
       language: "javascript",
-      code: `for (let i = 0; i < 10; i++) {\n  if (i === 3) { break; }\n  text += "The number is " + i + "<br>";\n}`
-    }
+      code: `/* this stops the loop at 3 */\nfor (let i = 0; i < 10; i++) {\n  if (i === 3) { break; }\n  console.log(i);\n}`
+    },
+    keyPoints: [
+      "The \`break\` statement kills the loop entirely.",
+      "The \`continue\` statement skips only the current iteration.",
+      "Switch statements also rely on \`break\`.",
+      "Using \`break\` makes code run faster by stopping unnecessary work."
+    ]
   },
   "type-conversion": {
     title: "JavaScript Type Conversion",
-    description: "JavaScript variables can be converted to a new variable and another data type.",
-    intro: "JavaScript variables can be converted to a new variable and another data type by the use of a JavaScript function or automatically by JavaScript itself.",
+    description: "JavaScript type conversion changes data from one format to another.",
+    intro: "JavaScript often needs to convert data types to perform calculations. If a user types the number \"5\" into a text box, JavaScript sees it as a string. Developers must convert it to a real number before doing math.",
     example: {
       language: "javascript",
-      code: `Number("3.14")    // Returns 3.14\nString(123)       // Returns "123"\nString(100 + 23)  // Returns "123"`
-    }
+      code: `/* this converts data types */\nlet str = "3.14";\nlet num = Number(str);\nlet backToStr = String(num);`
+    },
+    keyPoints: [
+      "The \`Number()\` function converts strings to numbers.",
+      "The \`String()\` function converts numbers to strings.",
+      "JavaScript sometimes converts types automatically.",
+      "Automatic conversion can lead to unexpected bugs."
+    ]
   },
   typeof: {
     title: "JavaScript typeof",
-    description: "You can use the typeof operator to find the data type of a JavaScript variable.",
-    intro: "In JavaScript there are 5 different data types that can contain values: string, number, boolean, object, function. There are 6 types of objects: Object, Date, Array, String, Number, Boolean. And 2 data types that cannot contain values: null, undefined.",
+    description: "JavaScript typeof identifies the data type of a variable.",
+    intro: "JavaScript uses the `typeof` operator to figure out what kind of data a variable holds. Because JavaScript variables can hold anything, developers use this tool to check the data type before running specific functions.",
     example: {
       language: "javascript",
-      code: `typeof "John"         // Returns "string"\ntypeof 3.14           // Returns "number"\ntypeof false          // Returns "boolean"\ntypeof {name:'John'}  // Returns "object"`
-    }
+      code: `/* this checks data types */\ntypeof "John"; // Returns "string"\ntypeof 3.14; // Returns "number"\ntypeof true; // Returns "boolean"`
+    },
+    keyPoints: [
+      "\`typeof\` returns the data type as a lowercase string.",
+      "It identifies strings, numbers, booleans, and objects.",
+      "Arrays return as \"object\" because they are a special object type.",
+      "Undefined variables return as \"undefined\"."
+    ]
   },
   scope: {
     title: "JavaScript Scope",
-    description: "Scope determines the accessibility (visibility) of variables.",
-    intro: "JavaScript has 3 types of scope: Block scope, Function scope, and Global scope.",
+    description: "JavaScript scope controls where variables can be accessed.",
+    intro: "JavaScript uses scope to secure variables and prevent naming conflicts. If you create a variable inside a function, nothing outside that function can see or use it. This allows developers to use the same variable names in different places safely.",
+    example: {
+      language: "javascript",
+      code: `/* this demonstrates scope */\nfunction myScope() {\n  let localScore = 50;\n  console.log(localScore); // Works\n}\n// console.log(localScore); // Error!`
+    },
     keyPoints: [
-      "Variables declared inside a { } block cannot be accessed from outside the block.",
-      "Variables defined inside a function are not accessible (visible) from outside the function."
+      "Global scope variables are visible everywhere.",
+      "Function scope variables are hidden outside the function.",
+      "Block scope (\`let\` and \`const\`) hides variables outside curly braces.",
+      "Variables declared without keywords become global automatically."
     ]
   },
   hoisting: {
     title: "JavaScript Hoisting",
-    description: "Hoisting is JavaScript's default behavior of moving declarations to the top.",
-    intro: "In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.",
+    description: "JavaScript hoisting moves variable and function declarations to the top.",
+    intro: "JavaScript secretly moves all variable and function declarations to the very top of the script before running the code. Because of this strange behavior, developers can call a function on line 1 even if the function isn't written until line 50.",
+    example: {
+      language: "javascript",
+      code: `/* this shows hoisting */\nx = 5;\nconsole.log(x);\nvar x; // Declaration is hoisted`
+    },
     keyPoints: [
-      "JavaScript only hoists declarations, not initializations.",
-      "Variables defined with `let` and `const` are hoisted to the top of the block, but not initialized. Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared."
+      "Hoisting moves declarations, not assignments.",
+      "\`var\` declarations hoist and initialize as undefined.",
+      "\`let\` and \`const\` declarations hoist but do not initialize.",
+      "Calling functions before they are written works perfectly."
     ]
   },
   closures: {
     title: "JavaScript Closures",
-    description: "JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures.",
-    intro: "A closure is a function having access to the parent scope, even after the parent function has closed.",
+    description: "JavaScript closures allow functions to remember their outer variables.",
+    intro: "JavaScript closures happen when a function inside another function remembers the variables from its parent. Even after the parent function finishes running, the inner function still has access to those original variables. Developers use this to create private data.",
     example: {
       language: "javascript",
-      code: `const add = (function () {\n  let counter = 0;\n  return function () {counter += 1; return counter}\n})();\n\nadd();\nadd();\nadd();\n// the counter is now 3`
-    }
+      code: `/* this creates a closure */\nfunction makeCounter() {\n  let count = 0;\n  return function() {\n    count++;\n    return count;\n  }\n}\nlet counter = makeCounter();`
+    },
+    keyPoints: [
+      "Closures remember variables from parent functions.",
+      "They allow for data privacy and encapsulation.",
+      "They are created automatically when functions are nested.",
+      "Memory leaks can occur if closures are misused."
+    ]
   },
   callbacks: {
     title: "JavaScript Callbacks",
-    description: "A callback is a function passed as an argument to another function.",
-    intro: "This technique allows a function to call another function. A callback function can run after another function has finished.",
+    description: "JavaScript callbacks pass functions into other functions as arguments.",
+    intro: "JavaScript functions act like regular data, meaning you can pass one function into another. The receiving function will run the callback function later. Developers use this for actions that take time, like waiting for a file to load.",
     example: {
       language: "javascript",
-      code: `setTimeout(myFunction, 3000);\n\nfunction myFunction() {\n  document.getElementById("demo").innerHTML = "I love You !!";\n}`
-    }
+      code: `/* this uses a callback */\nfunction sayHello() {\n  console.log("Hello!");\n}\n\nsetTimeout(sayHello, 3000); // Runs after 3 seconds`
+    },
+    keyPoints: [
+      "A callback is a function passed as an argument.",
+      "Callbacks control the execution order of asynchronous code.",
+      "Using too many nested callbacks creates \"callback hell\".",
+      "Modern JavaScript prefers Promises over callbacks."
+    ]
   },
   promises: {
     title: "JavaScript Promises",
-    description: "A Promise is a JavaScript object that links producing code and consuming code.",
-    intro: "A JavaScript Promise object contains both the producing code and calls to the consuming code.",
+    description: "JavaScript promises handle asynchronous operations gracefully.",
+    intro: "JavaScript promises act like real-life promises. The code says \"I promise to get this data,\" and while it fetches the data in the background, the rest of the program keeps running. The promise eventually finishes and returns either the data or an error.",
     example: {
       language: "javascript",
-      code: `let myPromise = new Promise(function(myResolve, myReject) {\n// "Producing Code" (May take some time)\n\n  myResolve(); // when successful\n  myReject();  // when error\n});\n\n// "Consuming Code" (Must wait for a fulfilled Promise)\nmyPromise.then(\n  function(value) { /* code if successful */ },\n  function(error) { /* code if some error */ }\n);`
-    }
+      code: `/* this creates a promise */\nlet myPromise = new Promise(function(resolve, reject) {\n  resolve("Data fetched!");\n});\n\nmyPromise.then(result => console.log(result));`
+    },
+    keyPoints: [
+      "A promise has three states: pending, fulfilled, or rejected.",
+      "The \`then()\` method handles successful results.",
+      "The \`catch()\` method handles errors and failures.",
+      "Promises solve the callback hell problem."
+    ]
   },
   "async-await": {
     title: "JavaScript Async/Await",
-    description: "Async and Await make promises easier to write.",
-    intro: "The keyword `async` before a function makes the function return a promise. The keyword `await` before a function makes the function wait for a promise.",
+    description: "JavaScript async/await makes promises easier to read and write.",
+    intro: "JavaScript added `async` and `await` to make asynchronous code look exactly like normal, synchronous code. Instead of chaining multiple `.then()` methods together, developers simply tell the code to pause and wait for the promise to finish.",
     example: {
       language: "javascript",
-      code: `async function myDisplay() {\n  let myPromise = new Promise(function(resolve, reject) {\n    resolve("I love You !!");\n  });\n  document.getElementById("demo").innerHTML = await myPromise;\n}`
-    }
+      code: `/* this uses async/await */\nasync function getData() {\n  let response = await fetch("data.json");\n  let data = await response.json();\n  console.log(data);\n}`
+    },
+    keyPoints: [
+      "The \`async\` keyword turns a function into a promise.",
+      "The \`await\` keyword pauses execution until the promise finishes.",
+      "You can only use \`await\` inside an \`async\` function.",
+      "It provides much cleaner error handling using \`try/catch\`."
+    ]
   },
   dom: {
     title: "JavaScript HTML DOM",
-    description: "With the HTML DOM, JavaScript can access and change all the elements of an HTML document.",
-    intro: "When a web page is loaded, the browser creates a Document Object Model of the page. The HTML DOM model is constructed as a tree of Objects.",
+    description: "JavaScript HTML DOM represents the page as a structured tree.",
+    intro: "The Document Object Model (DOM) is an exact structural copy of the HTML page that the browser builds when the page loads. JavaScript uses this map to find elements, change text, and update CSS styles dynamically.",
     keyPoints: [
-      "JavaScript can change all the HTML elements in the page.",
-      "JavaScript can change all the HTML attributes in the page.",
-      "JavaScript can change all the CSS styles in the page."
+      "The DOM represents HTML as a tree of objects.",
+      "JavaScript uses the DOM to manipulate the live page.",
+      "The \`document\` object represents the entire HTML page.",
+      "Changing the DOM updates the user's screen instantly."
     ]
   },
   "dom-methods": {
     title: "JavaScript HTML DOM Methods",
-    description: "HTML DOM methods are actions you can perform (on HTML Elements).",
-    intro: "HTML DOM properties are values (of HTML Elements) that you can set or change. The most common way to access an HTML element is to use the id of the element.",
+    description: "JavaScript DOM methods target and manipulate HTML elements.",
+    intro: "JavaScript provides built-in methods to interact with the DOM tree. Developers use these methods to grab specific HTML tags by their ID or class name, and then change their content or styling without needing to reload the page.",
     example: {
       language: "javascript",
-      code: `document.getElementById("demo").innerHTML = "Hello World!";`
-    }
+      code: `/* this uses DOM methods */\nlet title = document.getElementById("header");\ntitle.innerHTML = "New Welcome Message";\ntitle.style.color = "blue";`
+    },
+    keyPoints: [
+      "\`getElementById()\` finds a single unique element.",
+      "\`querySelector()\` finds elements using CSS selectors.",
+      "The \`innerHTML\` property changes the HTML content inside.",
+      "The \`style\` property applies inline CSS changes."
+    ]
   },
   "dom-events": {
     title: "JavaScript HTML DOM Events",
-    description: "HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document.",
-    intro: "Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).",
+    description: "JavaScript DOM events trigger code when users interact with the DOM.",
+    intro: "JavaScript attaches event listeners directly to the DOM elements. Instead of using `onclick` in the HTML file, developers use JavaScript to listen for clicks behind the scenes. This keeps the HTML file clean and strictly focused on structure.",
     example: {
       language: "javascript",
-      code: `document.getElementById("myBtn").onclick = displayDate;`
-    }
+      code: `/* this attaches an event listener */\nlet btn = document.getElementById("myBtn");\nbtn.addEventListener("click", function() {\n  alert("Button was clicked!");\n});`
+    },
+    keyPoints: [
+      "\`addEventListener()\` attaches an event to an element.",
+      "You can attach multiple events to the same element.",
+      "It keeps JavaScript completely separate from HTML.",
+      "\`removeEventListener()\` removes the event listener later."
+    ]
   },
   "fetch-api": {
     title: "JavaScript Fetch API",
-    description: "The Fetch API interface allows web browser to make HTTP requests to web servers.",
-    intro: "No need for XMLHttpRequest anymore. The Fetch API is Promise-based.",
+    description: "JavaScript Fetch API requests data from a web server.",
+    intro: "JavaScript uses the Fetch API to ask a server for data behind the scenes. Without reloading the page, developers can pull in fresh weather data, stock prices, or new social media posts. The Fetch API relies entirely on Promises.",
     example: {
       language: "javascript",
-      code: `let file = "fetch_info.txt";\nfetch (file)\n.then(x => x.text())\n.then(y => document.getElementById("demo").innerHTML = y);`
-    }
+      code: `/* this fetches data */\nfetch("https://api.example.com/data")\n  .then(response => response.json())\n  .then(data => console.log(data));`
+    },
+    keyPoints: [
+      "The \`fetch()\` function starts the network request.",
+      "It returns a Promise that resolves to a Response object.",
+      "You must convert the response to JSON or text.",
+      "Fetch replaces the older \`XMLHttpRequest\` method."
+    ]
   },
   json: {
     title: "JavaScript JSON",
-    description: "JSON is a format for storing and transporting data.",
-    intro: "JSON stands for JavaScript Object Notation. It is often used when data is sent from a server to a web page.",
+    description: "JSON securely transports text data across the internet.",
+    intro: "JSON stands for JavaScript Object Notation. It looks exactly like a JavaScript object, but it is just plain text. Because it is plain text, any programming language can read it, making it the perfect format for sending data between a server and a web page.",
     example: {
       language: "javascript",
-      code: `let text = '{ "employees" : [' +\n'{ "firstName":"John" , "lastName":"Doe" },' +\n'{ "firstName":"Anna" , "lastName":"Smith" },' +\n'{ "firstName":"Peter" , "lastName":"Jones" } ]}';\n\nconst obj = JSON.parse(text);`
-    }
+      code: `/* this parses JSON */\nlet jsonText = '{"name":"John", "age":30}';\nlet userObj = JSON.parse(jsonText);\nconsole.log(userObj.name);`
+    },
+    keyPoints: [
+      "\`JSON.parse()\` converts a JSON string into a JavaScript object.",
+      "\`JSON.stringify()\` converts a JavaScript object into a JSON string.",
+      "JSON data requires double quotes around names and values.",
+      "It cannot store functions or date objects directly."
+    ]
   },
   "error-handling": {
-    title: "JavaScript Errors",
-    description: "Throw, and Try...Catch...Finally",
-    intro: "The `try` statement defines a code block to run (to try). The `catch` statement defines a code block to handle any error. The `finally` statement defines a code block to run regardless of the result. The `throw` statement defines a custom error.",
+    title: "JavaScript Error Handling",
+    description: "JavaScript error handling prevents broken code from crashing the app.",
+    intro: "JavaScript programs stop working completely if they hit an error. Developers use `try/catch` blocks to gracefully handle these errors. Instead of crashing, the code catches the mistake and runs a backup plan.",
     example: {
       language: "javascript",
-      code: `try {\n  Block of code to try\n}\ncatch(err) {\n  Block of code to handle errors\n}`
-    }
+      code: `/* this handles errors */\ntry {\n  fakeFunction();\n} catch (err) {\n  console.log("An error happened: " + err.message);\n} finally {\n  console.log("This runs no matter what.");\n}`
+    },
+    keyPoints: [
+      "The \`try\` block holds code that might fail.",
+      "The \`catch\` block runs only if an error occurs.",
+      "The \`finally\` block runs regardless of success or failure.",
+      "The \`throw\` statement creates custom errors."
+    ]
   },
   classes: {
     title: "JavaScript Classes",
-    description: "JavaScript Classes are templates for JavaScript Objects.",
-    intro: "Use the keyword `class` to create a class. Always add a method named `constructor()`.",
+    description: "JavaScript classes provide blueprints for creating multiple objects.",
+    intro: "JavaScript uses classes as templates to create objects that share the same structure. If a developer needs to build 50 different enemies for a game, they build one Enemy class and reuse it 50 times to save effort.",
     syntax: {
       language: "javascript",
-      code: `class ClassName {\n  constructor() { ... }\n}`
+      code: `/* class syntax */\nclass ClassName {\n  constructor() { ... }\n}`
     },
     example: {
       language: "javascript",
-      code: `class Car {\n  constructor(name, year) {\n    this.name = name;\n    this.year = year;\n  }\n}\n\nconst myCar1 = new Car("Ford", 2014);`
-    }
+      code: `/* this creates a class */\nclass Car {\n  constructor(brand) {\n    this.carname = brand;\n  }\n}\nlet myCar = new Car("Ford");`
+    },
+    keyPoints: [
+      "The \`class\` keyword defines the template.",
+      "The \`constructor()\` method runs automatically when creating a new object.",
+      "The \`new\` keyword creates an object from the class.",
+      "Classes act as a cleaner syntax for older prototype patterns."
+    ]
   },
   modules: {
     title: "JavaScript Modules",
-    description: "JavaScript modules allow you to break up your code into separate files.",
-    intro: "This makes it easier to maintain the code-base. Modules are imported from external files with the `import` statement. Modules also rely on `type=\"module\"` in the `<script>` tag.",
+    description: "JavaScript modules split large codebases into smaller files.",
+    intro: "JavaScript files can quickly become too large to read or manage. Developers split the code into smaller, separate files called modules. They then export specific variables or functions from one file and import them into another.",
     example: {
       language: "javascript",
-      code: `// person.js\nexport const name = "Jesse";\nexport const age = 40;\n\n// message.js\nimport { name, age } from "./person.js";`
-    }
+      code: `/* this exports and imports code */\n// inside person.js\nexport const name = "Jesse";\n\n// inside main.js\nimport { name } from "./person.js";`
+    },
+    keyPoints: [
+      "The \`export\` keyword makes code available to other files.",
+      "The \`import\` keyword pulls code in from other files.",
+      "Modules strict mode automatically.",
+      "HTML script tags require \`type=\"module\"\` to use them."
+    ]
   },
   "es6-features": {
     title: "JavaScript ES6+ Features",
-    description: "ECMAScript 2015, also known as ES6, introduced several new features.",
-    intro: "Features like `let`, `const`, Arrow Functions, For/of loop, Map Objects, Set Objects, Classes, Promises, Symbol, and Default Parameters were introduced.",
+    description: "JavaScript ES6 introduced modern features to the language.",
+    intro: "In 2015, JavaScript received a massive update known as ES6 (ECMAScript 2015). This update completely modernized the language by introducing new tools that made writing code faster, cleaner, and less prone to errors.",
     example: {
       language: "javascript",
-      code: `// Arrow Functions\nconst x = (x, y) => x * y;\n\n// Template Literals\nlet name = "John";\nlet text = \`Welcome \${name}\`;`
-    }
+      code: `/* this shows ES6 features */\n// Arrow Function\nconst multiply = (x, y) => x * y;\n\n// Template Literals\nlet name = "John";\nlet greeting = \`Welcome \${name}\`;`
+    },
+    keyPoints: [
+      "ES6 added \`let\` and \`const\` for variable declarations.",
+      "Arrow functions provided a shorter way to write functions.",
+      "Template literals allowed easy variable injection into strings.",
+      "Destructuring allowed quick extraction of array and object data."
+    ]
   }
 };
diff --git a/project/src/data/docs/nodejs.ts b/project/src/data/docs/nodejs.ts
index c1b847e..44bf426 100644
--- a/project/src/data/docs/nodejs.ts
+++ b/project/src/data/docs/nodejs.ts
@@ -3,166 +3,264 @@ import { TopicContent } from './contentMap';
 export const nodejsData: Record<string, TopicContent> = {
   introduction: {
     title: "Node.js Introduction",
-    description: "Node.js is an open source server environment.",
-    intro: "Node.js is free, runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.), and uses JavaScript on the server.",
+    description: "Node.js runs JavaScript code outside of the web browser.",
+    intro: "Node.js allows developers to run JavaScript directly on a computer or server instead of just inside a web browser. It is completely free, open-source, and runs on Windows, Mac, and Linux. This means you can build full websites using only JavaScript.",
     keyPoints: [
-      "Node.js uses asynchronous programming.",
-      "Node.js eliminates the waiting, and simply continues with the next request.",
-      "Node.js runs single-threaded, non-blocking, asynchronous programming."
+      "Node.js runs on the server, not the browser.",
+      "It handles tasks asynchronously without waiting.",
+      "It uses a fast, single-threaded architecture.",
+      "Developers use it to build fast, scalable applications."
     ]
   },
   setup: {
     title: "Node.js Setup",
-    description: "How to get started with Node.js.",
-    intro: "Download Node.js from the official website and run the installer. After installation, you can run Node.js from the command line.",
+    description: "Node.js requires a quick installation to get started.",
+    intro: "To start using Node.js, developers download the installer from the official Node.js website. Once installed, you can open your computer's terminal and run JavaScript files instantly using simple text commands.",
     syntax: {
       language: "bash",
-      code: `node -v\nnpm -v`
-    }
+      code: `/* terminal commands */\nnode -v\nnpm -v`
+    },
+    keyPoints: [
+      "Download the installer from nodejs.org.",
+      "Run \`node -v\` to check the installed version.",
+      "Run \`node filename.js\` to execute a script.",
+      "The installation includes NPM automatically."
+    ]
   },
   modules: {
     title: "Node.js Modules",
-    description: "Consider modules to be the same as JavaScript libraries.",
-    intro: "A set of functions you want to include in your application. Node.js has a set of built-in modules which you can use without any further installation.",
+    description: "Node.js modules act like pre-built JavaScript libraries.",
+    intro: "Node.js uses modules to organize code into smaller, reusable pieces. Modules work exactly like JavaScript libraries. Node.js comes with several built-in modules that let you create servers or read files without downloading anything extra.",
     example: {
       language: "javascript",
-      code: `var http = require('http');\n\nhttp.createServer(function (req, res) {\n  res.writeHead(200, {'Content-Type': 'text/html'});\n  res.end('Hello World!');\n}).listen(8080);`
-    }
+      code: `/* this includes a module */\nvar http = require('http');\n\nhttp.createServer(function (req, res) {\n  res.writeHead(200, {'Content-Type': 'text/plain'});\n  res.end('Hello!');\n}).listen(8080);`
+    },
+    keyPoints: [
+      "Modules are sets of reusable functions.",
+      "The \`require()\` function imports a module.",
+      "Built-in modules require zero installation.",
+      "You can create and export your own modules."
+    ]
   },
   "file-system": {
     title: "Node.js File System Module",
-    description: "The Node.js file system module allows you to work with the file system on your computer.",
-    intro: "To include the File System module, use the `require()` method: `var fs = require('fs');`. Common uses: Read files, Create files, Update files, Delete files, Rename files.",
+    description: "Node.js interacts directly with your computer's files.",
+    intro: "The Node.js File System module lets your JavaScript code read, create, update, and delete files on your actual computer. The browser cannot do this for security reasons, making Node.js incredibly powerful.",
     example: {
       language: "javascript",
-      code: `var fs = require('fs');\n\nfs.readFile('demofile1.html', function(err, data) {\n  if (err) throw err;\n  console.log(data);\n});`
-    }
+      code: `/* this reads a file */\nvar fs = require('fs');\n\nfs.readFile('demofile.txt', 'utf8', function(err, data) {\n  if (err) throw err;\n  console.log(data);\n});`
+    },
+    keyPoints: [
+      "Import the module using \`require('fs')\`.",
+      "The \`readFile()\` method reads file contents.",
+      "The \`writeFile()\` method creates new files.",
+      "The \`unlink()\` method deletes existing files."
+    ]
   },
   "http-module": {
     title: "Node.js HTTP Module",
-    description: "Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP).",
-    intro: "To include the HTTP module, use the `require()` method: `var http = require('http');`. The HTTP module can create an HTTP server that listens to server ports and gives a response back to the client.",
+    description: "Node.js creates web servers that listen for requests.",
+    intro: "Node.js has a built-in HTTP module that transforms your computer into a live web server. The server listens on a specific port and sends text or HTML data back whenever a user tries to load the web page.",
     example: {
       language: "javascript",
-      code: `var http = require('http');\n\nhttp.createServer(function (req, res) {\n  res.write('Hello World!'); // write a response to the client\n  res.end(); // end the response\n}).listen(8080); // the server object listens on port 8080`
-    }
+      code: `/* this creates a server */\nvar http = require('http');\n\nhttp.createServer(function (req, res) {\n  res.write('Welcome to my server!');\n  res.end();\n}).listen(8080);`
+    },
+    keyPoints: [
+      "Import the module using \`require('http')\`.",
+      "The \`createServer()\` method builds the server.",
+      "The \`listen()\` method chooses the network port.",
+      "The server responds to incoming client requests."
+    ]
   },
   "url-module": {
     title: "Node.js URL Module",
-    description: "The URL module splits up a web address into readable parts.",
-    intro: "To include the URL module, use the `require()` method. You can parse an address with the `url.parse()` method, and it will return a URL object with each part of the address as properties.",
+    description: "Node.js splits web addresses into readable parts.",
+    intro: "The Node.js URL module takes a long, messy web address and breaks it down into pieces. Developers use this to read specific search terms or understand exactly which page the user is trying to visit.",
     example: {
       language: "javascript",
-      code: `var url = require('url');\nvar adr = 'http://localhost:8080/default.htm?year=2017&month=february';\nvar q = url.parse(adr, true);\n\nconsole.log(q.host); // returns 'localhost:8080'\nconsole.log(q.pathname); // returns '/default.htm'\nconsole.log(q.search); // returns '?year=2017&month=february'\n\nvar qdata = q.query; // returns an object: { year: 2017, month: 'february' }\nconsole.log(qdata.month); // returns 'february'`
-    }
+      code: `/* this parses a URL */\nvar url = require('url');\nvar adr = 'http://localhost:8080/default.htm?year=2017&month=february';\nvar q = url.parse(adr, true);\n\nconsole.log(q.pathname); // returns '/default.htm'\nconsole.log(q.query.year); // returns 2017`
+    },
+    keyPoints: [
+      "Import the module using \`require('url')\`.",
+      "The \`parse()\` method splits the address.",
+      "It extracts the host, pathname, and query strings.",
+      "It returns an easy-to-read JavaScript object."
+    ]
   },
   npm: {
     title: "Node.js NPM",
-    description: "NPM is a package manager for Node.js packages, or modules.",
-    intro: "NPM is the world's largest Software Registry. The registry contains over 800,000 code packages. Open-source developers use npm to share software.",
+    description: "NPM manages millions of free code packages for Node.js.",
+    intro: "NPM stands for Node Package Manager. It is the largest software registry in the world. When developers need a tool, like a way to connect to a database or create a login system, they download a free package from NPM instead of writing it from scratch.",
     syntax: {
       language: "bash",
-      code: `npm init\nnpm install <package_name>\nnpm install <package_name> --save-dev`
-    }
+      code: `/* terminal commands */\nnpm init -y\nnpm install express\nnpm install nodemon --save-dev`
+    },
+    keyPoints: [
+      "NPM installs automatically with Node.js.",
+      "The registry holds over a million code packages.",
+      "The \`package.json\` file tracks installed packages.",
+      "Packages install into a \`node_modules\` folder."
+    ]
   },
   events: {
     title: "Node.js Events",
-    description: "Node.js is perfect for event-driven applications.",
-    intro: "Every action on a computer is an event. Like when a connection is made or a file is opened. Node.js has a built-in module, called \"Events\", where you can create-, fire-, and listen for- your own events.",
+    description: "Node.js triggers and listens for custom events.",
+    intro: "Node.js operates on an event-driven architecture. This means the server spends most of its time waiting for specific events to happen, like a file opening or a user logging in. Developers can create their own custom events using the built-in Events module.",
     example: {
       language: "javascript",
-      code: `var events = require('events');\nvar eventEmitter = new events.EventEmitter();\n\n// Create an event handler:\nvar myEventHandler = function () {\n  console.log('I hear a scream!');\n}\n\n// Assign the event handler to an event:\neventEmitter.on('scream', myEventHandler);\n\n// Fire the 'scream' event:\neventEmitter.emit('scream');`
-    }
+      code: `/* this handles an event */\nvar events = require('events');\nvar eventEmitter = new events.EventEmitter();\n\neventEmitter.on('login', function () {\n  console.log('User logged in!');\n});\n\neventEmitter.emit('login');`
+    },
+    keyPoints: [
+      "The Events module is built into Node.js.",
+      "The \`on()\` method listens for an event to happen.",
+      "The \`emit()\` method triggers the event manually.",
+      "Events make handling asynchronous data much easier."
+    ]
   },
   streams: {
     title: "Node.js Streams",
-    description: "Streams are objects that let you read data from a source or write data to a destination in continuous fashion.",
-    intro: "In Node.js, there are four types of streams: Readable, Writable, Duplex, and Transform.",
+    description: "Node.js streams process large amounts of data in small chunks.",
+    intro: "Streams allow Node.js to read or write data piece by piece instead of loading an entire massive file into memory all at once. This is exactly how video streaming services like Netflix send movies to your browser without crashing your computer.",
     example: {
       language: "javascript",
-      code: `var fs = require("fs");\nvar data = '';\n\n// Create a readable stream\nvar readerStream = fs.createReadStream('input.txt');\n\n// Set the encoding to be utf8. \nreaderStream.setEncoding('UTF8');\n\n// Handle stream events --> data, end, and error\nreaderStream.on('data', function(chunk) {\n   data += chunk;\n});`
-    }
+      code: `/* this reads a stream */\nvar fs = require('fs');\nvar readerStream = fs.createReadStream('large_video.mp4');\n\nreaderStream.on('data', function(chunk) {\n   console.log("Received a chunk of data");\n});`
+    },
+    keyPoints: [
+      "Readable streams let you read data.",
+      "Writable streams let you write data.",
+      "Duplex streams let you read and write simultaneously.",
+      "Streams prevent memory overloads on the server."
+    ]
   },
   "express-intro": {
     title: "Express.js Introduction",
-    description: "Express is a minimal and flexible Node.js web application framework.",
-    intro: "It provides a robust set of features for web and mobile applications. It is the de facto standard server framework for Node.js.",
+    description: "Express is a fast and simple web framework for Node.js.",
+    intro: "Writing a full web server using pure Node.js takes a lot of complicated code. Express.js is a free package that simplifies the process drastically. It is the most popular framework for building APIs and websites in Node.js.",
     example: {
       language: "javascript",
-      code: `const express = require('express')\nconst app = express()\nconst port = 3000\n\napp.get('/', (req, res) => {\n  res.send('Hello World!')\n})\n\napp.listen(port, () => {\n  console.log(\`Example app listening on port \${port}\`)\n})`
-    }
+      code: `/* this starts an express server */\nconst express = require('express');\nconst app = express();\n\napp.get('/', (req, res) => {\n  res.send('Hello from Express!');\n});\n\napp.listen(3000);`
+    },
+    keyPoints: [
+      "Express makes setting up a server extremely easy.",
+      "It handles complex routing automatically.",
+      "It uses middleware to process incoming requests.",
+      "It is the \"E\" in the popular MERN stack."
+    ]
   },
   "express-routing": {
     title: "Express Routing",
-    description: "Routing refers to how an application's endpoints (URIs) respond to client requests.",
-    intro: "You define routing using methods of the Express app object that correspond to HTTP methods; for example, `app.get()` to handle GET requests and `app.post` to handle POST requests.",
+    description: "Express routing handles different URL paths and HTTP methods.",
+    intro: "When a user visits your website, they request a specific URL path, like `/about` or `/contact`. Express routing acts like a traffic cop, directing the user's request to the correct block of code based on the URL they typed.",
     example: {
       language: "javascript",
-      code: `// Respond to POST request on the root route (/), the application's home page:\napp.post('/', (req, res) => {\n  res.send('Got a POST request')\n})\n\n// Respond to a PUT request to the /user route:\napp.put('/user', (req, res) => {\n  res.send('Got a PUT request at /user')\n})`
-    }
+      code: `/* this creates routes */\napp.get('/users', (req, res) => {\n  res.send('Show all users');\n});\n\napp.post('/users', (req, res) => {\n  res.send('Create a new user');\n});`
+    },
+    keyPoints: [
+      "Routes use HTTP methods like GET, POST, PUT, and DELETE.",
+      "\`app.get()\` retrieves data from the server.",
+      "\`app.post()\` sends new data to the server.",
+      "The \`req\` object holds the user's data."
+    ]
   },
   "express-middleware": {
     title: "Express Middleware",
-    description: "Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function.",
-    intro: "Middleware functions can execute any code, make changes to the request and the response objects, end the request-response cycle, call the next middleware function in the stack.",
+    description: "Express middleware modifies requests before they reach the route.",
+    intro: "Middleware functions sit in the middle, between the user's incoming request and the final route response. Developers use middleware to log visitors, check if a user is logged in, or format data before the main code runs.",
     example: {
       language: "javascript",
-      code: `var myLogger = function (req, res, next) {\n  console.log('LOGGED')\n  next()\n}\n\napp.use(myLogger)`
-    }
+      code: `/* this uses middleware */\nconst myLogger = function (req, res, next) {\n  console.log('User visited the site');\n  next(); // Pass control to the next function\n}\n\napp.use(myLogger);`
+    },
+    keyPoints: [
+      "Middleware functions run in order.",
+      "The \`next()\` function moves to the next middleware.",
+      "\`app.use()\` applies the middleware to all routes.",
+      "If you forget \`next()\`, the server gets stuck loading forever."
+    ]
   },
   "rest-apis": {
     title: "REST APIs with Node.js",
-    description: "Representational State Transfer (REST) is an architectural style for providing standards between computer systems on the web.",
-    intro: "Using Express, you can easily build RESTful APIs that serve JSON data.",
+    description: "Node.js builds fast RESTful APIs to serve data.",
+    intro: "A REST API is a standard way for a server to send raw data to a frontend application like a React website or an iOS app. Instead of sending full HTML pages, the Node.js server sends simple JSON data.",
     example: {
       language: "javascript",
-      code: `app.get('/api/users', (req, res) => {\n  const users = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}];\n  res.json(users);\n});`
-    }
+      code: `/* this sends a JSON API response */\napp.get('/api/cars', (req, res) => {\n  const cars = [{brand: 'Ford'}, {brand: 'BMW'}];\n  res.json(cars);\n});`
+    },
+    keyPoints: [
+      "REST APIs communicate using JSON.",
+      "Frontend apps fetch this data to build the UI.",
+      "APIs use standard HTTP status codes (like 404 for Not Found).",
+      "CRUD operations (Create, Read, Update, Delete) map to HTTP methods."
+    ]
   },
   mongodb: {
     title: "MongoDB with Node.js",
-    description: "MongoDB is a NoSQL database that works very well with Node.js.",
-    intro: "You can use the official MongoDB driver or an Object Data Modeling (ODM) library like Mongoose to interact with MongoDB.",
+    description: "MongoDB pairs perfectly with Node.js to store database records.",
+    intro: "Node.js applications need a place to save data permanently. MongoDB is a NoSQL database that stores data exactly like JavaScript objects, making it the perfect match for Node.js developers.",
     example: {
       language: "javascript",
-      code: `const mongoose = require('mongoose');\n\nmongoose.connect('mongodb://localhost/my_database');\n\nconst Schema = mongoose.Schema;\nconst SomeModelSchema = new Schema({\n  a_string: String,\n  a_date: Date\n});\n\nconst SomeModel = mongoose.model('SomeModel', SomeModelSchema);`
-    }
+      code: `/* this connects to MongoDB */\nconst mongoose = require('mongoose');\n\nmongoose.connect('mongodb://localhost/my_db');\n\nconst UserSchema = new mongoose.Schema({\n  name: String,\n  age: Number\n});`
+    },
+    keyPoints: [
+      "MongoDB is a NoSQL, document-based database.",
+      "It stores data in flexible JSON-like documents.",
+      "Mongoose is the most popular library to connect Node.js and MongoDB.",
+      "It is the \"M\" in the popular MERN stack."
+    ]
   },
   "env-vars": {
-    title: "Environment Variables in Node.js",
-    description: "Environment variables are used to store sensitive data like API keys and database credentials.",
-    intro: "You can access environment variables using `process.env`. It is common to use the `dotenv` package to load variables from a `.env` file into `process.env`.",
+    title: "Node.js Environment Variables",
+    description: "Node.js environment variables hide sensitive passwords and API keys.",
+    intro: "Hardcoding passwords into your JavaScript files is dangerous because anyone viewing the code can see them. Developers use environment variables to store sensitive data securely on the server. The code reads these variables invisibly behind the scenes.",
     syntax: {
       language: "javascript",
-      code: `require('dotenv').config();\nconst port = process.env.PORT || 3000;\nconst dbUser = process.env.DB_USER;`
-    }
+      code: `/* this uses environment variables */\nrequire('dotenv').config();\nconst dbPassword = process.env.DB_PASSWORD;`
+    },
+    keyPoints: [
+      "The \`process.env\` object holds the variables.",
+      "The \`dotenv\` package loads variables from a \`.env\` file.",
+      "Never commit your \`.env\` file to GitHub.",
+      "They are essential for production server deployments."
+    ]
   },
   "auth-basics": {
-    title: "Authentication Basics in Node.js",
-    description: "Securing routes and authenticating users.",
-    intro: "JSON Web Tokens (JWT) are commonly used for stateless authentication in Node.js APIs.",
+    title: "Node.js Authentication Basics",
+    description: "Node.js authentication ensures only approved users access data.",
+    intro: "Websites need to know exactly who is requesting data to keep accounts secure. Node.js typically uses JSON Web Tokens (JWT) to lock down routes. When a user logs in, they get a secure token that they must show every time they request private data.",
     example: {
       language: "javascript",
-      code: `const jwt = require('jsonwebtoken');\n\n// Create a token\nconst token = jwt.sign({ userId: 123 }, process.env.JWT_SECRET, { expiresIn: '1h' });\n\n// Verify a token\njwt.verify(token, process.env.JWT_SECRET, function(err, decoded) {\n  if (err) throw err;\n  console.log(decoded.userId) // bar\n});`
-    }
+      code: `/* this creates a secure token */\nconst jwt = require('jsonwebtoken');\nconst token = jwt.sign({ userId: 123 }, 'secret_key', { expiresIn: '1h' });`
+    },
+    keyPoints: [
+      "Authentication verifies user identity.",
+      "Authorization checks what data the user is allowed to see.",
+      "JWTs securely pass information between client and server.",
+      "Tokens eventually expire for security reasons."
+    ]
   },
   "error-handling": {
-    title: "Error Handling in Node.js/Express",
-    description: "Handling errors gracefully is critical.",
-    intro: "In Express, you define error-handling middleware functions in the same way as other middleware functions, except error-handling functions have four arguments instead of three: `(err, req, res, next)`.",
+    title: "Node.js Error Handling",
+    description: "Node.js/Express error handling prevents server crashes.",
+    intro: "Express provides a simple way to catch any errors that happen anywhere on the server. Developers write a special middleware function that catches bad requests, missing files, or broken code, and sends a polite error message to the user instead of crashing.",
     example: {
       language: "javascript",
-      code: `app.use((err, req, res, next) => {\n  console.error(err.stack)\n  res.status(500).send('Something broke!')\n})`
-    }
+      code: `/* this catches errors */\napp.use((err, req, res, next) => {\n  console.error(err.message);\n  res.status(500).send('Something broke on the server!');\n});`
+    },
+    keyPoints: [
+      "Error handling middleware takes four arguments instead of three.",
+      "The arguments are \`(err, req, res, next)\`.",
+      "It belongs at the very bottom of the file, after all other routes.",
+      "Sending a 500 status code tells the browser the server failed."
+    ]
   },
   deployment: {
     title: "Node.js Deployment",
-    description: "Getting your Node.js app live on the internet.",
-    intro: "Popular options for deploying Node.js applications include Heroku, Vercel, Render, AWS, and DigitalOcean.",
+    description: "Node.js deployment puts the app live on the internet.",
+    intro: "When development is finished, the Node.js application must move from a personal computer to a live web server. Developers use cloud platforms to host their code so anyone in the world can access the website or API 24/7.",
     keyPoints: [
-      "Always set `NODE_ENV` to `production`.",
-      "Ensure you are using `process.env.PORT` instead of hardcoding the port.",
-      "Consider using a process manager like PM2 if deploying to a VPS."
+      "Always set the environment variable \`NODE_ENV\` to \`production\`.",
+      "Let the hosting service choose the port using \`process.env.PORT\`.",
+      "Popular hosts include Render, Heroku, Vercel, and DigitalOcean.",
+      "Process managers like PM2 keep the server running after crashes."
     ]
   }
 };
diff --git a/project/src/data/docs/react.ts b/project/src/data/docs/react.ts
index da9ee81..10285db 100644
--- a/project/src/data/docs/react.ts
+++ b/project/src/data/docs/react.ts
@@ -3,211 +3,335 @@ import { TopicContent } from './contentMap';
 export const reactData: Record<string, TopicContent> = {
   introduction: {
     title: "React Introduction",
-    description: "React is a JavaScript library for building user interfaces.",
-    intro: "React is used to build single-page applications. React allows us to create reusable UI components.",
+    description: "React is a JavaScript library for building fast user interfaces.",
+    intro: "React lets developers build dynamic single-page applications. Instead of building one giant HTML file, developers use React to create small, reusable chunks of code called components. Facebook created and maintains React.",
     keyPoints: [
-      "React was created by Facebook.",
-      "React is a tool for building UI components."
+      "React builds interactive user interfaces.",
+      "It uses reusable UI components.",
+      "It is maintained by Facebook.",
+      "It updates the screen incredibly fast."
     ]
   },
   setup: {
     title: "React Setup",
-    description: "How to set up React in a project.",
-    intro: "The easiest way to start learning React is to use Create React App or a framework like Next.js or Vite.",
+    description: "React requires a quick project setup to get started.",
+    intro: "Developers do not usually write React directly in a standard HTML file. Instead, they use a tool like Vite or Next.js to generate a complete React project folder automatically. This sets up all the necessary files instantly.",
     syntax: {
       language: "bash",
-      code: `npx create-next-app@latest my-app\n# OR\nnpm create vite@latest my-react-app -- --template react`
-    }
+      code: `/* terminal commands */\nnpm create vite@latest my-app -- --template react\ncd my-app\nnpm install\nnpm run dev`
+    },
+    keyPoints: [
+      "Vite is the modern, fast way to build React apps.",
+      "Next.js is the popular choice for full-stack React.",
+      "Create React App is no longer recommended.",
+      "The \`npm run dev\` command starts a local server."
+    ]
   },
   jsx: {
     title: "React JSX",
-    description: "JSX allows us to write HTML in React.",
-    intro: "JSX makes it easier to write and add HTML in React. JSX converts HTML tags into react elements.",
+    description: "JSX allows developers to write HTML directly inside JavaScript.",
+    intro: "JSX stands for JavaScript XML. It looks exactly like HTML, but it lives completely inside a JavaScript file. React takes this JSX code and converts it into real HTML elements that the browser can understand.",
     example: {
       language: "jsx",
-      code: `const myElement = <h1>I Love JSX!</h1>;`
-    }
+      code: `/* this creates JSX */\nconst title = <h1>Hello React!</h1>;\nconst page = (\n  <div>\n    {title}\n    <p>This is JSX.</p>\n  </div>\n);`
+    },
+    keyPoints: [
+      "JSX blends HTML and JavaScript together.",
+      "It requires wrapping multiple elements in a single parent.",
+      "You can inject JavaScript variables using curly braces \`{}\`.",
+      "Browsers cannot read JSX without a compiler like Babel."
+    ]
   },
   components: {
     title: "React Components",
-    description: "Components are independent and reusable bits of code.",
-    intro: "They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components. We will focus on Function components.",
+    description: "Components act like custom HTML tags in React.",
+    intro: "Components are independent, reusable pieces of a website, like a navigation bar or a button. Developers write a component once and use it everywhere. Modern React relies heavily on functional components.",
     example: {
       language: "jsx",
-      code: `function Car() {\n  return <h2>Hi, I am a Car!</h2>;\n}`
-    }
+      code: `/* this creates a component */\nfunction Greeting() {\n  return <h2>Welcome to the website!</h2>;\n}\n\n// Usage: <Greeting />`
+    },
+    keyPoints: [
+      "Components always start with a capital letter.",
+      "They return JSX code to render on the screen.",
+      "Functional components are the standard approach.",
+      "Class components are the older, outdated method."
+    ]
   },
   props: {
     title: "React Props",
-    description: "Props are arguments passed into React components.",
-    intro: "Props are passed to components via HTML attributes. React Props are read-only! You will get an error if you try to change their value.",
+    description: "Props pass data from a parent component to a child component.",
+    intro: "Props are custom HTML attributes for React components. If you build a Profile component, you can use props to pass different names to it. Props are strictly read-only; the child component cannot change them.",
     example: {
       language: "jsx",
-      code: `function Car(props) {\n  return <h2>I am a {props.brand}!</h2>;\n}\n\nconst myElement = <Car brand="Ford" />;`
-    }
+      code: `/* this uses props */\nfunction User(props) {\n  return <h2>Hello, {props.name}!</h2>;\n}\n\n// Usage: <User name="Alice" />`
+    },
+    keyPoints: [
+      "\"Props\" stands for properties.",
+      "They pass data downwards through the component tree.",
+      "They act just like function arguments.",
+      "A component must never modify its own props."
+    ]
   },
   state: {
     title: "React State",
-    description: "React components has a built-in state object.",
-    intro: "The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. In functional components, we use the `useState` Hook.",
+    description: "React state stores data that changes over time.",
+    intro: "State acts as the memory of a React component. While props are passed in from the outside, state is managed entirely on the inside. When state data changes, React automatically refreshes the component to show the new data.",
     keyPoints: [
-      "State is mutable (can be changed).",
-      "Props are immutable (cannot be changed)."
+      "State tracks data like user input or score.",
+      "Updating state forces the component to re-render.",
+      "State is completely private to the component.",
+      "Functional components manage state using Hooks."
     ]
   },
   "use-state": {
     title: "React useState Hook",
-    description: "The React useState Hook allows us to track state in a function component.",
-    intro: "State generally refers to data or properties that need to be tracking in an application.",
+    description: "The useState Hook creates state variables in functional components.",
+    intro: "Developers use the `useState` Hook to add memory to a component. It returns two things: the current value of the state, and a function specifically designed to update that value safely.",
     example: {
       language: "jsx",
-      code: `import { useState } from "react";\n\nfunction FavoriteColor() {\n  const [color, setColor] = useState("red");\n\n  return (\n    <>\n      <h1>My favorite color is {color}!</h1>\n      <button onClick={() => setColor("blue")}>Blue</button>\n    </>\n  );\n}`
-    }
+      code: `/* this uses state */\nimport { useState } from "react";\n\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  return <button onClick={() => setCount(count + 1)}>Count is {count}</button>;\n}`
+    },
+    keyPoints: [
+      "Import \`useState\` from the \`react\` library.",
+      "The Hook returns an array with a variable and a setter function.",
+      "Never modify the state variable directly.",
+      "Always use the setter function (like \`setCount\`) to update it."
+    ]
   },
   "use-effect": {
     title: "React useEffect Hook",
-    description: "The useEffect Hook allows you to perform side effects in your components.",
-    intro: "Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments. The second argument is optional.",
+    description: "The useEffect Hook handles side effects like fetching data.",
+    intro: "React components should ideally just take data and render UI. The `useEffect` Hook handles everything else, known as \"side effects.\" Developers use it to fetch API data, set up timers, or manipulate the DOM directly.",
     example: {
       language: "jsx",
-      code: `import { useState, useEffect } from "react";\n\nfunction Timer() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setCount((count) => count + 1);\n    }, 1000);\n  }, []); // <- add empty brackets here\n\n  return <h1>I've rendered {count} times!</h1>;\n}`
-    }
+      code: `/* this fetches data */\nimport { useEffect, useState } from "react";\n\nfunction DataLoader() {\n  useEffect(() => {\n    console.log("Component loaded on the screen!");\n  }, []); // Empty array runs once\n}`
+    },
+    keyPoints: [
+      "The first argument is a function that runs the effect.",
+      "The second argument is a dependency array.",
+      "An empty array \`[]\` makes the effect run only once.",
+      "Missing dependencies can cause infinite rendering loops."
+    ]
   },
   "use-context": {
     title: "React useContext Hook",
-    description: "React Context is a way to manage state globally.",
-    intro: "It can be used together with the `useState` Hook to share state between deeply nested components more easily than with `useState` alone.",
-    syntax: {
+    description: "The useContext Hook reads global data without passing props.",
+    intro: "Passing props down through ten levels of components is annoying, known as \"prop drilling.\" The `useContext` Hook creates a global data portal. Any component, no matter how deep, can tap into this portal to read the data instantly.",
+    example: {
       language: "jsx",
-      code: `import { useState, createContext, useContext } from "react";\n\nconst UserContext = createContext();`
-    }
+      code: `/* this reads context */\nimport { useContext } from "react";\nimport { ThemeContext } from "./ThemeContext";\n\nfunction Button() {\n  const theme = useContext(ThemeContext);\n  return <button className={theme}>Click Me</button>;\n}`
+    },
+    keyPoints: [
+      "It solves the problem of \"prop drilling.\"",
+      "The \`createContext()\` function builds the portal.",
+      "The \`Provider\` wraps the parent component to supply the data.",
+      "The \`useContext\` Hook reads the data inside the child component."
+    ]
   },
   "use-ref": {
     title: "React useRef Hook",
-    description: "The useRef Hook allows you to persist values between renders.",
-    intro: "It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.",
+    description: "The useRef Hook holds data that doesn't trigger re-renders.",
+    intro: "The `useRef` Hook is like a secret pocket. It stores data that persists between renders, but unlike `useState`, updating it does not force the component to redraw. Developers also use it to grab direct references to HTML elements.",
     example: {
       language: "jsx",
-      code: `import { useRef } from "react";\n\nfunction App() {\n  const inputElement = useRef();\n\n  const focusInput = () => {\n    inputElement.current.focus();\n  };\n\n  return (\n    <>\n      <input type="text" ref={inputElement} />\n      <button onClick={focusInput}>Focus Input</button>\n    </>\n  );\n}`
-    }
+      code: `/* this references an input */\nimport { useRef } from "react";\n\nfunction FocusApp() {\n  const inputRef = useRef();\n  return (\n    <>\n      <input ref={inputRef} />\n      <button onClick={() => inputRef.current.focus()}>Focus!</button>\n    </>\n  );\n}`
+    },
+    keyPoints: [
+      "It returns an object with a \`.current\` property.",
+      "Changing \`.current\` does not re-render the component.",
+      "It provides direct access to HTML DOM nodes.",
+      "It is perfect for managing timers or focusing inputs."
+    ]
   },
   "use-memo": {
     title: "React useMemo Hook",
-    description: "The React useMemo Hook returns a memoized value.",
-    intro: "Think of memoization as caching a value so that it does not need to be recalculated. The useMemo Hook only runs when one of its dependencies update.",
+    description: "The useMemo Hook caches expensive calculations to improve performance.",
+    intro: "Sometimes a component runs a slow, heavy math calculation every time it renders. The `useMemo` Hook fixes this by remembering the answer from the last render. It only recalculates the math if the input data actually changes.",
     example: {
       language: "jsx",
-      code: `const calculation = useMemo(() => expensiveCalculation(count), [count]);`
-    }
+      code: `/* this caches a calculation */\nimport { useMemo } from "react";\n\nfunction MathApp({ number }) {\n  const doubled = useMemo(() => {\n    return slowMathCalculation(number);\n  }, [number]); // Only re-runs if 'number' changes\n}`
+    },
+    keyPoints: [
+      "\"Memoization\" means caching a result.",
+      "It stops slow functions from running needlessly.",
+      "The first argument is the calculation function.",
+      "The second argument is the dependency array."
+    ]
   },
   "use-callback": {
     title: "React useCallback Hook",
-    description: "The React useCallback Hook returns a memoized callback function.",
-    intro: "Think of memoization as caching a value so that it does not need to be recalculated. The useCallback Hook only runs when one of its dependencies update. It's useful to prevent child components from re-rendering needlessly.",
+    description: "The useCallback Hook caches function definitions to improve performance.",
+    intro: "React recreates every function inside a component every time the component renders. If you pass these functions to child components, it causes unnecessary re-renders. The `useCallback` Hook caches the actual function itself so it doesn't get recreated.",
     example: {
       language: "jsx",
-      code: `const addTodo = useCallback(() => {\n  setTodos((t) => [...t, "New Todo"]);\n}, [todos]);`
-    }
+      code: `/* this caches a function */\nimport { useCallback } from "react";\n\nfunction Parent({ data }) {\n  const handleClick = useCallback(() => {\n    console.log("Clicked!");\n  }, []); // Caches the function forever\n}`
+    },
+    keyPoints: [
+      "It is almost identical to \`useMemo\`.",
+      "\`useMemo\` caches the *result* of a function.",
+      "\`useCallback\` caches the *function itself*.",
+      "It prevents unnecessary child component renders."
+    ]
   },
   "custom-hooks": {
     title: "React Custom Hooks",
-    description: "Hooks are reusable functions.",
-    intro: "When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook. Custom Hooks start with \"use\". Example: `useFetch`.",
+    description: "Custom Hooks bundle complex logic into reusable functions.",
+    intro: "If you find yourself writing the exact same `useState` and `useEffect` logic in three different components, you can combine them into a Custom Hook. This cleans up your code and makes your logic completely reusable.",
     example: {
       language: "jsx",
-      code: `import { useState, useEffect } from "react";\n\nconst useFetch = (url) => {\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    fetch(url)\n      .then((res) => res.json())\n      .then((data) => setData(data));\n  }, [url]);\n\n  return [data];\n};\nexport default useFetch;`
-    }
+      code: `/* this creates a custom hook */\nimport { useState } from "react";\n\nfunction useToggle(initial) {\n  const [value, setValue] = useState(initial);\n  const toggle = () => setValue(!value);\n  return [value, toggle];\n}`
+    },
+    keyPoints: [
+      "Custom Hooks must always start with the word \"use\".",
+      "They can call other React Hooks inside them.",
+      "They are just regular JavaScript functions.",
+      "They help keep components clean and strictly focused on UI."
+    ]
   },
   "event-handling": {
-    title: "React Events",
-    description: "Just like HTML DOM events, React can perform actions based on user events.",
-    intro: "React events are written in camelCase syntax: `onClick` instead of `onclick`. React event handlers are written inside curly braces: `onClick={shoot}` instead of `onclick=\"shoot()\"`.",
+    title: "React Event Handling",
+    description: "React handles user clicks, typing, and hovering securely.",
+    intro: "React handles events very similarly to standard HTML, but with a few syntax changes. Event names are written in camelCase, and developers pass actual JavaScript functions inside curly braces instead of passing string names.",
     example: {
       language: "jsx",
-      code: `function Football() {\n  const shoot = () => {\n    alert("Great Shot!");\n  }\n\n  return (\n    <button onClick={shoot}>Take the shot!</button>\n  );\n}`
-    }
+      code: `/* this handles a click event */\nfunction SubmitButton() {\n  function handleClick(event) {\n    event.preventDefault();\n    console.log("Form submitted!");\n  }\n  return <button onClick={handleClick}>Submit</button>;\n}`
+    },
+    keyPoints: [
+      "Use camelCase for events (e.g., \`onClick\`, \`onChange\`).",
+      "Pass the function directly: \`onClick={handleClick}\`.",
+      "Do not add parentheses \`()\` when passing the function.",
+      "React automatically passes the \`event\` object to the function."
+    ]
   },
   "conditional-rendering": {
     title: "React Conditional Rendering",
-    description: "In React, you can conditionally render components.",
-    intro: "There are several ways to do this: `if` statements, logical `&&` operator, or ternary operators.",
+    description: "React conditional rendering shows different components based on state.",
+    intro: "React lets developers show completely different UI elements depending on a specific condition. For example, if a user is logged in, show the dashboard. If they are not logged in, show the login screen.",
     example: {
       language: "jsx",
-      code: `function Goal(props) {\n  const isGoal = props.isGoal;\n  return (\n    <>\n      { isGoal ? <MadeGoal/> : <MissedGoal/> }\n    </>\n  );\n}`
-    }
+      code: `/* this renders conditionally */\nfunction Greeting({ isLoggedIn }) {\n  if (isLoggedIn) {\n    return <h2>Welcome back!</h2>;\n  }\n  return <h2>Please log in.</h2>;\n}`
+    },
+    keyPoints: [
+      "You can use standard JavaScript \`if\` statements.",
+      "The \`&&\` operator renders an element if true.",
+      "The ternary operator \`? :\` acts as an inline if-else statement.",
+      "Returning \`null\` hides the component completely."
+    ]
   },
   "lists-keys": {
     title: "React Lists and Keys",
-    description: "In React, you will render lists with some type of loop.",
-    intro: "The JavaScript `map()` array method is generally the preferred method. Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list.",
+    description: "React renders lists of data dynamically using arrays.",
+    intro: "When developers have an array of data, like ten different blog posts, they don't write the HTML ten times. Instead, they use the JavaScript `map()` method to loop through the array and render a component for every single item automatically.",
     example: {
       language: "jsx",
-      code: `function CarList(props) {\n  const cars = props.cars;\n  return (\n    <ul>\n      {cars.map((car) => <li key={car.id}>{car.brand}</li>)}\n    </ul>\n  );\n}`
-    }
+      code: `/* this renders a list */\nfunction CarList({ cars }) {\n  return (\n    <ul>\n      {cars.map((car) => (\n        <li key={car.id}>{car.name}</li>\n      ))}\n    </ul>\n  );\n}`
+    },
+    keyPoints: [
+      "The \`map()\` method loops over an array of data.",
+      "Every item in a list must have a unique \`key\` prop.",
+      "The \`key\` helps React update the list efficiently.",
+      "Do not use the array index as a key if the list can change."
+    ]
   },
   forms: {
     title: "React Forms",
-    description: "Just like in HTML, React uses forms to allow users to interact with the web page.",
-    intro: "Handling forms is about how you handle the data when it changes value or gets submitted. In React, form data is usually handled by the components with state.",
+    description: "React handles form inputs by syncing them with state.",
+    intro: "In standard HTML, input boxes store their own data. In React, developers use state to store the input data securely. This concept is called a \"Controlled Component,\" where React completely controls what the user types.",
     example: {
       language: "jsx",
-      code: `function MyForm() {\n  const [name, setName] = useState("");\n\n  return (\n    <form>\n      <label>Enter your name:\n        <input\n          type="text" \n          value={name}\n          onChange={(e) => setName(e.target.value)}\n        />\n      </label>\n    </form>\n  )\n}`
-    }
+      code: `/* this handles a form input */\nfunction MyForm() {\n  const [name, setName] = useState("");\n  return (\n    <input \n      value={name} \n      onChange={(e) => setName(e.target.value)} \n    />\n  );\n}`
+    },
+    keyPoints: [
+      "The \`value\` prop links the input directly to a state variable.",
+      "The \`onChange\` event updates the state whenever the user types.",
+      "A controlled component prevents invalid data submission.",
+      "The \`onSubmit\` event handles the final form submission."
+    ]
   },
   "context-api": {
     title: "React Context API",
-    description: "React Context is a way to manage state globally.",
-    intro: "See the useContext hook for details. It allows passing data down without having to manually pass props at every level (Prop Drilling).",
+    description: "The React Context API manages global application state.",
+    intro: "While the `useContext` Hook reads global data, the Context API provides the actual structure to build it. Developers use it to store themes, user login information, or language preferences that the entire application needs to access.",
+    example: {
+      language: "jsx",
+      code: `/* this sets up Context */\nimport { createContext } from "react";\n\nexport const ThemeContext = createContext("light");\n\nfunction App() {\n  return (\n    <ThemeContext.Provider value="dark">\n      <MainPage />\n    </ThemeContext.Provider>\n  );\n}`
+    },
     keyPoints: [
-      "Use `createContext()` to create a context.",
-      "Wrap components in `<Context.Provider value={...}>` to provide value.",
-      "Use `useContext(Context)` to consume the value."
+      "\`createContext()\` initializes the empty portal.",
+      "The \`Provider\` component wraps around child components.",
+      "The \`value\` prop passes the actual data into the portal.",
+      "All children inside the Provider can read the global data."
     ]
   },
   router: {
     title: "React Router",
-    description: "React Router is the standard routing library for React.",
-    intro: "It allows navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.",
+    description: "React Router handles navigation across different pages.",
+    intro: "React naturally builds \"single-page\" applications that do not load new HTML files. To create the illusion of multiple pages, developers use React Router. It swaps out different components depending on the URL the user clicks.",
     example: {
       language: "jsx",
-      code: `import { BrowserRouter, Routes, Route } from "react-router-dom";\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <Routes>\n        <Route path="/" element={<Home />} />\n        <Route path="/about" element={<About />} />\n      </Routes>\n    </BrowserRouter>\n  );\n}`
-    }
+      code: `/* this sets up routing */\nimport { BrowserRouter, Routes, Route } from "react-router-dom";\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <Routes>\n        <Route path="/" element={<Home />} />\n        <Route path="/about" element={<About />} />\n      </Routes>\n    </BrowserRouter>\n  );\n}`
+    },
+    keyPoints: [
+      "It requires installing the \`react-router-dom\` package.",
+      "\`BrowserRouter\` wraps the entire application.",
+      "\`Routes\` groups all the individual paths together.",
+      "\`Route\` links a specific URL path to a specific component."
+    ]
   },
   "code-splitting": {
     title: "React Code Splitting",
-    description: "Code-Splitting allows you to split your code into various bundles.",
-    intro: "This can greatly improve the performance of your app. You can use `React.lazy` and `Suspense`.",
+    description: "Code splitting breaks large React apps into smaller, faster chunks.",
+    intro: "When developers build a massive application, downloading the entire website at once makes it load very slowly. Code splitting tells React to only download the code for the specific page the user is currently viewing, speeding up load times significantly.",
     syntax: {
       language: "jsx",
-      code: `import React, { Suspense } from 'react';\n\nconst OtherComponent = React.lazy(() => import('./OtherComponent'));\n\nfunction MyComponent() {\n  return (\n    <div>\n      <Suspense fallback={<div>Loading...</div>}>\n        <OtherComponent />\n      </Suspense>\n    </div>\n  );\n}`
-    }
+      code: `/* this delays loading a component */\nimport { lazy, Suspense } from 'react';\nconst HeavyChart = lazy(() => import('./HeavyChart'));\n\n<Suspense fallback={<div>Loading chart...</div>}>\n  <HeavyChart />\n</Suspense>`
+    },
+    keyPoints: [
+      "It uses the \`lazy()\` function to delay loading.",
+      "The \`Suspense\` component wraps the delayed code.",
+      "The \`fallback\` prop shows a loading spinner while it downloads.",
+      "It drastically improves website performance."
+    ]
   },
   "error-boundaries": {
     title: "React Error Boundaries",
-    description: "Error boundaries are React components that catch JavaScript errors anywhere in their child component tree.",
-    intro: "They log those errors, and display a fallback UI instead of the component tree that crashed.",
+    description: "Error Boundaries stop the entire application from crashing.",
+    intro: "If a single React component crashes due to a JavaScript error, it usually takes down the whole website, leaving a blank white screen. Error Boundaries catch these crashes locally and show a friendly error message instead of breaking everything.",
+    example: {
+      language: "jsx",
+      code: `/* this uses an error boundary */\n<ErrorBoundary fallback={<p>Something went wrong!</p>}>\n  <ChatWidget />\n</ErrorBoundary>`
+    },
     keyPoints: [
-      "Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.",
-      "Currently, you must use a class component to create an error boundary."
+      "They act like a safety net for your components.",
+      "They catch errors anywhere in their child components.",
+      "Currently, developers must use Class Components to build them from scratch.",
+      "Libraries like \`react-error-boundary\` provide easier functional alternatives."
     ]
   },
   performance: {
     title: "React Performance",
-    description: "Optimizing Performance in React applications.",
-    intro: "Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI.",
+    description: "React performance optimization keeps the website running smoothly.",
+    intro: "While React is naturally fast, a poorly written application will still feel slow and laggy. Developers use specific techniques and Hooks to prevent React from redrawing the screen when it doesn't need to.",
     keyPoints: [
-      "Use React.memo to prevent unnecessary re-renders of components.",
-      "Use useMemo to cache expensive calculations.",
-      "Use useCallback to cache function references."
+      "Use \`React.memo\` to skip re-rendering unchanged components.",
+      "Use \`useMemo\` to cache heavy math calculations.",
+      "Use \`useCallback\` to cache functions passed to children.",
+      "Always add unique \`key\` props to lists to help React update them."
     ]
   },
   "testing-basics": {
     title: "React Testing Basics",
-    description: "Testing React components.",
-    intro: "React Testing Library is a set of helpers that let you test React components without relying on their implementation details.",
+    description: "React testing ensures your components work before users see them.",
+    intro: "Developers write automated tests that click buttons and read text on the screen to make sure the app isn't broken. The React Testing Library is the industry standard tool because it tests the app exactly the way a real human would use it.",
     example: {
       language: "jsx",
-      code: `import { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  render(<App />);\n  const linkElement = screen.getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});`
-    }
+      code: `/* this tests a button */\nimport { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders the submit button', () => {\n  render(<App />);\n  const button = screen.getByText('Submit');\n  expect(button).toBeInTheDocument();\n});`
+    },
+    keyPoints: [
+      "React Testing Library is built into Create React App and Vite templates.",
+      "It tests what the user sees, not how the code works internally.",
+      "Use \`screen.getByText()\` to find elements.",
+      "Testing prevents bugs from reaching production servers."
+    ]
   }
 };
diff --git a/project/src/data/docs/typescript.ts b/project/src/data/docs/typescript.ts
index afafd54..efebdbf 100644
--- a/project/src/data/docs/typescript.ts
+++ b/project/src/data/docs/typescript.ts
@@ -3,184 +3,290 @@ import { TopicContent } from './contentMap';
 export const typescriptData: Record<string, TopicContent> = {
   introduction: {
     title: "TypeScript Introduction",
-    description: "TypeScript is a syntactic superset of JavaScript which adds static typing.",
-    intro: "TypeScript is JavaScript with added syntax for types. This means that TypeScript is a strictly typed superset of JavaScript, which compiles to plain JavaScript.",
+    description: "TypeScript is JavaScript with strict rules for data types.",
+    intro: "TypeScript catches silly mistakes before your code even runs. It is completely based on JavaScript, but it forces developers to define exactly what kind of data (like numbers or text) they are using. Browsers cannot read TypeScript, so it automatically converts itself into standard JavaScript.",
     keyPoints: [
-      "TypeScript catches errors at compile time rather than runtime.",
-      "TypeScript provides better developer tooling and IDE support.",
-      "TypeScript files use the `.ts` extension (or `.tsx` for React components)."
+      "Microsoft created and maintains TypeScript.",
+      "It catches errors instantly while you type.",
+      "TypeScript code converts perfectly into JavaScript.",
+      "Large companies use it to prevent bugs."
     ]
   },
   setup: {
     title: "TypeScript Setup",
-    description: "How to set up TypeScript in a project.",
-    intro: "To use TypeScript, you typically need to install it via npm, and then configure it using a `tsconfig.json` file.",
+    description: "TypeScript installs globally using NPM.",
+    intro: "Before writing TypeScript, developers must install the compiler tool on their computer. The compiler reads the special `.ts` files and translates them into normal `.js` files that web browsers can finally understand.",
     syntax: {
       language: "bash",
-      code: `npm install -g typescript\ntsc --init`
-    }
+      code: `/* terminal commands */\nnpm install -g typescript\ntsc --init\ntsc filename.ts`
+    },
+    keyPoints: [
+      "The \`tsc\` command stands for TypeScript Compiler.",
+      "Running \`tsc filename.ts\` generates a JavaScript file.",
+      "The \`--init\` flag creates a configuration file.",
+      "Most modern frameworks like React setup TypeScript automatically."
+    ]
   },
   types: {
     title: "TypeScript Simple Types",
-    description: "TypeScript supports some simple types (primitives) you may know.",
-    intro: "There are three main primitives in JavaScript and TypeScript: `boolean`, `number`, and `string`. TypeScript also has `any`, `unknown`, `never`, etc.",
+    description: "TypeScript locks variables into specific data types.",
+    intro: "In normal JavaScript, a variable can be a number on line one, and suddenly change to a text string on line two. TypeScript strictly forbids this. Developers use simple primitive types to lock down variables permanently.",
     example: {
       language: "typescript",
-      code: `let isDone: boolean = false;\nlet lines: number = 42;\nlet name: string = "Anders";`
-    }
+      code: `/* this sets primitive types */\nlet isDone: boolean = false;\nlet score: number = 100;\nlet playerName: string = "Alice";`
+    },
+    keyPoints: [
+      "Use \`boolean\` for true or false values.",
+      "Use \`number\` for decimals or whole numbers.",
+      "Use \`string\` for text characters.",
+      "Add the colon \`:\` to specify the type."
+    ]
   },
   "type-inference": {
     title: "TypeScript Type Inference",
-    description: "TypeScript can infer the type of a variable when you don't provide an explicit type.",
-    intro: "If a variable is initialized with a value, TypeScript will guess the type based on the initial value.",
+    description: "TypeScript guesses the correct data type automatically.",
+    intro: "You don't always have to write out the data types manually. If you assign a value to a variable immediately, TypeScript acts like a detective and figures out the correct type behind the scenes.",
     example: {
       language: "typescript",
-      code: `let myName = "Alice"; // Inferred as string\n// myName = 42; // Error: Type 'number' is not assignable to type 'string'.`
-    }
+      code: `/* this uses inference */\nlet greeting = "Hello World"; // TypeScript knows this is a string\n\n// greeting = 42; // This causes a massive error!`
+    },
+    keyPoints: [
+      "\"Inference\" means guessing automatically.",
+      "It saves time and keeps the code clean.",
+      "It still locks the type permanently after guessing.",
+      "You only explicitly write types when you don't assign an initial value."
+    ]
   },
   interfaces: {
     title: "TypeScript Interfaces",
-    description: "Interfaces are used to define the structure of an object.",
-    intro: "Interfaces define properties and their types, which an object must have to be considered of that interface type.",
-    syntax: {
+    description: "Interfaces define the strict shape of a JavaScript object.",
+    intro: "JavaScript objects hold multiple pieces of data. An Interface acts like a strict blueprint for an object. It guarantees that the object has exactly the right properties, and that each property holds the correct type of data.",
+    example: {
       language: "typescript",
-      code: `interface Point {\n  x: number;\n  y: number;\n}\n\nfunction printCoord(pt: Point) {\n  console.log("The coordinate's x value is " + pt.x);\n  console.log("The coordinate's y value is " + pt.y);\n}`
-    }
+      code: `/* this creates an interface */\ninterface User {\n  name: string;\n  age: number;\n}\n\nconst player: User = {\n  name: "Bob",\n  age: 25\n};`
+    },
+    keyPoints: [
+      "Interfaces start with a capital letter.",
+      "They define the names and types of object properties.",
+      "They prevent typos in property names.",
+      "They do not compile into the final JavaScript code."
+    ]
   },
   "type-aliases": {
     title: "TypeScript Type Aliases",
-    description: "Type Aliases allow defining types with a custom name.",
-    intro: "Type Aliases can be used for primitives like string or more complex types such as objects and arrays.",
+    description: "Type Aliases create custom names for any data type.",
+    intro: "Sometimes writing out complex types gets repetitive and messy. A Type Alias lets developers create a brand new custom name for a specific type or combination of types. It works exactly like a variable, but for types instead of data.",
     example: {
       language: "typescript",
-      code: `type ID = number | string;\n\nfunction printId(id: ID) {\n  console.log("Your ID is: " + id);\n}`
-    }
+      code: `/* this creates a custom type */\ntype Score = number;\n\nlet currentScore: Score = 50;\nlet topScore: Score = 100;`
+    },
+    keyPoints: [
+      "Use the \`type\` keyword to create an alias.",
+      "They work for primitives, arrays, and objects.",
+      "They keep code highly readable.",
+      "They are very similar to Interfaces, but more flexible."
+    ]
   },
   "union-types": {
     title: "TypeScript Union Types",
-    description: "Union types are used when a value can be more than a single type.",
-    intro: "Such as when a property would be string or number. You separate the types with a pipe `|`.",
+    description: "Union types allow a variable to hold multiple specific types.",
+    intro: "Sometimes a variable legitimately needs to handle two different types of data. For example, a phone number might be a number (\`5551234\`) or a formatted text string (\`\"555-1234\"\`). Union types solve this problem.",
     example: {
       language: "typescript",
-      code: `function printStatusCode(code: string | number) {\n  console.log(\`My status code is \${code}.\`);\n}`
-    }
+      code: `/* this uses a union type */\nfunction printID(id: number | string) {\n  console.log("The ID is: " + id);\n}\n\nprintID(101);\nprintID("A-101");`
+    },
+    keyPoints: [
+      "Use the pipe symbol \`|\` to create a union.",
+      "It means \"either this OR that\".",
+      "It gives flexibility without losing strict safety.",
+      "You often have to check the type before using the data."
+    ]
   },
   "intersection-types": {
     title: "TypeScript Intersection Types",
-    description: "Intersection types are closely related to union types, but they are used very differently.",
-    intro: "An intersection type combines multiple types into one. This allows you to add together existing types to get a single type that has all the features you need.",
+    description: "Intersection types smash multiple custom types into a single type.",
+    intro: "While a Union type is an \"OR\" statement, an Intersection type is an \"AND\" statement. It combines two completely separate interfaces or types together. The final variable must contain every single property from both original types.",
     example: {
       language: "typescript",
-      code: `interface BusinessPartner {\n  name: string;\n  credit: number;\n}\n\ninterface Identity {\n  id: number;\n  name: string;\n}\n\ntype Employee = BusinessPartner & Identity;`
-    }
+      code: `/* this combines types */\ninterface ErrorHandling {\n  success: boolean;\n  error?: string;\n}\n\ninterface ArtworksData {\n  artworks: { title: string }[];\n}\n\ntype ArtworksResponse = ArtworksData & ErrorHandling;`
+    },
+    keyPoints: [
+      "Use the ampersand symbol \`&\` to create an intersection.",
+      "It means \"this AND that\".",
+      "It is commonly used when combining data from multiple API responses.",
+      "If a property is missing, TypeScript throws an error."
+    ]
   },
   generics: {
     title: "TypeScript Generics",
-    description: "Generics allow creating 'type variables' which can be used to create classes, functions & type aliases that don't need to explicitly define the types that they use.",
-    intro: "Generics make it easier to write reusable code.",
+    description: "Generics act like variables for data types.",
+    intro: "Sometimes developers write functions that should work with numbers, strings, or arrays, but they still want strict safety. Generics allow you to pass a type into a function as an argument, just like you pass normal data into a function.",
     example: {
       language: "typescript",
-      code: `function identity<Type>(arg: Type): Type {\n  return arg;\n}\n\nlet output = identity<string>("myString");`
-    }
+      code: `/* this uses a generic type */\nfunction identity<T>(arg: T): T {\n  return arg;\n}\n\nlet output1 = identity<string>("myString");\nlet output2 = identity<number>(100);`
+    },
+    keyPoints: [
+      "Generics use angle brackets like \`<T>\`.",
+      "The letter \`T\` stands for \"Type\".",
+      "They make functions highly reusable without using the dangerous \`any\` type.",
+      "TypeScript can usually infer the generic type automatically."
+    ]
   },
   enums: {
     title: "TypeScript Enums",
-    description: "An enum is a special class that represents a group of constants (unchangeable variables).",
-    intro: "Enums come in two flavors string and numeric.",
+    description: "Enums group related constant values together.",
+    intro: "An Enum (short for Enumeration) is a special feature that creates a collection of related, unchangeable values. Developers use them for things that have a specific set of options, like the days of the week, or user permission levels.",
     example: {
       language: "typescript",
-      code: `enum Direction {\n  Up = 1,\n  Down,\n  Left,\n  Right,\n}`
-    }
+      code: `/* this creates an enum */\nenum UserRole {\n  Admin = "ADMIN",\n  Editor = "EDITOR",\n  Viewer = "VIEWER"\n}\n\nconst myRole: UserRole = UserRole.Admin;`
+    },
+    keyPoints: [
+      "Enums can be numeric (0, 1, 2) or string-based (\"A\", \"B\", \"C\").",
+      "String enums are usually easier to debug.",
+      "They prevent spelling mistakes when typing out specific options.",
+      "Unlike interfaces, Enums compile into actual JavaScript code."
+    ]
   },
   tuples: {
     title: "TypeScript Tuples",
-    description: "A tuple is a typed array with a pre-defined length and types for each index.",
-    intro: "Tuples are great because they allow each element in the array to be a known type of value.",
+    description: "Tuples are arrays with a fixed length and strict types.",
+    intro: "A standard array in TypeScript can hold as many items as you want. A Tuple is a strict array where you define exactly how many items it holds, and exactly what type of data belongs in each specific slot.",
     example: {
       language: "typescript",
-      code: `let ourTuple: [number, boolean, string];\n\n// initialize correctly\nourTuple = [5, false, 'Coding God was here'];`
-    }
+      code: `/* this creates a tuple */\nlet myTuple: [number, string, boolean];\n\n// This works perfectly\nmyTuple = [1, "Alice", true];\n\n// myTuple = ["Alice", 1, true]; // Error: Wrong order!`
+    },
+    keyPoints: [
+      "Define a Tuple using square brackets \`[type1, type2]\`.",
+      "The order of the data must match the definition exactly.",
+      "They are commonly used in React Hooks (like \`useState\`).",
+      "You cannot add extra items beyond the defined length."
+    ]
   },
   "type-assertions": {
     title: "TypeScript Type Assertions",
-    description: "Sometimes you will have information about the type of a value that TypeScript can't know about.",
-    intro: "In this situation, you can use a type assertion to specify a more specific type.",
+    description: "Type Assertions force TypeScript to accept a specific type.",
+    intro: "Sometimes developers know more about a specific value than the TypeScript compiler does, especially when reading HTML elements from the DOM. A Type Assertion tells the compiler, \"Trust me, I know exactly what type this is.\"",
     example: {
       language: "typescript",
-      code: `const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;`
-    }
+      code: `/* this forces a type assertion */\nconst myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;\n\n// Now TypeScript knows myCanvas has canvas-specific methods`
+    },
+    keyPoints: [
+      "Use the \`as\` keyword to assert a type.",
+      "It overrides TypeScript's internal guessing engine.",
+      "It does not actually change or format the data itself.",
+      "Only use it when you are absolutely certain of the data type."
+    ]
   },
   functions: {
     title: "TypeScript Functions",
-    description: "TypeScript has specific syntax for typing function parameters and return values.",
-    intro: "You can add types to each of the parameters and then to the function itself to add a return type.",
+    description: "TypeScript strictly types function inputs and outputs.",
+    intro: "Functions are the core building blocks of JavaScript. TypeScript allows developers to lock down exactly what type of data goes into a function as arguments, and exactly what type of data the function is allowed to return.",
     syntax: {
       language: "typescript",
-      code: `function multiply(a: number, b: number): number {\n  return a * b;\n}`
-    }
+      code: `/* this types a function */\nfunction addNumbers(a: number, b: number): number {\n  return a + b;\n}`
+    },
+    keyPoints: [
+      "Define argument types inside the parentheses \`(a: number)\`.",
+      "Define the return type after the parentheses \`(): number\`.",
+      "Use \`void\` if the function does not return anything.",
+      "TypeScript throws an error if you pass the wrong number of arguments."
+    ]
   },
   classes: {
     title: "TypeScript Classes",
-    description: "TypeScript adds types and visibility modifiers to JavaScript classes.",
-    intro: "Members of a class (properties & methods) are typed using type annotations, similar to variables.",
+    description: "TypeScript adds strict types to Object-Oriented classes.",
+    intro: "JavaScript uses classes to create blueprints for complex objects, like a Player or an Enemy in a game. TypeScript forces developers to declare every property and its type before the class even starts building the object.",
     example: {
       language: "typescript",
-      code: `class Person {\n  name: string;\n  constructor(name: string) {\n    this.name = name;\n  }\n  getName(): string {\n    return this.name;\n  }\n}`
-    }
+      code: `/* this creates a typed class */\nclass Player {\n  name: string;\n  score: number;\n\n  constructor(playerName: string) {\n    this.name = playerName;\n    this.score = 0;\n  }\n}`
+    },
+    keyPoints: [
+      "You must declare all properties at the top of the class.",
+      "The \`constructor\` initializes the actual data.",
+      "Methods inside the class also require strict types.",
+      "It prevents missing properties when creating new objects."
+    ]
   },
   "access-modifiers": {
     title: "TypeScript Access Modifiers",
-    description: "Class members can be given special modifiers which affect visibility.",
-    intro: "There are three main access modifiers in TypeScript: `public`, `private`, and `protected`.",
+    description: "Access Modifiers protect class data from being changed accidentally.",
+    intro: "In normal JavaScript, anyone can reach inside a class and change its data. TypeScript introduces Access Modifiers, which act like security guards. They decide exactly which parts of the code are allowed to view or modify specific class properties.",
     keyPoints: [
-      "`public` - (default) allows access to the class member from anywhere",
-      "`private` - only allows access to the class member from within the class",
-      "`protected` - allows access to the class member from itself and any classes that inherit it"
+      "\`public\` allows any code anywhere to access the data (this is the default).",
+      "\`private\` completely locks the data so only the class itself can see it.",
+      "\`protected\` allows the class and any child classes to access the data.",
+      "They prevent other developers from breaking the class logic."
     ]
   },
   decorators: {
     title: "TypeScript Decorators",
-    description: "Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.",
-    intro: "Decorators are a stage 2 proposal for JavaScript and are available as an experimental feature of TypeScript.",
+    description: "Decorators attach special behavior to classes and functions.",
+    intro: "A Decorator is a special type of declaration that attaches extra features to a class or a function without changing its internal code. You often see them used heavily in popular frameworks like Angular or NestJS.",
     example: {
       language: "typescript",
-      code: `function sealed(constructor: Function) {\n  Object.seal(constructor);\n  Object.seal(constructor.prototype);\n}`
-    }
+      code: `/* this uses a decorator */\n@LogClassCreation\nclass UserProfile {\n  constructor() {\n    console.log("Profile created");\n  }\n}`
+    },
+    keyPoints: [
+      "Decorators always start with the \`@\` symbol.",
+      "They are an advanced, experimental TypeScript feature.",
+      "You must enable them manually in the \`tsconfig.json\` file.",
+      "They are essentially just functions that wrap other functions."
+    ]
   },
   modules: {
     title: "TypeScript Modules",
-    description: "TypeScript shares the same module concept as JavaScript.",
-    intro: "You can use `import` and `export` to share code between files.",
+    description: "TypeScript Modules share code securely between different files.",
+    intro: "A massive application cannot live in one single file. TypeScript uses the exact same Module system as modern JavaScript, allowing developers to split their code into hundreds of small files and link them together perfectly.",
     example: {
       language: "typescript",
-      code: `// math.ts\nexport function add(x: number, y: number): number {\n  return x + y;\n}\n\n// app.ts\nimport { add } from './math';\nconsole.log(add(10, 20));`
-    }
+      code: `/* this exports and imports code */\n// file1.ts\nexport const apiKey = "12345";\n\n// file2.ts\nimport { apiKey } from './file1';\nconsole.log(apiKey);`
+    },
+    keyPoints: [
+      "Use \`export\` to make a variable or function available to other files.",
+      "Use \`import\` to bring that code into a new file.",
+      "Every file containing an import or export is considered a Module.",
+      "It keeps large codebases organized and maintainable."
+    ]
   },
   "utility-types": {
     title: "TypeScript Utility Types",
-    description: "TypeScript comes with a large number of types that can help with some common type manipulation.",
-    intro: "Common utility types include `Partial<T>`, `Required<T>`, `Readonly<T>`, `Record<K, T>`, `Pick<T, K>`, and `Omit<T, K>`.",
+    description: "Utility Types transform existing types into new shapes instantly.",
+    intro: "Sometimes you have a strict Interface, but you only need a few properties from it, or you want to make all the properties optional temporarily. TypeScript provides built-in Utility Types to transform your data structures without writing brand new ones from scratch.",
     example: {
       language: "typescript",
-      code: `interface Point {\n  x: number;\n  y: number;\n}\n\nlet pt: Partial<Point> = {}; // Valid`
-    }
+      code: `/* this makes an interface optional */\ninterface User {\n  name: string;\n  age: number;\n}\n\n// Partial makes name and age optional\ntype OptionalUser = Partial<User>;`
+    },
+    keyPoints: [
+      "\`Partial<T>\` makes all properties optional.",
+      "\`Required<T>\` makes all properties required.",
+      "\`Pick<T, K>\` grabs specific properties from a type.",
+      "\`Omit<T, K>\` deletes specific properties from a type."
+    ]
   },
   tsconfig: {
     title: "TypeScript tsconfig.json",
-    description: "The tsconfig.json file specifies the root files and the compiler options required to compile the project.",
-    intro: "When you run `tsc --init` it creates a `tsconfig.json` file in your directory.",
+    description: "The tsconfig.json file configures the entire TypeScript compiler.",
+    intro: "The TypeScript compiler (\`tsc\`) needs instructions on exactly how strict to be and what kind of JavaScript file to spit out at the end. The \`tsconfig.json\` file sits at the root of your project and holds all of these critical settings.",
     syntax: {
       language: "json",
-      code: `{\n  "compilerOptions": {\n    "target": "es5",\n    "module": "commonjs",\n    "strict": true\n  }\n}`
-    }
+      code: `/* this is a configuration file */\n{\n  "compilerOptions": {\n    "target": "es2022",\n    "module": "commonjs",\n    "strict": true\n  }\n}`
+    },
+    keyPoints: [
+      "It is created automatically by running \`tsc --init\`.",
+      "The \`target\` specifies the output JavaScript version (like ES5 or ES2022).",
+      "The \`strict\` flag turns on maximum safety features.",
+      "It controls where the final compiled files are saved."
+    ]
   },
   "strict-mode": {
     title: "TypeScript Strict Mode",
-    description: "Strict Mode enforces stricter type checking.",
-    intro: "Enabling the `strict` flag enables a wide range of type checking behavior that results in stronger guarantees of program correctness.",
+    description: "Strict Mode forces developers to write the safest code possible.",
+    intro: "By default, TypeScript lets a few sloppy coding habits slide. Activating Strict Mode in the configuration file turns on the maximum level of type checking. It prevents developers from taking shortcuts, resulting in virtually bug-free code.",
     keyPoints: [
-      "`noImplicitAny` raises an error on expressions and declarations with an implied `any` type.",
-      "`strictNullChecks` prevents `null` and `undefined` from being assigned to other types."
+      "Enable it by setting \`\"strict\": true\` in \`tsconfig.json\`.",
+      "It blocks the dangerous \`any\` type when the compiler can't guess the type.",
+      "It prevents errors where variables might accidentally be \`null\` or \`undefined\`.",
+      "Professional teams always keep Strict Mode turned on."
     ]
   }
 };