Learn the fundamentals of HTML: what it is, why it matters, and how to create your first web page with proper structure and basic elements.

Introduction to HTML - Building the Web's Foundation

Master the essential HTML elements that bring your pages to life: hyperlinks for navigation, images for visuals, lists for organization, and semantic HTML for better structure.

HTML Elements - Links, Images, Lists & More

Learn the fundamentals of CSS (Cascading Style Sheets) - how to select elements, apply styles, and use different methods to add CSS to your pages.

Introduction to CSS - Making Your Pages Beautiful

Master the CSS box model to control spacing, sizing, and layout of elements. Learn margin, padding, border, display properties, and build a complete project.

CSS Box Model - Understanding Layout & Spacing

Build an intuition for Flexbox from scratch - no experience needed, just a clear understanding of what it does and why it exists

Introduction - The Easiest Way to Stop Fighting With Layouts

Master the main axis, cross axis, alignment, and wrapping in Flexbox

Flexbox Theory - Understanding the Core Concepts

Learn version control basics with Git and collaborative development using GitHub - understanding the real-world problems they solve

Git & GitHub - The Real Reason They Exist

Build a professional landing page together using Git, GitHub, and Flexbox - real-world collaboration experience

Your First Collaborative Project

Understand what JavaScript is and learn how to connect JavaScript files to HTML

JavaScript Definition & Linking to HTML

Master JavaScript functions and arrays to write reusable, organized code that handles multiple values efficiently

Functions & Arrays - Building Blocks of JavaScript

Learn how to access and interact with HTML elements using JavaScript, and respond to user actions with event listeners

The DOM, querySelector & Events

Master DOM manipulation to change content, styles, classes, and structure of your web pages with JavaScript

DOM Manipulation - Changing Your Web Pages Dynamically

Put your JavaScript skills to the test by building a complete XO Game (Tic Tac Toe) with event listeners, DOM manipulation, and game logic

Practice Project - XO Game (Tic Tac Toe)

Master font properties to control text appearance and readability

CSS Typography Basics

Understanding spacing inside and outside elements with margins and padding

CSS Box Model - Margins & Padding

Understanding how to position elements with static, relative, absolute, fixed, and sticky positioning

CSS Positioning Basics

Understanding absolute and relative CSS units with practical examples

CSS Units - Complete Guide

Explore fun and interactive animations using HTML5 Canvas

Creative Canvas Animations

Introduction to building enterprise Java applications with Spring Boot

Getting Started with Spring Boot

Learn to build scalable REST APIs using Node.js and Express framework

Building REST APIs with Node.js

Understanding asynchronous JavaScript with async/await syntax

Async/Await in JavaScript

Master CSS Grid layout system with practical examples and best practices

Complete Guide to CSS Grid

Learn about semantic HTML elements and why they matter for accessibility and SEO

HTML Semantic Elements Guide

CIT (Club d'Informatique et Télécoms) offers free courses taught by INPT students across various tech domains. Our Web Development cell is dedicated to bringing your ideas to life through code - from concept to creation.

CIT Web Development Hub

Learn • Build • Collaborate

Master the fundamentals of web development with HTML & CSS - from basic structure to styling beautiful, responsive pages

Welcome to web development! If you've ever wondered how websites are built, you're in the right place.

In this session, we'll start from zero and build a solid foundation in **HTML** — the language that structures every web page you see.

---

## What is HTML?

**HTML** stands for **HyperText Markup Language**.

Let's break that down:

- **HyperText** = documents that link to other documents (the "web" part of the web)
- **Markup** = tags that describe what content means (headings, paragraphs, etc.)
- **Language** = a system browsers understand to display content

Think of HTML as the **skeleton** of a web page:

- It defines structure (header, main content, footer)
- It organizes information (headings, lists, paragraphs)
- It doesn't handle design — that's CSS's job (we'll get there!)

---

## Why Learn HTML?

Every website you visit — Facebook, YouTube, Wikipedia — is built with HTML.

Even if you use tools like WordPress or Wix, understanding HTML gives you:

- Full control over your content
- The ability to fix issues yourself
- A foundation for learning JavaScript and backend languages
- Better job opportunities (web dev is in demand!)

---

## Your First HTML Page

Let's write the simplest HTML page possible.

Create a file called `index.html` and type this:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
  </body>
</html>
```

Save it, then **open it in a browser** (double-click the file).

You should see:

> # Hello, World!
> This is my first web page.

Congratulations! You just created a web page. 🎉

---

## Understanding the Structure

Let's break down what each part does:

### `<!DOCTYPE html>`

This tells the browser: "Hey, this is an HTML5 document!"

Always put this at the very top. It's not an HTML tag — it's a declaration.

### `<html>...</html>`

The root element. Everything goes inside here.

### `<head>...</head>`

Contains **metadata** — information about the page that doesn't show up on screen:

- Page title (shows in the browser tab)
- Links to CSS files
- Meta tags for SEO
- Character encoding

### `<title>My First Page</title>`

The text that appears in the browser tab. Important for SEO!

### `<body>...</body>`

Everything **visible** on the page goes here:

- Headings
- Paragraphs
- Images
- Links
- Forms
- Everything users see

---

## HTML Tags Explained

HTML uses **tags** to mark up content.

Most tags come in pairs:

```html
<tagname>Content goes here</tagname>
```

- **Opening tag**: `<tagname>`
- **Closing tag**: `</tagname>` (notice the `/`)

Some tags are **self-closing** (no content inside):

```html
<img src="photo.jpg">
<br>
<hr>
```

---

## Essential HTML Elements

### Headings

HTML has 6 levels of headings:

```html
<h1>Main Title (Largest)</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Smaller heading</h4>
<h5>Even smaller</h5>
<h6>Smallest heading</h6>
```

**Best practice:**
- Use `<h1>` once per page (your main title)
- Use headings in order (don't skip from `<h1>` to `<h3>`)
- Think of them as an outline for your content

### Paragraphs

```html
<p>This is a paragraph of text. Browsers automatically add space before and after paragraphs.</p>

<p>Each paragraph tag creates a new block of text.</p>
```

### Line Breaks

```html
<p>
  First line<br>
  Second line<br>
  Third line
</p>
```

The `<br>` tag creates a line break without starting a new paragraph.

### Horizontal Rule

```html
<hr>
```

Creates a horizontal line — useful for separating sections.

---

## Text Formatting Tags

Make text **bold**, *italic*, or add other emphasis:

```html
<p>This is <strong>important text</strong> (bold).</p>
<p>This is <em>emphasized text</em> (italic).</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <del>deleted text</del> (strikethrough).</p>
<p>This is <ins>inserted text</ins> (underline).</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup>.</p>
```

**Note:** `<strong>` vs `<b>` and `<em>` vs `<i>`

- Use `<strong>` and `<em>` — they have **semantic meaning** (screen readers understand them)
- Avoid `<b>` and `<i>` — they're just visual (no meaning)

---

## Practice Exercise

Try creating this page:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1>About Me</h1>
    
    <p>Hi! My name is <strong>[Your Name]</strong>.</p>
    
    <h2>What I'm Learning</h2>
    <p>
      I'm learning <em>web development</em> at CIT.<br>
      This is my first HTML page!
    </p>
    
    <h2>My Goals</h2>
    <p>By the end of this course, I want to:</p>
    <p>1. Build my own website</p>
    <p>2. Understand how the web works</p>
    <p>3. Learn JavaScript</p>
    
    <hr>
    
    <p><small>Created on November 26, 2025</small></p>
  </body>
</html>
```

Save it as `about.html` and open it in your browser!

---

## Common Mistakes to Avoid

### 1. Forgetting closing tags

```html

<p>This is a paragraph
<p>Another paragraph


<p>This is a paragraph</p>
<p>Another paragraph</p>
```

### 2. Nesting tags incorrectly

```html

<p><strong>This is bold</p></strong>


<p><strong>This is bold</strong></p>
```

Tags must be closed in the **reverse order** they were opened.

### 3. Missing DOCTYPE

Always start with `<!DOCTYPE html>`!

---

## What's Next?

Now that you understand basic HTML structure, in **Part 2** we'll explore:

- Links (connecting pages)
- Images (adding visuals)
- Lists (organized content)
- Semantic HTML (better structure)

You're off to a great start! Keep practicing and experimenting. 🚀

---

## Quick Reference

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    
    
    <p>A paragraph of text.</p>
    
    
    <strong>Bold</strong>
    <em>Italic</em>
    <br> 
    <hr> 
  </body>
</html>
```

Now that you know basic HTML structure, let's explore the elements that make web pages interactive and organized.

---

## Links - Connecting the Web

The `<a>` (anchor) tag creates **hyperlinks** — clickable text that takes you to another page.

### Basic Link Syntax

```html
<a href="https://www.google.com">Go to Google</a>
```

- `href` = the destination URL (where the link goes)
- The text between tags = what users click on

### Different Types of Links

#### External Links (to other websites)

```html
<a href="https://github.com">Visit GitHub</a>
```

#### Internal Links (to pages in your site)

```html
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
```

#### Links to Specific Sections

```html

<a href="#contact-section">Jump to Contact</a>


<h2 id="contact-section">Contact Us</h2>
```

#### Email Links

```html
<a href="mailto:info@example.com">Send us an email</a>
```

#### Phone Links

```html
<a href="tel:+212123456789">Call us</a>
```

### Link Attributes

#### Open in New Tab

```html
<a href="https://example.com" target="_blank">Open in new tab</a>
```

#### Link Title (tooltip on hover)

```html
<a href="about.html" title="Learn more about us">About Us</a>
```

---

## Images - Adding Visuals

The `<img>` tag displays images. It's **self-closing** (no closing tag needed).

### Basic Image Syntax

```html
<img src="photo.jpg" alt="Description of image">
```

- `src` = path to the image file
- `alt` = text description (for screen readers and if image fails to load)

### Image Sources

#### Local Image (in your project folder)

```html
<img src="images/logo.png" alt="Company Logo">
```

#### Image from the Web

```html
<img src="https://example.com/photo.jpg" alt="Photo description">
```

### Image Attributes

#### Width and Height

```html
<img src="photo.jpg" alt="Photo" width="300" height="200">
```

**Note:** It's better to control size with CSS, but these attributes help prevent layout shifts while images load.

#### Making Images Clickable

```html
<a href="large-photo.jpg">
  <img src="thumbnail.jpg" alt="Click to see full size">
