Consignes du mini-projet

Le but du projet

Le but de ce projet est de vous faire travailler le passage du HTML+CSS à l'appli React avec des composants, des events et des states.

Vous recevez deux fichiers HTML et un fichier CSS pour vous fournir une intégration statique. Vous allez devoir faire en sorte de transformer cela en l'une application sur une seule page qui change les composants chargés pour passer d'une liste d'articles au détail d'un article.

Les données des articles sont fournies dans un fichier JSON, à part les informations fixes de la page (celles du header) toutes vos données devront venir de ce JSON.

Les notions utilisées dans le projet :

Les composants et la syntaxe JSX
Les boucles
Les props
Les events
Les states

Les fichiers fournis

Le CSS

:root {
    --primary: #6d5dfc;
    --bg: #f0f0f0;
    --text: #333;
    --card-bg: #ffffff;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
}

header {
    background: var(--primary);
    color: white;
    padding: 2rem;
    text-align: center;
    border-bottom: 5px solid #000;
}

.container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Grid pour la page d'accueil */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.card {
    background: var(--card-bg);
    border: 4px solid #000;
    padding: 1.5rem;
    box-shadow: 8px 8px 0px #000;
    transition: transform 0.2s;
}

.card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0px #000;
}

.category {
    display: inline-block;
    background: #ffde59;
    padding: 0.2rem 0.5rem;
    font-weight: bold;
    font-size: 0.8rem;
    border: 2px solid #000;
    margin-bottom: 1rem;
}

.date {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid var(--primary);
}

/* Détails Article */
.article-detail {
    background: white;
    padding: 2rem;
    border: 4px solid #000;
}

.back-link {
    margin-bottom: 1rem;
    display: block;
}

JSON

[
  {
    "id": 1,
    "title": "Les bases du Pixel Art",
    "category": "Tutoriel",
    "date": "2026-01-15",
    "excerpt": "Apprenez à maîtriser la ligne et le 'staircasing' pour des rendus nets.",
    "content": "Le pixel art n'est pas simplement du dessin en basse résolution. C'est la gestion de chaque carré..."
  },
  {
    "id": 2,
    "title": "Choisir sa palette",
    "category": "Théorie",
    "date": "2026-01-20",
    "excerpt": "Comment limiter ses couleurs sans sacrifier le contraste.",
    "content": "La contrainte de couleur est l'âme du pixel art. Voici comment créer une palette harmonieuse..."
  },
  {
    "id": 3,
    "title": "Animation de Sprite",
    "category": "Animation",
    "date": "2026-01-22",
    "excerpt": "Donnez vie à vos personnages avec le cycle de marche de 4 images.",
    "content": "L'animation en pixel art demande de la précision. Chaque pixel qui bouge doit avoir une raison..."
  },
  {
    "id": 4,
    "title": "Logiciels Gratuits",
    "category": "Outils",
    "date": "2026-01-25",
    "excerpt": "De Libresprite à Piskel, tour d'horizon des outils open-source.",
    "content": "Pas besoin de dépenser une fortune pour commencer le pixel art. Voici les meilleurs outils..."
  },
  {
    "id": 5,
    "title": "Le Dithering",
    "category": "Technique",
    "date": "2026-01-28",
    "excerpt": "Créer des dégradés sans ajouter de nouvelles couleurs.",
    "content": "Le dithering est une technique ancestrale qui permet de tromper l'oeil..."
  },
  {
    "id": 6,
    "title": "Isometric Pixel Art",
    "category": "Design",
    "date": "2026-01-29",
    "excerpt": "Construisez des mondes en 3D avec la perspective 2:1.",
    "content": "La perspective isométrique est un standard du jeu vidéo classique. Apprenez les angles parfaits..."
  }
]

Liste des articles

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Pixel Blog | Accueil</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>PIXEL ART BLOG</h1>
            <p>L'art du carré parfait</p>
        </header>
        
        <main class="container">
            <div class="blog-grid">
                <article class="card">
                    <span class="category">Tutoriel</span>
                    <h3>Les bases du Pixel Art</h3>
                    <p class="date">15 Janvier 2026</p>
                    <p>Apprenez à maîtriser la ligne et le 'staircasing' pour des rendus nets.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
        
                <article class="card">
                    <span class="category">Théorie</span>
                    <h3>Choisir sa palette</h3>
                    <p class="date">20 Janvier 2026</p>
                    <p>Comment limiter ses couleurs sans sacrifier le contraste.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
        
                <article class="card">
                    <span class="category">Animation</span>
                    <h3>Animation de Sprite</h3>
                    <p class="date">22 Janvier 2026</p>
                    <p>Donnez vie à vos personnages avec le cycle de marche.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
        
                <article class="card">
                    <span class="category">Outils</span>
                    <h3>Logiciels Gratuits</h3>
                    <p class="date">25 Janvier 2026</p>
                    <p>De Libresprite à Piskel, tour d'horizon des outils.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
        
                <article class="card">
                    <span class="category">Technique</span>
                    <h3>Le Dithering</h3>
                    <p class="date">28 Janvier 2026</p>
                    <p>Créer des dégradés sans ajouter de nouvelles couleurs.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
        
                <article class="card">
                    <span class="category">Design</span>
                    <h3>Isometric Pixel Art</h3>
                    <p class="date">29 Janvier 2026</p>
                    <p>Construisez des mondes en 3D avec la perspective 2:1.</p>
                    <a href="article.html" class="btn">Lire la suite →</a>
                </article>
            </div>
        </main>
    </body>
</html>

Details d'un article

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Article | Détails</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>PIXEL ART BLOG</h1>
        </header>
        
        <main class="container">
            <a href="index.html" class="back-link">← Retour à l'accueil</a>
        
            <article class="article-detail">
                <span class="category">Tutoriel</span>
                <h2>Les bases du Pixel Art</h2>
                <p class="date">Publié le 15 Janvier 2026</p>
                <hr>
                <p>
                    Le pixel art n'est pas simplement du dessin en basse résolution. C'est la gestion de chaque carré individuel pour suggérer des formes complexes. Dans ce cours, nous verrons comment éviter les "jaggies" (lignes brisées) et comment optimiser vos courbes.
                </p>
                <p>
                    La règle d'or : si un pixel ne sert pas l'image, il l'encombre. Chaque point doit être placé avec intention.
                </p>
            </article>
        </main>
    </body>
</html>

02 February 2026