Aller au contenu

Page de connexion Unity

L'objectif de cet exercice est de démontrer sa capacité à installer et à utiliser des technologies npm dans un projet Vite, puis à assembler une page avec Tailwind et DaisyUI.

Le HTML est déjà écrit : les consignes sont dans les commentaires du projet. Celles de cette page servent uniquement à donner l'ordre de travail.

Résultat attendu

Ouvrir dans le navigateur

Prendre quelques minutes pour observer la page avant de commencer :

  • Redimensionner la fenêtre pour voir le comportement des breakpoints
  • Cliquer sur l'interrupteur en haut à droite
  • Recharger la page et observer les animations.

Consignes

Étape 1 - Mise en place

  • Accepter le devoir Classroom 50
  • Cloner le dépôt avec GitHub Desktop
  • Ouvrir le dossier cloné dans VSCode

  • Installer les packages déjà présents dans package.json

    Indice

    Le récapitulatif du cours 4 présente deux commandes d'installation : npm install xyz et npm install. Une seule des deux lit le fichier package.json pour tout réinstaller d'un coup.

  • Lancer le serveur de développement et ouvrir l'adresse affichée

    Indice

    La ligne de commande commence par npx et fini par vite 🤪

Étape 2 - Installer les technologies

La page utilise trois packages supplémentaires : FontSource (Poppins), Lucide et Animatecss

  • Installer les trois paquets
  • Vérifier dans package.json que les trois packages y sont
  • Ajuster le nécessaire dans style.css
    • Importer et utiliser la fonte Poppins
    • Importer Lucide
    • Importer animate.css

Vérification

Pour tester que tout y est, ajouter temporairement ce code dans le <body> :

<h1 class="text-3xl font-bold animate__animated animate__bounce">
  Test <span class="icon-rocket"></span>
</h1>

Étape 3 - Thèmes

La page utilise deux thèmes intégrés de DaisyUI : caramellatte (par défaut) et halloween.

  • Configurer le nécessaire dans style.css
  • Faire #1 et #2 d'index.html

Étape 4 - Squelette de la page

Sur desktop, la page est divisée en deux colonnes. Un visuel à gauche (caché en mobile) et le formulaire à droite.

See the Pen Tailwind - Structure login Unity by TIM Montmorency (@tim-momo ) on CodePen .

  • Faire #3, #4 et #8 d'index.html

Étape 5 - Colonne visuelle

S'inspirer de la structure « Texte sur image » vue au cours 3.

Étape 6 - Formulaire et pied de page

  • Faire #9 à #19 d'index.html

Étape 7 - Finition

  • Formater le code HTML
  • Faire un build et tester le résultat avec npx vite preview
  • Effectuer un push