🟢 Série de Mini-Projets HTML + CSS

Épisode 1 : Carte de Profil Personnel

La façon frontend de dire “Je suis là” 😎

Bonjour cher voyageur du code 🧭💻
Tu as vu les balises HTML, ajouté un peu de couleur avec le CSS, mais si tu te bats encore avec cette question :

« Ok, j’ai appris… mais il est où le projet ? »

Ce mini-projet existe exactement pour combler ce vide 💥
Ni énorme, ni compliqué… mais extrêmement formateur.

Quand tu auras terminé ce projet, tu sauras :

Construire une structure HTML 🧱
Donner du style avec le CSS 🎨
Comprendre vraiment la logique de Flexbox 🧠
Créer un petit composant UI, mais bien réel 😎

🎯 L’Objectif Clair du Projet (Qu’est-ce qu’on construit ?)

Nous allons créer une carte de profil personnel.

Cette carte peut :

Être affichée dans ton portfolio
Être le premier vrai travail de quelqu’un qui dit « j’apprends le frontend »
Être ajoutée à ton CV
Être placée dans ton README GitHub

À l’intérieur de la carte, il y aura :

👉 Un avatar circulaire
👉 Un nom
👉 Une bio courte et claire
👉 Des liens vers les réseaux sociaux

Et en bonus :

Centrée
Propre
Responsive
Avec une vibe « junior mais conscient » 😎

🧠 Avant de Commencer (Mini Ouverture d’Esprit)

Dans ce projet, nous allons apprendre :

À quoi sert HTML → la structure
À quoi sert CSS → l’apparence
Pourquoi Flexbox existe → l’alignement
La différence entre « ça marche » et « c’est bien fait »

Si tu es prêt, on commence 👇

🧱 Étape 1 : Le Squelette HTML

(On ne peint pas avant de construire la maison)

HTML, c’est comme le béton d’une maison.
D’abord tu construis solide — ensuite tu décors.

📄 index.html

&lt;!DOCTYPE html>
&lt;html lang="tr">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>Personal Profile Card&lt;/title>
  &lt;link rel="stylesheet" href="style.css">
&lt;/head>
&lt;body>

  &lt;div class="profile-card">

    &lt;img src="avatar.jpg" alt="Profile photo">

    &lt;h2>Cansu Porsuk&lt;/h2>

    &lt;p class="bio">
      A frontend learner who can’t code without coffee ☕💻
    &lt;/p>

    &lt;div class="social-links">
      &lt;a href="#">GitHub&lt;/a>
      &lt;a href="#">LinkedIn&lt;/a>
      &lt;a href="#">Twitter&lt;/a>
    &lt;/div>

  &lt;/div>

&lt;/body>
&lt;/html>

🧠 Ce que nous avons fait volontairement ici :

Ajout du alt → accessibilité + SEO
Pas de divs inutiles
Une structure claire et lisible

📌 Astuce :
Le HTML n’a pas besoin d’être beau.
Il doit être logique.

🎨 Étape 2 : Reset CSS

(On remet le chaos à zéro)

Les navigateurs ajoutent des marges un peu comme ils veulent.
Nous, on dit : « Stop. »

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

🧠 À quoi sert box-sizing: border-box; ?

Il empêche les éléments de grossir quand on ajoute du padding.
Cette ligne évite à elle seule de futures crises de nerfs 😄

🧍 Étape 3 : Centrer la Page

(Flexbox entre en scène)

La carte doit être centrée.
Parce que l’esthétique = la première impression 😎

body {
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;

  display: flex;
  justify-content: center;
  align-items: center;
}

🎯 Logique Flexbox apprise ici :

justify-content → horizontal
align-items → vertical

Une fois compris, impossible de revenir en arrière 😏

🧩 Étape 4 : Le Design de la Carte

(Le vrai moment clé)

.profile-card {
  background-color: #fff;
  width: 320px;
  padding: 24px;
  border-radius: 16px;
  text-align: center;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

🎨 Ce qui donne l’effet « carte » :

border-radius → douceur
box-shadow → profondeur
padding → respiration visuelle

🖼️ Étape 5 : L’Avatar

(S’il n’est pas rond, ça ne compte pas)

.profile-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 16px;
}

🧠 object-fit: cover est une pépite.

L’image ne s’étire pas, elle est recadrée proprement et reste esthétique.

✍️ Étape 6 : Nom & Bio

(Court mais efficace)

.profile-card h2 {
  margin-bottom: 8px;
}

.bio {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

📌 Règle de la vraie vie :
Une bio, c’est court.
Personne ne lit un manifeste sur une carte de profil 😄

🔗 Étape 7 : Liens Sociaux

(Encore un peu de Flexbox)

.social-links {
  display: flex;
  justify-content: space-between;
}

.social-links a {
  text-decoration: none;
  color: #0077cc;
  font-weight: bold;
}

.social-links a:hover {
  color: #005999;
}

🎯 Ce que tu as appris ici :

Aligner des éléments inline avec Flexbox
Ajouter des effets hover
Donner une vraie sensation UI

🧪 Le Résultat Final

✔️ Une vraie carte de profil
✔️ HTML + CSS qui travaillent ensemble
✔️ La logique Flexbox bien comprise
✔️ Un projet prêt pour le portfolio

À ce stade, tu peux dire sans mentir :

« Oui, j’ai construit quelque chose. » 😎

⚠️ Les Pièges les Plus Courants des Débutants

❌ Tout vouloir centrer
❌ Apprendre Flexbox par cœur sans comprendre
❌ Ne pas contrôler les images
❌ Dire « ça marche » et s’arrêter là

🚀 Défis Bonus (Teste-toi)

Faire grandir la carte au hover
Ajouter un mode sombre 🌙
Utiliser un fond en dégradé
Élargir la carte sur mobile 📱

Si tu sais faire ça → level up 🆙

🎯 Phrase Finale

Ce projet est peut-être petit, mais il enseigne une grande vérité :

HTML + CSS ne s’apprennent pas en lisant —
ils s’apprennent en construisant. 😎