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