</a>
```

---

## Lists - Organizing Content

HTML has three types of lists:

### 1. Unordered Lists (Bullet Points)

```html
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
```

**Result:**
- HTML
- CSS
- JavaScript

### 2. Ordered Lists (Numbered)

```html
<ol>
  <li>Open your code editor</li>
  <li>Write HTML code</li>
  <li>Save the file</li>
  <li>Open in browser</li>
</ol>
```

**Result:**
1. Open your code editor
2. Write HTML code
3. Save the file
4. Open in browser

### 3. Description Lists (Term + Description)

```html
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language - structures web content</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets - styles web pages</dd>
  
  <dt>JavaScript</dt>
  <dd>Programming language - adds interactivity</dd>
</dl>
```

### Nested Lists

```html
<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
      <li>PHP</li>
    </ul>
  </li>
</ul>
```

---

## Semantic HTML - Meaningful Structure

**Semantic HTML** = tags that describe what content means, not just how it looks.

### Why Use Semantic Tags?

- **Better SEO** — search engines understand your content
- **Accessibility** — screen readers can navigate easier
- **Maintainability** — code is easier to read and update

### Common Semantic Tags

#### `<header>`

The top section of a page or article (logo, navigation, etc.)

```html
<header>
  <h1>My Website</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>
```

#### `<nav>`

Navigation links

```html
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>
```

#### `<main>`

The main content of the page (only one per page)

```html
<main>
  <h1>Welcome to Our Site</h1>
  <p>This is the main content area.</p>
</main>
```

#### `<article>`

Self-contained content (blog post, news article, etc.)

```html
<article>
  <h2>How to Learn HTML</h2>
  <p>Published on November 26, 2025</p>
  <p>HTML is the foundation of web development...</p>
</article>
```

#### `<section>`

A thematic grouping of content

```html
<section>
  <h2>Our Services</h2>
  <p>We offer web design, development, and consulting.</p>
</section>
```

#### `<aside>`

Content related to main content but not essential (sidebar, ads, etc.)

```html
<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">CSS Basics</a></li>
    <li><a href="#">JavaScript Intro</a></li>
  </ul>
</aside>
```

#### `<footer>`

Bottom section of page or article (copyright, contact info, etc.)

```html
<footer>
  <p>&copy; 2025 CIT Web Development</p>
  <p>Contact: info@cit.com</p>
</footer>
```

---

## Putting It All Together

Here's a complete page using semantic HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Blog</title>
</head>
<body>
  
  <header>
    <h1>My Coding Blog</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>My First Blog Post</h2>
      <p><em>Published on November 26, 2025</em></p>
      
      <img src="coding.jpg" alt="Person coding" width="400">
      
      <p>Today I learned HTML! Here's what I covered:</p>
      
      <ul>
        <li>Page structure</li>
        <li>Headings and paragraphs</li>
        <li>Links and images</li>
      </ul>
      
      <p>Check out my <a href="https://github.com/username" target="_blank">GitHub profile</a>!</p>
    </article>
    
    <aside>
      <h3>Recent Posts</h3>
      <ul>
        <li><a href="#">Getting Started with HTML</a></li>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2025 My Blog. All rights reserved.</p>
    <p>Contact: <a href="mailto:me@example.com">me@example.com</a></p>
  </footer>
  
</body>
</html>
```

---

## Practice Exercise

Create a page about your favorite hobby:

**Requirements:**
1. Use semantic HTML (`<header>`, `<main>`, `<footer>`)
2. Include at least 3 links (one external, two internal)
3. Add 2 images with proper `alt` text
4. Create an unordered list of items related to your hobby
5. Use a `<nav>` section with links to other pages

---

## What's Next?

Now you can structure content with meaning! In **Part 3**, we'll learn **CSS** to make it all look beautiful.

Keep practicing — the more you code, the better you'll get! 🚀


You've built the structure with HTML. Now let's make it look amazing with **CSS**!

---

## What is CSS?

**CSS** (Cascading Style Sheets) is the language used to **style** HTML elements.

- **HTML** = Structure (bones)
- **CSS** = Presentation (skin, clothes, makeup)

### What Can CSS Do?

- Change colors, fonts, sizes
- Control layout and spacing
- Add animations and effects
- Make pages responsive (adapt to different screen sizes)

---

## CSS Syntax

CSS is made of **rules** that target HTML elements:

```css
selector {
  property: value;
}
```

**Example:**

```css
h1 {
  color: blue;
  font-size: 32px;
}
```

- `h1` = **selector** (what to style)
- `color` and `font-size` = **properties** (what aspect to change)
- `blue` and `32px` = **values** (how to change it)

---

## CSS Selectors

Selectors tell CSS **which elements** to style.

### 1. Element Selector

Targets all elements of a specific type:

```css
p {
  color: gray;
}
```

This makes **all paragraphs** gray.

### 2. Class Selector

Targets elements with a specific class (use `.`):

**HTML:**
```html
<p class="highlight">This is special!</p>
<p>This is normal.</p>
```

**CSS:**
```css
.highlight {
  background-color: yellow;
  font-weight: bold;
}
```

Only the first paragraph gets the yellow background.

### 3. ID Selector

Targets a single element with a unique ID (use `#`):

**HTML:**
```html
<div id="header">Welcome!</div>
```

**CSS:**
```css
#header {
  background-color: navy;
  color: white;
  padding: 20px;
}
```

**Note:** IDs should be unique per page. Use classes for reusable styles.

### 4. Multiple Selectors

Apply the same style to multiple elements:

```css
h1, h2, h3 {
  font-family: Arial, sans-serif;
  color: darkblue;
}
```

### 5. Descendant Selector

Target elements inside other elements:

```css
nav a {
  text-decoration: none;
  color: white;
}
```

This styles only `<a>` tags that are inside `<nav>`.

---

## Common CSS Properties

### Colors

```css
h1 {
  color: red;              /* Text color */
  background-color: black; /* Background color */
}
```

**Color formats:**
- Named colors: `red`, `blue`, `green`
- Hex codes: `#FF0000` (red), `#0000FF` (blue)
- RGB: `rgb(255, 0, 0)` (red)
- RGBA: `rgba(255, 0, 0, 0.5)` (semi-transparent red)

### Text Styling

```css
p {
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}
```

### Spacing

```css
div {
  margin: 20px;    /* Space outside the element */
  padding: 10px;   /* Space inside the element */
}
```

### Borders

```css
img {
  border: 2px solid black;
  border-radius: 10px; /* Rounded corners */
}
```

### Width and Height

```css
img {
  width: 300px;
  height: 200px;
}
```

---

## Three Ways to Add CSS

### 1. Inline CSS (in the HTML tag)

```html
<p style="color: red; font-size: 20px;">This is red text.</p>
```

**Pros:** Quick for single elements  
**Cons:** Hard to maintain, not reusable

### 2. Internal CSS (in the `<head>` section)

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>This is blue.</p>
  <p class="highlight">This is highlighted.</p>
</body>
</html>
```

**Pros:** Keeps CSS in one place for that page  
**Cons:** Can't reuse across multiple pages

### 3. External CSS (separate file) — **BEST PRACTICE**

**styles.css:**
```css
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  color: #333;
  line-height: 1.6;
}
```

**index.html:**
```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This page uses external CSS.</p>
</body>
</html>
```

**Pros:** Reusable across all pages, easy to maintain  
**Cons:** Requires an extra file

---

## Putting It All Together

Let's style a simple page:

**HTML (index.html):**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Styled Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  
  <main>
    <h2>Welcome!</h2>
    <p>This is a simple webpage with CSS styling.</p>
    <p class="highlight">This paragraph stands out!</p>
  </main>
  
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
  
</body>
</html>
```

**CSS (style.css):**
```css
/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* Header styles */
header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

header h1 {
  margin: 0;
}

/* Navigation */
nav a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
  font-weight: bold;
}

nav a:hover {
  color: #ffcc00;
}

/* Main content */
main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
  color: #333;
}

p {
  line-height: 1.6;
  color: #666;
}

.highlight {
  background-color: yellow;
  padding: 10px;
  border-left: 4px solid orange;
}

/* Footer */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
```

---

## Practice Exercise

Create your own styled page!

**Requirements:**
1. Create an HTML file with at least 3 sections (header, main, footer)
2. Create a separate CSS file
3. Use at least:
   - 2 element selectors (e.g., `body`, `h1`)
   - 1 class selector
   - 1 ID selector
4. Style colors, fonts, and spacing
5. Add hover effects to links

**Challenge:** Make the header have a dark background with white text, and center all content in the main section.

---

## What's Next?

You now know CSS basics! In **Part 4**, we'll dive deeper into the **CSS Box Model** — understanding how elements take up space on the page.

Keep practicing — CSS is all about experimentation! 🎨



Understanding the **CSS Box Model** is the key to controlling layout and spacing on your web pages.

---

## What is the Box Model?

Every HTML element is a **box** made up of four layers:

```
┌─────────────────────────────────────┐
│           MARGIN (transparent)       │
│  ┌──────────────────────────────┐  │
│  │   BORDER                      │  │
│  │  ┌────────────────────────┐  │  │
│  │  │  PADDING               │  │  │
│  │  │  ┌──────────────────┐  │  │  │
│  │  │  │   CONTENT        │  │  │  │
│  │  │  │  (text, images)  │  │  │  │
│  │  │  └──────────────────┘  │  │  │
│  │  └────────────────────────┘  │  │
│  └──────────────────────────────┘  │
└─────────────────────────────────────┘
```

