Benodigdheden

Benodigdheden#

Om deze module goed te kunnen volgen, heb je de volgende programma’s nodig:

Een browser#

Een moderne webbrowser, zoals Chrome (of een van de andere Chromium browsers, zoals Edge, Vivaldi, Opera of Brave), Firefox of Safari. Internet Explorer of WebKit browsers anders dan Safari raden we af, omdat deze browsers niet altijd goed met moderne HTML en CSS versies overweg kunnen.

Een editor: VS Code#

Een editor met ondersteuning voor HTML en CSS. Daarvan zijn er een heleboel, maar wij raden Visual Studio Code aan.

Visual Studio Code kun je installeren vanaf hun website en de installatie spreekt redelijk voor zich. De meeste standaard-opties zijn prima, maar het is aan te raden om ook de Add ‘Open with Code’ action to Windows Explorer … opties aan te vinken.

Select Additional Tasks scherm in de Visual Studio Code installer.

Als VS Code opent, dan krijg je de vraag om in te loggen. Dat kun je doen, maar is niet nodig, dus voel je vrij om die popup weg te klikken.

Extensie: Live Server#

Met Live Server kun je vanuit Visual Studio Code jouw website direct in de browser openen. Als je aanpassingen maakt in de code, wordt je website automatisch ververst, zodat je direct het resultaat kunt zien.

Open het Extensions paneel in de linkerzijbalk (dat is die met vier blokjes, waarvan er eentje scheef staat) en zoek naar Live Server gemaakt door Ritwick Dey. Klik op Install bij die extensie en geef aan dat je de ontwikkelaar vertrouwt als daarom wordt gevraagd.

Als je een pagina van je website open hebt in VS Code, klik je rechtsonder op Go Live om de pagina te openen in je browser. Laat de pagina openstaan! Wijzigingen die je maakt in je code worden dan automatisch daar weergegeven. De Go Live knop veranderd daarna in een stop knop, waarmee je de server weert kunt stoppen.

Extensie: W3C Web Validator#

Met W3C Web Validator kun je makkelijk laten checken of je code voldoet aan de standaarden voor HTML en CSS.

Open het Extensions paneel in de linkerzijbalk (dat is die met vier blokjes, waarvan er eentje scheef staat) en zoek naar W3C Web Validator gemaakt door Celian Riboulet. Klik op Install bij die extensie en geef aan dat je de ontwikkelaar vertrouwt als daarom wordt gevraagd.