Pour une meilleure expérience, découvrez l'Académie sur Ordinateur.
Nous peaufinons l'Académie pour la rendre pleinement responsive et vous offrir la meilleure expérience de formation possible.
Programme
Jour 09 - Référencement & Analytics
Jour 09 - Référencement & Analytics
00. Bonus - WEBF-BO-MC
Mentoring
Jour 09 - Référencement & Analytics
00. Bonus - WEBF-BO-MC
Matinale
Jour 10 - Mise en Production
03. Structure - WEBF-BO-MC
Mise en ligne
Jour 10 - Mise en Production
Jour 10 - Mise en Production
03. Structure - WEBF-BO-MC
Mise en ligne
Jour 10 - Mise en Production
03. Structure - WEBF-BO-MC
Mise en ligne
Jour 10 - Mise en Production
03. Structure - WEBF-BO-MC
Validation des Acquis
Jour 10 - Mise en Production
00. Bonus - WEBF-BO-MC
Mentoring
Jour 10 - Mise en Production
00. Bonus - WEBF-BO-MC
Matinale
Jour 11 - Animations basiques
04. Animations - WEBF-BO-MC
Bases
Jour 11 - Animations basiques
Jour 11 - Animations basiques
04. Animations - WEBF-BO-MC
Bases
Jour 11 - Animations basiques
04. Animations - WEBF-BO-MC
Bases
Jour 11 - Animations basiques
03. Structure - WEBF-BO-MC
Validation des Acquis
Jour 11 - Animations basiques
Jour 11 - Animations basiques
Jour 11 - Animations basiques
00. Bonus - WEBF-BO-MC
Mentoring
Jour 11 - Animations basiques
00. Bonus - WEBF-BO-MC
Matinale
Jour 12 - Animations selon le Temps (TBA)
04. Animations - WEBF-BO-MC
Time Based Animations (TBA)
Jour 12 - Animations selon le Temps (TBA)
04. Animations - WEBF-BO-MC
Time Based Animations (TBA)
Jour 12 - Animations selon le Temps (TBA)
04. Animations - WEBF-BO-MC
Time Based Animations (TBA)
Jour 12 - Animations selon le Temps (TBA)
03. Structure - WEBF-BO-MC
Validation des Acquis
Jour 12 - Animations selon le Temps (TBA)
Jour 12 - Animations selon le Temps (TBA)
00. Bonus - WEBF-BO-MC
Mentoring
Jour 12 - Animations selon le Temps (TBA)
00. Bonus - WEBF-BO-MC
Matinale
Jour 13 - Animations selon le Scroll (SBA)
04. Animations - WEBF-BO-MC
Scroll Based Animations (SBA)
Jour 13 - Animations selon le Scroll (SBA)
Jour 13 - Animations selon le Scroll (SBA)
04. Animations - WEBF-BO-MC
Scroll Based Animations (SBA)
Jour 13 - Animations selon le Scroll (SBA)
03. Structure - WEBF-BO-MC
Validation des Acquis
Jour 13 - Animations selon le Scroll (SBA)
04. Animations - WEBF-BO-MC
Validation des Acquis
Jour 13 - Animations selon le Scroll (SBA)
00. Bonus - WEBF-BO-MC
Mentoring
Jour 13 - Animations selon le Scroll (SBA)
00. Bonus - WEBF-BO-MC
Matinale
Jour 14 - Animations selon le Curseur (MBA)
04. Animations - WEBF-BO-MC
Mouse Based Animations (MBA)
Jour 14 - Animations selon le Curseur (MBA)
04. Animations - WEBF-BO-MC
Mouse Based Animations (MBA)
Jour 14 - Animations selon le Curseur (MBA)
04. Animations - WEBF-BO-MC
Mouse Based Animations (MBA)
Jour 14 - Animations selon le Curseur (MBA)
04. Animations - WEBF-BO-MC
Validation des Acquis
Jour 14 - Animations selon le Curseur (MBA)
Jour 14 - Animations selon le Curseur (MBA)
00. Bonus - WEBF-BO-MC
Mentoring
Jour 14 - Animations selon le Curseur (MBA)
00. Bonus - WEBF-BO-MC
Matinale
Jour 15 - Animations complexes
Jour 15 - Animations complexes
04. Animations - WEBF-BO-MC
Scroll Based Animations (SBA)
Jour 15 - Animations complexes
00. Bonus - WEBF-BO-MC
Mentoring
Jour 15 - Animations complexes
Sommaire
Module en cours
Valider le module

Projet - Prism (Part.01) - Démarrage

Progression
… modules
…%

Détails

Projet : Prism

Avec ce projet Prism, il est temps de passer à une autre échelle. Après avoir développé de simples sections, vous allez concevoir une page complète.

Il est facile de croire que la durée du développement est liée à la longueur de la page. Alors que non ! Ce projet en est le parfait exemple… mais je n'en dis pas plus…

Attention, voici une contrainte pour vous (ou un avantage selon le point de vue). Vous devez impérativement utiliser le framework Client-First ! Vous allez donc partir du clonable Client-First de Finsweet.

Ce projet est accompagné de ressources disponibles en annexes et est composé de trois challenges :

  1. Démarrage
  2. Conception
  3. Responsive

Petit conseil : Gagnez du temps en développant des éléments ou des .class réutilisables.

Challenge n°01 : Démarrage

Objectifs

Double objectifs pour ce projet ! Vous devez utiliser Client-First et essayer d'être le ou la plus rapide dans votre développement. Le seul moyen : réutiliser un maximum.
Mais pour cela, il est essentiel d'analyser la maquette en amont.

Consignes

Pour ce challenge, voici quelques consignes :

  • Dupliquez le projet Figma sur votre Workspace Figma
  • Utilisez les pages Figma "Aide" niveau par niveau si vous en sentez le besoin
  • Utilisez la base de Client-First disponible dans votre dossier du workspace "initWeb Formations"
  • Ajoutez vos variables, votre police d'écriture et vos médias.

Pour ce premier challenge, analysez et repérez les éléments qui se répètent ou les mises-en-page similaires.

Afin de réaliser ce projet avec brio, fixons-nous un objectif de temps. Pour démarrer ce projet, je vous donne 20 minutes. C'est à vous !

Annexes