Oefening: CSS-concepten gebruiken

  • 7 minuten

U wilt beginnen met het stylen van uw cv-webpagina. U begint met het selecteren van het lettertype en het instellen van groottes voor de verschillende elementen die u op de pagina gebruikt.

In deze module wordt gebruikgemaakt van vscode.dev : een webversie van Visual Studio Code en CodeSwing. Deze hulpprogramma's helpen het ontwikkelingsproces te stroomlijnen. Er is geen lokale installatie vereist om de volgende oefeningen te voltooien.

Een project maken

U begint met het maken van een map, het instellen van uw hulpprogramma's en het maken van een 'swing' met behulp van CodeSwing in vscode.dev. Met een swing worden automatisch de resultaten van uw code in vscode.dev weergegeven. Met Behulp van Microsoft Visual Studio Code met CodeSwing kunt u snel wijzigingen aanbrengen met een preview van updates die in realtime plaatsvinden.

  1. Maak een map op het bureaublad met de naam resume.
  2. Open vscode.dev.
  3. Selecteer Map openen.
  4. Navigeer naar de cv-map die u eerder hebt gemaakt en selecteer Map selecteren.
  5. Wanneer u wordt gevraagd om siteweergavebestanden toe te laten, selecteert u Bestanden weergeven.
  6. Selecteer de knop Extensies .

    Schermopname van de knop Visual Studio-extensies.

  7. Typ CodeSwing in het tekstvak Zoekextensies in Marketplace.
  8. Selecteer Installeren om CodeSwing te installeren.
  9. Open het opdrachtenpalet door Ctrl+Shift+P of Cmd-Shift-P te selecteren op een Mac.
  10. Typ CodeSwing in het opdrachtpalet en selecteer CodeSwing: New Swing in Directory.
  11. Selecteer Map selecteren om de huidige map te gebruiken (dit is de map die u in een vorige stap hebt gemaakt).
  12. Selecteer Basic: HTML/CSS/JavaScript.
  13. Als u wordt gevraagd de wijzigingen op te slaan die u wilt hervatten, selecteert u Wijzigingen opslaan.
  14. Selecteer de x naast script.js in vscode.dev om het JavaScript-bestand te sluiten, aangezien u dit bestand niet gebruikt tijdens de oefening.

Visual Studio Code maakt twee secties naast elkaar. De linkse editors zijn uw editors, waar u uw HTML en CSS kunt invoeren. Rechts gedraagt zich als een browser en geeft de resultaten van uw code weer.

De HTML maken

U gebruikt bestaande HTML zodat wij ons uitsluitend op de CSS kunnen richten. De HTML bevat het link element waarnaar wordt verwezen naar het CSS-bestand.

  • Kopieer de volgende HTML naar het venster met de titel 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>

Lettertype en -grootte instellen

Standaard gebruiken de meeste browsers een schreeflettertype zoals Times New Roman. U wilt de standaardinstelling voor de pagina instellen op een populair lettertype. Daarnaast wilt u de grootte van het lettertype voor de pagina en verschillende kopteksten instellen.

  1. Voeg in het bestand met de titel style.css de volgende CSS toe om de lettertypefamilie in te stellen op Verdana met terugvalopties en de tekengrootte op 12 pixels op het html element:

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

    U gebruikt het html element om het hoofdlettertype en de grootte bij te werken. Met het html element kunt u gebruik maken van rem maatvoering.

  2. U ziet dat de pagina automatisch wordt bijgewerkt met de wijzigingen.

  3. Voeg de volgende CSS-code toe aan het einde van .

    h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.1rem;
}

    rem is gebaseerd op de hoofdmapgrootte, die 14 pixels is. Deze CSS stelt bijvoorbeeld de grootte in op h1 22,4 pixels.

  4. De pagina wordt automatisch bijgewerkt in vscode.dev.

  5. Laat het venster geopend terwijl u het in de volgende oefening gaat gebruiken.

Resultaat en vervolgstappen

De volgende schermopname is het resultaat van de CSS die u in deze oefening hebt toegepast. Als u wilt experimenteren met verschillende lettertypen en grootten, kunt u de CSS naar wens wijzigen.

Schermopname van de laatste pagina, zoals weergegeven in de browser.