Visual Studio Code (VSCode pour les intimes) c'est comme un bloc-notes super-vitaminé pour les développeurs. C'est un peu comme si

Installer et configurer VSCode

### Explication du fichier HTML de base 📄

Bon, maintenant qu'on a créé notre fichier `index.html`, c'est l'heure d'une petite dissection

Créer une page HTML avec VSCode

### Qu'est-ce que le CSS ? 🤔

Le CSS `(Cascading Style Sheets)` est un langage de style utilisé pour décrire la

Ajouter du CSS sur une page HTML

### Mais c'est quoi Flexbox au juste ? 🤔

Flexbox, ou CSS Flexible Box Layout, est un modèle de mise en

Utiliser display flex en CSS

#### Qu'est-ce que JavaScript ? 🤔

JavaScript est **un langage de programmation** qui permet de rendre votre page web dynamique. 
Grâce

Introduction à JavaScript

HTML/CSS

CSS3

Javascript

Visual Studio Code (VSCode pour les intimes) c'est comme un bloc-notes super-vitaminé pour les développeurs. C'est un peu comme si Word et un assistant personnel avaient eu un bébé. Il est gratuit, open-source, et disponible sur tous les systèmes d'exploitation. Bref, c'est votre nouveau meilleur ami !

### Installation de VSCode 🖥️

1. rendez-vous sur le site officiel de [Visual Studio Code](https://code.visualstudio.com/).
2. Cliquez sur le gros bouton de téléchargement. VSCode détectera automatiquement votre système d'exploitation.
3. Une fois le téléchargement terminé, lancez l'installateur. C'est comme installer un jeu vidéo, mais en plus cool (et en plus utile pour votre carrière) !
4. Suivez les instructions à l'écran. Si on vous demande si vous voulez ajouter "Ouvrir avec Code" au menu contextuel, dites oui ! C'est comme avoir un bouton magique "Développer" partout sur votre ordinateur.

**Félicitations ! Vous venez de faire votre premier pas dans le monde du développement. Sentez-vous libre de faire une petite danse de la victoire ! 💃🕺**

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

### Installation des extensions utiles 🔌

Les extensions dans VSCode, c'est comme les toppings sur une pizza : ça rend tout meilleur !

#### Live Server 🌐

Live Server, c'est votre meilleur allié contre la touche F5 ! Plus besoin de rafraîchir manuellement votre page web à chaque modification.

1. Dans VSCode, cliquez sur l'icône des extensions dans la barre latérale (ça ressemble à quatre petits carrés).
2. Dans la barre de recherche, tapez "Live Server".
3. Trouvez l'extension créée par Ritwick Dey et cliquez sur "Install".

Tadaaa ! Vous venez d'installer votre première extension. Vous êtes officiellement un pro de VSCode maintenant ! (Bon, pas tout à fait, mais on y croit !)

#### Autres extensions recommandées 🛠️

Voici quelques autres extensions qui vont vous faciliter la vie :

-   HTML CSS Support : Pour que VSCode comprenne mieux votre CSS dans les fichiers HTML.
-   Auto Rename Tag : Parce que renommer manuellement les balises HTML, c'est tellement 2010 !
-   Prettier : Pour que votre code soit toujours bien habillé et présentable.
-   Path Intellisense : Parce que se souvenir du chemin exact de chaque fichier, c'est pour les robots !

Pour les installer, suivez la même procédure que pour Live Server. Facile comme bonjour !

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

### Structure des dossiers et fichiers 📂

Organiser vos fichiers, c'est comme ranger votre chambre : c'est mieux quand c'est bien fait ! Voici un exemple de structure de base pour un projet web :

```md
mon-super-site/
│
├── index.html (C'est votre page d'accueil, comme la porte d'entrée de votre maison virtuelle)
├── css/
│ └── style.css (Ici, on met tout ce qui est joli)
├── js/
│ └── script.js (C'est là que la magie opère)
├── images/
│ └── logo.png (Vos images, fonts...)
│
```

Cette structure, c'est un peu comme avoir des tiroirs bien étiquetés. Ça vous évitera de mettre vos chaussettes dans le tiroir à couverts !


### Créer votre première page HTML 📄

Allez, on se lance dans le grand bain ! (Pas de panique, il y a des bouées)

1. Ouvrez VSCode. Admirez son interface élégante. Oooh, aah !
2. Allez dans Fichier > Ouvrir un dossier et sélectionnez le dossier de votre projet.
3. Faites un clic droit dans l'explorateur de fichiers (à gauche) et choisissez "Nouveau fichier".
4. Nommez-le "index.html". C'est important, c'est comme le prénom de votre site !
5. Dans ce nouveau fichier, tapez "!" et appuyez sur Tab. BOUM ! Comme par magie, une structure HTML de base apparaît. Vous vous sentez déjà comme un hacker, pas vrai ?

Voici à quoi devrait ressembler votre chef-d'œuvre :

```html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body></body>
</html>
```

Ne vous inquiétez pas si ça ressemble à du charabia pour l'instant. Rome ne s'est pas construite en un jour, et votre maîtrise de l'HTML non plus !

### Utiliser Live Server 🚀

Maintenant, on va voir votre création en direct !

1. Faites un clic droit sur votre fichier `index.html` dans l'explorateur de fichiers.
2. Cliquez sur "Open with Live Server".
3. Tadaaa ! Votre page s'ouvre dans votre navigateur. Okay, elle est vide pour l'instant, mais c'est un début !

À partir de maintenant, chaque fois que vous sauvegarderez des modifications dans votre fichier HTML, la page se rafraîchira automatiquement dans le navigateur. C'est comme avoir un mini-assistant qui crie **"Regardez ! Ça a changé !"** à chaque modification.

<data>NE PAS SUPPRIMER CETTE LIGNE!</data>

Ce tutoriel va vous guider pas à pas pour que vous compreniez tous les concepts clés du développement web. À la fin de cette formation, vous serez capable de maîtriser HTML, CSS, JavaScript et bien plus encore.