---
# System prepended metadata

title: IT 23 - WEB SYSTEMS AND TECHNOLOGIES

---

### Lesson 01 - Introduction to Web Technologies  

#### 1. **Overview of the Web**  
The web (World Wide Web) is a collection of documents and resources that are interconnected using hyperlinks and can be accessed via the internet.  
- **Web pages** are created using **HTML** (to structure content), **CSS** (to style content), and **JavaScript** (to add interactivity).  
- Browsers like Chrome, Firefox, or Safari are used to view web pages.  
- The **client-server model**:  
  - **Client**: The user's device (browser).  
  - **Server**: Stores and sends requested data (like websites).  

#### 2. **Understanding Front-End vs. Back-End Development** 

Web development is divided into two main parts:  
- **Front-End (Client-Side)**:  
  This is what users see and interact with on the website.  
  - Languages/Technologies:  
    - **HTML**: Creates the structure of web pages.  
    - **CSS**: Adds styles (colors, layouts, fonts).  
    - **JavaScript**: Makes pages interactive (e.g., dropdown menus, animations).  
  - Tools/Libraries: Frameworks like **Bootstrap** make front-end design faster and responsive.  

- **Back-End (Server-Side)**:  
  This is the "behind-the-scenes" part, handling the logic, database interactions, and server communication.  
  - Languages/Technologies:  
    - Server-side languages (e.g., Python, PHP, Node.js).  
    - Databases (e.g., MySQL, MongoDB).  
  - The back-end processes data (e.g., user logins) and sends it back to the front-end.  

#### 3. **Web Technologies Stack** 

A **stack** is a set of technologies that work together to build a website or app. For beginners, here’s a common stack:  
- **HTML**: Builds the structure of the page (headings, paragraphs, images).  
- **CSS**: Designs the look and layout.  
- **JavaScript**: Adds behavior and interactivity (e.g., forms that validate input without reloading).  
- **Bootstrap**: A CSS framework for building responsive, mobile-first sites easily. It provides pre-styled components (e.g., navigation bars, buttons).  

#### 4. **Introduction to HTML5 Structure and Syntax** 

**HTML5** is the latest version of HTML and introduces new elements to better structure content.  
**Basic HTML5 Structure**:  

```html
<!DOCTYPE html> <!-- Tells the browser to use HTML5 -->
<html lang="en"> <!-- The root element -->
<head>
  <meta charset="UTF-8"> <!-- Defines character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Makes the page mobile-responsive -->
  <title>My First Web Page</title> <!-- Sets the title shown on the browser tab -->
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1> <!-- Main heading -->
  </header>
  <main>
    <p>This is my first HTML page!</p>
  </main>
  <footer>
    <p>&copy; 2024 My Website</p> <!-- Footer section -->
  </footer>
</body>
</html>
``` 

**Key HTML5 Features**:  
- **Semantic Tags**: Tags like `<header>`, `<footer>`, `<article>`, `<section>` make the structure meaningful and easier to read.  
- **Media Support**: Built-in support for audio (`<audio>`) and video (`<video>`) elements.  


---
### Lesson 02 - Essential HTML5 Elements  
These elements are the building blocks of any webpage. We'll cover the basics in this batch: **Headings, paragraphs, and formatting tags.**

#### **1. Headings**
Headings help organize your content into sections, making it easier for users (and search engines) to understand. HTML has six levels of headings, `<h1>` to `<h6>`, where `<h1>` is the most important (used for main titles) and `<h6>` is the least important.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Headings Example</title>
</head>
<body>
  <h1>Main Title</h1>
  <h2>Section Title</h2>
  <h3>Subsection Title</h3>
  <h4>Smaller Subsection</h4>
  <h5>Minor Heading</h5>
  <h6>Least Important Heading</h6>
</body>
</html>
```


#### **2. Paragraphs**
Paragraphs are used to group blocks of text content. Use the `<p>` tag to create a paragraph.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paragraph Example</title>
</head>
<body>
  <p>This is the first paragraph on my webpage.</p>
  <p>Here is another paragraph of text, with more information.</p>
</body>
</html>
```


