Online learning is not just a platform; it's the bridge between curiosity and understanding.
Partagez vos idées
Contribuez votre perspective et engagez-vous avec d'autres apprenants pour un retour d'expérience enrichi.
TP 🎨 | Tailwind Intro
Dans ce module d'introduction, je n'ai pas envie que tu commences à dormir. Je te propose de pratiquer super rapidement et dès le départ avec un générateur de site Tailwind... en JavaScript basique.
Dans la suite des projets, on utilisera React et d'autres technologies...
mais pour commencer, on va faire simple.
TP
On va créer une application en JavaScript qui, avec un prompt, va générer un site Tailwind et te l'afficher en fullscreen.
nai-tailwind-intro.mp4
Voici le résultat final :
1. Créer un projet
La première étape va être de créer le projet en utilisant ViteJS. Il faut choisir une application vanilla qui utilise TypeScript !
Il va falloir ajouter Tailwind en suivant le tutoriel Tailwind avec ViteJS
2. Ajout de l'input de prompt
Le but va être dans le fichier index.html de venir ajouter cet élément :
Pour ça, utilise un élément form avec un textarea et un button. Récupère-le dans le fichier main.ts et fais en sorte que lors du submit, ça affiche dans une alert le contenu du textarea !
Conclusion
Le but de ce cours était de faire une pause dans la théorie et préparer le terrain pour la suite, quand on aura vu les autres sujets.