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


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.


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

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

Introduction - The Easiest Way to Stop Fighting With Layouts


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**


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

Flexbox Theory - Understanding the Core Concepts


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.


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


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!


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

SESSION 2

Introduction - The Easiest Way to Stop Fighting With Layouts

Flexbox Theory - Understanding the Core Concepts

Git & GitHub - The Real Reason They Exist

Your First Collaborative Project