<aside> 📝

Créer un repository Git, intégrer un composant depuis Figma, faire des commits, un push, puis mettre en ligne

</aside>

1. Création de l’arborescence

Créez un dossier pour votre exercice, et ouvrez-le avec Visual Studio Code.

Si vous n’avez pas encore installé et configuré Visual Studio Code, vous pouvez suivre cette documentation :

Visual Studio Code

<aside> ☝

Pensez à nommer vos dossiers proprement pour retrouver facilement les exercices. Dans ce cours, les exercices sont nommés selon le numéro du module et le numéro de l’exercice. Par exemple ici M1-E1 (pour module 1, exercice 1).

</aside>

Dans ce dossier, créez un fichier index.html et un fichier style.css

Dans le fichier index.html, copiez le code de base :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 1 - Exercice 1</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	  
  </body>
</html>

2. Création du repository Git

En suivant la documentation, créez un repository Git, puis faites un premier commit, puis un push.

Installer Git

Git avec Visual Studio Code

<aside> ☝

Pensez aussi à nommer vos repositories proprement. Ici, on peut garder M1-E1.

</aside>

3. Intégration depuis Figma

Ouvrez la maquette Figma : https://www.figma.com/design/gZCoDq4fE7XtagOGvdy70w/M1-E1?node-id=1-2&t=sbozssadYUDaQqZU-0

Passez en mode développement

En vous aidant des informations disponibles dans la colonne de droite, intégrez l’élément.