Je gerief klaarzetten
Home

Je gerief klaarzetten

Je gerief klaarzetten

Je gerief klaarzetten

Om webapplicaties te ontwikkelen heb je een webserver en een IDE (ontwikkelingsomgeving) nodig. In deze les leer je hoe de Light-Server webserver installeert.

Verder installeren we de Visual Studio Code IDE en leren we hoe je snel kan experimenteren in CodePen, een online IDE.

We leren van meet af aan werken met EMMET, een tool om HTML snel te kunnen schrijven.

Doelstelling

Na deze les weet je hoe je volgende zaken installeert en gebruikt:

  1. een IDE (ontwikkelingsomgeving), een editor waarmee je
    1. html, css en JavaScript kan schrijven;
    2. de pagina in de browser kan laden;
  2. een webserver;
  3. een online editor waarin je gemakkelijk html, css en JavaScript kan uitproberen;
  4. EMMET
  5. een map maken waarin je alle oefeningen en opdrachten plaatst

Oplossing

  1. Download Visual Studio Code
    1. Integrated Terminal in Visual Studio Code
    2. Tilo Mitra, Visual Studio Code Settings and Extensions for Faster JavaScript Development
  2. Live Server installeren
  3. Kennismaken met CodePen
  4. EMMET
    1. Emmet — the essential toolkit for web-developers

    2. Emmet in Visual Studio Code

    3. Je hebt eigenlijk alleen het volgende overzicht nodig:
      EMMET Cheat Sheet

  5. Een werkmap maken:
    1. maak in je rootmap voor de school een map met de naam webtechnologie;
    2. in de map webtechnologie maak je een bestand met de naam index.html;
    3. Deze HTML pagina is je homepagina voor het vak Webtechnologie. Op die pagina komen links naar alle oefeningen in de opeenvolgende lessen en naar de examenopdracht:
      1. zorg ervoor de de browser weet dat deze pagina in het nederlands is opgesteld;
      2. gebruik meta tags om aan te geven:
        1. wie de pagina geschreven heeft;
        2. dat de woorden multimedia, oefeningen, opdrachten, html sleutelwoorden voor die webpagina zijn;
        3. op welke datum en tijdstip waarop die pagina werd gemaakt;
      3. de titel 'Webtechnologie', die in de tab van het browservenster verschijnt, plaats je in het title element van het head element;
      4. gebruik het address element om aan te geven dat jij de webpagina hebt gemaakt en zal onderhouden;
      5. een hoofdtitel met de tekst 'Webontwikkeling oefeningen en opdrachten' plaats je in een h1 element;

JI
2020-09-21 13:35:35