CLIP 01 / 05

Prix du meilleur site web · Webjam 2026

Q-tipousse

TYPE DE PROJET

Intégration WordPress/HTML/CSS/JS

CONTEXTE

Webjam 2026

Pour le Webjam 2026, mon équipe a créé une invention fictive et développé son site WordPress complet, administrable avec des types de contenus personnalisés et des champs ACF.

VOIR LE SITE WEB

Contexte

Le Webjam est une compétition de développement web par équipe. La thématique de 2026 demandait d'inventer un produit, de créer l'entreprise qui le propose et de construire le site qui le fait connaître.

Crédits

Projet d'équipe réalisé au Webjam 2026, avec Yoan Robitaille, Nathan Fortier et Éli Bousquet. Je me suis occupé de reproduire la maquette que mon collègue a fait en HTML/CSS et de transformer tout le site en PHP. J'ai aussi entré l'ensemble des contenus dans Wordpress et créé les différents CPT et ACF. IA (Claude) utilisée en soutien pour le code PHP.

Processus

PLAN 01

Créer les CPT et les champs ACF

Dès le début du projet, j'ai créé tous les types de contenus personnalisés (CPT) et les champs ACF du site. Je l'ai fait en premier pour que mes coéquipiers puissent travailler en parallèle sur la maquette et les contenus.

Webjam1

PLAN 02

Intégrer les contenus dans WordPress

Quand les contenus ont été prêts, je les ai tous intégrés dans WordPress. J'ai rempli les champs ACF de chaque CPT selon ce que les pages demandaient.

Webjam2

PLAN 03

Reproduire la maquette en HTML/CSS

J'ai ensuite reproduit la maquette en HTML et CSS, page par page. J'ai fait toutes les pages sauf l'accueil. Je les ai d'abord faites en statique pour valider le visuel avant de brancher les données.

Webjam3

PLAN 04

Rendre les pages dynamiques en PHP

J'ai converti moi-même toutes ces pages en PHP pour qu'elles lisent leur contenu dans les CPT et les champs ACF au lieu d'avoir du texte écrit à la main.

Webjam4

PLAN 05

Ajustements et finitions

Pour terminer, j'ai fait plusieurs petits ajustements : j'ai corrigé ce qui ne fonctionnait pas et j'ai ajouté un modèle 3D. Cette étape a servi à peaufiner l'ensemble avant de présenter le projet.

Webjam5

Défis

Le plus gros défi a été de tout convertir en PHP. C'était long, et il fallait penser à mettre chaque élément en dynamique, sans laisser de texte écrit à la main dans les pages.

Solutions

J'ai converti les pages une par une et je les ai comparées à mes champs ACF pour m'assurer que chaque contenu venait bien de l'administration.

Apprentissage

J'ai appris à bien travailler en équipe. Nous nous sommes séparé les tâches de façon claire, donc chacun savait quoi faire et tout avançait très vite.

CLIP SUIVANT 02 / 05

CLIP MUSICAL

Montage vidéo et synchronisation audio