Défis

Relevez nos défis ! Ils ne sont pas documentés dans le guide et sont destinés à vous aider à appliquer vous-même votre savoir-faire en matière de frontend.

Conseil

Si vous ne savez pas exactement comment résoudre un problème, consultez Codepen ou Codedrops. Vous y trouverez d’innombrables exemples, dont le code. Le forum [Stackoverflow] (https://stackoverflow.com) est également un outil indispensable pour trouver des réponses aux questions de développement.

# #1 Sticky Header

Fixez l’en-tête de manière à ce qu’il reste visible pendant le défilement.
Difficulté: 1

# #2 Alternative About Layout

Tâche: créez votre propre mise en page pour la section À propos.
Niveau de difficulté: 1

# #3 Branding

Tâche: ajouter votre propre logo à l’en-tête.
Niveau de difficulté: 1

# #4 SVG Color

Tâche: changer la couleur d’un graphique SVG au “hover”.
Difficulté: 1

# #5 SVG Mask

Mission: Utiliser le SVG pour masquer une image.
Difficulté: 2

# #6 SVG Animation

Mission: Animer le parcours d’une icône du SVG. Difficulté: 3

# #7 CSS Transition

Tâche: Déplacer des éléments animés au “hover”.
Difficulté: 2

# #8 Parallaxe

Tâche: déplacer différents éléments et images à différentes vitesses tout en faisant défiler.
Difficulté: 3

# #9 CSS Image Editing

Tâche: Manipuler les couleurs, la luminosité et le contraste d’une image avec le CSS.
Difficulté: 2

# #10 Smooth Scrolling

Tâche: faire défiler la page “en douceur” en cliquant sur un élément de navigation.
Difficulté: 2

# #11 Retour en haut de page

Tâche: ajoutez un bouton pour faire défiler “en douceur” le haut de la page.
Difficulté: 2

# #12 Mouse Events

Mission: Faire en sorte qu’un élément suive le curseur de la souris. Difficulté: 3

# #13 Perspective

Mission: Incliner un élément en perspective.
Difficulté: 2

# #14 Viewport Animations

Mission: Animer des éléments dès qu’ils entrent dans le viewport.
Difficulté: 3

# #15 Vidéo

Mission: Ajouter une vidéo qui se joue automatiquement sur tous les appareils sans un clic.
Difficulté: 3

# #16 Slider

Mission: Afficher des images dans un curseur.
Difficulté: 2-3

# #17 Lightbox

Tâche: offrir aux utilisateurs la possibilité d’agrandir les images.
Niveau de difficulté: 2-3

# #18 Précédent/prochaine-navigation

Tâche: ajouter une navigation pour se rendre à la page suivante ou à la dernière page.
Niveau de difficulté: 1-2

# #19 Select Dropdown

Tâche: ajouter une liste déroulante de sélection au formulaire.
Difficulté: 2

# #20 CSS Animations

Tâche: ajouter une animation avec CSS qui ne s’arrête jamais et fonctionne indépendamment de l’interaction de l’utilisateur.
Difficulté: 2-3

# #21 Cliquer sur les événements

Tâche: remplacer une image de portfolio dès que l’on clique dessus.
Difficulté: 4

# #22 Dynamic Date

Tâche: ajouter l’année en cours dans le pied de page, qui change dynamiquement chaque année.
Difficulté: 3

# #23 Dynamic Hello

Tâche: accueillir les visiteurs du site web en fonction de l’heure de la journée. (par exemple: bonjour, bonsoir, etc.)
Difficulté: 3

#24 Lazyloading Images

Tâche: Ne chargez les images que lorsqu’elles atteignent la zone visible (viewport).
Difficulté: 4

# #25 Hamburger Menu

Tâche: ajouter un menu contextuel (hamburger) pour les smartphones.
Difficulté: 3

# #26 Modularize

Tâche: divisez votre portefeuille en modules, de sorte que vous puissiez modifier par exemple l’en-tête et le pied de page globalement, au lieu de répéter chaque page individuellement.
Difficulté: 4