🎨 Défi débutant : Du style qui claque !

Message par **adonf** » sam. mai 24, 2025 12:12 pm

Défi débutant : Du style qui claque !

Vous avez un portfolio en Markdown ? Et si on lui donnait un peu de style ?

Objectif

Ajouter un fichier style.css pour personnaliser votre portfolio, même sans rien connaître au CSS.

Ce qu’on vous donne

Un modèle de portfolio fonctionnel (voir tutoriel précédent)
Un fichier `index.md` qui sera votre page d’accueil
Un défi simple : rendre votre page un peu plus jolie !

Le défi : ajouter un fichier `style.css` et le relier à votre page

Étapes :

Créez un fichier `style.css` dans votre dépôt
Ajoutez-y quelques lignes de style (voir ci-dessous)
Modifiez votre `index.md` en `.html` pour pouvoir utiliser le CSS
Ajoutez cette ligne dans le `<head>` :
Code : Tout sélectionner
```
<link rel="stylesheet" href="style.css">
```
Publiez avec GitHub Pages comme dans le tutoriel

Exemples de styles simples

Code : Tout sélectionner

body {
  font-family: sans-serif;
  background: #1e1e1e;
  color: #b0f0d4;
  padding: 2em;
}

a {
  color: #cc99ff;
  text-decoration: none;
}

h1 {
  border-bottom: 2px solid #cc99ff;
  padding-bottom: 0.2em;
}

Le petit twist : exprimez votre univers

Ajoutez un ou plusieurs éléments de style personnel :

Une couleur qui vous représente
Une police d’écriture stylée
Une image de fond ?
Un bouton ou un effet qui clignote ? (avec parcimonie !)
Un easter egg dans un coin ?

Besoin d’inspiration ? Piochez dans les portfolios des autres ou demandez conseil dans ce topic !

Bonus

Les portfolios les plus originaux, créatifs ou drôles pourront être mis à l’honneur dans un post dédié.

Postez votre lien GitHub Pages ici et partagez vos trouvailles CSS !

Étendre votre style à tout votre mini-site

Vous avez ajouté un peu de style dans un fichier `style.css` ? Bravo ! Maintenant, on va l’appliquer à TOUT votre site.

Principe simple

Le CSS ne s’applique que si vos fichiers sont en `.html` (pas `.md`), et si vous reliez votre `style.css` dedans.

Il faut donc :

Convertir vos `.md` en `.html`
Insérer le lien vers votre `style.css` dans chacun des fichiers

Exemple de fichier HTML stylé

Remplacez vos anciens fichiers `.md` par une version comme ceci :

Ex : `index.html`

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Bienvenue sur mon portfolio !</h1>
<p>Je m'appelle <strong>Votre prénom</strong> et voici un aperçu de mes travaux.</p>

<ul>
  <li><a href="moi.html">Qui suis-je ?</a></li>
  <li><a href="projets.html">Mes projets</a></li>
  <li><a href="competences.html">Compétences</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

</body>
</html>

Faites de même pour tous les autres fichiers : `moi.html`, `projets.html`, etc.

Outils simples pour convertir .md en .html

Vous pouvez :

Faire un copier-coller à la main si vous débutez (méthode artisanale !)
Utiliser un outil en ligne comme Dillinger.io pour convertir vos `.md`
Ou installer un générateur de site plus tard (Jekyll, Eleventy, etc.)

Astuce : utilisez toujours le même “template” HTML pour garder un style cohérent sur chaque page.

Attention

N’oubliez pas de modifier les liens internes :

Code : Tout sélectionner

[[projets.md]] → devient → <a href="projets.html">Mes projets</a>

Vous avez réussi ? Partagez votre site dans le fil du défi ! Ou postez votre fichier ici pour qu’on vous aide à corriger.