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.

:memo: 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