click
hero

Baie St-Catherine

Baie St- Catherine

Projet étudiant

Développement web

Défilez vers le bas

Type de projet

  • Développement Web

Langages/logiciels

  • HTML,CSS,JS
  • VS-CODE

Crédits et Assets

Maquette produit par: Jean-François Leblanc

Rôle & Contribution

Développement HTML,CSS,JS

Utilisation AI

Aucune IA générative n’a été utilisée

LE BUT DU PROJET

Dans ce projet, le but était d' intégrer la maquette Figma sous forme de site web responsive et de valider mes compétences d'intégration HTML, SCSS et JavaScript acquises en cours.

Mockup ordinateur Mockup téléphone

PROCESSUS D’ANALYSE

1

Analyse des composantes

Analyse Charte Graphique 1
Analyse Charte Graphique 2

Étude approfondie du système graphique pour extraire et structurer les typographies, la palette de couleurs et les styles visuels sous forme de variables SCSS réutilisables .

2

Analyse des maquettes mobile et desktop

Analyse maquettes desktop
Analyse maquettes mobile

Inspection rigoureuse des maquettes pour analyser la disposition des grilles, la gestion des espacements responsive et le comportement des composants d'une résolution à l'autre.

Processus de développement

1

Structure HTML & Architecture SCSS

HTML
SCSS

Conception sémantique des pages HTML et rédaction d'un code SCSS modulaire , en appliquant les normes d'intégration et les meilleures pratiques enseignées en classe.

2

Création et ajout des composantes JS

Composantes
Débogage

Programmation des interactions dynamiques en JavaScript, suivie de tests de validation rigoureux sur l'interface pour garantir un fonctionnement sans erreur.

Résultat finale

Au terme d'un investissement important, le projet a abouti à un site web fluide, performant et fidèle aux maquettes initiales. Ce travail a permis d'assimiler pleinement les techniques d'intégration vues en cours, tout en développant avec succès une composante JavaScript sur-mesure.

Voir le projet
Mockup ordinateur Mockup téléphone