1. **Content** — The actual content (text, images, etc.)
2. **Padding** — Space between content and border (inside the box)
3. **Border** — A line around the padding
4. **Margin** — Space outside the border (separates elements)

---

## Content Width and Height

Control the size of the content area:

```css
div {
  width: 300px;
  height: 200px;
}
```

**Auto sizing:**
```css
img {
  width: 100%;  /* Takes full width of parent */
  height: auto; /* Maintains aspect ratio */
}
```

---

## Padding - Space Inside

Padding creates space **inside** the element (between content and border).

### All sides the same:

```css
div {
  padding: 20px;
}
```

### Different sides:

```css
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
```

### Shorthand (clockwise: top, right, bottom, left):

```css
div {
  padding: 10px 20px 10px 20px;
}
```

**More shortcuts:**
```css
padding: 10px 20px;      /* vertical horizontal */
padding: 10px 20px 30px; /* top horizontal bottom */
```

---

## Border - The Box Outline

Border goes around the padding:

```css
div {
  border: 2px solid black;
}
```

**Format:** `border: width style color`

### Border Styles:

- `solid` — continuous line
- `dashed` — dashed line
- `dotted` — dotted line
- `double` — double line
- `none` — no border

### Individual sides:

```css
div {
  border-top: 3px solid red;
  border-bottom: 1px dashed gray;
}
```

### Rounded corners:

```css
div {
  border: 2px solid black;
  border-radius: 10px; /* All corners */
}

button {
  border-radius: 50%; /* Circle */
}
```

---

## Margin - Space Outside

Margin creates space **outside** the element (between elements).

### All sides:

```css
div {
  margin: 20px;
}
```

### Individual sides:

```css
div {
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
```

### Shorthand:

```css
div {
  margin: 10px 20px; /* vertical horizontal */
}
```

### Centering elements:

```css
div {
  width: 600px;
  margin: 0 auto; /* Top/bottom: 0, left/right: auto */
}
```

This centers a block element horizontally!

---

## Box Sizing

By default, `width` and `height` only apply to the **content**.

**Example problem:**
```css
div {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}
```

**Actual width = 344px:**
- Content: 300px
- Padding: 20px × 2 = 40px
- Border: 2px × 2 = 4px

**Solution: `box-sizing: border-box`**

```css
* {
  box-sizing: border-box;
}

div {
  width: 300px;      /* Total width INCLUDING padding and border */
  padding: 20px;
  border: 2px solid black;
}
```

Now the **total width is exactly 300px**. This is a best practice!

---

## Display Property

The `display` property controls how elements behave:

### `display: block`

- Takes up full width available
- Starts on a new line
- Can set width and height

**Examples:** `<div>`, `<h1>`, `<p>`, `<section>`

```css
div {
  display: block;
  width: 300px;
  height: 200px;
}
```

### `display: inline`

- Only takes up as much width as needed
- Does NOT start on a new line
- **Cannot** set width and height

**Examples:** `<span>`, `<a>`, `<strong>`, `<em>`

```css
span {
  display: inline;
  background-color: yellow;
}
```

### `display: inline-block`

- Like inline, but **CAN** set width and height
- Sits on the same line as other elements

```css
button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
}
```

### `display: none`

Hides the element completely (removes it from the page flow):

```css
.hidden {
  display: none;
}
```

---

## Colors in CSS

### Named Colors:

```css
h1 {
  color: red;
  background-color: lightblue;
}
```

### Hex Colors:

```css
h1 {
  color: #FF0000;          /* Red */
  background-color: #0000FF; /* Blue */
}
```

**Shorthand:** `#F00` = `#FF0000`

### RGB Colors:

```css
h1 {
  color: rgb(255, 0, 0);    /* Red */
}
```

### RGBA (with transparency):

```css
div {
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}
```

**Alpha channel:** `0` = fully transparent, `1` = fully opaque

---

## Typography Basics

```css
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: normal; /* or bold, 100-900 */
  font-style: normal;  /* or italic */
  line-height: 1.6;    /* Space between lines */
}

h1 {
  font-size: 2.5em;    /* Relative to parent */
  letter-spacing: 2px; /* Space between letters */
  text-transform: uppercase;
}

p {
  text-align: left;    /* left, center, right, justify */
  text-decoration: none; /* underline, line-through, etc. */
}
```

---

## Complete Example Project

Let's build a styled card:

**HTML:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Profile Card</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="card">
    <img src="https://via.placeholder.com/150" alt="Profile Picture">
    <h2>John Doe</h2>
    <p class="title">Web Developer</p>
    <p class="description">
      Passionate about creating beautiful and functional websites.
    </p>
    <button class="btn">Contact Me</button>
  </div>
  
</body>
</html>
```

**CSS:**
```css
/* Global reset and setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Card container */
.card {
  background-color: white;
  width: 350px;
  padding: 40px 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
}

/* Profile image */
.card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #667eea;
  margin-bottom: 20px;
}

/* Name */
.card h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 5px;
}

