mockup-webconf-hero

Webconf

Projet scolaire | Intégration et programmation web

Tester le site

Un résumé

Le but de ce projet était d'intégrer une maquette en site web pour la refonte du site de la Baie-St-Catherine. C'est donc un projet fictif qui visait à nous introduire aux différents composants JavaScript et aux diverses difficultés possibles dans l'intégration HTML et CSS, car nous avons travaillé avec beaucoup de nouveaux concepts que nous ne connaissions pas avant ce travail.

Informations

Créateur du projet

Rito José Blandon Pinzon

Logiciels utilisés

Vs code, Figma

Compétences utilisés

Design et intégration web

Démo du projet

Création de la maquette

Pour la conception de la maquette, les professeurs nous avaient fourni différentes composantes de sections. Nous pouvions donc choisir, à notre convenance, les différentes sections en fonction de la difficulté d'intégration que nous pourrions rencontrer.

De maquette à intégration

Pour commencer le projet, j'ai utilisé la même approche que pour mes autres projets. J'ai commencé par intégrer le header et le footer, puis j'ai intégré section par section en HTML et CSS. J'ai également dû faire beaucoup de recherches sur Internet pour pouvoir intégrer certaines parties du site, car je n'avais jamais fait cela auparavant. Ensuite, j'ai veillé à ce que mon HTML soit le plus clair possible afin de pouvoir intégrer le site thème WordPress et rendre le site dynamique.

image-integration
image-integration
image-integration
image-integration
Image en grand

Exemple de code

image-code

Script Main

image-code

Script Main(suite)

image-code

Html swiper

image-code

Css swiper

Image en grand

Compétences acquises

Intégration html et css du header et footer
C'est l'un des premiers projets où j'ai pu utiliser les partials pour intégrer mon header et mon footer. C'est également le premier projet où j'ai dû intégrer un menu burger pour la version mobile.
Intégration css swiper et sections
C'est le premier projet où j'ai intégré un swiper JavaScript et où j'ai utilisé une grille plus complexe que simplement 1fr 1fr. J'ai donc utilisé les grilles d'une nouvelle façon pour placer les images, et j'ai également utilisé le swiper pour la page d'un conférencier.
Consolidation des bases
Dans ce projet, afin d'avoir le moins de bogues possible, je devais avoir un HTML pertinent. Cela a donc été un défi d'obtenir un bon HTML pour pouvoir bien intégrer les différentes sections en CSS.
Consolidation des bases(suite)
Dans ce projet, j'ai beaucoup été mis à l'épreuve. J'ai intégré des éléments que j'avais déjà réalisés dans le passé, mais chaque fois avec un peu plus de complexité ou avec un petit changement qui faisait que la méthode conventionnelle que j'avais utilisée auparavant ne fonctionnait pas.