Merge pull request #220 from codeharborhub/dev-1

ADD: AdsComponent

Author: ajay-dhangar

absolute-beginners/frontend-beginner/html/adding-images.mdx

@@ -7,6 +7,8 @@ description: "Learn how to bring your website to life with pictures."
 
 A website without pictures is like a book without a cover, it can be great, but it's much harder to grab someone's attention! Today, you are going to learn how to embed images into your pages.
 
+<AdsComponent />
+
 ## The "No-Sandwich" Tag
 
 Most tags we've learned (`<h1>`, `<p>`, `<ul>`) are like sandwiches: they have a start and an end. 
@@ -22,7 +24,6 @@ To show an image, we need two very important "Attributes" (extra pieces of info)
 
 ```html
 <img src="https://codeharborhub.github.io/img/codeharborhub-social-card.jpg" alt="codeharborhub social card">
-
 ```
 
 ### Why is `alt` text so important?
@@ -39,7 +40,6 @@ You can link to any image already on the internet.
 
 ```html
 <img src="https://codeharborhub.github.io/img/nav-logo.jpg" alt="CodeHarborHub Official Logo">
-
 ```
 
 ### 2. Using a Local File (Internal)
@@ -48,16 +48,16 @@ If you have a photo on your computer, put it in the same folder as your `index.h
 
 ```html
 <img src="./my-photo.jpg" alt="Me at the beach">
-
 ```
 
+<AdsComponent />
+
 ## Changing the Size
 
 Sometimes an image is way too big and takes up the whole screen. You can control the size directly in HTML using `width` and `height`.
 
 ```html
 <img src="./cool-robot.png" alt="A cool blue robot" width="300" height="200">
-
 ```
 
 :::warning Beginner Alert!
@@ -79,7 +79,6 @@ Let’s combine everything! Try to build this in your `index.html`:
         <li>Coffee</li>
     </ul>
 </div>
-
 ```
 
 ## Summary Checklist

absolute-beginners/frontend-beginner/html/final-project.mdx

@@ -9,6 +9,8 @@ Congratulations! You’ve moved from "What is a tag?" to understanding the full
 
 Your mission is to create a **Personal Portfolio Page**. This site will tell the world who you are, what you’re learning, and how to contact you.
 
+<AdsComponent />
+
 ## The Project Blueprint
 
 Before we code, let's look at the structure we want to achieve. We are going to use **Semantic HTML** to keep it professional.
@@ -49,6 +51,8 @@ Create a final `<section>`.
 
 Add a `<footer>` at the very bottom with a copyright notice: `&copy; 2026 [Your Name]`.
 
+<AdsComponent />
+
 ## The "Final Boss" Code Template
 
 If you get stuck, here is a structure to guide you. Try to fill in the blanks with your own info!
@@ -103,10 +107,9 @@ If you get stuck, here is a structure to guide you. Try to fill in the blanks wi
 
 </body>
 </html>
-
 ```
 
----
+<AdsComponent />
 
 ## How to Make it "Your Own"
 

absolute-beginners/frontend-beginner/html/forms-and-inputs.mdx

@@ -8,13 +8,14 @@ Up until now, your website has been a "One-Way Street"—you talk, and the user
 
 Whether it’s a Google search bar or a Facebook login, they all use the same HTML tags you're about to learn.
 
+<AdsComponent />
+
 ## 1. The Container: The `<form>` Tag
 
 Just like a list needs a `<ul>` "box," all your inputs need to live inside a `<form>` tag.
 
 ```html
 <form> </form>
-
 ```
 
 ## 2. The Text Box: `<input>`
@@ -32,7 +33,6 @@ The `<input>` tag is the most versatile tag in HTML. By changing its `type`, you
 ```html
 <input type="text" placeholder="Enter your name">
 <input type="password" placeholder="Password">
-
 ```
 
 ## 3. The Label: `<label>`
@@ -42,13 +42,14 @@ Every input needs a label. Without a label, a user won't know what the box is fo
 ```html
 <label for="username">Username:</label>
 <input type="text" id="username" name="username">