#### **3. Formatting Tags**
HTML offers tags to emphasize text, make it bold, italic, or styled differently. Here are the most commonly used formatting tags:  
- **Bold:** `<b>` or `<strong>`  
- **Italic:** `<i>` or `<em>`  
- **Underline:** `<u>` (use sparingly, as it may confuse users who think it's a link)  
- **Superscript:** `<sup>` (e.g., for exponents or ordinal indicators)  
- **Subscript:** `<sub>` (e.g., for chemical formulas)  
- **Monospace (code-style text):** `<code>`  

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formatting Tags Example</title>
</head>
<body>
  <p>This is <b>bold</b> text, and this is <strong>strongly emphasized</strong>.</p>
  <p>This is <i>italicized</i>, and this is <em>emphasized.</em></p>
  <p>Water’s formula is H<sub>2</sub>O, and Einstein’s equation is E = mc<sup>2</sup>.</p>
  <p>To display code: <code>console.log('Hello, World!');</code></p>
</body>
</html>
```


#### **4. Links**
Links connect one web page to another. They use the `<a>` (anchor) tag, and the destination (URL) is specified in the `href` attribute. Links can navigate to:  
- Other websites (external links)  
- Pages within your website (internal links)  
- Sections within the same page (anchor links)  

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Links Example</title>
</head>
<body>
  <p>This is an <a href="https://www.google.com" target="_blank">external link to Google</a>.</p>
  <p>This is an <a href="about.html">internal link</a> to the "About" page of this website.</p>
  <p>Click <a href="#section1">here</a> to jump to a section on this page.</p>

  <h2 id="section1">Section 1</h2>
  <p>Welcome to Section 1!</p>
</body>
</html>
```


#### **5. Images**
Images are added using the `<img>` tag. It is self-closing and requires these attributes:  
- `src`: Specifies the image file path or URL.  
- `alt`: Provides alternative text for accessibility and when the image cannot be displayed.  
- Optional attributes include `width` and `height`.  

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Images Example</title>
</head>
<body>
  <h1>My Favorite Animal</h1>
  <img src="cat.jpg" alt="A cute cat" width="300">
  <p>The image above is of a cat.</p>
</body>
</html>
```


#### **6. Tables**
Tables organize data into rows and columns. The main tags used in tables are:  
- `<table>`: Defines the table.  
- `<tr>`: Defines a row.  
- `<td>`: Defines a cell (data).  
- `<th>`: Defines a header cell. By default, header cells are bold and centered.  
- Optional: Use the `border` attribute to add a border.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tables Example</title>
</head>
<body>
  <h1>Student Grades</h1>
  <table border="1">
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Grade</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Math</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Science</td>
      <td>B+</td>
    </tr>
  </table>
</body>
</html>
```


#### **7. Lists: Ordered, Unordered, and Description**

Lists are used to organize content into items, which can be structured as bullet points, numbers, or descriptions.


##### **a. Unordered Lists**
Unordered lists display items with bullet points by default. Use the `<ul>` (unordered list) tag and `<li>` (list item) tag for each item.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Unordered List Example</title>
</head>
<body>
  <h1>My Hobbies</h1>
  <ul>
    <li>Reading</li>
    <li>Cooking</li>
    <li>Traveling</li>
  </ul>
</body>
</html>
```


##### **b. Ordered Lists**
Ordered lists display items with numbers by default. Use the `<ol>` (ordered list) tag and `<li>` (list item) tag for each item.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ordered List Example</title>
</head>
<body>
  <h1>Steps to Make Coffee</h1>
  <ol>
    <li>Boil water.</li>
    <li>Add coffee to the cup.</li>
    <li>Pour hot water into the cup.</li>
    <li>Stir and enjoy.</li>
  </ol>
</body>
</html>
```

**Practice Task:**  
Create a webpage with an ordered list explaining steps for one of your favorite recipes or a daily routine.  


##### **c. Description Lists**
Description lists pair terms with descriptions, perfect for defining key terms or creating glossaries. Use the `<dl>` (description list) tag, `<dt>` (term) tag, and `<dd>` (description) tag.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Description List Example</title>
</head>
<body>
  <h1>Programming Languages</h1>
  <dl>
    <dt>HTML</dt>
    <dd>The standard markup language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>Used to style and layout web pages.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language that adds interactivity to web pages.</dd>
  </dl>
</body>
</html>
```

##### **d. Summary of All Three List Types:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lists Summary</title>
</head>
<body>
  <h1>All About Lists</h1>
  
  <h2>Unordered List</h2>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>

  <h2>Ordered List</h2>
  <ol>
    <li>Wake up</li>
    <li>Brush teeth</li>
    <li>Have breakfast</li>
  </ol>

  <h2>Description List</h2>
  <dl>
    <dt>HTML</dt>
    <dd>Creates the structure of web pages.</dd>
    <dt>CSS</dt>
    <dd>Adds style to web pages.</dd>
  </dl>
</body>
</html>
```

---

### Lesson 03 -HTML5 Forms and Inputs

Forms are a key part of any website, enabling users to submit data (like signups, feedback, or search queries). Let’s explore **form elements**, **input types**, and **form validation attributes**.


#### **1. Form Elements**  

HTML forms are created using the `<form>` tag, which groups input fields together. Key form elements include:  
- `<input>`: Defines various types of data input fields.  
- `<textarea>`: Creates multi-line text input fields.  
- `<select>`: Creates dropdown menus.  


**Basic Form Structure:**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Form</title>
</head>
<body>
  <h1>Contact Us</h1>
  <form action="/submit" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    
    <label for="country">Country:</label>
    <select id="country" name="country">
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="india">India</option>
    </select><br><br>
    
    <button type="submit">Submit</button>
  </form>
</body>
</html>
```

**Explanation:**  
- `<form>`: Groups the form elements. The `action` attribute specifies where to send the form data, and the `method` defines how it’s sent (e.g., GET or POST).  
- `<input>`: Creates a single-line input field.  
- `<textarea>`: For multi-line input, like messages. The `rows` and `cols` attributes set its size.  
- `<select>` and `<option>`: For dropdowns. Each `<option>` specifies a choice.  



#### **2. Input Types**

HTML5 introduced many input types to make forms more versatile. Here are the most common types:

| **Type**       | **Description**                                                                 |
|-----------------|---------------------------------------------------------------------------------|
| `text`         | A single-line text input.                                                      |
| `email`        | Validates an email format (e.g., `name@example.com`).                          |
| `password`     | Hides the input (for passwords).                                               |
| `number`       | Only allows numeric input.                                                     |
| `date`         | Displays a date picker.                                                       |
| `file`         | Allows file uploads.                                                          |
| `color`        | Displays a color picker.                                                      |
| `checkbox`     | For selecting multiple options.                                               |
| `radio`        | For selecting one option out of a group.                                       |
| `submit`       | Submits the form data.                                                        |

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Types Example</title>
</head>
<body>
  <h1>Signup Form</h1>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>

    <label for="birthdate">Birthdate:</label>
    <input type="date" id="birthdate" name="birthdate"><br><br>

    <label for="gender">Gender:</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>

    <button type="submit">Sign Up</button>
  </form>
</body>
</html>
```


#### **3. Form Validation Attributes**

HTML5 provides built-in attributes for form validation. These ensure the user submits correct data without JavaScript.

| **Attribute**   | **Description**                                                                     |
|------------------|-------------------------------------------------------------------------------------|
| `required`      | Ensures the field is filled out before submission.                                  |
| `pattern`       | Specifies a regular expression the input must match.                               |
| `maxlength`     | Limits the number of characters in the input.                                       |
| `min` / `max`   | Sets a numeric or date range.                                                       |
| `step`          | Specifies increments (e.g., step="0.01" for decimals).                             |

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation Example</title>
</head>
<body>
  <h1>Registration Form</h1>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" minlength="8" required><br><br>

    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100"><br><br>

    <label for="zip">Zip Code:</label>
    <input type="text" id="zip" name="zip" pattern="[0-9]{5}" required>
    <small>Format: 5 digits</small><br><br>

    <button type="submit">Register</button>
  </form>
</body>
</html>
```
---
### **Lesson 04 - Semantic HTML5 and Accessibility**

Semantic HTML5 focuses on using meaningful tags to structure a webpage. These tags improve accessibility, readability, and search engine optimization (SEO). Accessibility ensures that web content is usable by everyone, including people with disabilities.



#### **1. Semantic Elements**  
Semantic elements clearly describe their purpose in the structure of a webpage. This is crucial for developers, screen readers, and search engines.

##### **Key Semantic Elements:**
| **Element**   | **Purpose**                                                                 |
|----------------|-----------------------------------------------------------------------------|
| `<header>`    | Represents the top of a webpage or a section (e.g., a banner or navigation).|
| `<footer>`    | Represents the bottom of a page or section (e.g., copyright info).          |
| `<section>`   | Defines a thematic grouping of content (e.g., a page subsection).           |
| `<article>`   | Represents a self-contained piece of content (e.g., a blog post).           |



##### **a. Example of Semantic Elements:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML Example</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section>
    <h2>Welcome to My Blog</h2>
    <p>This is a section introducing my blog topics and content.</p>
  </section>

  <article>
    <h2>My First Post</h2>
    <p>This article discusses my journey into web development.</p>
  </article>

  <footer>
    <p>&copy; 2024 My Blog. All rights reserved.</p>
  </footer>
</body>
</html>
```

#### **2. Accessibility Basics**

Accessibility ensures that all users, including those with disabilities, can interact with and understand web content. Let’s explore some essential practices.

##### **a. Alt Attributes**
The `alt` attribute is used with the `<img>` tag to describe images. Screen readers read this text aloud for visually impaired users.  
- Use meaningful descriptions.  
- Avoid "image of..." or "picture of...".  

**Example:**
```html
<img src="dog.jpg" alt="Golden Retriever sitting in a park">
```


##### **b. ARIA Roles**
Accessible Rich Internet Applications (ARIA) roles help make web elements more accessible. ARIA roles describe the purpose of non-semantic elements or enhance semantic ones.

| **Common ARIA Roles** | **Purpose**                       |
|------------------------|-----------------------------------|
| `role="banner"`        | Marks the main header.           |
| `role="navigation"`    | Identifies navigation links.     |
| `role="main"`          | Marks the primary content.       |
| `role="complementary"` | Marks related content or sidebar.|

**Example with ARIA Roles:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessibility Example</title>
</head>
<body>
  <header role="banner">
    <h1>Accessible Webpage</h1>
  </header>

  <nav role="navigation">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>

  <main role="main">
    <section>
      <h2>About Us</h2>
      <p>Learn about our mission and values.</p>
    </section>
  </main>

  <aside role="complementary">
    <h2>Related Links</h2>
    <ul>
      <li><a href="#faq">FAQ</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2024 Accessible Webpage</p>
  </footer>
</body>
</html>
```


##### **c. Best Practices for Accessibility**
1. **Use Descriptive Links:** Avoid "Click here." Instead, use meaningful text like "Read our accessibility guide."  
2. **Ensure Keyboard Navigation:** Test forms and navigation using only the keyboard (tab, arrow keys, etc.).  
3. **Contrast Ratio:** Ensure good color contrast for text readability.  
4. **Use Labels for Inputs:** Associate input fields with labels for better clarity.  
   ```html
   <label for="username">Username:</label>
   <input type="text" id="username" name="username">
   ```

---

### **Lesson 05 - Introduction to CSS (Cascading Style Sheets)**  
CSS is used to style and format the content of a webpage, controlling the appearance of HTML elements.  


#### **1. Types of CSS**  

##### **a. Inline CSS**
- Applied directly to an HTML element using the `style` attribute.  
- Useful for quick styling but not recommended for larger projects due to poor maintainability.

**Example:**  
```html
<p style="color: blue; font-size: 20px;">This is styled using inline CSS.</p>
```

##### **b. Internal CSS**
- Defined within the `<style>` tag in the `<head>` section of an HTML document.  
- Suitable for styling a single page.  

**Example:**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is styled using internal CSS.</p>
</body>
</html>
```


##### **d) External CSS**
- Stored in a separate file with a `.css` extension and linked to the HTML using the `<link>` tag.  
- Ideal for larger projects where styles are shared across multiple pages.  

**Example (HTML File):**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is styled using external CSS.</p>
</body>
</html>
```

**Example (`styles.css`):**
```css
p {
  color: red;
  font-size: 20px;
}
```

#### **2. CSS Selectors**  

Selectors determine which elements CSS rules apply to.

##### **a. Universal Selector**
Selects all elements.  
```css
* {
  margin: 0;
  padding: 0;
}
```


##### **b. Class Selector**  
Selects elements with a specific `class` attribute. Use a `.` before the class name.  
```html
<p class="highlight">This is highlighted text.</p>
```

```css
.highlight {
  background-color: yellow;
}
```

##### **d. ID Selector**
Selects an element with a specific `id` attribute. Use `#` before the ID name.  
```html
<p id="unique">This has a unique style.</p>
```

```css
#unique {
  font-weight: bold;
  color: purple;
}
```

##### **e. Attribute Selector**  
Selects elements based on their attributes.  
```html
<input type="text">
<input type="password">
```

```css
input[type="text"] {
  border: 2px solid blue;
}

input[type="password"] {
  border: 2px solid red;
}
```


#### **3. CSS Properties: Colors, Fonts, and Spacing**  

##### **a. Colors**
- Use named colors, HEX codes, RGB, or HSL values.  

**Example:**
```css
p {
  color: #3498db; /* Hex */
  background-color: rgb(230, 230, 230); /* RGB */
}
```


##### **b. Fonts**
- Control text appearance using properties like `font-family`, `font-size`, and `font-style`.

**Example:**
```css
h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-style: italic;
}
```


##### **c. Spacing**
- Adjust element spacing using `margin` (outside space) and `padding` (inside space).

**Example:**
```css
div {
  margin: 20px; /* Space outside the element */
  padding: 10px; /* Space inside the element */
  border: 1px solid black;
}
```


#### **4. Comprehensive Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Basics</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      margin: 0;
      padding: 0;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      margin-top: 20px;
    }

    .highlight {
      background-color: #f1c40f;
      padding: 10px;
    }

    #unique {
      color: #e74c3c;
      font-size: 18px;
    }

    input[type="text"] {
      border: 1px solid #3498db;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS!</h1>
  <p class="highlight">This is styled using a class.</p>
  <p id="unique">This is styled using an ID.</p>
  <input type="text" placeholder="Type here">
</body>
</html>
```

---
### **Lesson 06 - Box Model and Layouts**

In CSS, every HTML element is considered a rectangular box. The **box model** is the fundamental concept for understanding how elements are sized and spaced.



#### **1. Understanding the Box Model**

The box model consists of four layers:  
1. **Content**: The actual content of the element, like text or images.  
2. **Padding**: Space between the content and the border.  
3. **Border**: The edge that surrounds the padding and content.  
4. **Margin**: Space outside the border, separating the element from other elements.

**Visual Representation:**  
```
+--------------------+  <- Margin
|     Border         |
| +----------------+ |  <- Padding
| |    Content     | |
| +----------------+ |
+--------------------+
```

##### **Box Model Properties**

1. **Width and Height**  
   - Set the size of the content area.  
   ```css
   div {
     width: 200px;
     height: 100px;
   }
   ```

2. **Padding**  
   - Adds space between the content and the border.  
   ```css
   div {
     padding: 10px; /* Adds 10px padding on all sides */
   }
   ```

3. **Border**  
   - Defines the border's width, style, and color.  
   ```css
   div {
     border: 2px solid black;
   }
   ```

4. **Margin**  
   - Creates space between the element and other elements.  
   ```css
   div {
     margin: 20px; /* Adds 20px margin on all sides */
   }
   ```

**Example: Box Model in Action**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Box Model Example</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid blue;
      margin: 10px;
      background-color: lightyellow;
    }
  </style>
</head>
<body>
  <div>Box Model Example</div>
</body>
</html>
```


#### **2. Margin, Padding, and Border**

##### **a. Padding**
- Adds space *inside* the element, between the content and border.  

**Shorthand:**
```css
padding: 10px 20px 15px 5px; /* top, right, bottom, left */
```

##### **b. Border**
- Outlines the element and can have various styles (`solid`, `dashed`, `dotted`, etc.).  

**Shorthand:**
```css
border: 2px dashed red; /* width, style, color */
```

##### **c. Margin**
- Adds space *outside* the element, separating it from other elements.  

**Shorthand:**
```css
margin: 10px 20px; /* vertical (top & bottom), horizontal (left & right) */
```

#### **3. Introduction to Flexbox**

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to align and distribute elements within a container, even if their sizes are dynamic.

##### **a. Flexbox Basics**

1. **Parent (Flex Container)**  
   - Set `display: flex;` to enable Flexbox for the container.  

2. **Child (Flex Items)**  
   - The items inside the flex container automatically align based on the container's properties.


##### **b. Key Flexbox Properties**

**Container Properties**:
| Property             | Description                                      |
|----------------------|--------------------------------------------------|
| `flex-direction`     | Sets the direction of items (row, column, etc.). |
| `justify-content`    | Aligns items horizontally.                      |
| `align-items`        | Aligns items vertically.                        |
| `flex-wrap`          | Allows items to wrap onto the next line.        |

**Item Properties**:
| Property             | Description                                  |
|----------------------|----------------------------------------------|
| `flex-grow`          | Specifies how much a flex item grows.       |
| `flex-shrink`        | Specifies how much a flex item shrinks.     |
| `align-self`         | Aligns an individual item.                  |


##### **c. Example: Flexbox Layout**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 200px;
      border: 2px solid gray;
      padding: 10px;
    }

    .item {
      width: 50px;
      height: 50px;
      background-color: lightblue;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>
```

**Explanation:**  
- `flex-direction: row;`: Aligns items horizontally (default).  
- `justify-content: space-between;`: Distributes items with space between them.  
- `align-items: center;`: Aligns items vertically in the center.

---
### **Lesson 07 - CSS Positioning and Responsive Design**

CSS positioning allows you to control where elements appear on a webpage. Responsive design ensures your webpage looks good on all devices, from phones to desktops.


#### **1. CSS Positioning**

CSS positioning defines how elements are placed in the document flow.

##### **a. Static Positioning (Default)**  
- Elements are positioned in the normal document flow.  
- No `position` property is specified.  

**Example:**
```html
<p>This is a static element (default).</p>
```

##### **b. Relative Positioning**  
- The element remains in the normal document flow but can be offset using the `top`, `right`, `bottom`, or `left` properties.  
- The offset is relative to the element's original position.

**Example:**
```html
<div style="position: relative; top: 20px; left: 30px; background-color: lightblue;">
  This is a relatively positioned element.
</div>
```

##### **c. Absolute Positioning**  
- The element is removed from the normal flow and positioned relative to its nearest positioned ancestor (not `static`).
- If no ancestor is positioned, it’s relative to the `<html>`.

**Example:**
```html
<div style="position: relative; border: 2px solid black; width: 200px; height: 100px;">
  <div style="position: absolute; top: 10px; left: 20px; background-color: yellow;">
    This is an absolutely positioned element.
  </div>
</div>
```

##### **d. Fixed Positioning**  
- The element is removed from the document flow and positioned relative to the viewport.  
- It does not move when the page is scrolled.

**Example:**
```html
<div style="position: fixed; top: 0; right: 0; background-color: lightgreen; padding: 10px;">
  This is a fixed element.
</div>
```

##### **e. Example Combining Positions**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning</title>
  <style>
    .relative {
      position: relative;
      top: 20px;
      left: 30px;
      background-color: lightblue;
    }

    .absolute {
      position: absolute;
      top: 50px;
      left: 50px;
      background-color: yellow;
    }

    .fixed {
      position: fixed;
      top: 0;
      right: 0;
      background-color: lightgreen;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="relative">Relative Position</div>
  <div class="absolute">Absolute Position</div>
  <div class="fixed">Fixed Position</div>
</body>
</html>
```


#### **2. Media Queries for Responsiveness**

Media queries allow you to apply different styles depending on the device's characteristics, such as screen width or orientation.

##### **a. Basic Syntax**  
```css
@media (condition) {
  /* CSS rules */
}
```

##### **b. Common Conditions**:  
| **Condition**          | **Example**                    |
|-------------------------|--------------------------------|
| `max-width`             | Screens smaller than X pixels.|
| `min-width`             | Screens larger than X pixels. |
| `orientation`           | `landscape` or `portrait`.    |

##### **c. Example: Responsive Design**  
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design</title>
  <style>
    body {
      background-color: lightgray;
    }

    div {
      width: 80%;
      margin: 20px auto;
      text-align: center;
      padding: 20px;
      background-color: lightblue;
    }

    @media (max-width: 600px) {
      div {
        background-color: lightcoral;
      }
    }

    @media (min-width: 601px) and (max-width: 1024px) {
      div {
        background-color: lightgreen;
      }
    }
  </style>
</head>
<body>
  <div>Resize the browser window to see the background color change.</div>
</body>
</html>
```
---
### **Lesson 08 - Introduction to JavaScript**

JavaScript (JS) is a powerful programming language that allows you to add interactivity, logic, and functionality to web pages.



#### **1. Variables, Data Types, and Operators**

##### **a. Variables**

Variables are containers for storing data values.  
- Declared using `let`, `const`, or `var`.

**Examples:**
```javascript
let name = "John"; // Can be reassigned
const age = 25;    // Cannot be reassigned
var city = "New York"; // Old way, avoid using
```


##### **b. Data Types**

JavaScript has **primitive** and **complex** data types:  

| **Type**      | **Example**              |
|---------------|--------------------------|
| String        | `"Hello, World!"`        |
| Number        | `42`, `3.14`             |
| Boolean       | `true`, `false`          |
| Null          | `null` (intentional empty value) |
| Undefined     | `undefined` (not assigned) |
| Object        | `{ key: "value" }`       |
| Array         | `[1, 2, 3, 4]`           |


##### **c. Operators**

| **Operator**      | **Description**                      | **Example**        |
|-------------------|--------------------------------------|--------------------|
| `+`, `-`, `*`, `/` | Arithmetic                          | `5 + 3` = `8`      |
| `==`, `===`        | Equality (loose, strict)            | `5 == "5"`, `5 === 5` |
| `<`, `>`, `<=`     | Comparison                          | `10 > 5` = `true`  |
| `&&`, `¦¦`, `!`    | Logical (AND, OR, NOT)              | `true && false` = `false` |
| `+=`, `-=`, `++`   | Assignment, Increment               | `x += 5`, `y++`    |


**Example:**
```javascript
let x = 10;
x += 5; // x = 15
console.log(x);
```

#### **2. Functions and Events**

##### **a. Functions**

Functions are reusable blocks of code.  
- **Declaration**:  
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));
```

- **Arrow Function (Modern)**:  
```javascript
const add = (a, b) => a + b;
console.log(add(5, 3)); // 8
```          

##### **b. Events**

Events are actions or occurrences (e.g., clicks, key presses).  
- Use event listeners to handle events.

**Example:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Events Example</title>
</head>
<body>
  <button id="btn">Click Me</button>
  <script>
    const button = document.getElementById("btn");
    button.addEventListener("click", () => {
      alert("Button clicked!");
    });
  </script>
</body>
</html>
```


#### **3. DOM Manipulation Basics**

The **DOM (Document Object Model)** is the structure of your web page. JavaScript can interact with the DOM to update content, styles, and structure dynamically.

##### **a. Selecting Elements**

- **By ID**:  
  ```javascript
  const element = document.getElementById("myId");
  ```
- **By Class**:  
  ```javascript
  const elements = document.getElementsByClassName("myClass");
  ```
- **By Tag**:  
  ```javascript
  const paragraphs = document.getElementsByTagName("p");
  ```
- **Modern (Query Selector)**:  
  ```javascript
  const single = document.querySelector(".myClass"); // First match
  const all = document.querySelectorAll(".myClass"); // All matches
  ```


##### **b) Modifying Content**

- **Change Text**:  
  ```javascript
  const element = document.getElementById("myId");
  element.textContent = "New text!";
  ```

- **Change HTML**:  
  ```javascript
  element.innerHTML = "<strong>Bold Text</strong>";
  ```

##### **c. Modifying Styles**

- **Change Style**:  
  ```javascript
  element.style.color = "red";
  element.style.backgroundColor = "yellow";
  ```


##### **4. Comprehensive Example**

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM Manipulation Example</title>
  <style>
    #text {
      color: blue;
    }
  </style>
</head>
<body>
  <h1 id="text">Hello, World!</h1>
  <button id="changeText">Change Text</button>
  <button id="changeColor">Change Color</button>

  <script>
    const textElement = document.getElementById("text");
    const textButton = document.getElementById("changeText");
    const colorButton = document.getElementById("changeColor");

    textButton.addEventListener("click", () => {
      textElement.textContent = "Text has been changed!";
    });

    colorButton.addEventListener("click", () => {
      textElement.style.color = "red";
    });
  </script>
</body>
</html>
```

---
### **Lesson 09 - JavaScript for Interactivity**

JavaScript can create dynamic, interactive web pages by handling events and validating user inputs.


#### **1. Event Listeners**

**Event listeners** allow JavaScript to respond to user actions, such as clicks, keystrokes, or hovering.

##### **Syntax**
```javascript
element.addEventListener("event", function);
```

##### **Common Events**
| Event         | Description                          |
|---------------|--------------------------------------|
| `click`       | Triggered when an element is clicked |
| `mouseover`   | Triggered when the mouse hovers over an element |
| `keydown`     | Triggered when a key is pressed      |
| `submit`      | Triggered when a form is submitted   |


##### **Example: Event Listener**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="btn">Click Me</button>
  <p id="text">Original Text</p>
  <script>
    const button = document.getElementById("btn");
    const text = document.getElementById("text");

    button.addEventListener("click", () => {
      text.textContent = "You clicked the button!";
    });
  </script>
</body>
</html>
```

#### **2. Form Validation with JavaScript**

Form validation ensures that users provide the correct data before submitting the form.

##### **Steps for Validation**  
1. Capture the form submission event.  
2. Check if inputs meet criteria (e.g., required, valid email).  
3. Provide feedback if validation fails.

##### **Example: Simple Form Validation**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation</title>
</head>
<body>
  <form id="myForm">
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <span id="error" style="color: red;"></span><br><br>
    <button type="submit">Submit</button>
  </form>

  <script>
    const form = document.getElementById("myForm");
    const emailInput = document.getElementById("email");
    const error = document.getElementById("error");

    form.addEventListener("submit", (event) => {
      if (!emailInput.value.includes("@")) {
        event.preventDefault(); // Prevent form submission
        error.textContent = "Please enter a valid email!";
      } else {
        error.textContent = "";
        alert("Form submitted successfully!");
      }
    });
  </script>
</body>
</html>
```

##### **Validation Techniques**  
1. **Check Length**:  
   ```javascript
   if (username.length < 5) {
     alert("Username must be at least 5 characters long.");
   }
   ```

2. **Check Patterns (e.g., email)**:  
   ```javascript
   const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
   if (!emailPattern.test(email)) {
     alert("Invalid email format.");
   }
   ```