Extra

bron 1: Responsive Web Design with HTML5 and CSS - 4th edition - Ben Frain
bron 2: W3Schools

Webbrowser developer tools

De developer tools in webbrowsers zijn krachtige hulpmiddelen die web developers helpen bij het bouwen, testen en debuggen van websites. Deze tools zijn ingebouwd in de meeste moderne browsers, zoals Google Chrome, Mozilla Firefox (Firebug), Microsoft Edge en Safari.

  • HTML en CSS-structuur inspecteren (en bewerken): Met de Elements of Inspector tab kun je de DOM (Document Object Model) van een pagina bekijken, elementen selecteren en hun stijlen aanpassen. Dit is bijzonder handig voor het snel testen van CSS-aanpassingen en het identificeren van problemen met de layout of styling van een pagina.
  • debuggen van JavaScript-code: De Console tab stelt je in staat om JavaScript-commando’s uit te voeren, foutmeldingen te bekijken en logberichten te inspecteren. De Sources tab biedt een volledige debugger waarmee je door je code kunt stappen, breakpoints kunt instellen en de waarden van variabelen kunt controleren. Dit maakt het veel eenvoudiger om fouten in je code op te sporen en op te lossen.
  • Network: Hiermee kan je het netwerkverkeer van je webpagina monitoren. Je kunt zien welke bestanden worden geladen, hoe lang dit duurt en of er fouten optreden bij het laden van resources. Dit is essentieel voor het optimaliseren van de prestaties van je website en het identificeren van eventuele problemen met serververzoeken.
  • het geheugen inspecteren: de Memory tab helpt je bij het opsporen van memory leaks en inefficiënties het bekijken van opgeslagen cookies en andere storage.
  • testen van de toegankelijkheid en responsiviteit van je website. Met de Accessibility tab kun je controleren of je website voldoet aan toegankelijkheidsrichtlijnen, terwijl de Device Mode je in staat stelt om je website te testen op verschillende schermgroottes en apparaten. Dit helpt je om ervoor te zorgen dat je website voor iedereen toegankelijk en gebruiksvriendelijk is, ongeacht het apparaat dat ze gebruiken.
  • Performance: Daarnaast bieden de ontwikkelaarstools ook hulpmiddelen voor het analyseren van de prestaties van je webpagina. Dit stelt je in staat om de laadtijd en rendering van je pagina te meten bijvoorbeeld. .

Web development met VSCode

Lijst van handige VSCode extensies voor web development:

  • HTML CSS Support
  • HTML Boilerplate
  • HTML Snippets
  • Live Server (Five Server)
  • HTML Format
  • JavaScript (ES6) code snippets
  • IntelliSense for CSS class names in HTML

Je Eigen Webpagina Hosten op GitHub Pages

Je kunt je eigen webpagina eenvoudig hosten op GitHub Pages door een repository aan te maken en je HTML-, CSS- en JavaScript-bestanden daarin te plaatsen. Volg deze stappen om je site live te zetten:

  1. Maak een GitHub-repository aan Ga naar GitHub, log in en maak een nieuwe repository aan. Je kunt ervoor kiezen om de repository openbaar of privé te maken (let op: GitHub Pages werkt alleen voor privé-repositories met een betaald plan).

  2. Upload je websitebestanden Voeg je HTML-, CSS- en andere benodigde bestanden toe aan de repository. Dit kan via de GitHub-interface of door de bestanden lokaal te committen en te pushen met Git.

  3. Activeer GitHub Pages

  • Ga naar de repository-instellingen (Settings).
  • Scroll naar het gedeelte Pages.
  • Kies de juiste bron (meestal de main of master branch).
  • Selecteer eventueel een specifieke map zoals /docs als je bestanden daar staan.
  1. Publiceer en bekijk je site Nadat je GitHub Pages hebt ingeschakeld, genereert GitHub een URL voor je website, meestal in de vorm van:

Na enkele minuten is je site live!

Extra: Frameworks en Geavanceerde Opties

Voor een eenvoudige site hoef je alleen een index.html in de root van je repository te plaatsen. Wil je een geavanceerdere site? Dan kun je frameworks zoals Jekyll of Hugo gebruiken, die GitHub Pages direct ondersteunt.