-
 ```
 
 :::tip Why use Labels?
 If you click on the text of a label, the browser automatically puts the cursor inside the input box. It’s great for accessibility and mobile users!
 :::
 
+<AdsComponent />
+
 ## 4. Choices: Checkboxes and Radios
 
 Sometimes you want users to pick from options rather than typing.
@@ -64,7 +65,6 @@ Sometimes you want users to pick from options rather than typing.
 <p>Choose your favorite:</p>
 <input type="radio" id="coffee" name="drink"> <label for="coffee">Coffee</label>
 <input type="radio" id="tea" name="drink"> <label for="tea">Tea</label>
-
 ```
 
 ## 5. The "Go" Button: `<button>`
@@ -73,7 +73,6 @@ A form is useless if you can't submit it!
 
 ```html
 <button type="submit">Send Message 🚀</button>
-
 ```
 
 ## Practice: Build a "Join the Club" Form
@@ -95,9 +94,10 @@ Copy this into your `index.html` to see a full, working form structure:
 
     <button type="submit">Sign Me Up!</button>
 </form>
-
 ```
 
+<AdsComponent />
+
 ## Important Beginner Tip
 
 In 2026, when you click "Submit," the page will usually refresh. Later, when we learn **JavaScript**, we will learn how to catch that data and send it to a database without the page refreshing!

absolute-beginners/frontend-beginner/html/hyperlinks.mdx

@@ -9,13 +9,14 @@ If HTML is the skeleton, and images are the skin, then **Hyperlinks** are the ne
 
 In HTML, we create links using the **Anchor Tag**: `<a>`.
 
+<AdsComponent />
+
 ## The Anatomy of a Link
 
 To make a link, you need a destination. We use the `href` attribute (which stands for **H**ypertext **REF**erence) to tell the browser where to go.
 
 ```html
 <a href="https://www.google.com">Click here to go to Google</a>
-
 ```
 
 ### How to read this:
@@ -35,7 +36,6 @@ Use these when you want to send someone to a completely different website.
 
 ```html
 <a href="https://codeharborhub.github.io" target="_blank">Visit CodeHarborHub</a>
-
 ```
 
 ### 2. Internal Links (Moving between your own pages)
@@ -44,7 +44,6 @@ If you have a file named `about.html` in the same folder as your `index.html`, y
 
 ```html
 <a href="about.html">Learn more about me</a>
-
 ```
 
 ## Creative Linking: Images as Links
@@ -55,9 +54,10 @@ You aren't limited to just linking text! You can wrap the `<a>` tag around an `<
 <a href="https://youtube.com">
     <img src="youtube-logo.png" alt="Watch my videos on YouTube" width="50">
 </a>
-
 ```
 
+<AdsComponent />
+
 ## The "Dead End" (Avoid this!)
 
 Have you ever clicked a link and it took you nowhere? Beginners often forget to include the `http://` or `https://` for external sites.
@@ -78,7 +78,6 @@ Try to add a "Menu" to the top of your `index.html` file so users can find their
 
 <h1>Welcome to my Homepage</h1>
 <p>Feel free to explore the links above!</p>
-
 ```
 
 :::info Why "Anchor"?

absolute-beginners/frontend-beginner/html/intro-to-html.mdx

@@ -10,6 +10,8 @@ Welcome to the **HTML** tutorial at CodeHarborHub! If you've ever wanted to buil
 
 **HTML (HyperText Markup Language)** is the very first step for every developer. It is the raw structure the bones of every website on the planet.
 
+<AdsComponent />
+
 ## Why HTML First?
 
 Before you can make a site look "cool" with **CSS** or "smart" with **JavaScript**, you must give it a **structure**.
@@ -45,6 +47,8 @@ To follow along with these tutorials, you only need two things:
 You don't need a powerful computer to be a web developer. If your computer can run a web browser, it can run HTML!
 :::
 
+<AdsComponent />
+
 ## Ready to Start?
 
 Don't just read **build**. We have designed these tutorials to be hands-on. By the end of this tutorials, you will have built your very first **Personal Portfolio Page**.

absolute-beginners/frontend-beginner/html/lists-and-orders.mdx

@@ -7,6 +7,8 @@ description: "Learn how to create bullet points and numbered lists in HTML."
 
 Imagine trying to read a grocery list where all the items were just jammed into one long sentence. *Messy, right?* In HTML, we have two main ways to organize items so they are easy to read. Whether you are listing your favorite games or the steps to bake a cake, there is a tag for that!
 
+<AdsComponent />
+
 ## 1. The "Random" List (Unordered)
 
 If the order doesn't matter (like a shopping list), we use an **Unordered List**. 
@@ -21,7 +23,6 @@ If the order doesn't matter (like a shopping list), we use an **Unordered List**
     <li>Oat Milk</li>
     <li>Coffee Beans</li>
 </ul>
-
 ```
 
 :::tip Pro Tip
