Flexbox en CSS & HTML: Configuration du projet initial

Dans ce tutoriel, tu apprendras comment préparer ton projet pour travailler avec Flexbox CSS. Il est important d'avoir une base solide avant de plonger plus profondément dans les techniques de mise en page Flexbox. Nous utilisons Visual Studio Code pour le développement, mais tu peux également choisir un simple éditeur de texte et un navigateur. Dans les étapes suivantes, nous mettrons en place un projet simple qui t'aidera à comprendre et à appliquer Flexbox.

Principales conclusions

• L'utilisation d'un serveur de développement facilite le travail sur tes projets.
• Tu peux travailler sans frameworks pour apprendre les bases de JavaScript et de CSS.
• Le fichier index.html est le point central de ton projet, à partir duquel tu travailleras.

Guide étape par étape

Commence par ouvrir un terminal dans Visual Studio Code ou tout autre programme de ton choix. Assure-toi d'avoir Node.js installé avant de continuer. C'est essentiel pour exécuter des commandes NPM.

Maintenant, tu peux utiliser le package NPM pour la structuration du projet. Dans le terminal, saisis la commande npx create-v pour démarrer le processus de création de ton projet. Tu seras invité à télécharger le package. Confirme cette action.

Ensuite, saisis le nom de ton projet. Je te recommande de simplement l'appeler "flexbox", car c'est précisément le thème abordé. Une fois que tu as saisi le nom, on te demandera de choisir un framework UI. Dans ce cas, choisis "Vanilla JavaScript" car nous n'utiliserons pas de frameworks spécifiques.

À l'étape suivante, on te demandera si tu veux utiliser TypeScript. À nouveau, il est préférable de choisir "non" pour simplifier les choses et te concentrer sur les technologies fondamentales.

Presque terminé maintenant. Il te suffit de naviguer vers le répertoire de ton nouveau projet. Tu peux le faire en tapant cd flexbox dans le terminal. Cela te mènera au dossier qui vient juste d'être créé.

Ensuite, exécute la commande npm install dans le terminal. Cela installera tous les packages nécessaires pour ton projet.

Une fois cela terminé, lance le serveur de développement local avec npm run dev. Cela ouvrira et préparera ton projet sur un serveur local.

Maintenant, tu peux vérifier le fichier index.html généré qui se trouve dans le répertoire de ton projet. Ce fichier est la partie la plus importante de ton projet, où tu créeras tous tes contenus et structures.

La prochaine étape consiste à supprimer le script standard généré pour le projet. Nous n'avons pas besoin d'utiliser le script main.js tout de suite, donc supprime-le simplement. Tu peux également supprimer la feuille de style style.css car nous voulons tout gérer dans index-HTML pour commencer.

Dans index-HTML, nous allons construire notre structure de conteneur Flexbox. Nous aurons besoin d'un conteneur parent qui contiendra à son tour plusieurs conteneurs enfants. C'est une structure de base nécessaire pour Flexbox.

Pour voir tes modifications dans le navigateur, ouvre Chrome et accède à http://localhost:3000. Lorsque tu démarres le serveur de développement, l'URL à laquelle tu pourras accéder à ton fichier index.html te sera affichée.

Je te recommande d'utiliser la touche de contrôle (ou Commande sur Mac) lorsque tu ouvres des liens dans le navigateur pour les ouvrir directement dans le navigateur par défaut. Cela te permettra de visualiser tes modifications en direct.

Une fois la page ouverte, par exemple, tu peux modifier le titre dans index-HTML de "Weed App" à "Flexbox" et enregistrer la page. La mise à jour en direct affichera tes modifications immédiatement dans le navigateur.

Vous pouvez ajouter du texte supplémentaire à la page, par exemple "Cours Flexbox", et voir comment le texte est mis à jour dynamiquement sans avoir à recharger manuellement la page. Cette prévisualisation en temps réel facilite énormément le travail.

Les exemples de Flexbox seront retravaillés dans le fichier Index-HTML à l'étape suivante. C'est là que nous allons styliser la mise en page avec CSS et créer les conteneurs Flexbox. Restez à l'affût des prochaines vidéos dans lesquelles nous approfondirons les techniques Flexbox.

Résumé

Dans ce guide, vous avez appris comment mettre en place un projet simple pour travailler avec CSS Flexbox. Vous avez identifié les bases de la structure du projet, préparé le fichier Index-HTML et utilisé le serveur de développement local. Ce sont les premières étapes pour maîtriser Flexbox.