Browsers zijn op zich best wel een beetje essentieel om websites te kunnen bezoeken, zoals je hopelijk al wel weet. Wat je misschien nog níet weet, is dat ze ook heel belangrijk zijn om websites te kunnen ontwikkelen. De ene browser is echter de andere niet, en het is aan te raden dat je Chrome of Firefox installeert, of het liefst allebei. Chrome download je hier, en hier kun je Firefox downloaden.

Zowel Chrome als Firefox zijn zogenaamde evergreen browsers; ze updaten zichzelf. Zo weet je zeker dat je altijd de meest recente versie van een browser voor je neus hebt, met de meest recente functionaliteit.

DevTools; een kijkje achter de schermen

De DevTools, of de Ontwikkelaarshulpmiddelen in goed Nederlands, worden je beste vrienden. Je kunt ze onder andere gebruiken om:

• De broncode van je pagina te bekijken en aan te passen,
• Te kijken welke CSS-regels van toepassing zijn op een element, en die regels meteen aanpassen, en om
• (Fout)meldingen uit Javascript te lezen.

Dat is nog lang, láng niet alles, en we komen er later nog zeker op terug welke features je allemaal gaan helpen met webdevelopment. Voor nu mag je even zelf rondklikken als je wilt. In Firefox open je de DevTools door in je menu naar Extra > Webontwikkelaar > Hulpmiddelen in-/uitschakelen te gaan, in Chrome is dat Weergave > Ontwikkelaar > Ontwikkelaarstools. Makkelijker is om ergens met rechtermuisknop te klikken, en dan (Element) inspecteren te kiezen.

Dit geldt voor OSX in het Nederlands, als je een ander OS of andere taal gebruikt zijn die stappen uiteraard wat anders, maar daar kom je wel uit. Leer dan ook meteen even de sneltoetsen uit je hoofd, dat is nóg makkelijker - en geloof me, je gaat ze veel gebruiken.

Protip: zet standaard je DevTools open op een apart scherm, dan lijkt het alsof je weet wat je doet

Waarom geen Internet Explorer of Edge?

Wat Kryptoniet is voor Superman, is Internet Explorer voor iedereen die het internet een warm hart toedraagt. Internet Explorer wordt niet meer doorontwikkeld, waardoor het een onveilige, verouderde browser is. Hierdoor werken features die al lang ondersteund worden door ongeveer alle andere browsers niet of niet zoals verwacht. Daarnaast zijn de DevTools die erin zitten veel minder krachtig dan in Chrome of Firefox. Internetten met IE is een beetje als met je skelter op de A2 gaan rijden: niet heel veilig, en iedereen moet zich aan jou aanpassen. In webdevelopment vertaalt zich dat in extra ontwikkeltijd en extra code die je CSS en Javascript zodanig aanpast dat opa Internet Explorer het ook nog snapt.

Edge is de opvolger van IE, stukken moderner en stukken beter, maar nog steeds, tja… raar. Sommige moderne technieken worden perfect ondersteund maar andere, redelijk basisfunctionaliteiten gewoon helemaal niet, zonder dat daar iets van een logica in zit. Dat is iets waar je in grote projecten misschien rekening mee moet houden, maar wat voor nu vooral heel veel frustratie gaat veroorzaken. Voor nu spreken we af dat de dingen die we gaan bouwen sowieso werken in de laatste versies van Chrome, Firefox en Safari, waarschijnlijk in Edge en met een beetje geluk in Internet Explorer.

In principe kun je HTML-, CSS- en Javascriptbestanden maken met elke willekeurige tekstverwerker, zelfs Kladblok. In principe. In principe kun je ook een potje sambal leegdrinken door een rietje of naakt radslagen maken op de versafdeling van je vaste supermarkt, maar echt aan te raden is het niet.

In deze tutorials gaan we gebruikmaken van Visual Studio Code. Die editor is gratis, uitgebreid maar niet complex, en beschikbaar voor Mac, Windows en Linux.

Visual Studio Code kun je qua functionaliteit uitbreiden door plugins te downloaden, maar dat is (voor nu) niet nodig.

Ja, voor nu wel. Voor de volgende stap is dit alles wat je nodig hebt:

• Chrome en/of Firefox
• VSCode
• Een goed humeur

• Gaan we dieper in op semantiek
• Ga je je eerste HTML schrijven!