### 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>© 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>© 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>© 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.");
}
```
Sign in with Wallet
Connect another wallet