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 - 404 (Part.01) - Analyse

Progression
… modules
…%

Détails

Projet : 404

**Un site Webflow est composé de différents types de pages. **
Les Pages Statiques sont conçues pour accueillir du contenu qui évolue rarement (ex: Accueil). Les Pages Dynamiques reposent sur une structure définie à l'avance et sont générées grâce au contenu du CMS (ex: Article de Blog). Et enfin les Pages Utilitaires dont le rôle n'a pas de lien avec le contenu du site.

La page 404 fait partie de ces Pages Utilitaires et est affichée en résultat de l'erreur 404. Cette dernière a lieu lorsqu'une URL n'existe pas. L'utilisateur demande à voir une page qui n'existe pas ou plus, le site le redirige alors vers la page 404.

Avec ce projet, vous allez ainsi créer votre première page 404.
Ce projet est accompagné de ressources disponibles en annexes et est composé de deux challenges :

1. Analyse
2. Conception

Vous allez prendre en main l'interface de Webflow pour concevoir une page et découvrir les différents éléments à notre disposition. L'objectif ici est de s'approcher le plus possible du rendu présenté par la maquette dans un temps imparti.

Vous n'arriverez certainement pas à tout faire et c'est normal. Vous n'êtes qu'aux premières heures de la formation. 

Challenge n°01 : Analyse

Objectifs

Avec ce premier challenge, vous allez prendre le temps d'analyser la maquette. C'est une phase essentielle qui vous permettra de gagner du temps par la suite.

Consignes

Pour ce challenge, voici quelques consignes :

  • Assurez-vous d'avoir un compte Figma, sinon créez-le
  • Accédez à la maquette Figma disponible en Annexes
  • En accédant aux informations du fichier (haut à gauche), dupliquez dans vos brouillons le fichier "Duplicate to your Drafts"
  • Vous avez désormais votre propre version du fichier que vous pouvez manipuler gratuitement.

Pour cet premier challenge, je vous demande de prendre quelques instants afin d'analyser la maquette. Pensez à la Structure cachée derrière ce Design, pensez au Display:Flex, pensez au Box-Model. N'hésitez pas à prendre un papier et un crayon pour dessiner la structure à côté.

Afin de réaliser ce projet avec brio, fixons-nous un objectif de temps. Pour analyser cette maquette, je vous donne 10 minutes. C'est à vous !

Annexes