Site de recettes — Olivier Georges

Olivier Georges

000%

Intégration HTML/CSS

Ce projet est un projet d’intégration Web en HTML, CSS et JavaScript . Après avoir intégré le site, je devais réussir à le transformer en thème WordPress fonctionnel.

Intégrateur - Seul - Projet scolaire - 2026

Tester le projet

Le site de recettes affiché sur un téléphone

À propos du projet

Le projet UneatableRecipes a été réalisé dans le cadre du cours de production Web. Nous devions intégrer une maquette en HTML, CSS et JavaScript , puis l’adapter en thème WordPress pour que le contenu, comme les recettes, puisse être géré facilement à partir du tableau de bord.

Les outils utilisés

Mon rôle

Designer et intégrateur Web . J’ai réalisé le projet au complet : la recherche d’inspiration , la création de la maquette Figma , l’intégration en HTML, CSS et JavaScript et la conversion du site en thème WordPress .

Ce que l’IA a fait ?

L’IA m’a aidé à corriger et à générer certains textes, à créer des images et à débugger des problèmes. L’intégration et le thème WordPress ont été faits par moi.

Les grandes étapes

Étape 1 : tableau d’inspiration avec des sites de recettes, les typographies et la palette de couleurs

01 Recherche d’inspiration

Premièrement, j’ai cherché de l’ inspiration sur d’autres sites de recettes pour définir le style , les couleurs et l’ ambiance que je voulais donner au projet.

Étape 2 : maquettes Figma de l’accueil, de la liste des recettes et d’une fiche recette

02 Maquette Figma

Deuxièmement, j’ai conçu la maquette du site dans Figma : la mise en page, les typographies , les couleurs et les composantes de chaque page.

Étape 3 : intégration HTML de la page d’accueil dans Visual Studio Code

03 Intégration HTML et CSS

Troisièmement, l’intégration de la maquette en HTML , puis l’ajout du CSS et du responsive pour donner vie au site sur tous les écrans .

Étape 4 : styles SCSS de la page recette dans Visual Studio Code

04 Interactivité

Quatrièmement, l’ajout du JavaScript pour rendre le site interactif : le menu, les filtres et les animations.

Étape 5 : composante JavaScript du header dans Visual Studio Code

05 WordPress

Dernièrement, la conversion du site en thème WordPress , pour que les recettes puissent être ajoutées et modifiées directement à partir du tableau de bord .

Page d’accueil d’Uneatable Recipes avec une grande photo de cuisine et le titre principal

Page des recettes avec la grille de cartes et leurs étiquettes

Fiche de la recette « Ramen qui sont pas ramener » avec le temps de cuisson et les portions

Section « Les recettes les plus aimées » de la page d’accueil

Fiche de la recette « La soupe de fond de rue » avec ses informations de préparation

06 Résultat final

Tester le projet

Les défis

Trouver un style unique parmi tous les sites de recettes existants
Garder le même design entre la maquette Figma, l’intégration et WordPress
Rendre les recettes faciles à ajouter et à modifier dans WordPress

Mes solutions

Rassembler plusieurs inspirations et en garder seulement les meilleures idées pour créer une identité propre au projet.
Bien définir les couleurs , les typographies et les composantes dans Figma, puis réutiliser le même CSS à chaque étape.
Découper le site en gabarits WordPress et structurer chaque recette pour qu’elle se gère directement à partir du tableau de bord .

En conclusion

En conclusion, ce projet m’a permis de réaliser un site complet, de la recherche d’inspiration et de la maquette Figma jusqu’à l’ intégration en HTML, CSS et JavaScript . La conversion en thème WordPress m’a appris à passer d’un site statique à un site dynamique , facile à mettre à jour pour quelqu’un qui ne code pas. Ce projet représente donc un bon récapitulatif de mes compétences en design et en intégration Web .

Retourner aux projets