Hub À propos
Projets CV

Création avec une équipe en 36h d’un site web en HTML, CSS, JS et intégration de WordPress avec PHP


IA: Seulement les contenus textuels sont générés par l’IA

À FAIRE

Gagnant - Compétition scolaire

· 2025 · Site Web



Production entière du site web: Équipe Ctrl+S (Coralie Thibault, Amyeliya Sulytska, Amélie Cousineau, Maena Jenesse et Guillaume Callebert)
Images: wikimedia.com et unsplash.com

Avant de commencer...

Un WebJam est une compétition où une équipe doit livrer un site web complet en 36 heures. Dans un scénario de gouvernement hostile qui censure les médias, notre équipe de cinq a imaginé des lunettes de réalité augmentée pour les consulter librement. Ce gadget fictif servait de contexte; j’étais l’intégrateur (HTML, CSS, JS, WordPress et PHP).

Le processus

1. Brainstorming et choix de direction artistique et de projet

Dès le dévoilement du thème, l’équipe a fait un premier « brainstorm » pour trouver notre concept principal ainsi que notre direction artistique initiale. En 36 heures, chaque heure passée à hésiter coûte cher : il fallait donc s’entendre rapidement afin que les cinq membres avancent dans la même direction.

Moodboard

Palette de couleurs

Typographies

2. Soutien de l’équipe de design et début de l’intégration HTML

Puisque le design a pris un certain temps, j’ai commencé à intégrer les grandes lignes du site, soit la structure et les éléments communs, plutôt que d’attendre. Ainsi, quand les maquettes arrivaient, la base était déjà prête et nous pouvions nous concentrer sur les détails au lieu de partir de zéro, ce qui était essentiel avec la pression du temps.

After
Before

Évolution du design

Première maquette produite

3. Production et choix des contenus

Tous les contenus du site devaient être réels, et nous avions plus de 30 pages à remplir. Il fallait donc regrouper et choisir tous les textes et images avant l’intégration, afin de ne pas ralentir la production et d’éviter de se retrouver avec des pages incomplètes à la dernière minute.

4. Intégration via WordPress en PHP

J’ai intégré les diverses pages dans WordPress en PHP, à l’aide de champs ACF. Avec plus de 30 pages, c’était la façon la plus efficace de travailler : des gabarits réutilisables plutôt que de tout refaire page par page. Le site devenait ainsi dynamique et facile à modifier pour de potentiels clients.

Intégration via PHP

Victoire de la compétition

5. Présentation au jury et “vente” du projet

En équipe, nous avons fait une courte présentation devant le jury. Comme le temps était limité, il fallait convaincre rapidement en mettant de l’avant nos choix de concept, de design et de technique, afin de démontrer en quelques minutes le travail accompli en 36 heures. Nous avons remporté la première place, soit le prix du meilleur site web.

Les enjeux du projet

Le défi était de livrer un site complet et fonctionnel en 36 heures, avec plus de 30 pages de vrai contenu. Il fallait coordonner le design et l’intégration en parallèle et bâtir un site facile à modifier, dans une équipe où chaque décision devait se prendre rapidement, et où nous avons tous touché un peu à tout.