Aller au contenu

Brief du projet : création d'un portfolio d'agence

Dans ce tutoriel, nous allons construire un petit site web d'agence de design à partir de zéro avec Silex. À la fin, vous aurez un site professionnel en ligne, hébergé sur GitLab Pages.

Ce que nous allons construire

Un site web portfolio de trois pages pour une agence de design fictive :

Page d'accueil (index) — Page de destination présentant l'agence. Elle comprend une section hero avec un titre, une courte description et un bouton d'appel à l'action. En dessous, une vitrine de portfolio : trois projets mis en avant affichés sous forme de cartes (avec flexbox). En bas, une section « Derniers articles du blog » affichant les trois articles de blog les plus récents provenant d'une base de données WordPress.

Page À propos — Raconte l'histoire de l'agence. Deux colonnes : à gauche, du texte sur l'équipe ; à droite, une image. Utilise des variables CSS pour un espacement et une typographie cohérents.

Page Contact — Formulaire de contact avec des champs pour le nom, l'email et le message. Les soumissions de formulaire sont envoyées à Formspree. Inclut également les coordonnées (adresse, téléphone, email).

Les trois pages partagent un header (logo + navigation) et un footer (copyright, liens) — implémentés en tant que Symboles pour que les modifications se synchronisent sur toutes les pages.

Ce que nous utiliserons en chemin

Mise en page et style : - Flexbox pour toute la mise en page (lignes, cartes, colonnes) - Variables CSS pour les couleurs (couleur de marque, couleur du texte, arrière-plans) et l'espacement (padding, gaps) - Nommage des classes BEM (par ex. agency-hero, agency-card, agency-header) - Design responsive avec breakpoints (desktop, tablette, mobile)

Composants et réutilisabilité : - Symboles pour le header et le footer partagés (une modification, toutes les pages se mettent à jour) - Un système de design basé sur des composants cartes pour la cohérence

Intégration CMS : - WordPress comme source de données avec Pods pour le contenu structuré (types de contenu et champs personnalisés) - WPGraphQL pour exposer les articles de blog et les données de projets - Liaisons de données sur la page d'accueil pour récupérer les articles de blog et itérer dessus - Expressions et filtres pour formater les dates et tronquer les descriptions

Publication : - GitLab comme stockage et hébergement - Configuration de domaine personnalisé (optionnel, mais nous le montrerons)

À la fin de ce tutoriel, vous aurez appris

  • Comment créer et structurer plusieurs pages avec une navigation interne
  • Comment utiliser les Symboles pour la cohérence entre les pages
  • Comment concevoir un système avec des variables CSS et un espacement cohérent
  • Comment configurer WordPress et le connecter comme source de données
  • Comment lier des données à des composants et itérer sur des tableaux
  • Comment publier sur GitLab Pages et (optionnellement) ajouter un domaine personnalisé
  • Les bonnes pratiques pour le HTML sémantique, le design responsive et l'accessibilité

Une note sur le temps et la complexité

Il s'agit d'un site complet, prêt pour la production. Si vous découvrez Silex ou le web design, prévoyez 2 à 4 heures. Si vous êtes expérimenté, 45 minutes à une heure.

Chaque section est indépendante : vous pouvez faire la mise en page et le style sans l'intégration CMS, ou passer les formulaires si vous souhaitez vous concentrer sur la mise en page.

Avant de commencer

Assurez-vous d'avoir :

  • Un éditeur Silex ouvert (soit l'instance en ligne sur v3.silex.me, soit une version auto-hébergée)
  • Un compte GitLab (gratuit sur gitlab.com) pour la publication
  • (Optionnel) Une installation WordPress avec Pods et WPGraphQL (voir Configuration WordPress)
  • (Optionnel) Un nom de domaine si vous souhaitez utiliser un domaine personnalisé à l'étape finale

Les pages que nous allons créer

  1. Brief du projet (cette page) — Aperçu de ce que nous allons construire
  2. Structure — Créer les pages, la mise en page, la navigation et les Symboles
  3. Style — Système de design, typographie, couleurs, ajustements responsives
  4. Intégration CMS — Configuration WordPress, liaison de données, boucles
  5. Publication — Publier sur GitLab Pages et optionnellement configurer un domaine personnalisé

Prochaines étapes

Prêt à commencer ? Rendez-vous sur Structure pour créer vos pages et construire la mise en page.

Ou, si vous souhaitez d'abord comprendre le contexte général, consultez ces pages connexes :

Éditer cette page sur GitLab