DébutantNon commencé

Exercice 10.1 · 10 min · 0 tentative

Structure HTML de l'app

🎯 Objectif

Créer la structure HTML de l'application de gestion de produits.

📖 Contexte

Tu vas construire une application complète étape par étape ! C'est un mini-projet qui combine tout ce que tu as appris : HTML, CSS, JavaScript et les appels API.

Dans cet exercice, tu poses les fondations : la structure HTML. Pas encore de JavaScript, on s'occupe d'abord du squelette de la page.

L'application finale

L'app permettra de :

  • Afficher une liste de produits depuis une API
  • Rechercher des produits par nom
  • Filtrer par catégorie
  • Ajouter, modifier et supprimer des produits

Structure attendue

📝 Consigne

Complète le HTML pour créer :

  1. Un champ de recherche (input type text) avec id="recherche"
  2. Un menu déroulant (select) avec id="categorie" et une option par défaut
  3. Un bouton d'ajout avec id="btn-ajouter"
  4. Un tableau (table) avec id="tableau-produits", un thead avec les colonnes (Image, Titre, Prix, Catégorie, Actions) et un tbody vide

Pas de JavaScript ici ! On construit d'abord le HTML. Le JS viendra dans l'exercice suivant.

Objectifs

  • Champ de recherche
  • Select des catégories
  • Bouton ajouter
  • Tableau des produits
  • En-têtes du tableau
  • Colonne Titre
  • Colonne Prix
  • Corps du tableau

Lis bien les instructions et lance-toi !

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé