WebJam

Développement web - Projet scolaire

Intégration et développement HTML, CSS et JS d'un site d'une invention interdite pour le WebJam

Voir le site
iGenesis

Qu’est ce que iGenesis ?

En partant de la thématique de WebJam, mon équipe: les Indispensables classiques, a choisi de faire le site d’iGenesis pour la présentation et la vente d’une invention interdite : le Neuralyseur. Ce produit est dans le radar de plusieurs qui souhaitent l’acheter pour leur propre usage.

Logiciels utilisés

Langages utilisés

Utilisation de l’IA

J’ai utilisé ChatGPT pour la génération d'image. Ma contribution personnelle comprend deux images d'agents. L’usage attribué à l’équipe a été validé avec mes collaborateurs. Conversation pour la génération d'image

section iGenesis

Sélection de différents modèles et accessoires

Étapes:

Étape 1

1 — Sélection de palette de couleur et de choix typographique sur Figma

Mon équipe sélectionne une palette de couleur impeccable et de deux excellentes typographies qui seront utilisées dans mes maquettes.

Étape 2

2 — Création des maquettes du site et organisation des sections et pages dans Figma

Mon équipe a conçu la maquette avec 8 différentes pages contenant différentes sections pour mon site web: la page d’accueil, la page de l'invention et de ses modèles, la page d'un modèle, la page des accessoires, la page d'un accessoire, la page des événements, la page d'un événement et la page de l'entreprise.

Étape 3

3 — Intégration HTML et développement CSS du site de l'invention interdite avec VS Code

Suite à la maquette, mon équipe conçois avec du code HTML et CSS les pages du site tout en gardant une bonne organisation des sections et des classes.

Étape 4

4 — Programmation JS et ajustement responsive du site sur VS Code

Suite au CSS de base pour mon site, mon équipe a programmé des composantes et ajusté le responsive de mon site pour que ça fonctionne sur mobile.

Étape 5

5 - Création du WordPress pour le site de notre invention interdite

Pour le WebJam, mon équipe a créé un WordPress qui aura notre projet avec les cpt (custom post types) et les acf (advanced custom fields) nécessaires pour notre site.

Étape 6

6 - Programmation des templates du site en PHP avec VS Code

Avec le WordPress prêt, mon équipe crée notre thème personnalisé, crée les templates nécessaires et transforme notre code HTML nécessaire en PHP.

Étape 7

7 - Résultat final d'iGenesis via le navigateur au choix

Maintenant que c’est tout finalisé, on peut explorer notre site sur un navigateur pour voir l'invention , les modèles de l'invention , les accessoires et les événements et notre entreprise avec les membres. (Attention! Le lien va au site mais en HTML, CSS et JS)

Crédits:

  • Félix Lapointe : Intégration/développement web
  • Félix Charron : DA et design
  • Nathan Roumiguières : Intégration/développement web
  • Benjamin Bathalon : Programmation
  • Images utilisées : Génération IA et autres médias