/* Job title */
.title {
  font-size: 16px;
  color: #667eea;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Description */
.description {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Button */
.btn {
  display: inline-block;
  background-color: #667eea;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #5568d3;
}
```

---

## Practice Project

Create your own **personal portfolio card**!

**Requirements:**
1. Use a card layout with proper box model properties (margin, padding, border)
2. Include:
   - Your name (styled heading)
   - A brief description
   - A profile image (rounded)
   - A contact button
3. Apply `box-sizing: border-box` to all elements
4. Center the card on the page
5. Use colors, spacing, and typography to make it look professional

**Bonus challenges:**
- Add a hover effect to the button
- Use a gradient background
- Add a subtle shadow to the card
- Make the image circular with a border

---

## Summary

You've completed Session 1! Here's what you learned:

### HTML:
✅ Page structure and semantic elements  
✅ Headings, paragraphs, text formatting  
✅ Links, images, lists  
✅ Semantic HTML (header, nav, main, footer)

### CSS:
✅ Selectors, properties, values  
✅ Ways to add CSS (inline, internal, external)  
✅ Box model (margin, padding, border)  
✅ Display property  
✅ Colors and typography

---

## What's Next?

In **Session 2**, you'll learn **advanced CSS layouts** including:
- Flexbox for flexible layouts
- Grid for complex layouts
- Positioning elements
- Responsive design

Keep practicing and building! The more you code, the better you'll become. 🚀

**Happy coding!** 💻✨


Deep dive into CSS with Flexbox and Layout techniques, plus introduction to Git and GitHub for version control


If you've never touched web development before, CSS can feel a bit. magical.
You write a few words, reload the page, and somehow everything moves around.

**But here's the truth:** Web browsers follow specific layout rules. Flexbox is one of the simplest and most powerful of these rules.

In this short intro, we'll build an intuition for Flexbox — no experience needed, no fancy theory. Just a clear idea of what it does and why it exists.

---

## From "Document Mode" to "Layout Mode"

By default, the browser arranges things like a document editor:

- Titles and paragraphs stack vertically
- Text flows from left to right
- Everything follows a simple top-to-bottom structure

This is great for articles, but not great when you want to build **web pages**.

Now look what happens when we tell CSS:

```css
display: flex;
```

![Flexbox Transition](/posts/sessions/session-2/images/flex-transition.gif)

That one line changes everything.

It tells the browser:

> Stop placing things like a document. Start placing them like a **row** or a **column**.

This switch creates a new kind of layout environment called a **flex container**.

---

## So What Does Flexbox Actually Solve?

Imagine you want to place:

- some buttons in a row
- a navigation bar
- cards that should adjust to screen size
- items that stay centered (finally!)

Doing this with the default layout rules is a nightmare.

Flexbox fixes that.

It lets the browser **automatically organize items** depending on the space available.

Think of it like this:

> **Flexbox is a smart system where items can grow, shrink, and align themselves depending on what the container needs.**

You don't need to calculate widths.
You don't need to push things with random margins.
You don't need to guess.

---

## Flexbox in One Sentence

> **Flexbox arranges items in a row or a column and gives you simple tools to control how they use space.**

That's it.

Later, you'll learn how to:

- change direction (row/column)
- center elements perfectly
- push items apart
- make items grow or shrink automatically

But none of this is hard — Flexbox was literally designed to _make layout easier_.

---

## Why This Matters for Your Web Project

If you want your page to look organized — buttons aligned, sections clean, items flexible — you'll need Flexbox.

In fact, Flexbox is so powerful that most modern websites rely on it everywhere.

In our session, we'll explore:

- the core Flexbox properties (only the ones you'll actually need)
- visual examples for each
- small exercises you can build and push to the repo
- how to use Flexbox in your own project layout

---

## Ready to Learn the Easiest Layout System in CSS?

Let's dive in, starting with that one magical line:

```css
display: flex;
```

Everything else builds naturally from this.

Now let's break Flexbox down step by step, with visuals and examples — and trust me, by the end, you'll feel like you've unlocked a new superpower.



When we add `display: flex` to a container, we unlock a powerful layout system that thinks differently than traditional CSS. This guide will walk you through every core concept you need to master Flexbox.

## Flex Direction — How Flexbox "Thinks"

When we add:

```css
display: flex;
```

Our items suddenly stop behaving like paragraphs in a document and start behaving like puzzle pieces that want to line up.

By default, Flexbox chooses a **row** — everything goes left → right.

But with one small change:

```css
flex-direction: column;
```

Items flip and start stacking top → bottom.

![Flex Direction: Row vs Column](/posts/sessions/session-2/images/flexDircetionColumnRow.gif)

**This is our first superpower: we control the direction.**

## Main Axis vs Cross Axis — The Flex Mindset

Before we go further, we need to understand the idea Flexbox is built on.

Flexbox doesn't talk about "horizontal" or "vertical".

Instead, it uses:

- **Main axis** → the direction your items flow
- **Cross axis** → the direction perpendicular to it

![Primary and Cross Axis](/posts/sessions/session-2/images/PrimaryAxisCrossAxis.png)

### With `flex-direction: row`

- Main axis = left to right
- Cross axis = top to bottom

### With `flex-direction: column`

- Main axis = top to bottom
- Cross axis = left to right

> **Important:**
> Switching to `column` doesn't "align on the cross axis instead".
> It literally _rotates the main axis_.
> All Flexbox rules rotate with it.

**This is why Flexbox feels so smart** — learn the rules once, and they work in both directions automatically.

## Default Flexbox Rules

Once Flexbox is activated, two things happen by default:

1. **Main axis:** items stick to the start
2. **Cross axis:** items stretch to fill the container

No magic — just the rules of the algorithm.

## Reverse Directions

Flexbox also lets you flip the direction entirely:

- `row-reverse`
- `column-reverse`

![Flex Direction: Column vs Column Reverse](/posts/sessions/session-2/images/flexDirectionColumnColumnReverse.gif)

The order flips along the **main axis**, nothing else changes.

## Alignment on the Main Axis — justify-content

Now that we know what the main axis is, we can control how items are spaced along it:

```css
justify-content: <value>;
```

Here, we stop thinking "align one item" and start thinking "arrange the group".

**Available values:**

- `flex-start`
- `center`
- `flex-end`
- `space-between`
- `space-around`

![Justify Content: All Values](/posts/sessions/session-2/images/justifycontentAllValues.gif)

### Two tricky ones:

**space-between**

Equal space between items, none at the edges.

**space-around**

Equal space around each item — edge spaces look smaller because each item contributes half.

> **Reminder:** > `justify-content` works along the _main_ axis,
> and the main axis depends on `flex-direction`.

## Alignment on the Cross Axis — align-items

When we swap to the cross axis, the property changes:

```css
align-items: <value>;
```

**Available values:**

- `flex-start`
- `center`
- `flex-end`
- `stretch`
- `baseline`

![Align Items: All Values](/posts/sessions/session-2/images/alignItemsAllValues.gif)

### The shared ones

`flex-start`, `center`, `flex-end` behave exactly like justify-content, but vertically when the main axis is horizontal.

### The new ones

**stretch**

Items stretch across the entire cross axis.

**baseline**

Aligns items based on the baseline of their text, not the bottom of their boxes.

## Baseline — Clear, Simple Rules

Baseline depends on what's inside the element.

### Case 1 — The element has text

Baseline = the line the text sits on.

### Case 2 — No text inside

Baseline = the bottom of the box.

![Align Items: Baseline Without Text](/posts/sessions/session-2/images/alignItemsBaselineWithoutText.png)

This is why empty squares align along their bottom edge in baseline mode.

## One Item Playing by Its Own Rules — align-self

Sometimes you want one specific item to break free.

```css
align-self: <value>;
```

It overrides `align-items` for just that item.

**Same values:**

- `flex-start`
- `center`
- `flex-end`
- `stretch`
- `baseline`

![Align Self](/posts/sessions/session-2/images/alignSelf.gif)

> **Notice:**
> There is **no justify-self** in Flexbox.
> To understand why, check out [Josh Comeau's explanation on content vs items](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#content-vs-items-4).

## Wrapping — flex-wrap

Until now, all our items sat on one line.

But what if there isn't enough space?

```css
flex-wrap: wrap;
```

Items will jump to the next row (or column).

![Flex Wrap Preview](/posts/sessions/session-2/images/wrapPreview.png)

**This is useful for:**

- Tags
- Cards
- Menus
- Responsive lists

> For real 2D layouts, Grid is better.
> But Flexbox wrapping has very useful moments.

## The Big Insight: Hypothetical Size

This is one of those mind-opening Flexbox concepts.

If you write:

```css
.item {
  width: 2000px;
}
```

You might expect a giant 2000px box.

**But in Flexbox, width becomes a suggestion, not a command.**

![Hypothetical Size](/posts/sessions/session-2/images/HypotheticalSize.png)

Flexbox first calculates:

> What size _should_ this item be in a perfect world?

That's the **hypothetical size**.

But then Flexbox checks real constraints:

- Container size
- Siblings
- Available space

If things don't fit, items automatically shrink.

**This is the Flexbox philosophy:**

> Everything is flexible.
> Layout adapts to reality, not fixed numbers.

## Flex Basis — Sizing Along the Main Axis

Now that you understand hypothetical size, let's talk about how to set it properly.

You might use `width` to size an item, but here's the catch: `width` always affects horizontal size, even when your main axis is vertical.

Enter `flex-basis`:

```css
flex-basis: 200px;
```

It's like `width` or `height`, but **it follows the main axis direction**:

- In a **flex row** → acts like `width`
- In a **flex column** → acts like `height`

This matters because when you switch `flex-direction` from `row` to `column`, your sizing just works. No swapping properties.

**Example:**

```css
.item {
  flex-basis: 300px; /* This adapts to your flex-direction */
}
```

It's the same principle as everything in Flexbox: think in terms of main axis and cross axis, not horizontal and vertical.

Want to see how it behaves with different values? Try [this interactive visualization](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#flex-basis-7).

## The Flex Shorthand — Growing to Fill Space

You'll often see this in real code:

```css
.item {
  flex: 1;
}
```

This is a shorthand that tells an item to **grow and fill available space**.

It's especially useful when you want one element to stretch while others stay fixed—like a search bar that grows while the button stays the same size.

**Example: Email subscription form**

```html
<body>
  <form style="display: flex; gap: 10px;">
    <input type="email" placeholder="Enter email" style="flex: 1;">
    <button>Subscribe</button>
  </form>
</body>
```

The input grows to fill space, the button stays fixed.

![Flex: 1 Example](/posts/sessions/session-2/images/flexSize.jpg)

> **You'll use this in the collaborative project** — Team 5 needs `flex: 1` for their contact form input!

## Wrapping + Alignment

When items wrap:

- Each "row" uses `justify-content` independently
- But the cross axis now spans multiple rows

This leads to more complex behavior.

For a great interactive visualization, check out [Josh Comeau's wrapping section](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#wrapping-14).

## Session Recap

- Flexbox arranges items along a **main axis**
- `flex-direction` defines that axis
- `justify-content` → distribute along the main axis
- `align-items` → align along the cross axis
- `align-self` overrides one item
- `flex-wrap` allows multiple rows
- `flex-basis` → size items along the main axis (direction-aware)
- `flex: 1` → make item grow to fill available space
- Flexbox uses **hypothetical size**, not strict width
- **Flexbox is fluid and adaptive by nature**



A session blog designed for first-year students with zero web background.

---

# A Story

Imagine two classmates: **Yassine** and **Amine**.

They have a Java project for Professor **Laghouaouta**.
Deadline: **tomorrow at 23:59**.

Yassine starts coding early:
login page, `User` class, some menu logic… everything seems fine.

At 18:00, Amine messages:

> Send me the project bro, I'll help.

Yassine zips the folder:
`project-v1.zip`
and sends it on WhatsApp.

![WhatsApp ZIP Hell](/posts/sessions/session-2/images/WhatsApp-ZIP-Hell.png)

Amine works on reservations, modifies a few classes, and sends back:
`project-v2.zip`.

Meanwhile, Yassine ALSO kept coding on his side…
so HE now sends:
`project-v3.zip`.

Now:

- Yassine modified `Main.java`
- Amine ALSO modified `Main.java`
- Both changed `UserService.java`
- Both added different logic in the SAME methods

Who's right?
Which version works?
How do they merge?

They start manually comparing files.
Copy lines, delete lines, guess which version is correct…

Chaos.

Something breaks → then something else breaks → then compilation errors everywhere.

And at 23:40, they're staring at:

- `project-v2.zip`
- `project-v3.zip`
- `project-v3-final-FINAL.zip`

![Versioning Nightmare (No Git)](/posts/sessions/session-2/images/Versioning-Nightmare-No-Git.png)

At this point, they're just thinking:

> **Wili… ratt kay3eyet.**

This is what real-world coding without Git looks like.
A mess.

---

# The REAL Pain Git Solves

Coding without Git means:

- sending zip files
- manually merging work
- overwriting each other
- losing working versions
- naming files `v1/v2/final/final-final`
- wasting HOURS fixing conflicts

The core problem:

> **There is no system for tracking versions or merging contributions.**

---

# Why Git Exists

Instead of manually versioning files like:

- `file_v1.java`
- `file_v2.java`
- `file_v2_fixed.java`
- `file_final_really_final.java`

Git does ALL of this automatically.

Git keeps an entire **history** of your project:

- what changed
- when it changed
- who changed it
- and lets you go back to ANY previous version safely

No more WhatsApp zips.
No more overwriting.
No more mess.

---

# Why GitHub Exists

GitHub is simply:

> **A cloud platform where your Git project lives and can be shared with teammates.**

That's it.

![Git vs GitHub](/posts/sessions/session-2/images/Git-vs-GitHub.png)

GitHub is where Yassine and Amine would collaborate:

- Yassine pushes his code
- Amine pulls the new changes
- Git merges them intelligently
- No overwriting
- No guessing
- No conflicts by accident

---

# The Only 3 Concepts You Need

We focus only on the essentials.

---

## 1. Repository (Repo)

A repo is just:

> **Your project folder + Git tracking enabled.**

Nothing magical.

![Repository Concept](/posts/sessions/session-2/images/Repository-Concept.png)

---

## 2. Commit

A commit is a **snapshot** of your code at a specific moment.

Examples:

- "Add login feature"
- "Fix reservation bug"
- "Implement User class"

Each commit is a clean restore point.

![Commit Timeline](/posts/sessions/session-2/images/Commit-Timeline.png)

---

## 3. Staging Area

Before you save a snapshot, Git lets you choose what you want to include.

```
Working Directory → Staging Area → Commit History
```

Simple. Visual. Logical.

![Staging Area Diagram](/posts/sessions/session-2/images/Staging-Area-Diagram.png)

---

# The 5 Commands That Matter

These are the only ones you'll use today.

![Git Commands Summary WITH Analogy](/posts/sessions/session-2/images/Git-Commands-Summary-WITH-Analogy.png)

**Initialize Git**

```bash
git init
```

**See what changed**

```bash
git status
```

**Stage all files**

```bash
git add .
```

**Save a snapshot**

```bash
git commit -m "message"
```

**Upload to GitHub**

```bash
git push
```

This is 90% of Git.

---

# Authenticating With GitHub (Modern Way)

GitHub **no longer accepts passwords** when pushing code.

You must use a **Personal Access Token (PAT)**.

**Steps:**

1. Go to: [https://github.com/settings/tokens](https://github.com/settings/tokens)
2. Click **Generate new token (classic)**
3. Give it `repo` permission
4. Generate → **copy the token**
5. When Git asks for "password", paste this token

This token replaces your GitHub password **in the terminal only**.

You usually paste it **once per machine** — your system saves it.

---

# Mini Live Demo (Simple & Light)

![First Push Flow](/posts/sessions/session-2/images/First-Push-Flow.png)

**1. Create a project folder**

Open in VS Code.

**2. Initialize Git**

```bash
git init
```

**3. Create a file**

Example: `index.html`

**4. Stage & commit**

```bash
git add .
git commit -m "Initial commit"
```

**5. Create a GitHub repo**

On GitHub → **New Repository** → name it.

GitHub will show you something like:

```bash
git remote add origin https://github.com/yourname/repo.git
git push -u origin main
```

Just copy whatever GitHub gives you.

**6. First push = authentication moment**

When you run:

```bash
git push -u origin main
```

Git asks for:

```
Username for 'https://github.com':
Password for 'https://github.com':
```

Tell them:

- **Username** → your GitHub username
- **Password** → _paste your Personal Access Token (PAT)_

Press Enter.
And boom — your code is online.

Your device usually remembers this, so Git won't ask again.

---

# What You Should Leave With

![Collaboration Without Conflicts](/posts/sessions/session-2/images/Collaboration-Without-Conflicts.png)

- **Git = version history**
- **GitHub = collaboration in the cloud**
- **Commit = snapshot**
- **PAT = your terminal password (paste it once)**
- **Push to share, pull to receive**

If they understand **these 5 points**, the session is a total success.



A hands-on collaborative project where teams work together to build a complete landing page using version control and CSS layout techniques.

---

## What You're Building

Today you'll collaborate to build a professional landing page. Each team handles one section.

![Final Landing Page](/posts/sessions/session-2/images/final-landing-page.png)

### The Sections

**Team 1 - Header Navigation**

![Header Preview](/posts/sessions/session-2/images/team-1-header.png)

**Team 2 - Hero Section**

![Hero Preview](/posts/sessions/session-2/images/team-2-hero.png)

**Team 3 - Destinations Gallery**

![Destinations Preview](/posts/sessions/session-2/images/team-3-destinations.png)

**Team 4 - Packages Section**

![Packages Preview](/posts/sessions/session-2/images/team-4-packages.png)

**Team 5 - Testimonials & Contact Form**

![Testimonials and Contact Preview](/posts/sessions/session-2/images/team-5-testimonials-contact.png)

**Team 6 - Footer**

![Footer Preview](/posts/sessions/session-2/images/team-6-footer.png)

Each team works independently. At the end, we merge everything together.

---

## Quick CSS Reference

Before you start, here's what you need to know. Don't memorize - just bookmark this!

### Flexbox (You learned this today!)

- `display: flex;` - Activate flexbox
- `justify-content:` - Align on main axis
- `align-items:` - Align on cross axis
- `flex-basis:` - Set item width
- `flex: 1;` - Make item grow

[Full Flexbox Guide →](/posts/sessions/session-2/part-2)

### Box Model & Spacing

**Padding** = Space inside an element
**Margin** = Space outside an element

```css
padding: 20px; /* All sides */
padding: 20px 40px; /* Vertical Horizontal */
margin: 10px 20px 30px; /* Top Horizontal Bottom */
```

**Negative margins** (like `margin-right: -15px;`) can pull elements closer or create overlaps!

[Full Box Model Guide →](/posts/resources/css/box-model-spacing)

### Positioning

```css
position: relative; /* Positioned relative to normal position */
position: absolute; /* Positioned relative to closest positioned parent */
```

**Pro tip:** Use `position: absolute` inside `position: relative` for overlays!
**Overlay** = when one element appears on top of another (like the header floating over the hero background).

[Full Positioning Guide →](/posts/resources/css/positioning-basics)

### Typography

```css
font-family: 'Roboto', sans-serif; /* Font name + fallback */
font-size: 24px;
font-weight: 300; /* 100-900, 400=normal, 700=bold */
font-style: italic;
```

[Full Typography Guide →](/posts/resources/css/typography-basics)

### Colors & Units

- Hex colors: `#fff` (white), `#000` (black), `#e07e7b` (coral)
- Units: `px` (pixels), `%` (percentage)

[CSS Units Guide →](/posts/resources/css/css-units)

---

## Team Assignments

### Team 1 - Header Navigation

**Difficulty: Medium-Hard (3/6)**

**What you're building:** Logo + navigation bar that overlays the hero

**CSS Focus:** Flexbox horizontal layout, positioning

**Key concepts:** `display: flex`, `justify-content`, `position: absolute`

**Challenge:** You'll figure out the spacing values yourself - experiment until it looks balanced!

### Team 2 - Hero Section

**Difficulty: Hard (2/6)**

**What you're building:** Full-screen banner with centered text and background image

**CSS Focus:** Vertical centering, typography, background images

**Key concepts:** `justify-content: center`, `background-image`, relative paths, `font-size`

**Challenge:** Figure out the background image path and experiment with font sizes to make it impactful!

### Team 3 - Destinations Gallery

**Difficulty: Medium (5/6)**

**What you're building:** Image grid with different sized photos

**CSS Focus:** Background images, flex-basis for sizing

**Key concepts:** `flex-basis`, `background-image`, relative paths, asymmetric layouts

**Challenge:** Set up 4 background images and experiment with flex-basis percentages for the layout!

### Team 4 - Packages Section

**Difficulty: Easy (6/6)**

**What you're building:** Service cards with icons and descriptions

**CSS Focus:** Card layout, centered content, icon styling

**Key concepts:** `flex-basis`, `text-align: center`, padding, margins

**Challenge:** The most straightforward section - focus on getting spacing to feel balanced!

### Team 5 - Testimonials & Contact Form

**Difficulty: Very Hard (1/6)**

**What you're building:** Customer quotes and email subscription form

**CSS Focus:** Typography, form layout with flexible input

**Key concepts:** `flex: 1`, form alignment, growing elements, opacity

**Challenge:** The trickiest! Make the input field grow while the button stays fixed. Experiment with values!

### Team 6 - Footer

**Difficulty: Medium-Easy (4/6)**

**What you're building:** Footer with social icons and copyright

**CSS Focus:** Horizontal distribution, nested flexbox

**Key concepts:** `justify-content: space-around`, `align-items: center`, `opacity`

**Challenge:** Learn about opacity (0 to 1) to make text semi-transparent!

---

## How We'll Work Together

### 1. Clone the starter repo

```bash
git clone https://github.com/Alae-J/Session2-Collaborative-Landing-Page.git
cd Session2-Collaborative-Landing-Page
```

### 2. Each team creates their branch

```bash
git checkout -b team-x-what_you_working_on
```

### 3. Work on YOUR section only

- Open `assets/css/styles.css`
- Find your team's section (marked with comments)
- Uncomment properties and fill in values (TIP: Select lines and press CTRL + /)
- **Don't touch other teams' sections!**

### 4. Test locally

- Open `index.html` in your browser
- Other teams are working on their parts

### 5. Commit & push

```bash
git add .
git commit -m "your message"
git push -u origin team-x-what_you_working_on
```

The `-u` flag sets up tracking for your branch. After the first push, you can use just `git push`.

### 6. Merge time!

When teams are done, I'll merge the branches one by one. Watch the page come together

### The Final Result

After all merges: Complete professional landing page built by the whole group!

---

## Ready to Start?

1. Check your team assignment above
2. Review the Quick CSS Reference for concepts you'll need
3. Clone the repo and create your branch
4. Open the CSS file and find your section
5. Start building!

Remember: You're not alone. Your teammates are working with you, and other teams are building their parts. At the end, everything comes together.

Let's build something cool!


Master JavaScript fundamentals - from linking scripts to DOM manipulation and event handling

## What is JavaScript?

JavaScript is a **programming language used to make web pages interactive**.

It runs directly inside the web browser (Chrome, Firefox, etc.) without needing any installation.

It was created in 1995 to make websites more dynamic, and today it has become one of the most widely used languages in the world.

With JavaScript, you can:

- Respond to user actions (clicks, typing, scrolling)
- Change the content of a page without reloading
- Create animations, menus, sliders, popups
- Communicate with servers to load data
- Build full web apps (like Gmail, Instagram, or Spotify Web)

JavaScript is now used **everywhere**: front-end, back-end (Node.js), mobile apps, desktop apps, and even games.

**In simple terms:**

➡️ **HTML builds the page**  
➡️ **CSS styles it**  
➡️ **JavaScript brings it to life**

---

## 📌 How to Add JavaScript to HTML

Before we start writing JavaScript, we need to connect our `.js` file to our `.html` file.

Here are the main methods:

### Method 1: Script tag at the bottom of `<body>` (Recommended)

This is the most common method. Place the `<script>` tag just before the closing `</body>` tag.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

  
  <script src="script.js"></script>
</body>
</html>
```

**Why at the bottom?** Because the browser reads HTML from top to bottom. If we put the script at the top, JavaScript will try to access HTML elements that haven't been loaded yet.

---

### Method 2: Script tag in `<head>` with defer attribute

The `defer` attribute tells the browser to load the JavaScript file but wait until the HTML is fully loaded before executing it.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>
</body>
</html>
```

**Advantage:** Keeps your `<head>` section organized and the script loads in parallel with the HTML.

---

### Method 3: Inline script (Not recommended for large code)

You can write JavaScript directly inside HTML using `<script>` tags without a `src` attribute.

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
  <button id="myButton">Click me</button>

  <script>
    // JavaScript code directly here
    const button = document.querySelector("#myButton");
    button.addEventListener("click", () => {
      alert("Button clicked!");
    });
  </script>
</body>
</html>
```

**Note:** This method is fine for small scripts or testing, but for real projects, always use external `.js` files to keep your code organized.

---

## 1. Variables

### What are Variables?

Variables are like labeled boxes that store information. You can put data inside them, retrieve it later, and even change it.

### Declaring Variables

JavaScript has three ways to declare variables:

| Keyword | Can be changed? | Best for |
|---------|----------------|----------|
| `const` | ❌ No | Values that won't change |
| `let` | ✅ Yes | Values that will change |
| `var` | ✅ Yes | Old way (avoid using) |

### Examples

```js
// Using const - value cannot be reassigned
const appName = "My App";
const maxUsers = 100;

// Using let - value can be reassigned
let userCount = 0;
userCount = 5;  // ✅ This works
userCount = 10; // ✅ This also works

// Trying to reassign const
const siteName = "My Site";
// siteName = "New Site"; // ❌ ERROR! Cannot reassign const
```

---

## Data Types in Variables

```js
// Numbers
let age = 25;
let price = 19.99;

// Strings (text)
const firstName = "Sarah";
const message = 'Hello, world!';

// Booleans (true/false)
let isLoggedIn = false;
let hasAccess = true;

// Undefined (no value assigned yet)
let futureValue;
console.log(futureValue); // undefined
```

---

## Naming Rules

### ✅ Good names:

```js
const userName = "Alex";
let itemCount = 5;
const MAX_ATTEMPTS = 3;
```

### ❌ Bad names:

```js
const x = "Alex";           // Not descriptive
let 1stItem = "Apple";     // Cannot start with number
const user-name = "Sam";   // Cannot use hyphens
```

### Best practices:

- Use **camelCase**: `firstName`, `maxValue`, `isActive`
- Be **descriptive**: `userAge` instead of `a`
- **Constants in UPPERCASE**: `MAX_SIZE`, `API_KEY`

---

## What's Next?

In **Part 2**, we'll dive into functions and learn how to create reusable blocks of code! 🚀


Functions and arrays are fundamental building blocks of JavaScript. Let's master them!

---

## 2. Functions

### What are Functions?

Functions are reusable blocks of code that perform a specific task. Think of them as recipes - you write the instructions once and use them many times.

### Basic Function Syntax

```js
function functionName(parameter1, parameter2) {
  // Code to execute
  return result; // Optional
}
```

---

## Examples

### Simple Function (no parameters, no return)

```js
function sayHello() {
  console.log("Hello, everyone!");
}

// Call the function
sayHello(); // Output: "Hello, everyone!"
sayHello(); // Can be called multiple times
```

---

### Function with Parameters

```js
function greetUser(name) {
  console.log("Welcome, " + name + "!");
}

greetUser("Alice"); // Output: "Welcome, Alice!"
greetUser("Bob");   // Output: "Welcome, Bob!"
```

---

### Function with Return Value

```js
function addNumbers(a, b) {
  const sum = a + b;
  return sum;
}

const result = addNumbers(5, 3);
console.log(result); // Output: 8

// Use directly in other operations
const total = addNumbers(10, 20) + 5;
console.log(total); // Output: 35
```

---

### Function with Multiple Parameters

```js
function calculateArea(width, height) {
  return width * height;
}

const area1 = calculateArea(5, 10);
console.log(area1); // Output: 50

const area2 = calculateArea(7, 3);
console.log(area2); // Output: 21
```

---

## Arrow Functions (Modern Syntax)

Arrow functions are a shorter way to write functions.

```js
// Traditional function
function multiply(x, y) {
  return x * y;
}

// Arrow function - same thing
const multiply = (x, y) => {
  return x * y;
};

// Arrow function - shorter (one-line)
const multiply = (x, y) => x * y;

// Example with one parameter
const square = (num) => num * num;
console.log(square(4)); // Output: 16

// Example with no parameters
const getRandom = () => Math.random();
console.log(getRandom()); // Output: random number
```

---

## When to Use Functions?

- When you repeat the same code multiple times
- To organize complex code into smaller parts
- To make code more readable and maintainable

```js
// Without function - repetitive
let price1 = 100;
let tax1 = price1 * 0.2;
let total1 = price1 + tax1;

let price2 = 200;
let tax2 = price2 * 0.2;
let total2 = price2 + tax2;

// With function - clean and reusable
function calculateTotal(price) {
  const tax = price * 0.2;
  return price + tax;
}

const total1 = calculateTotal(100); // 120
const total2 = calculateTotal(200); // 240
```

---

## 3. Arrays

### What are Arrays?

Arrays are ordered lists that store multiple values in a single variable. Each item has a position called an **index**, starting from **0**.

```
Index:  0        1         2         3
Array: ["apple", "banana", "orange", "grape"]
```

---

## Creating Arrays

```js
// Array of strings
const fruits = ["apple", "banana", "orange"];

// Array of numbers
const numbers = [10, 20, 30, 40, 50];

// Array with mixed types (possible but not recommended)
const mixed = ["text", 42, true];

// Empty array
const emptyArray = [];
```

---

## Accessing Array Elements

```js
const colors = ["red", "green", "blue", "yellow"];

console.log(colors[0]); // "red" (first item)
console.log(colors[1]); // "green" (second item)
console.log(colors[3]); // "yellow" (fourth item)

// Getting the last item
const lastColor = colors[colors.length - 1];
console.log(lastColor); // "yellow"
```

---

## Modifying Arrays

```js
const students = ["Alice", "Bob", "Charlie"];

// Change an existing element
students[1] = "Ben";
console.log(students); // ["Alice", "Ben", "Charlie"]

// Add a new element at specific index
students[3] = "Diana";
console.log(students); // ["Alice", "Ben", "Charlie", "Diana"]
```

---

## Common Array Methods

### Adding Elements

```js
const numbers = [1, 2, 3];

// Add to the end
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

numbers.push(5, 6);
console.log(numbers); // [1, 2, 3, 4, 5, 6]

// Add to the beginning
numbers.unshift(0);
console.log(numbers); // [0, 1, 2, 3, 4, 5, 6]
```

---

### Removing Elements

```js
const fruits = ["apple", "banana", "orange", "grape"];

// Remove from the end
const lastFruit = fruits.pop();
console.log(lastFruit); // "grape"
console.log(fruits);    // ["apple", "banana", "orange"]

// Remove from the beginning
const firstFruit = fruits.shift();
console.log(firstFruit); // "apple"
console.log(fruits);     // ["banana", "orange"]
```

---

### Other Useful Methods

```js
const animals = ["cat", "dog", "bird", "fish"];

// Get array length
console.log(animals.length); // 4

// Check if value exists
console.log(animals.includes("dog"));  // true
console.log(animals.includes("lion")); // false

// Find index of element
console.log(animals.indexOf("bird")); // 2
console.log(animals.indexOf("lion")); // -1 (not found)

// Join array into string
const text = animals.join(", ");
console.log(text); // "cat, dog, bird, fish"
```

---

## Looping Through Arrays

### Using a for loop

```js
const scores = [85, 92, 78, 95, 88];

for (let i = 0; i < scores.length; i++) {
  console.log("Score " + (i + 1) + ": " + scores[i]);
}

// Output:
// Score 1: 85
// Score 2: 92
// Score 3: 78
// Score 4: 95
// Score 5: 88
```

---

### Using forEach (modern way)

```js
const names = ["Emma", "Liam", "Olivia"];

names.forEach((name, index) => {
  console.log(index + ": " + name);
});

// Output:
// 0: Emma
// 1: Liam
// 2: Olivia
```

---

## Practical Example: Sum all numbers

```js
const prices = [10, 25, 30, 15];
let total = 0;

for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}

console.log("Total: $" + total); // Total: $80
```

---

## What's Next?

In **Part 3**, we'll explore the DOM (Document Object Model) and learn how to select and manipulate HTML elements with JavaScript! 🎯



Now it's time to make your web pages interactive! Let's learn how JavaScript talks to HTML.

---

## 4. The DOM (Document Object Model)

### What is the DOM?

![DOM Structure](/posts/sessions/session-3/images/DOM.png)

The DOM is a tree-like structure that represents your HTML document. JavaScript can access and modify this tree to change what users see on the page.

Think of it like this:

```
document
  └── html
      ├── head
      │   ├── title
      │   └── meta
      └── body
          ├── h1
          ├── p
          └── button
```

---

### HTML Example

```html
<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="title">Welcome</h1>
  <p class="description">This is a paragraph.</p>
  <button id="myButton">Click Me</button>
</body>
</html>
```

JavaScript can access any of these elements and change them!

---

## 5. document.querySelector

### What is querySelector?

`document.querySelector` is a method that finds and returns the **first** HTML element that matches a CSS selector.

### Syntax

```js
const element = document.querySelector("css-selector");
```

---

### Selecting by Tag Name

```js
// Select the first <h1> element
const heading = document.querySelector("h1");
console.log(heading); // <h1>Welcome</h1>

// Select the first <p> element
const paragraph = document.querySelector("p");
console.log(paragraph); // <p>This is a paragraph.</p>
```

---

### Selecting by ID

Use `#` before the ID name (just like in CSS).

```html
<div id="container">Content here</div>
```

```js
const container = document.querySelector("#container");
console.log(container); // <div id="container">...</div>
```

---

### Selecting by Class

Use `.` before the class name (just like in CSS).

```html
<p class="info">Information text</p>
<p class="info">More information</p>
```

```js
// Gets only the FIRST element with class "info"
const firstInfo = document.querySelector(".info");
console.log(firstInfo); // <p class="info">Information text</p>
```

---

### Selecting Multiple Elements

Use `querySelectorAll` to get all matching elements (returns a list).

```html
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
```

```js
const allBoxes = document.querySelectorAll(".box");
console.log(allBoxes.length); // 3

// Loop through all boxes
allBoxes.forEach((box, index) => {
  console.log("Box " + (index + 1) + ": " + box.textContent);
});
```

---

### Complex Selectors

You can use any CSS selector!

```js
// Select button inside a div with class "container"
const button = document.querySelector(".container button");

// Select all paragraphs inside an article
const paragraphs = document.querySelectorAll("article p");

// Select element with specific attribute
const emailInput = document.querySelector('input[type="email"]');
```

---

## 6. Events

### What are Events?

Events are actions that happen in the browser:

- User clicks a button
- User types in an input field
- Page finishes loading
- Mouse moves over an element

JavaScript can listen for these events and react to them.

![JavaScript Events](/posts/sessions/session-3/images/Events.png)

---

### Common Event Types

| Event | When it happens |
|-------|----------------|
| `click` | Element is clicked |
| `dblclick` | Element is double-clicked |
| `mouseover` | Mouse moves over element |
| `mouseout` | Mouse leaves element |
| `keydown` | Key is pressed |
| `keyup` | Key is released |
| `submit` | Form is submitted |
| `change` | Input value changes |
| `load` | Page finishes loading |

---

## Adding Event Listeners (Method 1: JavaScript)

This is the **recommended** way to handle events.

### Syntax:

```js
element.addEventListener("eventType", function);
```

---

### Example 1: Simple Click Event

```html
<button id="myButton">Click me</button>
<p id="message"></p>
```

```js
const button = document.querySelector("#myButton");
const message = document.querySelector("#message");

button.addEventListener("click", () => {
  message.textContent = "Button was clicked!";
});
```

---

### Example 2: Using a Named Function

```js
const button = document.querySelector("#myButton");

function handleClick() {
  alert("Hello, World!");
}

button.addEventListener("click", handleClick);
```

---

### Example 3: Getting Event Information

```js
const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  console.log("Event type:", event.type);      // "click"
  console.log("Element clicked:", event.target); // <button>
  console.log("Mouse position X:", event.clientX);
  console.log("Mouse position Y:", event.clientY);
});
```

---

## Adding Event Listeners (Method 2: Inline HTML)

You can also add event handlers directly in your HTML using attributes like `onclick`.

### Example:

```html
<button onclick="showMessage()">Click me</button>

<script>
  function showMessage() {
    alert("Button clicked!");
  }
</script>
```

### Another example with inline code:

```html
<button onclick="alert('Hello!')">Say Hello</button>
```

---

## Multiple Events on Same Element

```js
const box = document.querySelector("#box");

box.addEventListener("mouseover", () => {
  box.style.backgroundColor = "yellow";
});

box.addEventListener("mouseout", () => {
  box.style.backgroundColor = "white";
});

box.addEventListener("click", () => {
  box.style.backgroundColor = "blue";
});
```

---

## Events on Multiple Elements

```html
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
```

```js
const buttons = document.querySelectorAll(".btn");

buttons.forEach((button, index) => {
  button.addEventListener("click", () => {
    alert("You clicked button " + (index + 1));
  });
});
```

---

## What's Next?

In **Part 4**, we'll learn **DOM Manipulation** - how to change text, styles, and structure of your web pages dynamically! 🎨



Now let's learn how to change your web pages after they've loaded!

---

## 7. DOM Manipulation

### What is DOM Manipulation?

DOM manipulation means using JavaScript to change the content, structure, or style of your HTML page after it has loaded.

---

## 7.1 Changing Text Content

### Using textContent

```html
<h1 id="title">Original Title</h1>
<p id="description">Original description</p>
```

```js
const title = document.querySelector("#title");
const description = document.querySelector("#description");

// Change text
title.textContent = "New Title";
description.textContent = "This is the new description.";
```

---

### Using innerText (similar to textContent)

```js
const heading = document.querySelector("h1");
heading.innerText = "Updated Heading";
```

**Note:** `textContent` vs `innerText`:

- `textContent`: Shows all text, including hidden elements
- `innerText`: Shows only visible text
- Both work for basic text changes

---

## 7.2 Changing HTML Content

### Using innerHTML

```html
<div id="container">
  <p>Old content</p>
</div>
```

```js
const container = document.querySelector("#container");

// Replace entire HTML content
container.innerHTML = "<h2>New Heading</h2><p>New paragraph</p>";

// Add to existing content
container.innerHTML += "<p>Additional paragraph</p>";
```

⚠️ **Warning:** Be careful with `innerHTML` when using user input - it can create security risks!

---

## 7.3 Changing CSS Styles

### Using the style property

```html
<div id="box">This is a box</div>
```

```js
const box = document.querySelector("#box");

// Change individual styles
box.style.backgroundColor = "lightblue";
box.style.color = "white";
box.style.padding = "20px";
box.style.fontSize = "18px";
box.style.border = "2px solid navy";

// Note: CSS properties with hyphens become camelCase
// CSS: background-color → JavaScript: backgroundColor
// CSS: font-size → JavaScript: fontSize
```

---

### Practical example:

```js
const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  button.style.backgroundColor = "green";
  button.style.color = "white";
  button.style.fontSize = "20px";
});
```

---

## 7.4 Working with CSS Classes

### Using classList

This is the **better** way to change styles (instead of `style` property).

```html
<div id="box" class="container">Content</div>
```

```css
/* In your CSS file */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

.large {
  font-size: 24px;
}
```

```js
const box = document.querySelector("#box");

// Add a class
box.classList.add("highlight");

// Remove a class
box.classList.remove("container");

// Toggle a class (add if not present, remove if present)
box.classList.toggle("large");

// Check if class exists
if (box.classList.contains("highlight")) {
  console.log("Box is highlighted!");
}

// Add multiple classes at once
box.classList.add("highlight", "large");
```

---

### Why use classList instead of style?

- Keeps styles in CSS where they belong
- Easier to manage and reuse
- Better performance
- Cleaner code

---

## 7.5 Showing and Hiding Elements

### Method 1: Using style.display

```html
<div id="content">
  <p>This content can be hidden.</p>
</div>
<button id="toggleBtn">Toggle Content</button>
```

```js
const content = document.querySelector("#content");
const toggleBtn = document.querySelector("#toggleBtn");

toggleBtn.addEventListener("click", () => {
  if (content.style.display === "none") {
    content.style.display = "block"; // Show
  } else {
    content.style.display = "none";  // Hide
  }
});
```

---

### Method 2: Using a CSS class (better)

```css
.hidden {
  display: none;
}
```

```js
const content = document.querySelector("#content");
const toggleBtn = document.querySelector("#toggleBtn");

toggleBtn.addEventListener("click", () => {
  content.classList.toggle("hidden");
});
```

---

## 7.6 Getting and Setting Attributes

```html
<img id="myImage" src="old.jpg" alt="Old Image">
<input id="email" type="text" placeholder="Enter email">
```

```js
const image = document.querySelector("#myImage");
const input = document.querySelector("#email");

// Get attribute value
console.log(image.src);           // "old.jpg"
console.log(input.placeholder);   // "Enter email"

// Set attribute value
image.src = "new.jpg";
image.alt = "New Image";
input.placeholder = "Your email here";

// Using getAttribute and setAttribute (alternative)
const oldSrc = image.getAttribute("src");
image.setAttribute("src", "another.jpg");
```

---

## 7.7 Creating and Adding Elements

### Creating new elements

```js
// Create a new element
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
newParagraph.classList.add("info");

// Add it to the page
document.body.appendChild(newParagraph);
```

---

### More complex example:

```js
// Create a new div with content
const newDiv = document.createElement("div");
newDiv.classList.add("card");

const heading = document.createElement("h3");
heading.textContent = "Card Title";

const text = document.createElement("p");
text.textContent = "This is card content.";

// Build the structure
newDiv.appendChild(heading);
newDiv.appendChild(text);

// Add to page
const container = document.querySelector("#container");
container.appendChild(newDiv);
```

---

## 7.8 Removing Elements

```html
<div id="message">This message will disappear.</div>
<button id="removeBtn">Remove Message</button>
```

```js
const message = document.querySelector("#message");
const removeBtn = document.querySelector("#removeBtn");

removeBtn.addEventListener("click", () => {
  message.remove(); // Remove the element
});
```

---

## 🎯 Key Takeaways

✅ **Variables** store data (`let` for changing values, `const` for constants)

✅ **Functions** organize reusable code

✅ **Arrays** store ordered lists of values (starting at index 0)

✅ **DOM** is the tree structure representing your HTML

✅ **querySelector** finds HTML elements using CSS selectors

✅ **Events** let you respond to user actions (clicks, typing, etc.)

✅ **DOM Manipulation** changes content, styles, and structure dynamically

---

## Final Tips

🔹 Link your JavaScript file properly and always test your code in the browser!

🔹 Use `console.log()` to debug and see what's happening

🔹 Practice by building small interactive projects

🔹 Keep your code organized with functions

🔹 Use meaningful variable and function names

---

## Congratulations! 🎉

You've completed **Session 3 - JavaScript Basics**!

You now know how to:
- Connect JavaScript to HTML
- Use variables, functions, and arrays
- Select and manipulate DOM elements
- Handle user events
- Change styles and content dynamically

Keep practicing and building! The more you code, the better you'll get. 🚀



Time to apply everything you've learned! Let's build a complete XO Game (Tic Tac Toe) from scratch.

---

## 🎮 Project Overview

In this practice project, you'll build a fully functional Tic Tac Toe game that demonstrates all the JavaScript concepts you've learned:

- Variables to track game state
- Functions to organize game logic
- Arrays to store board data
- DOM manipulation to update the interface
- Event listeners to respond to user clicks
- Conditional statements to check winners

---

##  Getting Started

### Step 1: Clone the Starter Code

We've prepared a starter repository with HTML and CSS already done. You just need to write the JavaScript!

```bash
git clone https://github.com/yassinelamsaaf/CELL_WEB---XO-game.git
cd CELL_WEB---XO-game
```

### Step 2: Open in Your Code Editor

Open the folder in VS Code or your preferred editor.

You'll find three files:
- `index.html` - The game structure (already complete)
- `style.css` - The game styling (already complete)
- `game-solution.js` - Your JavaScript file (this is where you'll work!)

### Step 3: Open in Browser

Double-click `index.html` to open it in your browser and see the game interface.

---

## 📁 Starter Files

### HTML Structure (index.html)

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XO Game - Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>XO Game</h1>
        
        <div class="game-info">
            <p>Current Player: <span id="current-player">X</span></p>
            <p id="game-status">Game in progress...</p>
        </div>

        <div class="game-board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>

        <button id="reset-btn">Reset Game</button>
    </div>

    <script src="game-solution.js"></script>
</body>
</html>
```

---

### CSS Styling (style.css)

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #667eea;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 500px;
    width: 100%;
}

h1 {
    color: #333;
    margin-bottom: 30px;
    font-size: 2.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.game-info {
    margin-bottom: 30px;
}

.game-info p {
    font-size: 1.2rem;
    color: #555;
    margin: 10px 0;
}

#current-player {
    font-weight: bold;
    color: #667eea;
    font-size: 1.5rem;
}

#game-status {
    font-weight: bold;
    color: #764ba2;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0 auto 30px;
    max-width: 400px;
}

.cell {
    aspect-ratio: 1;
    background: #f5f7fa;
    border: none;
    border-radius: 10px;
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cell:hover {
    transform: scale(1.05);
    background: #e0e7ff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cell.x {
    color: #667eea;
}

.cell.o {
    color: #764ba2;
}

.cell.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

#reset-btn {
    background: #667eea;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

#reset-btn:hover {
    transform: translateY(-2px);
    background: #5568d3;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

#reset-btn:active {
    transform: translateY(0);
}

/* Responsive design */
@media (max-width: 500px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 2rem;
    }

    .cell {
        font-size: 2rem;
    }
}
```

---

## Your Mission: Complete the JavaScript

Open `game-solution.js` and follow the TODO comments to build the game logic.

### JavaScript Structure (game-solution.js)

The file contains detailed comments guiding you through each step:

```js
// ============================================
// XO GAME - TIC TAC TOE
// JavaScript Tutorial with Comments
// ============================================

// ============================================
// VARIABLES
// ============================================
// TODO: Declare variables to track the game state
// - Create an array to represent the 9 cells of the board (initially empty strings)
// - Create a variable to track whose turn it is (starts with 'X')
// - Create a variable to track if the game is still active (boolean)


// ============================================
// DOM ELEMENT REFERENCES
// ============================================
// TODO: Use querySelector and querySelectorAll to get references to HTML elements
// - Get all cell elements (use querySelectorAll with class 'cell')
// - Get the current player display element (id: 'current-player')
// - Get the game status element (id: 'game-status')
// - Get the reset button (id: 'reset-btn')


// ============================================
// WINNING PATTERNS
// ============================================
// TODO: Create an array of arrays containing all possible winning combinations
// The board indices are:
// [0] [1] [2]
// [3] [4] [5]
// [6] [7] [8]
// 
// Winning combinations are:
// Rows: [0,1,2], [3,4,5], [6,7,8]
// Columns: [0,3,6], [1,4,7], [2,5,8]
// Diagonals: [0,4,8], [2,4,6]


// ============================================
// INITIALIZE GAME
// ============================================
// TODO: Create a function called 'initializeGame' that:
// - Resets the board array to empty strings
// - Sets the current player to 'X'
// - Sets game active to true
// - Clears all cell texts using DOM manipulation
// - Removes disabled classes from cells
// - Updates the status message


// ============================================
// HANDLE CELL CLICK
// ============================================
// TODO: Create a function called 'handleCellClick' that takes an event parameter
// This function should:
// - Get the clicked cell element from the event
// - Get the cell index from the data-index attribute
// - Use conditionals (if/else) to check:
//   * If the cell is already filled (check the board array)
//   * If the game is not active
//   * If either condition is true, return early (do nothing)
// - Update the board array at the clicked index with current player
// - Use DOM manipulation to update the cell's innerText
// - Add a class to the cell for styling ('x' or 'o')
// - Call function to check for winner
// - If no winner, switch players


// ============================================
// CHECK FOR WINNER
// ============================================
// TODO: Create a function called 'checkWinner' that:
// - Uses a loop (for loop) to iterate through all winning patterns
// - For each pattern, check if all three positions have the same value
//   and that value is not empty
// - Use conditionals (if statements) to determine:
//   * If there's a winner - call handleGameEnd with winner
//   * If the board is full (no empty strings) - call handleGameEnd with 'draw'
// - You can use array methods or loops to check if board is full


// ============================================
// HANDLE GAME END
// ============================================
// TODO: Create a function called 'handleGameEnd' that takes a result parameter
// This function should:
// - Set game active to false
// - Use conditionals (if/else) to check the result:
//   * If result is 'draw', update status to show it's a draw
//   * Otherwise, update status to show the winner
// - Use a loop or querySelectorAll to add 'disabled' class to all cells


// ============================================
// SWITCH PLAYER
// ============================================
// TODO: Create a function called 'switchPlayer' that:
// - Uses a conditional (if/else or ternary operator) to switch between 'X' and 'O'
// - Updates the current player variable
// - Uses DOM manipulation to update the current player display (innerText)


// ============================================
// EVENT LISTENERS
// ============================================
// TODO: Add click event listeners to all cells
// - Use a loop (forEach) to iterate through all cell elements
// - Add a click event listener to each cell that calls handleCellClick


// TODO: Add click event listener to reset button
// - Should call initializeGame when clicked


// ============================================
// START THE GAME
// ============================================
// TODO: Call initializeGame to start the game when the page loads


// ============================================
// BONUS CHALLENGES FOR STUDENTS
// ============================================
// 1. Add a score counter that tracks wins for X and O
// 2. Add animation when someone wins
// 3. Highlight the winning combination
// 4. Add sound effects for clicks and wins
// 5. Add AI opponent for single player mode
```

---

##  Step-by-Step Guide

### Step 1: Variables
Create variables to store:
- Board state (array of 9 empty strings)
- Current player ('X' or 'O')
- Game active status (boolean)

### Step 2: DOM References
Use `querySelector` and `querySelectorAll` to get HTML elements

### Step 3: Winning Patterns
Define all 8 possible winning combinations

### Step 4: Initialize Function
Reset the game to starting state

### Step 5: Handle Click
Respond when a player clicks a cell

### Step 6: Check Winner
Loop through winning patterns to find a winner

### Step 7: Handle Game End
Display winner or draw message

### Step 8: Switch Player
Alternate between X and O

### Step 9: Event Listeners
Attach click handlers to cells and reset button

### Step 10: Start Game
Call initialize when page loads

---

## ✅ Testing Your Game

Make sure your game can:

1. ✅ Display X or O when clicking a cell
2. ✅ Prevent clicking the same cell twice
3. ✅ Alternate between X and O players
4. ✅ Detect when someone wins (all 8 patterns)
5. ✅ Detect a draw (board full, no winner)
6. ✅ Display game status messages
7. ✅ Disable cells when game ends
8. ✅ Reset the game with the Reset button

---

##  Bonus Challenges

Once your game works, try these enhancements:

1. **Score Counter** - Track wins for X and O across multiple games
2. **Win Animation** - Highlight or animate the winning cells
3. **Sound Effects** - Add sounds for clicks and wins
4. **AI Opponent** - Make the computer play as O
5. **Themes** - Add dark mode or different color schemes

---

##  Concepts Used

This project uses everything from Session 3:

- ✅ Variables (const, let)
- ✅ Functions (regular and arrow functions)
- ✅ Arrays (storing board state, winning patterns)
- ✅ DOM manipulation (querySelector, textContent, classList)
- ✅ Events (addEventListener, click events)
- ✅ Conditionals (if/else)
- ✅ Loops (for, forEach)

---

##  What You'll Learn

By completing this project, you'll understand:

- How to structure a complete JavaScript application
- Managing application state with variables
- Organizing code with functions
- User interaction with event listeners
- Dynamic UI updates with DOM manipulation
- Game logic with conditionals and loops

---

##  Tips

- **Test frequently** - Run your code after each function
- **Use console.log()** - Debug by printing values
- **Read error messages** - They tell you what's wrong
- **Start simple** - Get basic clicks working first
- **Ask for help** - Don't struggle alone!

---

##  Congratulations!

Once you complete this project, you'll have a fully functional game built with pure JavaScript!

This demonstrates real-world programming skills and shows you can:
- Plan and structure an application
- Implement interactive features
- Debug and test code
- Create something people can actually use

**Keep coding and keep building!** 


CIT Web Development Hub

SESSION 1

SESSION 2

SESSION 3

SESSION 4

SESSION 5

SESSION 6