@@ -42,9 +43,10 @@ If the order **does** matter (like a recipe or a Top 10 list), we use an **Order
     <li>Patience</li>
     <li>Searching on Google</li>
 </ol>
-
 ```
 
+<AdsComponent />
+
 ## Building a "Survival Guide"
 
 Let's combine everything we've learned so far. Copy this into your `index.html`:
@@ -65,7 +67,6 @@ Let's combine everything we've learned so far. Copy this into your `index.html`:
     <li>Canned Beans</li>
     <li><em>Extra Batteries</em></li>
 </ul>
-
 ```
 
 ## The "Parent & Child" Concept

absolute-beginners/frontend-beginner/html/semantic-html.mdx

@@ -8,6 +8,8 @@ Imagine walking into a supermarket where none of the aisles have signs. The milk
 
 **Semantic HTML** is like putting signs on your aisles. It tells the browser and search engines (like Google) exactly what each part of your webpage is.
 
+<AdsComponent />
+
 ## What is "Semantic"?
 
 The word **Semantic** simply means "relating to meaning." 
@@ -41,6 +43,8 @@ You might think, *"But my site looks the same whether I use a div or a header!"*
 2.  **SEO (Search Engine Optimization):** Google’s bots read your site. If they see an `<article>` tag, they know that’s the important stuff to show in search results!
 3.  **Cleaner Code:** It’s much easier to read `<header>` than to see a sea of 100 `<div>` tags.
 
+<AdsComponent />
+
 ## Practice: Upgrade Your Skeleton
 
 Let's take our basic skeleton and make it professional. Copy this into your `index.html`:
@@ -82,7 +86,6 @@ Let's take our basic skeleton and make it professional. Copy this into your `ind
 
 </body>
 </html>
-
 ```
 
 ## Summary Checklist

absolute-beginners/frontend-beginner/html/text-power.mdx

@@ -9,6 +9,8 @@ Now that you have your **Skeleton** ready, it’s time to add some content! In t
 
 In HTML, we use specific tags to tell the browser: *"This is important!"* or *"This is just a regular sentence."*
 
+<AdsComponent />
+
 ## 1. The Heading Hierarchy (`<h1>` to `<h6>`)
 
 Think of headings like a **Newspaper**. You have the big front-page headline, sub-headlines, and smaller section titles.
@@ -49,9 +51,10 @@ Sometimes you want to emphasize a word. In 2026, we use these tags to make our t
 
 ```html title="index.html"
 <p>I am learning HTML at <strong>CodeHarborHub</strong> and it is <em>awesome</em>!</p>
-
 ```
 
+<AdsComponent />
+
 ## Let's Build a "News Article"
 
 Copy this code into your `index.html` file (inside the `<body>` tags) to see how a real structure looks:

absolute-beginners/frontend-beginner/html/the-skeleton.mdx

@@ -9,6 +9,8 @@ If you opened up a car, you’d see a chassis. If you looked at a house, you’d
 
 Without this skeleton, the browser (Chrome or Safari) won't know how to read your code properly!
 
+<AdsComponent />
+
 ## The "Must-Have" Boilerplate
 
 Every time you start a new project, you begin with these exact lines of code. Think of it as the "Startup Sequence" for a website.
@@ -61,6 +63,8 @@ This part is **invisible** to your visitors. It contains:
 
 ***This is the most important part!*** Everything you put here text, images, buttons, videos, is what the user actually sees.
 
+<AdsComponent />
+
 ## Interactive Exercise: Your Turn!
 
 1. Open **VS Code** (or any text editor).

absolute-beginners/index.mdx

@@ -9,6 +9,8 @@ Welcome to the **CodeHarborHub** family! You are standing at the starting line o
 
 In this track, we don't just teach you how to "copy and paste" code. We teach you how to **think like a developer.**
 
+<AdsComponent />
+
 ## Your Learning Roadmap
 
 We have broken down the massive world of web development into three simple, bite-sized stages. Think of it like building a house: