Exercice : Utiliser les concepts CSS

  • 7 minutes

Vous souhaitez commencer à mettre en forme la page web de votre CV. Vous commencez par sélectionner la police et définir la taille des différents éléments que vous utilisez sur la page.

Ce module utilise vscode.dev, une version web de Visual Studio Code, et CodeSwing. Ces outils permettent de simplifier le processus de développement. Aucune installation locale n’est requise pour effectuer les exercices suivants.

Création d’un projet

Vous commencez par créer un dossier, configurer votre outillage et créer un « swing » à l’aide de CodeSwing dans vscode.dev. Un swing affiche automatiquement les résultats de votre code dans vscode.dev. L’utilisation de Microsoft Visual Studio Code avec CodeSwing vous permet d’apporter rapidement des modifications et d’avoir un aperçu des mises à jour en temps réel.

  1. Créez un dossier sur votre bureau nommé CV.
  2. Ouvrez vscode.dev.
  3. Sélectionnez Ouvrir le dossier.
  4. Accédez au dossier CV que vous avez créé précédemment, puis sélectionnez Sélectionner un dossier.
  5. Lorsque vous êtes invité à permettre au site d’afficher les fichiers, sélectionnez Afficher les fichiers.
  6. Sélectionnez le bouton Extensions.

    Capture d’écran du bouton Extensions de Visual Studio.

  7. Dans la zone de texte Rechercher des extensions dans la Place de marché, tapez CodeSwing.
  8. Sélectionnez Installer pour installer CodeSwing.
  9. Ouvrez la palette de commandes en appuyant sur Ctrl+Maj+P ou Cmd-Maj-P sur un Mac.
  10. Tapez CodeSwing dans la palette de commandes, puis sélectionnez CodeSwing: New Swing in Directory.
  11. Sélectionnez Sélectionner un dossier pour utiliser le répertoire actif (qui est celui que vous avez créé à l’étape précédente).
  12. Sélectionnez Basic: HTML/CSS/JavaScript.
  13. Si vous êtes invité à Enregistrer les modifications pour reprendre, sélectionnez Enregistrer les modifications.
  14. Sélectionnez le x à côté de script.js à l’intérieur vscode.dev pour fermer le fichier JavaScript car vous n’utilisez pas ce fichier pendant l’exercice.

Visual Studio Code crée deux sections côte à côte. Celle de gauche contiendra vos éditeurs, où vous pourrez entrer votre code HTML et CSS. La droite se comporte comme un navigateur, affichant les résultats de votre code.

Créer le HTML

Vous utilisez le code HTML existant pour nous permettre de nous concentrer uniquement sur le CSS. Le code HTML inclut l’élément link permettant de référencer le fichier CSS.

  • Copiez le code HTML suivant dans la fenêtre intitulée index.html :

    <html>
    <head>
        <title>Your Name resume</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <h1>Your Name</h1>
        <a href="mailto:your-email@example.com">your-email@example.com</a>

        <div id="social-media">
            <h2>Social media</h2>
            <ul>
                <li><a href="https://github.com/">GitHub</a></li>
                <li><a href="https://linkedin.com/in/">LinkedIn</a></li>
                <li><a href="https://x.com/">X</a></li>
            </ul>
        </div>

        <h2>Education</h2>
        <h3>School name</h3>
        <h4>Major</h4>
        <ul>
            <li>GPA: 4.0</li>
            <li>Years attended</li>
        </ul>

        <h2>Experience</h2>
        <div class="experience">
            <h3>Company name</h3>
            <h4>Title</h4>
        </div>
        <div class="experience">
            <h3>Cool hackathon</h3>
            <h4>Project title</h4>
        </div>

    </body>
</html>

Définir le type et la taille de la police

Par défaut, la plupart des navigateurs utilisent une police avec empattement telle que Times New Roman. Vous souhaitez appliquer une police plus courante aux pages par défaut. En outre, vous souhaitez définir la taille de la police pour la page et différents en-têtes.

  1. Dans le fichier intitulé style.css, ajoutez le code CSS suivant pour définir la famille de polices sur Verdana avec des options de secours, et la taille de police sur 12 pixels sur l’élément html :

    html {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}

    Vous utilisez l’élément html pour mettre à jour la police racine et le dimensionnement. Avec l’élément vous permet d’utiliser rem le html dimensionnement.

  2. Notez que la page est automatiquement mise à jour avec les modifications.

  3. Ajoutez le code CSS suivant à la fin de style.css pour définir les tailles pour h1 à h4.

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem est basé sur la taille racine, qui est de 14 pixels. À titre d’exemple, ce CSS définit la taille de h1 22,4 pixels.

  4. La page est automatiquement mise à jour dans vscode.dev.

  5. Laissez la fenêtre ouverte, car vous l’utiliserez dans le prochain exercice.

Résultat et prochaines étapes

La capture d’écran suivante est le résultat du code CSS que vous avez appliqué dans cet exercice. Si vous souhaitez tester différentes polices et tailles, vous pouvez modifier le code CSS comme bon vous semble.

Capture d’écran de la page finale affichée dans le navigateur.