Pagina met (voornamelijk externe) links

Op de meeste sites is (vrijwel) alles gratis. Soms gelden er voorwaarden. Tenzij anders vermeld, zijn de sites Engelstalig. Nederlandstalige en Vlaamstalige sites zijn ook te herkennen aan het vlaggetje (met excuses aan de Vlamingen voor het gemakshalve even annexeren van Vlaanderen):

BELANGRIJK

De zegeningen van kunstmatige intelligentie beginnen nu ook door te dringen op het gebied van tutorials en dergelijke. Dat kunstmatige klopt wel, maar het intelligente moet kennelijk nog komen.

Steeds meer sites worden automatisch vertaald naar het Nederlands. Helaas levert dat vaak volkomen idiote teksten en soms zelfs ronduit foutieve teksten op. Dit geldt met name voor technische tutorials, waar details vaak erg belangrijk zijn. Zo leveren de vertalingen van tutorials op developer.chrome.com soms echt complete onzin op ('framework' vertalen met 'metselwerk', om maar iets te noemen).

Als een correcte vertaling belangrijk is, zoals bij tutorials, kun je het best naar de originele taal teruggaan. Soms is daarvoor een knop aanwezig. Soms werkt het, als je JavaScript uitschakelt. Soms werkt het, als je 'nl' in de adresbalk weghaalt.

De links waar een Nederlands vlaggetje en iets als 'Nederlandstalig' bij staat, zijn in de regel wel goed vertaald. (Of oorspronkelijk in het Nederlands of Vlaams geschreven natuurlijk.)

Afgelopen maand toegevoegde, gewijzigde en verwijderde links

13 mei CSS → Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke) → aspect-ratio, breedte, hoogte, object-fit en object-position:
Nieuw: joshwcomeau.com (tutorial over de werking van hoogte in procenten).

7 mei HTML → <audio>, <embed>, <iframe>, <object> en <video> → Converteren en bewerken:
Nieuw: vert.sh (privacyvriendelijk afbeelding converteren naar ander formaat).

7 mei Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Converteren:
Nieuw: vert.sh (privacyvriendelijk afbeelding converteren naar ander formaat).

5 mei HTML → Formulieren, <input>, en dergelijke:
Nieuw: tpgi.com (tutorial over correcte labels).

5 mei CSS → Kleuren:
Nieuw: frontendmasters.com (voor- en nadelen van currentColor).

4 mei Toegankelijkheid → Cursussen, algemene tutorials, en dergelijke
Verwijderd: pressbooks.library/torontomu.ca (cursus bestaat kennelijk niet meer).

4 mei HTML → Validators:
Verwijderd: validator.nu (de w3c-validator op dit adres wordt kennelijk niet meer bijgehouden).

4 mei HTML → Tabellen (<table>, <td>, en dergelijke):
Verwijderd: smashingmagazine.com (artikel over toegankelijke tabellen is te oud).
Verwijderd: webaim.org (tutorial over toegankelijke tabellen is te oud).

2 mei CSS → Printen (inclusier @page, page-break-..., en dergelijke):
Nieuw: didoesdigital.com (problemen met en oplossingen voor printen).

2 mei Privacy, loskomen van datadieven, en dergelijke:
Nieuw: cryptpad.org (online gezamenlijk documenten en dergelijke bewerken).

29 april Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Bewerken en effecten aanbrengen:
Nieuw: mini2-photo-editor.netlify.app (foto op allerlei manieren bewerken).

28 april SVG:
Nieuw: heydonworks.com (waar is <canvas> geschikt voor?).

28 april HTML → <head>, metadata, Priority hints, Resource hints, en dergelijke:
Nieuw: getoutofmyhead.dev (overzicht welke tags bij welke asociale media en dergelijke werken).

28 april Toegankelijkheid → WCAG en WAI-ARIA:
Nieuw: aaardvarkaccessibility.com (WCAG in gewoon niet-technisch Engels).

27 april HTML → Overzicht elementen, attributen, tips, specificatie, en dergelijke:
Verwijderd: rawgit.com (overzicht van elementen is te oud).

23 april Toegankelijkheid → Focus, tabindex, toetsenbordnavigatie, en dergelijke:
Nieuw: smashingmagazine.com (waar je op moet letten voor een met het toetsenbord toegankelijke site).

23 april Toegankelijkheid → WCAG en WAI-ARIA:
Nieuw: dennisdeacon.com (uitleg over het verschil tussen WCAG level A, level AA en level AAA).

21 april Nieuwsbrieven, nieuwssites, en dergelijke:
Nieuw: discu.eu (wekelijkse nieuwsbrief over maken van websites).

20 april HTML → Kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>):
Verwijderd: css-tricks.com (artikel over gebruik van sectievormende elementen is te oud).

15 april Privacy, loskomen van datadieven, en dergelijke:
Nieuw: linux.vooreenbeginner.nl (Beginnen met Linux. Gericht op beginners).

15 april Toegankelijkheid → Testen:
Nieuw: personas-prototype.herokuapp.com (simulator voor verschillende soorten toegankelijkheidsproblemen).

15 april Toegankelijkheid → Overig:
Nieuw: tetralogical.com (overzicht van eisen van de European Accessibility Act).

CSS

Afbeeldingen

(Onderafdeling van CSS)

Alles over afbeeldingen is op één plaats te vinden bij CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

animation, transform, transition en Motion Path

(Onderafdeling van CSS)

Animatie met behulp van JavaScript staat bij JavaScript, DOM en CSSOM → Tutorials, voorbeelden.

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

CLS (Cumulative Layout Shift) zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Snelheid (theorie en verbeteren).

CSSOM staat bij JavaScript → CSSOM.

Kant-en-klare animaties om te downloaden zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video en dergelijke.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

SVG animeren met behulp van CSS staat bij SVG.

Alleen animation

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

codersblock.com/blog/the-surprising-things-that-css-can-animate
Voorbeelden van het animeren van niet direct voor de hand liggende CSS-eigenschappen.

developer.chrome.com/docs/css-ui/scroll-driven-animations
Tutorial over Scroll Driven Animations.

developer.mozilla.org/en-US/blog/scroll-progress-animations-in-css
Tutorial over Scroll Driven Animations (animation-range..., scroll-timeline..., view-timeline...).

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
Gedetailleerde tutorial over animaties.

joshwcomeau.com/animation/css-transitions
Uiterst overzichtelijke en volledige interactieve tutorial over transition.

joshwcomeau.com/animation/keyframe-animations
Uiterst overzichtelijke en volledige interactieve tutorial over animation.

quackit.com/css/css3/animations/animatable_properties
Lijst van eigenschappen die met behulp van animation zijn te wijzigen. Met voorbeelden.

sitepoint.com/how-to-get-started-with-css-animation
Uitgebreide tutorial over animation.

smashingmagazine.com/2022/10/advanced-animations-css
Voorbeeld van een ingewikkelde animatie met gedetailleerde uitleg hoe die te maken.

themeisle.com/blog/css-animations-tutorial
Tutorial over animaties, gericht op beginners. Met veel voorbeelden.

webdesignerwall.com/tutorials/esay-css-animation-using-keyframes
Duidelijke stap-voor-stap-tutorial over animation, met voorbeelden.

Alleen transition

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

joshwcomeau.com/animation/css-transitions
Uiterst overzichtelijke en volledige interactieve tutorial over transition.

animation én transition

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

freecodecamp.org/news/css-transition-vs-css-animation-handbook
Uitgebreide interactieve tutorial over transform en animation.

github.com/cssanimation/css-animation-101
Uitgebreide tutorial over alle vormen van CSS-animaties in de vorm van een boek (online,ePub of PDF.)

joshcollinsworth.com/blog/great-transitions
Tips voor betere animaties.

cubic-bezier() en linear()

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

Hier staan de meer theoretische artikelen. Deze functies worden ook bij animation en transition gebruikt. Het aanmaken van code is te vinden bij CSS → Online uitproberen, code genereren, en dergelijke.

blog.maximeheckel.com/posts/ cubic-bezier-from-math-to-motion
Heldere uitleg over de wiskunde achter cubic-bezier().

blog.richardekwonye.com/bezier-curves
Tutorial over cubic-bezier(), waarbij de voorbeelden zijn aan te passen.

css-tricks.com/advanced-css-animation-using-cubic-bezier
Interactieve tutorial over cubic-bezier().

css-tricks.com/reversing-an-easing-curve
Gedetailleerd voorbeeld hoe je 'n cubic-bezier()-functie kunt aanpassen.

developer.chrome.com/docs/css-ui/css-linear-easing-function
Tutorial over de linear()-functie.

developer.mozilla.org/en-US/blog/custom-easing-in-css-with-linear
Tutorial over de linear()-functie.

easings.net
Enkele tientallen werkende voorbeelden van de cubic-bezier()-functie, inclusief code.

joshcollinsworth.com/blog/easing-curves
Uitgebreide uitleg over cubic-bezier().

pomax.github.io/bezierinfo
Heel uitgebreid artikel over de theorie achter Bézier Curves.

smashingmagazine.com/2023/09/path-css-easing-linear-function
Tutorial over de linear()-functie.

typefully.com/DanHollick/how-the-pen-tool-works
Uitleg hoe Bezier curves werken in gewone taal.

Motion Path

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

css-irl.info/fun-with-css-motion-path
Voorbeelden van animaties met behulp van Motion Path, inclusief uitleg en code.

danielcwilsom.com/blog/2020/01/motion-path-quirks
Tutorial over Motion Path.

Overig

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

freecodecamp.org/news/web-animation-performance-fundamentals
Uitgebreid artikel over wat een frame is en de invloed hiervan op de snelheid van de pagina.

heartinternet.uk/blog/should-you-use-css-of-javascript-for-web-animations
Artikel over wanneer CSS en wanneer JavaScript beter is voor animaties.

smashingmagazine.com/2025/01/transitioning-top-layer-entries-display-property-css
Tutorial over @starting-style en transition-behavior.

viget.com/articles/animation-performance-101-browser-under-the-hood
Uitleg over hoe de browser animaties verwerkt en hoe je daar op de beste manier gebruik van kunt maken.

transform, perspective, en dergelijke

(Onderafdeling van CSS → animation, transform, transition en Motion Path)

transform wordt ook vaak gebruikt in combinatie met animation en transition.

3dtransforms.desandro.com
Uiterst duidelijke tutorial over 3D transforms. Bij de voorbeelden kan de code vaak worden gewijzigd, zodat je gelijk het effect van een wijziging ziet.

css-transform.moro.es
Maakt de verschillende eigenschappen van transform zichtbaar. Zodra je een eigenschap wijzigt, zie je direct het effect daarvan. Uiterst handig om te zien, wat een bepaalde wijziging van een eigenschap voor effect heeft.

css-tricks.com/how-css-perspective-works
Tutorial over perspective.

danielcwilsom.com/blog/2020-02/motion-path-transforms
Tutorial over de verschillen tussen translate, rotate en scale toegepast als afzonderlijke eigenschap, en toegepast in combinatie met transform().

freecodecamp.org/news/complete-guide-to-css-transform-functions-and-properties
Uitgebreide tutorial in boekvorm over transform.

polypane.app/blog/the-css-transform-property-and-individual-transforms-are-additive
Artikel over de wisselwerking tussen transform(), rotate(), scale() en translate().

thewebrocks.com/demos/3D-css-tester
Demo van transform en bijbehorende eigenschappen, zoals backface-visibility. De waarden kunnen online worden veranderd, waardoor je duidelijk kunt zien, wat de werking van bepaalde eigenschappen en waarden is. (De voorvoegsels in de bijbehorende css zijn niet meer nodig.)

web.dev/articles/css-individual-transform-properties
Artikel over het verschil tussen transform en de afzonderlijke eigenschappen rotate(), scale() en translate().

background, background-image, image-set(), sprites, en dergelijke

(Onderafdeling van CSS)

Artikelen en dergelijke die zich speciaal richten op mobiele browsers en dergelijke zie CSS → Media Query's, Container Query's en Responsive Web Design.

background-blend-mode zie CSS → Compositing, filters en blending.

Gradiënten zie CSS → Gradiënten.

Online sprite maken zie Gereedschap → Sprite maken.

css-tricks.com/css-sprites
Artikel over de voordelen van het gebruik van sprites. (Naarmate het gebruik van http/2 toeneemt, worden sprites voor gewone afbeeldingen steeds minder belangrijk.)

css-tricks.com/focusing-background-image-precise-location-percentages
Uitgebreide uitleg hoe background-image te positioneren met behulp van percentages.

css-tricks.com/using-performant-next-gen-images-in-css-with-image-set
Tutorial over image-set().

csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images
Artikel over onder andere het downloaden van background-images. Rond begin 2019 hebben Edge en Google Chrome (en op Blink gebaseerde browsers) het downloaden van background-images ingrijpend veranderd: deze worden nu áltijd gedownload, ook als ze niet worden weergegeven.

ishadeed.com/article/css-multiple-backgrounds
Uitgebreide tutorial over background.

border-image, borders, hoeken, figuren en outline

(Onderafdeling van CSS)

clip-path, mask-..., shape-outside, en dergelijke zie Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke). In de tutorials en dergelijke daar worden soms ook één of meer figuren gemaakt.

Figuren met kant-en-klare code zijn deels hier ondergebracht, omdat borders vaak een (heel) belangrijk onderdeel zijn. Allerlei vormen waarbij je de code online kunt aanpassen staan vaak bij CSS → Online uitproberen, code genereren, en dergelijke.

Meer algemeen theoretische artikelen over Logical properties (border-start-start-radius, en dergelijke) zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

12daysofweb.dev/2024/css-box-decoration-break
Tutorial over text-decoration-break.

cloudfour.com/thinks/css-circles
Artikel over alle mogelijke manieren om een cirkel, rondlopende tekst, en dergelijke te maken.

cloudfour.com/thinks/the-math-behind-nesting-rounded-corners
Tutorial hoe meerdere parallel lopende goed aansluitende borders met ronde hoeken te maken.

css-generators.com/ribbon-shapes
Linten en medailles volledig met HTML en CSS gemaakt. Met bijbehorende code.

css-irl.info/logical-border-radius
Tutorial over border-radius, inclusief Logical Properties (border-start-start-radius en dergelijke).

css-pattern.com
Geometrische patronen gemaakt met behulp van CSS. Met bijbehorende code.

css-shape.com
Allerlei met alleen CSS gemaakte figuren. De bijbehorende code kan worden gewijzigd, waarbij je gelijk het resultaat ziet.

css-tricks.com/revisiting-css-border-image
Uitgebreide tutorial over border-image.

css-tricks.com/the-shapes-of-css
Grote hoeveelheid geometrische vormen zoals sterren, veelhoeken, enzovoort, die zijn gemaakt met gebruik van alleen CSS. Met bijbehorende code.

css-voorbeelden.nl/kader/ronde-hoeken/kader-040
Uitgebreide uitleg van border-radius. Met voorbeelden. Nederlandstalig.

css-voorbeelden.nl/kader/ronde-hoeken/kader-091
Voorbeelden van met border-radius gemaakte ronde hoeken. Nederlandstalig.

css-voorbeelden.nl/kader/afbeelding/kader-111
Voorbeeld van het gebruik van en uitgebreide uitleg over border-image. Nederlandstalig.

css-voorbeelden/tekst/lijnen/tekst-105
Deze Nederlandstalige uitleg gaat eigenlijk over lijnen, maar als je met behulp van de inhoud naar CSS → Uitgebreide beschrijvingen van een eigenschap → border-radius gaat, is daar een uitgebreide uitleg over border-radius te vinden.

hongkiat.com/blog/css-gradient-border
Uitleg hoe een hoek met gradiënten te maken.

medium.com/coding-artist/a-beginners-guide-to-pure-css-images
Tutorial hoe je met alleen CSS een afbeelding kunt maken (in dit geval van een beer).

smashingmagazine.com/2024/01/css-border-image-property
Uitgebreide tutorial over border-image.

smashingmagazine.com/2024/05/modern-guide-making-css-shapes
Allerlei met alleen CSS gemaakte figuren.

Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke)

(Onderafdeling van CSS)

contain zie CSS → contain.

Eigenschappen die rekening houden met de richting van de taal zoals writing-mode, dir-attribuut, :dir(), en dergelijke, en meer algemeen theoretische artikelen over Logical properties (dus geen afzonderlijke eigenschappen) zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

Specifiek flexbox zie CSS → Flexbox.

Specifiek grid zie CSS → Grid.

anchor, centreren, Containing Block, position, Stacking Context en z-index

(Onderafdeling van CSS → Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke)

anchoreum.com
Interactieve tutorial over Anchor Positioning.

chenhuijing.com/blog/on-fixed-elements-and-backgrounds
Artikel over position: fixed; en waarom een fixed element soms toch nog scrolt.

coder-coder.com/z-index-isnt-working
Artikel met vier veel voorkomende redenen waarom z-index soms niet werkt.

css-tricks.com/creating-sliding-effects-using-sticky-positioning
Tutorial met voorbeelden over position: sticky;.

designshack.net/articles/css/the-lowdown-on-absolute-vs-relative-positioning
Uitgebreide uitleg over het verschil tussen absoluut en relatief positioneren.

dev.to/huijing/understanding-positioning-in-css
Korte, duidelijke uitleg over de verschillende waarden bij position.

developer.chrome.com/blog/anchor-positioning-api
Tutorial over Anchor Positioning.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Containing_block
Uitleg over wat een containing block is en de mogelijk onverwachte bijwerkingen daarvan.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
Uitleg over wat een 'stacking context' is en wanneer deze ontstaat.

elad.medium.com/css-position-sticky-how-it-really-works
Korte, duidelijke uitleg over de werking van position: sticky;.

freecodecamp.org/news/z-index-explained-how-to-stack-elements-using-css
Duidelijke uitleg over z-index en stacking context.

ishadeed.com/article/learn-css-positioning
Interactieve tutorial over de verschillende manieren van positioneren.

ishadeed.com/article/understanding/z-index
Uitgebreide tutorial over z-index.

joshwcomeau.com/css/center-a-div
Overzicht van methodes om een <div> te centreren.

joshwcomeau.com/css/stacking/contexts
Tutorial over stacking context.

philipwalton.com/articles/what-no-one-told-you-about-z-index
Ouder, maar nog steeds actueel, artikel over minder bekende wisselwerkingen tussen z-index en onder andere opacity, transforms, filters, css-regions en paged media. Al wat ouder, maar de spookachtige verschijnselen bestaan nog steeds.

polypane.app/blog/getting-stuck-all-the-ways-position-sticky-can-fail
Overzicht van redenen waarom position: sticky; mogelijk niet werkt.

polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions
Tutorial over Stacking Context en z-index.

smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css
Artikel over allerlei manieren om verticaal en horizontaal te centreren.

tellthemachines.com/stacking-contexts
Duidelijke uitleg over wat een stacking context is.

aspect-ratio, breedte, hoogte, object-fit en object-position

Specifiek breedte, hoogte en aspect-ratio voor afbeeldingen zie CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

bram.us/2020/11/30/native-aspect-ratio-boxes-in-css-thanks-to-aspect-ratio
Tutorial over aspect-ratio.

css-irl.info/aspect-ratio-is-great
Tutorial over aspect-ratio, ook in samenhang met eigenschappen als object-fit en align-items.

ishadeed.com/article/css-aspect-ratio
Tutorial over aspect-ratio.

joshwcomeau.com/css/height-enigma
Tutorial over de werking van hoogte opgegeven in procenten.

css-tricks.com/a-first-look-at-aspect-ratio
Tutorial over aspect-ratio.

css-tricks.com/exploring-the-complexities-of-width-and-height-in-css
Zeer uitgebreide tutorial over alles wat met breedte en hoogte te maken heeft.

ishadeed.com/article/min-max-css
Tutorial over min-height, max-height, min-width en max-width. Met tal van voorbeelden.

quirksmode.org/blog/archives/2021/05/aspectratio
Artikel over aspect-ratio met oplossingen voor als dat (ogenschijnlijk) niet werkt en fallback voor oudere browsers.

sitepoint.com/using-css-object-fit-object-position-properties
Tutorial over object-fit en object-position.

Boxmodel en fit/max/min-content

blog.logrocket.com/understanding-min-content-max-content-fit-content-css
Tutorial over min-content, max-content en fit-content.

codepen.io/carolineartz
Visuele uitleg over het boxmodel. Breedte, hoogte, box-sizing, marge, padding en border zijn simpel te veranderen, waardoor je goed kunt zien, hoe het boxmodel werkt.

display

chenhuijing.com/blog/how-well-do-you-know-display
Uitgebreide uitleg over alle mogelijke waarden bij display.

ericwbailey.website/published/display-contents-considered-harmful
Artikel over de toegankelijkheidsproblemen die display: contents; kan veroorzaken.

hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property
Uitleg over de (inmiddels niet meer zo) nieuwe mogelijkheid van twee waarden bij display en de samenhang met al langer bestaande waarden.

ishadeed.com/article/display-contents
Tutorial over display : contents. Met veel voorbeelden.

smashingmagazine.com/2019/04/display-two-value
Artikel over de oudere en nieuwere waarden (zoals grid) bij display, de geschiedenis van die waarden, het boxmodel, enzovoort.

Marges

Borders zie CSS → border-image, borders, hoeken, figuren en outline.

bitsofco.de/collapsible-margins
Uiterst duidelijke uitleg over horizontale 'collapsing margins': marges die (ogenschijnlijk) uit het niets verschijnen of juist verdwijnen.

ashleemboyer.com/blog/why-you-should-use-px-units-for-margin-padding-and-other-spacing-techniques
Artikel waarom je voor marges, padding, en dergelijke in de regel beter de eenheid px kunt gebruiken.

joshwcomeau.com/css/rules-of-margin-collapse
Interactieve tutorial over margin collapsing.

quirksmode.org/blog/archives/2020/02/negative_margin
Uitleg over hoe negatieve marges werken.

smashingmagazine.com/2019/07/margins-in-css
Artikel over marges met de nadruk op het samenvallen van marges ('collapsing margins') en het verschijnen van 'spookmarges'. (Vooral de spookmarges kunnen zelfs een ervaren sitebouwer in een staat van acute razernij brengen.)

overflow

Scrollen en dergelijke zie CSS → Scrollen, Scroll Snap, overflow-behavior, en dergelijke.

Uiterlijk van de scrollbalk aanpassen zie CSS → Scrollbalk.

chenhuijing.com/blog/the-horizontal-overflow-problem
Overzicht van technieken om een horizontale scrollbalk op (smalle) mobieltjes te voorkomen.

css-irl.info/oh-no-overflow
Tutorial over overflow. Met veel voorbeelden van problemen als 'spook-'scrollbalken en dergelijke.

ishadeed.com/article/overflow-clip
Tutorial over overflow: clip;.

ishadeed.com/article/overflow-css
Uitgebreide tutorial over overflow.

kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip
Tutorial over overflow: clip. De nieuwe waarde 'clip' maakt het eindelijk mogelijk iets in de ene richting te verbergen, terwijl scrollen in de andere richting gewoon kan.

marcus.io/blog/accessible-overflow
Artikel hoe je 'n element met overflow: auto; (dus mogelijk scrollbaar) toegankelijk kunt maken.

smashingmagazine.com/2021/04/css-overflow-issues
Uitgebreid overzicht van mogelijke oorzaken van horizontale overflow, met bijbehorende oplossingen.

web.dev/learn/css/overflow
Tutorial over overflow en alles wat daarmee te maken heeft.

Browser support en Release Notes

(Onderafdeling van CSS)

Ondersteuning door schermlezers van elementen, WAI-ARIA, en dergelijke staat bij Toegankelijkheid → Browser (en schermlezer) support.

Algemeen

(Onderafdeling van CSS → Browser support en Release Notes)

moderncss.dev/testing-feature-support-for-modern-css
Uitgebreid overzicht van manieren om te testen op browser support.

molily.de/browser-compatibility-baseline
Uitleg waarom je het baseline label (alle browsers ondersteunenen iets) absoluut niet zonder meer moet geloven.

Alleen CSS

(Onderafdeling van CSS → Browser support en Release Notes)

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

CSS filteren en aanpassen zie CSS → Bugs, hacks en @supports → CSS wegfilteren/aanpassen (inclusief @supports).

Gebruik van niet ondersteunde eigenschappen en dergelijke mogelijk maken zie CSS → Bugs, hacks en @supports → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Support voor specifieke eigenschappen en dergelijke staat mogelijk bij die specifieke eigenschappen.

css-tricks.com/is-vendor-prefixing-dead
Artikel over ontstaan van vendor prefixes (voorvoegsels) en hoe het daar nu mee staat.

css3test.com
Geeft gedetailleerd aan welke CSS-eigenschappen worden ondersteund in de browser, waarmee je deze site bezoekt. Met bij elke eigenschap links naar documentatie en specificatie.

developer.mozilla.org/en-us/docs/Web/CSS/Reference
Officiële lijst van door Firefox ondersteunde CSS-eigenschappen. Met voorbeelden en beknopte uitleg. Geeft ook aan wat in andere desktop- en mobiele browsers wordt ondersteund.

webkit.org/css-status
Overzicht van door webkit (Safari) ondersteunde CSS, en van waar ze aan werken.

Alleen JavaScript

(Onderafdeling van CSS → Browser support en Release Notes)

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

JavaScript is een van de 'dialecten' van ECMAScript, zoals de naam van de officiële specificatie luidt. Tot en met JavaScript versie 6 wordt algemeen de naam 'JavaScript' gebruikt, daarna vaak 'ECMAScript' gevolgd door het jaartal van de versie.

Support voor specifieke functies, events en dergelijke staat mogelijk bij die specifieke functies, events en dergelijke.

developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Overzicht van de ondersteuning van de DOM in desktop- en mobiele browsers. Met links naar voorbeelden, documentatie, en dergelijke.

developer.mozilla.org/en-US/docs/web/Events
Overzicht van ondersteuning van events in Firefox.

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
Overzicht van ondersteuning van JavaScript in desktop- en mobiele browsers. Met links naar voorbeelden, documentatie, en dergelijke.

w3schools.com/jsref
JavaScript en HTML DOM referentie. Met links naar voorbeelden en ondersteuning door desktopbrowsers.

w3schools.com/tags/ref_eventattributes
Overzicht van HTML event-attributen. Met links naar voorbeelden en ondersteuning door desktopbrowsers.

whatwebcando.today
Overzicht van browser support voor HTML5 API's in de browser, waarmee je deze site bezoekt. Met links naar meer documentatie.

Alleen SVG

(Onderafdeling van CSS → Browser support en Release Notes)

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

Support voor specifieke tags, attributen, en dergelijke staat mogelijk bij die specifieke tags, attributen, en dergelijke.

developer.mozilla.org/en-US/docs/Web/SVG
Ingangspagina naar een aantal referenties en dergelijke. Daar is dan weer de ondersteuning in desktop en mobiele browsers te vinden.Met voorbeelden.

Combinaties van CSS, HTML, JavaScript en/of SVG

(Onderafdeling van CSS → Browser support en Release Notes)

Dat iets wordt ondersteund, wil niet zeggen dat het volledig wordt ondersteund of dat er geen bugs in kunnen zitten!

Het is verstandig bij twijfel op meerdere sites te kijken, omdat niet elke site even snel wordt bijgewerkt.

Support voor specifieke eigenschappen, tags, attributen, functies, events, en dergelijke staat mogelijk bij die specifieke eigenschappen, tags, attributen, functies, events, en dergelijke.

CSS filteren en aanpassen zie CSS → Bugs, hacks en @supports → CSS wegfilteren/aanpassen (inclusief @supports).

Gebruik van niet ondersteunde elementen, eigenschappen, en dergelijke mogelijk maken zie CSS → Bugs, hacks en @supports → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

caniuse.com
Uitgebreide en uiterst overzichtelijke tabel met wat in welke browser werkt van CSS3, SVG, HTML5, JavaScript API's, en nog wat dingen. Inclusief mobiele browsers. De belangrijkste bugs en dergelijke worden ook gemeld. Mogelijkheid gegevens specifiek per land te bekijken. Ook de door Mozilla bijgehouden browserondersteuning wordt hier weergegeven.

chromestatus.com/features
Overzicht van wat Chromium ondersteunt van HTML, CSS en JavaScript. (Onder andere Google Chrome, Edge, Samsung Internet en Opera zijn op Chromium gebaseerd). Laat ook (geschatte) ondersteuning door Firefox en Safari (alleen desktopbrowsers) zien. Geeft percentages van hoeveel eigenschappen, functies, en dergelijke websites daadwerkelijk gebruiken (linksboven onder de knop 'Stats').

devdocs.io
Browser support voor zo'n beetje elk denkbare taal in desktop- en mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

wpt.fyi/results
Groot aantal tests op ondersteuning van voornamelijk CSS, HTML en SVG in de laatste desktopversies van Chrome, Firefox, Edge en Safari.

Release notes

(Onderafdeling van CSS → Browser support en Release Notes)

browsers.fyi
Overzicht van de laatste versies van de belangrijkste browsers met links naar de bijbehorende Release Notes.

Bugs, hacks en @supports

(Onderafdeling van CSS)

Bugs in mobiele apparatuur zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Hulpmiddelen voor debuggen zoals handleidingen voor developer tools (ontwikkelgereedschap), extensies bij browsers, en dergelijke, zie Gereedschap → Debuggen.

Bugs melden en opzoeken

(Onderafdeling van CSS → Bugs, hacks en @supports)

Niet alle browsers hebben een plaats, waar je centraal kunt opzoeken, of een bug al is gemeld. Maar (vrijwel) alle browsers gebruiken een weergavemachine van een van onderstaande browsers, dus onderstaande pagina's geven toch een vrij volledige dekking.

bugs.webkit.org
Bugs in webkit (onder andere Safari) melden en/of opzoeken.

bugzilla.mozilla.org
Bugs in Firefox melden en/of opzoeken.

issues.chromium.org/issues
Bugs in chromium (onder andere Google Chrome, Opera en Edge) melden en/of opzoeken.

webcompat.com
Site waar niet (goed) werkende sites gemeld kunnen worden.

CSS wegfilteren/aanpassen (inclusief @supports)

(Onderafdeling van CSS → Bugs, hacks en @supports)

Mobiele browser herkennen zie Mobiele apparatuur → Validators, browser sniffing, en dergelijke.

bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium
Tutorial hoe CSS met behulp van @supports alleen (of juist niet) toe te passen voor browsers gebaseerd op Gecko en/of Blink en/of Webkit. Lees vooral de waarschuwing over de (on)betrouwbaarheid van deze methode!

bram.us/2022/01/20/detect-at-rule-support-with-the-at-rule-function
Tips om te bepalen of een browser een bepaalde @-regel ondersteunt.

css-tricks.com/how-supports-works
Uitgebreide uitleg over hoe @supports werkt en wanneer het wel en niet zinvol te gebruiken is.

modernizr.com
JavaScript om te detecteren of een browser bepaalde CSS/HTML ondersteunt. Als dat niet zo is, kan alternatieve css worden aangeboden. (Als je alleen nieuwere browsers die @supports ondersteunen wilt testen, is @supports een betere keuze.)

Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken

(Onderafdeling van CSS → Bugs, hacks en @supports)

Simpele oplossingen om 'n bepaalde eigenschap en dergelijke mogelijk te maken, zonder dat daarbij JavaScript of zoiets nodig is, staan bij de betreffende eigenschap en dergelijke.

github.com/Modernizr/Modernizr/wiki
Gigantische lijst met links naar HTML5 Cross Browser Polyfills. (Een polyfill is een stukje JavaScript, waardoor nieuwere CSS, HTML, en dergelijke ook in oudere browsers (min of meer) werkt.)
In het verleden stonden hier ook links naar aparte polyfills. De kwalitatief goede bleken ook allemaal op bovengenoemde site te staan. Vanwege de zeer wisselende kwaliteit van polyfills is het veiliger om alleen op bovengenoemde site te zoeken.

Clipping en masking (clip-path, mask-..., shape-outside, en dergelijke)

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Verzamelingen met figuren waarbij (meestal) meerdere eigenschappen zijn gebruikt, staan bij CSS → border-image, borders, hoeken, figuren en outline.

In Firefox is in het ontwikkelgereedschap een ongelooflijk handige shape-editor ingebouwd.

blog.logrocket.com/its-a-trap-ezoid-css-shapes-aren-t-what-you-d-expect
Uitgebreide tutorial met voorbeelden over shape-outside.

codepen.io/michellebarker/post/experimantal-layouts-with-css-shapes-and-clip-path
Uitgebreide tutorial over shape-outside en clip-path, met een aantal indrukwekkende voorbeelden.

css-tricks.com/using-css-clip-path-create-interactive-effects
Voorbeelden van het gebruik van clip-path, deel 1. En hier is deel 2 te vinden.

css-voorbeelden/tekst/illustraties/tekst-043
Met behulp van shape-outside tekst uitlijnen naast een ronde of stervormige afbeelding. Nederlandstalig.

css-voorbeelden/figuren/pijl/figuren-049
Met behulp van clip-path een pijl maken. Nederlandstalig.

digitalocean.com/community/tutorials/css-clipping-with-clip-path
Tutorial over clip-path.

hacks.mozilla.org/2018/09/make-your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor
Tutorial over de shape-outside- en clip-path-editor in het ontwikkelgereedschap van Firefox.

ishadeed.com/article/clip-path
Tutorial over clip-path. Met veel voorbeelden.

ishadeed.com/article/css-masking
Tutorial over masking. Met veel voorbeelden.

smashingmagazine.com/2018/09/css-shapes
Uitgebreide tutorial over shape-outside (en bijbehorende eigenschappen). Met voorbeelden.

smashingmagazine.com/2019/04/art-direction-for-the-web-using-css-shapes
Tekst allerlei vormen laten volgen met behulp van shape-outside.

tympanus.net/codrops/2018/11/29/an-introduction-to-css-shapes
Tutorial over clip-path en shape-outside met veel voorbeelden.

verpex.com/blog/website-tips/css-tricks-to-master-the-clip-path-property
Tutorial over clip-path.

Compositing, filters en blending

(Onderafdeling van CSS)

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

bennettfeely.com/image-effects
Het uiterlijk van een afbeelding wordt met behulp van filter, mix-blend-mode en background-blend-mode volledig veranderd, waardoor je goed kunt zien, wat elke eigenschap voor invloed heeft.

blog.logrocket.com/advanced-effects-with-css-background-blend-modes
Voorbeelden met uitleg en code van het gebruik van background-blend-mode.

css-voorbeelden.nl/tekst/effecten/uiterlijk/tekst-121
Kleur van de tekst aanpassen aan de achtergrond met behulp van mix-blend-mode. Met uitgebreide beschrijving van mix-blend-mode in de uitleg (onder CSS → Uitgebreide beschrijving van mix-blend-mode). Nederlandstalig.

css-irl.info/drop-shadow-the-underrated-css-filter
Tutorial over drop-shadow.

typefully.com/DanHollick/blending-modes
Superduidelijke beschrijving van de werking van de verschillende blending modi.

contain

(Onderafdeling van CSS)

smashingmagazine.com/2019/12/browsers-containment-css-contain-property
Uitleg over de css-eigenschap contain.

css-tricks.com/lets/take-a-deep-dive-into-the-css-contain-property
Tutorial over contain.

content-visibility

(Onderafdeling van CSS)

blog.logrocket.com/using-css-content-visibility-boost-rendering-performance
Tutorial over content-visibility.

debugbear.com/blog/content-visibility-api
Tutorial over content-visibility.

Cursors

(Onderafdeling van CSS)

Websites met cursors om te downloaden zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke

csscursor.info
Overzicht van cursors. Klik op een cursor om de code ervoor te krijgen.

omatsuri.app/css-cursors
Overzicht van cursors. Klik op een cursor om de code ervoor te krijgen.

Cursussen CSS en/of HTML

(Onderafdeling van CSS)

Het over-, overgrote deel van de cursussen op internet is echt van een bedroevende kwaliteit en/of zwaar verouderd. Aan zo'n cursus heb je helemaal niets. Integendeel: je leert technieken, waar je tegenwoordig helemaal niets meer aan hebt, en die je later weer voor het grootste deel af moet leren. De cursussen hieronder zijn kwalitatief goed. (Wat natuurlijk niet wil zeggen dat er geen andere goede cursussen zijn.)

Cursussen en dergelijke specifiek voor één eigenschap, element, attribuut en dergelijke, kunnen ook bij dat element, attribuut of eigenschap staan. Hier staan alleen algemene cursussen die echt (min of meer) een volledige cursus CSS en/of HTML zijn. (Alsof je op school zit, zoiets.)

Cursussen en dergelijke specifiek voor het optimaliseren van een website zijn te vinden bij Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Snelheid (theorie en verbeteren).

Cursussen en dergelijke specifiek voor Responsive Web Design, responsieve afbeeldingen, en dergelijke staan bij CSS → Media Query's, Container Query's en Responsive Web Design.

Cursussen en dergelijke specifiek voor toegankelijkheid zijn te vinden bij Toegankelijkheid → Cursussen, algemene tutorials, en dergelijke.

Specificaties voor CSS en overzichten met (alle) eigenschappen en dergelijke zijn te vinden bij CSS → Overzicht eigenschappen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een eigenschap en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

Specificaties voor HTML en overzichten met (alle) HTML-elementen, -attributen, en dergelijke zijn te vinden bij HTML → Overzicht elementen, attributen, tips, specificatie, en dergelijke. (Soms is de uitleg bij een element en dergelijke uit zo'n overzicht zo uitgebreid dat het ook een soort cursus is.)

code.tutsplus.com/html-css-for-beginners-mega-free-course
Zeer uitgebreide cursus CSS en HTML in videovorm. Ondertiteld.

codecenter.nl
Interactieve Nederlandstalige cursus HTML en CSS.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics
Cursus CSS. Met de gebruikelijke grondigheid van Mozilla. Voorbeelden hieruit zijn simpel uit te proberen op play.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content
Cursus HTML. Met de gebruikelijke grondigheid van Mozilla. Voorbeelden hieruit zijn simpel uit te proberen op play.

freecodecamp.org/learn/2022/responsive-web-design
Interactieve cursus CSS en HTML. (Op deze site staat ook een enorme hoeveelheid meer gespecialiseerde tutorials over CSS en HTML)

geeksforgeeks.org/css-tutorial
Interactieve cursus CSS. (Voor het interactieve deel moet je je wel registreren.)

geeksforgeeks.org/html-tutorial
Interactieve cursus HTML. (Voor het interactieve deel moet je je wel registreren.)

html-site.nl/het-10-stappen-plan-om-een-website-te-maken
Korte, duidelijke Nederlandstalige cursus websitemaken.

htmlforpeople.com
Cursus HTML voor beginners.

leanit.nl/gratiscursus/html-en-css
Nederlandstalige basiscursus HTML en CSS.

modernways.be/myap/it/school/course/Webtechnologie
Uitgebreide Vlaamstalige cursus CSS en HTML. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

quackit.com/css/tutorial
Uitgebreide cursus CSS met mogelijkheid om dingen uit te proberen.

quackit.com/html/tutorial
Uitgebreide cursus HTML met mogelijkheid om dingen uit te proberen.

sherpa.guide/paths/htmlcss
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om HTML en CSS te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutsplus.com/t/courses
Groot aantal cursussen, waaronder gratis. Links kun je een onderwerp kiezen. Voor het volgen van een cursus moet je je wel registreren.

w3schools.com/css
Interactieve CSS-tutorial.

w3schools.com/html
Interactieve HTML-tutorial.

web.dev/learn/css
Interactieve cursus CSS. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen.

web.dev/learn/html
Interactieve cursus HTML. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen.

web4college.com/html
Cursus HTML met veel mogelijkheden om geleerde gelijk uit te proberen.

Default stylesheets (standaard stijlbestanden)

(Onderafdeling van CSS)

chromium.googlesource.com/chromium/blink/+/refs/heads/main/Source/core/css
Browser stijlbestand van chromium (gebruikt in onder andere Google Chrome, Edge en Opera).

searchfox.org/mozilla/central/source/layout/style/res/html.css
Browser stijlbestand van Firefox. Je kunt ook in de adresbalk van Firefox 'chrome://browser/content/extension.css' intypen. Dat is het stijlbestand dat Firefox op dat moment gebruikt.

trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browser stijlbestand van webkit (gebruikt in onder andere Safari)

Eenheden, calc(), min(), en dergelijke

(Onderafdeling van CSS)

Omdat de eenheid 'fr' (vooralsnog) alleen bij grid wordt gebruikt, staat die bij CSS → Grid Hetzelfde geldt voor de functie minmax().

clamp() specifiek gebruikt om de lettergrootte aan te passen aan het browservenster staat bij CSS → Media Query's, Container Query's en Responsive Web Design → Overig.

Dingen als ppi, dpi, CSS-pixels, device-pixels, en dergelijke zijn te vinden bij Mobiele apparatuur → Theorie, links, forums, en dergelijke.

De opbouw van kleuren met behulp van hexadecimale waarden, percentages, en dergelijke staat bij CSS ~ Kleuren.

Tutorials en dergelijke specifiek over de bij Container Query's gebruikte eenheden cq... staan bij CSS → Media Query's, Container Query's en Responsive Web Design → Overig.

Voor- en nadelen van eenheden als em en px specifiek voor fonts en regelhoogte staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Typografie.

12daysofweb.dev/2024/calc-size-and-interpolate-size
Artikel over interpolate-size en calc-size().

2019.wattenberger.com/blog/css-percents
Een overzicht van waar een percentage op is gebaseerd bij verschillende eigenschappen.

blog.logrocket.com/min-max-clamp-css-functions
Uitgebreide tutorial over min(), max() en clamp().

bram.us/2021/07/08/the-large-small-and-dynamic-viewports
Artikel over het verschil tussen de nieuwe dynamische viewport eenheden (vw, vh, vmax, vmin met een 'l', 's' of 'd' ervoor) en de 'gewone' vw en dergelijke.

codebeautify.org/all-tools#css-unit-converter-tools
Omrekenen van en naar allerlei verschillende eenheden.

css-tricks.com/a-complete-guide-to-calc-in-css
Uitgebreide tutorial over calc().

css-tricks.com/css-length-units
Overzicht van alle in CSS gebruikte eenheden.

css-voorbeelden.nl/artikelen/css/artikelen-119
Lengte-eenheden in CSS (inclusief calc() en percentage). Nederlandstalig.

dev.to/kenbellows/gradians-and-turns-the-quiet-heroes-of-css-angles
Uitleg over het verschil tussen en gebruik van degrees, radians, gradians en turns.

fonts.google.com/knowledge/using_type/the_complications_of_typographic_size
Uitleg waarom pixels (en daarop gebaseerde maten als centimeter) vaak (sterk) afwijken van die eenheden in de 'echte' wereld.

ishadeed.com/article/css-cap-unit
Artikel over de eenheid cap.

isahdeed.com/article/css-min-max-clamp()
Tutorial over min(), max() en clamp().

ishadeed.com/article/new-viewport-units
Tutorial over de dynamische viewport-eenheden svh, lvh en dvh.

ishadeed.com/article/use-cases-css-comparison-functions
Voorbeelden van het gebruik van max(), min() en clamp().

ishadeed.com/article/viewport-units
Tutorial met veel voorbeelden over viewport eenheden.

katydecorah.com/css-ruler
Verschil tussen relatieve, absolute en viewport eenheden uiterst duidelijk zichtbaar gemaakt. Door getallen te wijzigen zie je, hoe de verschillende eenheden reageren.

meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit
Uitleg over de eenheid ch en waarom het meestal geen goed idee is die te gebruiken om te lange regels te voorkomen.

moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max
Tutorial met veel voorbeelden over calc(), clamp(), min() en max().

sitepoint.com/css-sizing-units
Overzicht van alle eenheden in CSS.

sitepoint.com/understanding-and-using-rem-units-in-css
Artikel met praktische voorbeelden voor het gebruik van rem.

smashingmagazine.com/2021/07/css-absolute-units
Artikel over het afwijken van voor websites gebruikte absolute eenheden als inches, centimeters, en dergelijke van diezelfde eenheden in de fysieke wereld.

smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem
Uitgebreid artikel over viewport eenheden (vw, vh, vmax, vmin, eventueel met een 'l', 's' of 'd' ervoor).

stackdiary.com/css-math-functions
Tutorial over calc(), min(), max() en clamp().

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/absolute-length-units
Tutorial over absolute eenheden.

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-font
Tutorial over relatieve eenheden met onder andere voorbeelden van het gebruik van de minder bekende eenheden cap, ch, ex, ic, lh en rlh.

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
Tutorial over de viewport eenheden vw, vh, vb, vi, vmin en max (eventueel met l, s of d ervoor).

typefully.com/DanHollick/how-big-is-1px
Uitleg in gewone taal waarom de maat van een pixel varieert.

web.dev/articles/min-max-clamp
Tutorial over clamp(), min() en max(). Met een aantal praktische voorbeelden.

Flexbox

(Onderafdeling van CSS)

De specificatie voor flexbox is een aantal keren volledig herschreven. Oudere handleidingen zijn hierdoor volstrekt onbruikbaar geworden. Als in een handleiding display: box; of display: flexbox; wordt gebruikt, is deze verouderd en volledig onbruikbaar. Als een handleiding display: flex; gebruikt, is die handleiding geschreven volgens de nieuwste specificatie.

Meer algemene artikelen over display, boxmodel, en dergelijke (waar flexbox een onderdeel van kan zijn) staan bij Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke).

Min of meer kant-en-klare lay-outs gebaseerd op flexbox zie CSS → Lay-outs.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

writing-mode zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

codecamps.com/3-superpowers-of-the-flex-box-model
Uitgebreid artikel over met name flex-basis, flex-shrink en flex-grow.

codepen.io/enxaneta/
Werking van allerlei onderdelen van flexbox gedemonstreerd. Als je iets verandert, zie je gelijk het resultaat.

codingfantasy.com/flexboxadventure
Tutorial in de vorm van een spel.

css-tricks.com/snippets/a-guide-to-flexbox
Uitleg met vrij weinig tekst, maar veel afbeeldingen. Heel duidelijk.

css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think
Uitgebreide uitleg over de (soms onverwachte) effecten van flex-shrink, flex-grow, flex-basis en flex.

css-tricks.com/understanding/flex-grow-flex-shrink-and-flex-basis
Duidelijke tutorial over flex-grow, flex-shrink, flex-basis en hun onderlinge samenhang.

dev.to/smpnjn/a-complete-interactive-guide-to-css-flex-box
Met heel weinig tekst wordt behulp van knoppen op een uiterst simpele en duidelijke manier getoond, wat voor effect de verschillende waarden hebben.

developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
Uitleg over het gebruik van flexbox. Met de gebruikelijke uitgebreidheid en grondigheid van Mozilla.

flexbox.help
De werking van verschillende eigenschappen en waarden uitproberen. Heel simpel en heel duidelijk.

flexbox.malven.co
Soort spiekbriefje met voorbeelden. Als je op 'n voorbeeld klikt, wordt de code gekopieerd.

flexboxlabs.netlify.app
Met behulp van knoppen de eigenschappen van flexbox demonstreren.

flexboxdefense.com
Tutorial in de vorm van een spelletje met bewegende doelen.

flexboxfroggy.com
Uiterst duidelijke (en leuke) tutorial in de vorm van een spelletje met kikkers.

ishadeed.com/article/css-flex-property
Uitgebreide tutorial over flex (flex-grow, flex-shrink en flex-basis).

joshwcomeau.com/css/interactive-guide-to-flexbox
Uitgebreide interactieve tutorial over flexbox.

onextrapixel.com/flexbox-centering-guide
Artikel met tal van voorbeelden over verticaal en/of horizontaal centreren met behulp van flexbox.

philipwalton.github.io/solved-by-flexbox
Voorbeelden van enkele veel voorkomende lay-outproblemen die met behulp van flexbox opgelost kunnen worden.

smashingmagazine.com/2018/08/flexbox-display-flex-container
Deel 1 van een zeer uitgebreide tutorial over flexbox.
Deel 2 Deel 3 Deel 4

webdesign.tutsplus.com/t/tutorials/search/flexbox
Hele serie tutorials met praktische toepassingen van flexbox.

wpshout.com/css-flexbox-tutorial
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

float en Block Formatting Context

(Onderafdeling van CSS → Browser support en Release Notes)

smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context
Artikel over Block Formatting Context. Waarin bijvoorbeeld ook wordt uitgelegd waarom overflow: auto; helpt bij problemen met float.

Fonts, typografie, tekst, emoticons en lijnen

(Onderafdeling van CSS)

Als je fonts gebruikt in strijd met een licentie, kan dat tot schadeclaims van duizenden euro's leiden. Oók als je de gebruikte fonts gelijk verwijdert, nadat het is ontdekt! Controleer áltijd of het font echt volledig vrij en gratis gebruikt mag worden. Dit geldt ook voor fonts die bij aankoop al op de computer zijn geïnstalleerd! Als je een zoekmachine of verzamelsite gebruikt, controleer dan altijd de licentie op de originele site. En 'royalty free' hoeft niet te betekenen dat het gratis is: het kan ook betekenen dat je slechts één keer moet betalen en niet opnieuw voor elke publicatie.

Hulpmiddelen specifiek voor Unicode, entiteit opzoeken, en dergelijke zie HTML → Charsets, unicode, entiteiten.

text-shadow zie CSS → Schaduw.

Emoticons

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Emoticons die gedownload kunnen worden staan onder CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Uiterlijk, codepoints, en dergelijke staan bij Lijsten met karakters en/of opzoeken van entiteit, utf-8-code, codepoint, en dergelijke.

fullystacked.net/posts/using-emoji-on-the-web
Tutorial over het gebruik van emoticons op sites.

meowni.ca/posts/emoji-emoji-emoji
Uitleg over hoe emoticons worden weergegeven.

nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web
Artikel over de problemen die browsers hebben met het weergeven van emoticons.
Bovenstaand artikel is uit 2022, hier is een aanvulling erop uit 2024.

smashingmagazine.com/2016/11/character-sets-encoding-emoji
Uitleg over hoe emoticons worden weergegeven, met veel aandacht voor utf.

tonsky.me/blog/emoji
Uitleg over hoe emoticons worden weergegeven.

Font stacks

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

modernfontstacks.com
Vijftien verschillende fonts met verschillende stijlen die zonder het downloaden van extra fonts werken op (vrijwel) allebesturingssystemen.
Op github staat gedetailleerde info over wat waarop werkt.

@fontface (hulpmiddelen en theorie), FOUT, fonts vergelijken, info over fonts, en dergelijke

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Hulpmiddelen en theorie specifiek voor uniwidth fonts staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Uniwidth fonts.

Hulpmiddelen en theorie specifiek voor variabele en gekleurde fonts staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Variabele en gekleurde fonts.

Sites met webfonts om te downloaden zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Subsetting zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen of aanpassen (inclusief subsetting).

Weergave van fonts (subpixels, anti-aliasing, en dergelijke) staat bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Typografie.

charactercodes.net/font-character-map
Opzoeken welke karakters in een geïnstalleerd bestand zitten. Geeft ook meta-info over het font.

charactercodes.net/font-support
Opzoeken hoeveel karakters een geïnstalleerd font van een bepaald codeblok bevat.

debugbear.com/blog/website-font-performance
Uitgebreid artikel over de invloed van fonts op de snelheid.

css-tricks.com/the-best-font-loading-strategies-and-how-to-execute-them
Overzicht van technieken om webfonts (zo snel mogelijk) te downloaden.

david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont
Artikel met handvaten om na te gaan of je webfonts wel nodig hebt.

developer.chrome.com/blog/font-fallbacks
Uitgebreide tutorial hoe FOUT te voorkomen.

everythingfonts.com/woff-to-woff2
Font omzetten van WOFF naar WOFF2.

font-match.netlify.app
Twee uit te kiezen fonts over elkaar heen zetten, zodat je het verschil in grootte en dergelijke duidelijk kunt zien.

fontdrop.info
Allerlei info over een geinstalleerd font krijgen, zoals erin zittende karakters, otf-features, en dergelijke. Je kunt ook experimenteren met dingen als het aan- en uitzetten van ligaturen.

fontsquirrel.com/tools/webfont-generator
Code voor @font-face aanmaken en desgewenst eigen fonts omzetten naar benodigde formaten.

iainbean.com/posts/2021/5-steps-to-faster-web-fonts
Tips om webfonts sneller weer te geven.

learnui.design/blog/identifying-fonts
Allerlei manieren om achter de naam van een font te komen.

meowni.ca/font-style-matcher
Grootte van webfont met fallback-font vergelijken om FOUT te voorkomen. Een stuk tekst met beide fonts wordt over elkaar heen gezet, waardoor je heel precies het verschil kunt zien en corrigeren. Maakt ook de benodigde CSS voor de correcties aan.

nooshu.com/blog/2020/02/23/improving-perceived-performance-with-the-css-font-display-property
Uitgebreide tutorial over font-display.

phloe.co/dev/font-size
Tutorial hoe twee fonts even groot te krijgen met behulp van eigenschappen als font-size-adjust.

screenspan.net/fallback
Grootte van webfont met fallback-font vergelijken om FOUT te voorkomen. Een stuk tekst met beide fonts wordt over elkaar heen gezet, waardoor je heel precies het verschil kunt zien en corrigeren. Maakt ook de benodigde CSS voor de correcties aan.

simonhearne.com/2021/layout-shifts-webfonts
Zeer uitgebreide tutorial hoe webfonts zo snel mogelijk te laden en hoe FOUT te voorkomen.

wakamaifondue.com
Uitgebreid overzicht van mogelijkheden, karakters, enzovoort van een geïnstalleerd font krijgen.

web.dev/articles/font-best-practices
Tutorial met tips om webfonts zo efficiënt mogelijk te gebruiken. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Lijnen

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Afbeeldingen met lijnen zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video en dergelijke.

css-voorbeelden.nl/tekst/lijnen/tekst-105
Voorbeelden van <hr>'s die met behulp van CSS (fors) van uiterlijk zijn veranderd. Nederlandstalig.

pqina.nl/blog/drawing-decorative-lines-with-css
Met behulp van alleen CSS decoratieve lijnen maken.

sarasoueidan.com/blog/horizontal-rules
Tutorial over het opmaken van <hr>'s, waarbij rekening wordt gehouden met toegankelijkheid.

Typografie

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Algemene info over eenheden zie CSS → Eenheden, calc(), min(), en dergelijke. Hier staat alleen specifieke info over fonts en eenheden.

Lettergrootte aanpassen aan grootte van het venster zie CSS → Media Query's, Container Query's en Responsive Web Design → Overig.

Specifiek voor variabele en gekleurde fonts staat bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Variabele en gekleurde fonts.

Stijlen zoals cursief zie user-select en ::selection.

Subsetting zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen of aanpassen (inclusief subsetting).

Twee fonts met elkaar vergelijken zie CSS → Fonts, typografie, tekst, emoticons en lijnen → @fontface (hulpmiddelen en theorie), FOUT, fonts vergelijken, info over fonts, en dergelijke.

avark.agency/typeterms
Namen bij alle onderdelen van een letter en een regel. Als je op een naam klikt, krijg je meer uitleg. Engelstalig, maar door de illustraties levert dat geen problemen op, ook niet voor de minder bekende begrippen.

betterwebtype.com/5-keys-to-accessible-web-typography
Uitgebreid artikel over typografie en toegankelijkheid.

betterwebtype.com/web-typography-resources
Pagina met heel veel links naar sites met allerlei onderwerpen die met typografie en fonts te maken hebben. Na registratie kun je 'n gratis cursus typografie volgen.

bleech.de/en/blog/the-ups-and-downs-of-text-wrap-balance-and-a-polyfill
Artikel over de voor- en nadelen van text-wrap.

cjcid.com/essays/wrapping-long-words-css-html
Uitgebreide uitleg over <wbr>, , white-space, word-break, overflow-wrap en line-break en hoe deze te gebruiken voor woordafbreking.

clagnut.com/blog/2395
Uitgebreid artikel over het automatisch afbreken van woorden en hoe dat netjes te doen.

classic.typetester.org
Allerlei eigenschappen van één tot drie fonts uitproberen, zoals grootte, leading en tracking.

codepo8.github.io/typography-cheatsheet
Als je op een bepaald deel van een letter klikt, krijg je de Engelse naam van dat deel. (Omdat het overgrote deel van artikelen over typografie Engelstalig is, kan dit handig zijn.)

codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking
Zeer uitgebreid overzicht van manieren om (delen van) woorden op dezelfde regel te houden, of juist niet. Zelfs afbreken in het Chinees wordt behandeld.

coding-dude.com//wp/css/css-stroke-text
Tutorial over text-stroke.

css-tricks.com/styling-links-with-real-underlines
Tutorial over het gecontroleerd onderstrepen van links (en gewone tekst) met behulp van eigenschappen als text-underline-offset, text-decoration-thickness, en dergelijke.

css-tricks.com/understanding-web-fonts-getting
Inleiding in het gebruik van eigenschappen als font-feature-settings.

design.tutsplus.com/articles/the-ultimate-guide-to-basic-typography
Geïllustreerde uitleg van de belangrijkste typografische begrippen.

design.tutsplus.com/the-ultimate-guide-to-typography
Cursus typografie (in de vorm van video's, met ondertiteling). De nadruk ligt op het kiezen van het juiste font.

fedmentor.dev/posts/font-size-px
Uitleg waarom de eenheid px geen goed idee is voor lettergrootte, regelhoogte en letter-spacing.

fonts.google.com/knowledge
Aantal artikelen over van alles wat met typografie te maken heeft.

ishadeed.com/article/css-short-long-content
Overzicht van manieren om problemen met heel lange en heel korte woorden op te lossen.

ishadeed.com/article/balancing-text-css
Tutorial over text-wrap.

jkorpela.fi/x-height
Relatieve x-hoogte (aspect-ratio) van font berekenen.

joshcollinsworth.com/blog/never-use-px-for-font-size
Uitleg waarom px meestal geen goede eenheid is voor font-size en waarom em en rem dat wel zijn.

joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility
Uitgebreid artikel over het gebruik van de eenheden em, rem en px met betrekking tot toegankelijkheid.

learn.microsoft.com/en-us/typography/opentype/spec/featurelist
Overzicht van mogelijke waarden bij font-feature-settings. Met uitleg.

matuzo.at/blog/2023/how-browsers-zoom-text
Artikel over de vreemde manier waarop mobiele browsers soms een andere lettergrootte (niet of verkeerd) uitvoeren.

namecheap.com/visual/font-generator/whitespace
Tutorial over het gebruik van elf verschillende soorten 'spaties'.

open-type.surge.sh
Meest gebruikte eigenschappen van font-feature-setting in werking zien.

prowebtype.com
Online boek over typografie (tegen kleine betaling ook te downloaden).

simoncozens.github.io/feature-tags
Overzicht van font-feature-settings. Met voorbeelden.

sinja.io/blog/web-typography-quick-guide
Artikel met een overzicht van de belangrijkste css-eigenschappen voor typografie.

sinja.io/blog/get-maximum-out-of-your-font
Overzicht van een aantal font-feature-settings.

textlab.dev/posts/font-variant-numeric
Tutorial over font-variant-numeric.

tpgi.com/the-ballad-of-text-overflow
Artikel over de toegankelijkheidsproblemen die text-overflow kan opleveren, als dit wordt gebruikt om afgekapte tekst aan te geven.

typedesignresources.com
Lange lijst met links naar (vaak heel gespecialiseerde) onderwerpen over van alles over fonts.

typefully.com/DanHollick/how-text-is-rendered
Uitleg hoe fonts op een scherm worden opgebouwd.

wakamasifondue.com
Alle mogelijkheden van een font bekijken en CSS-variabelen aanmaken om deze te gebruiken, zodat bepaalde problemen met font-feature-settings worden omzeild.

webdesign.tutsplus.com/an-introduction-to-typeface-styles
Cursus in de vorm van video's over de vormgeving van fonts (met ondertiteling).

Uniwidth fonts

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Als je fonts downloadt, lees dan eerst de waarschuwing bovenaan CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Uniwidth fonts downloaden zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden). Hieronder staan alleen theoretische artikelen met mogelijk wat links naar fonts.

Uniwidth fonts zijn fonts, waarvan alle varianten even breed zijn. Dat kan handig zijn, als je erg weinig ruimte hebt, maar bijvoorbeeld toch vet wilt gebruiken.

uxdesign.cc/uniwidth-typefaces-for-interface-design
Uitleg wat uniwidth fonts zijn. Met links naar een aantal (gratis) fonts.

user-select en ::selection

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

codersblock.com/blog/using-css-to-control-text-selection
Uitgebreide uitleg over de werking van user-select bij het (voorkomen van) tekst selecteren.

ishadeed.com/article/selection-in-css
Artikel over het gebruik van ::selection en user-select om tekst te selecteren, of dat juist onmogelijk te maken.

Variabele en gekleurde fonts

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Als je fonts downloadt, lees dan eerst de waarschuwing bovenaan CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Variabele en gekleurde fonts staan bij elkaar, omdat het er dik in zit dat binnenkort gekleurde fonts ook variabel zijn, en omgekeerd.

Meer algemene hulpmiddelen (niet specifiek voor variabele en/of gekleurde fonts) staan bij CSS → Fonts, typografie, tekst, emoticons en lijnen → @fontface (hulpmiddelen en theorie), FOUT, fonts vergelijken, info over fonts, en dergelijke.

Variabele en gekleurde fonts downloaden zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden). Hieronder staan alleen theoretische artikelen met mogelijk wat links naar fonts.

24ways.org/2019/an-introduction-to-variable-fonts
Uitgebreide uitleg over de werking van variabele fonts.

css-tricks.com/colrv1-and-css-font-palette-web-typography
Tutorial over @font-palette-values (meerkleurige fonts) met de bijbehorende eigenschappen.

design.tutsplus.com/articles/how-to-use-variable-fonts-on-the-web
Tutorial over variabele fonts. Met veel links en een gedetailleerd voorbeeld.

evilmartians.com/chronicles/variable-fonts-in-real-life-how-to-use-and-love-them
Tutorial over variabele fonts met ook wat theorie over de opbouw en dergelijke.
Vervolg-artikel, meer gericht op de praktische toepassing: the-joy-of-variable-fonts-getting-started-on-the-frontend.

fullystacked.net/posts/new-font-face-syntax
@font-face en de syntax voor variabele en gekleurde fonts.

medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world
Praktijkvoorbeeld van het gebruik van variabele fonts.

pimpmytype.com/variable-font-fallback
Tutorial over fallback-fonts voor oudere browsers die variabele fonts niet ondersteunen.

pimpmytype.com/variable-fonts-on-the-web
Uiterst duidelijke uitleg wat variabele fonts zijn en hoe deze te gebruiken.

play.typedetail.com
Uitproberen van en code genereren voor variabele fonts. Met links naar de fonts zelf, waaronder veel open source fonts en dergelijke. (De link staat goed verstopt helemaal linksonder aan de pagina.)

v-fonts.com
Uitproberen van allerlei eigenschappen van variabele fonts. Geeft een goed overzicht van de mogelijkheden van variabele fonts. Er zijn ook wat links naar open source variabele fonts.

variablefonts.dev/getting-started
Tutorial hoe variabele fonts te gebruiken.

variablefonts.dev/posts/using-color-fonts
Tutorial hoe gekleurde fonts te gebruiken.

webdesign.tutsplus.com/up-and-running-with-variable-fonts
Uitgebreide cursus in de vorm van video's (met ondertiteling).

webkit.org/blog/12662/customizing-color-fonts-on-the-web
Uitleg over @font-palette-values (meerkleurige fonts) met de bijbehorende eigenschappen.

Webfonts (om te downloaden)

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Als je fonts gebruikt in strijd met een licentie, kan dat tot schadeclaims van duizenden euro's leiden. Oók als je de gebruikte fonts gelijk verwijdert, nadat het is ontdekt! Controleer áltijd of het font echt volledig vrij en gratis gebruikt mag worden. Dit geldt ook voor fonts die bij aankoop al op de computer zijn geïnstalleerd! Als je een zoekmachine of verzamelsite gebruikt, controleer dan altijd de licentie op de originele site. Ook op de hieronder genoemde sites moet je áltijd de licentie goed controleren! Niet op elke site is alles gratis.

'Royalty free' hoeft niet te betekenen dat het gratis is: het kan ook betekenen dat je slechts één keer moet betalen en niet opnieuw voor elke publicatie. 'Free to download' betekent vaak inderdaad: gratis downloaden. Maar ook niet meer dan dat: voor gebruik moet je vaak betalen.

Helaas is er een toenemend aantal sites met in de kop of naam iets als 'publicdomain' of 'free', terwijl je gewoon moet betalen. Lees daarom ALTIJD de licentie bij de site en/of bij het betreffende onderdeel. Als er geen licentie is, is het heel simpel: niet gebruiken. En als 'n licentie langer is dan zo'n twee schermen, of volkomen onleesbaar (nep-)juridisch blabla: ook niet gebruiken. Tenzij je geld te veel hebt. (Meestal is een licentie te vinden in het menu of onderaan de pagina onder een naam als 'Terms', 'Stuff', 'License', of iets dergelijks.)

Bij controles van hier vermelde sites blijkt regelmatig dat sites plotseling hun licentie fors gewijzigd hebben, bijvoorbeeld omdat ze zijn verkocht. Het is dus echt belangrijk dat je zelf de voorwaarden voor gebruik leest, want deze kunnen inmiddels zijn gewijzigd.

En ook als de (volledige of gedeeltelijke) inhoud van een site gratis is, kan een licentie nog wel aanvullende voorwaarden stellen. Zoals dat het materiaal niet gebruikt mag worden voor porno, of dat vermeld moet worden waar het vandaan komt.

Onder het kopje Juridisch is meer te vinden over de juridische kant van de zaak.

Als je webfonts niet meelevert vanaf je eigen site, maar met behulp van een link naar bijvoorbeeld fonts.google.com, is er een grote kans dat je actief meehelpt bij het bespioneren van je bezoekers. Zonder dat je bezoekers daar ook maar iets van merken. Als je een webfont wilt gebruiken, lever dat dan mee vanaf je eigen site!

Bij CSS → Fonts, typografie, tekst, emoticons en lijnen → @fontface (hulpmiddelen en theorie), FOUT, fonts vergelijken, info over fonts, en dergelijke vind je sites, waar je hier eenvoudig code voor kunt aanmaken. Specifiek voor fonts van Google staan iets hieronder bij fonts.google.com soortgelijke mogelijkheden en nog wat links naar sites met meer algemene info over Google fonts.

Losse afbeeldingen met een enkel icoon zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video en dergelijke.

Uniwidth fonts: als het een theoretisch artikel is met ook wat fonts erbij, kan dat ook bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Uniwidth fonts staan.

Variabele en gekleurde fonts: als het een theoretisch artikel is met ook wat fonts erbij, kan dat ook bij CSS → Fonts, typografie, tekst, emoticons en lijnen → Variabele en gekleurde fonts staan.

Zelf fonts samenstellen zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen of aanpassen (inclusief subsetting).

bestfreefonts.com
158 fonts onder een open source licentie.

dafont.com
Grote verzameling fonts, waarvan veel gratis.

fontlibrary.org
Webfonts waarvan een deel onder een vrije licentie gebruikt kan worden. Als je een categorie kiest, kun je vervolgens rechts op licentie filteren.

fonts.bunny.net
Privacyvriendelijk alternatief voor het hosten van fonts bij Google. Compatibel met Google fonts, dus uiterst simpel te veranderen. (<mopper>In een fatsoenlijke wereld zou dit normaal zijn, en zou Google het veel kleinere alternatief voor verstokte datadieven zijn.</mopper>)

fonts.google.com
Site met gratis te gebruiken webfonts van onder andere Google.
Twee Google webfonts zoeken die bij elkaar passen: eerste font opzoeken en handmatig uit alle andere fonts bijpassend font zoeken of suggesties voor bijpassend font krijgen.
gwfh.mranftl.com/fonts: Google font uitzoeken, css aanmaken en font downloaden om zelf te hosten. Zodat je niet (onbedoeld) Google laat weten, wie er allemaal jouw site bezoekt.
Op tryblackbird.com staat nog een verhaal over hoeveel sneller het zelf hosten kan zijn.
Op wpspeedmatters.com staat een overzicht van de voordelen van zelf hosten van Google fonts.
En dan nog 'n leuk verhaal op css-irl.info over wat er kan gebeuren als Google (of 'n andere hoster van je fonts) onverwacht z'n fonts wijzigt.
Als je beslist je fonts ergens anders wilt hosten, staat gelijk hierboven bij fonts.bunny.net een privacyvriendelijk alternatief voor Google.

fontsforweb.com
Enorme hoeveelheid fonts, waarvan heel veel open source. Ingedeeld in heel veel soorten.

fontshare.com
Vrij te gebruiken fonts.

fontsource.org
Grote hoeveelheid open source fonts.

fontsquirrel.com
Grote hoeveelheid gratis te gebruiken webfonts. Eigen fonts omzetten naar webfonts, met bijbehorende CSS (onder de tab 'Webfont Generator').

freefaces.gallery
Fonts onder diverse open licenties. Sommige hebben ook een variabele variant.

github.com/Vectopus/Atlas-icons-font
Open source font met ruim 2700 symbolen.

learnui/design/blog/ultimate-guide-similar-fonts
Lijst met vrij te gebruiken alternatieven voor veel gebruikte commerciële fonts.

online-fonts.com
Grote hoeveelheid webfonts, waarvan veel vrij gebruikt mogen worden. Je kunt zoeken op welke fonts een bepaalde taal ondersteunen.

openmoji.org
Emoticons onder een Creative Commons-licentie.

theleagueofmoveabletype.com
Open source fonts.

variablefonts.dev/all-font-lists
Aantal variabele en gekleurde fonts, ingedeeld naar type, waaronder een aantal vrij te gebruiken.

vorillaz.github.io/devicons/
Webfont met icoontjes die met het maken van sites te maken (kunnen) hebben, zoals tal van logo's.

Zelf font samenstellen of aanpassen (inclusief subsetting)

(Onderafdeling van CSS → Fonts, typografie, tekst, emoticons en lijnen)

Overzichten met utf-8-codes, entiteiten, en dergelijke zie HTML → Charsets, unicode, entiteiten → Lijsten met karakters en/of opzoeken van entiteit, utf-8-code, codepoint, en dergelijke.

cloudfour.com/thinks/font-subsetting-strategies-content-based-vs-alphabetical
Artikel over de voor- en nadelen van verschillende manieren van subsetting.

everythingfonts.com/subsetter
Subset uit een font extraheren. Keuze uit een groot aantal subsets.

fontello.com
Zelf een webfont samenstellen uit een groot aantal iconen. Het font wordt in alle benodigde formaten aangemaakt.

glyphter.com
Zelf een webfont samenstellen uit een groot aantal iconen. Het font wordt in alle benodigde formaten aangemaakt.

jakearchibald.com/2017/combining-fonts
Uitleg hoe één (of meer) tekens uit een font te vervangen door tekens uit een ander font, zonder twee volledige fonts te downloaden.

paulcalvano.com/2024-02-16-identifying-font-subsetting-opportunities
Artikel over de invloed van webfonts op de snelheid van de pagina. Met links naar hulpmiddelen om die met subsetting te verbeteren.

Forms, buttons, :disabled, :enabled, checkbox hack, en dergelijke

(Onderafdeling van CSS)

(Code voor) kant-en-klare knoppen en dergelijke zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

HTML voor formulieren (inclusief valideren) zie HTML → Formulieren, <input>, en dergelijke.

adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

adrianroselli.com/2021-03/under-engineered-select-menus.html
Tutorial over het opmaken van <select>.

adrianroselli.com/2019/09/under-engineered-text-boxen
Tutorial over het opmaken van <textarea>.

austingil.com/build-html-forms-right-styling
Uitgebreide tutorial over het opmaken van formulieren (onderdeel van een serie over formulieren).

codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment
Artikel over hoe zelfgemaakte radioknoppen en keuzevakjes goed uit te lijnen met hun <label>.

css-tricks.com/custom-styling-inputs-with-modern-css-features
Tutorial over het opmaken van <input type="radio"> en <input type="checkbox">.

css-tricks.com/fun-times-styling-checkbox-states
Voorbeelden voor het opmaken van een (niet-)aangekruist keuzevakje.

css-tricks.com/styling-cross-browser-compatible-range-inputs-css
<input type="range"> er in alle browsers hetzelfde uit laten zien.

css-voorbeelden/tekst/bewerken
Onderdelen van een formulier in- en uitschakelen met behulp van enabled en disabled. Nederlandstalig.

developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling
Tutorial hoe verschillende onderdelen van een formulier op te maken.

filamentgroup.com/lab/select-css
Uitleg over het opmaken van <select> in verschillende browsers.

hongkiat.com/blog/html5-range-slider-style
<input type="range"> er in alle browsers hetzelfde uit laten zien.

ishadeed.com/article/styling-the-good-old-button
Zeer uitgebreide tutorial over het opmaken van <button>.

moderncss.dev/pure-css-custom-checkbox-style
Tutorial voor het opmaken van keuzevakjes op een toegankelijke manier.

moderncss.dev/pure-css-custom-styled-radio-buttons
Tutorial voor het opmaken van radioknoppen op een toegankelijke manier.

sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons
Tutorial over het opmaken van keuzevakjes en radioknoppen, terwijl ze toegankelijk blijven.

scottaohara.github.io/a11y_styled_form_controls
Onderdelen van formulieren opmaken op een manier dat ze toch toegankelijk blijven.

smashingmagazine.com/2021/09/simplyfing-form-styles-accent-color
Tutorial over accent-color (basiskleur voor onderdelen van formulieren).

webdesign.tutsplus.com/the-best-css-checkbox-hack-tutorials-on-tuts
Acht voorbeelden van wat je kunt doen met behulp van de checkbox hack, inclusief zeven volledige tutorials.

Forums

(Onderafdeling van CSS)

Omdat CSS, HTML en JavaScript elkaar sterk (kunnen) beïnvloeden, en omdat forums daarover ook nogal door elkaar lopen, staan forums over die drie onderwerpen hier bij elkaar.

css-voorbeelden.nl/forum
Forum van deze site. Nederlandstalig. Bedoeld voor vragen en dergelijke over de voorbeelden op deze site, maar je kunt het altijd proberen...

helpmij.nl/forum/Website-maken-Programmeren
Algemeen forum over het maken van websites. Nederlandstalig.

phphulp.nl/php/forum/javascript
Nederlandstalig forum over JavaScript.

phphulp.nl/php/forum/xhtml-css
Nederlandstalig forum over HTML en CSS.

Generated content, ::after, ::before, en dergelijke

(Onderafdeling van CSS)

counter() en counters() zie CSS → Menu's, lijsten, counter(), ::marker, en dergelijke.

adrianroselli.com/2020/10/alternative-text-for-css-generated-content
Artikel over alternatieve tekst voor schermlezers bij gebruik van 'content'.

codersblock.com/blog/diving-into-the-before-and-after-pseudo-elements
Uitgebreide tutorial met voorbeelden over ::after en ::before.

matuzo.at/blog/heres-what-i-didnt-know-about-content
Artikel over de mogelijkheden (en risico's) van 'content'.

Gradiënten

(Onderafdeling van CSS)

(Min of meer) kant-en-klare gradiënten, online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

codepen.io/keithjgrant
Vergelijkend overzicht van dezelfde gradiënten in verschillende colorspaces.

joshwcomeau.com/css/make-beautiful-gradients
Waarom gradiënten vaak een 'grauw' middendeel hebben en hoe dit te voorkomen.

patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients
Heel gedetailleerde uitleg over radial-gradient.

smashingmagazine.com/2022/01/css-radial-conic-gradient
Uitgebreide uitleg over (het gebruik van) radial-gradient en conic-gradient.

webdesign.tutsplus.com/how-to-use-gradients-on-the-web
Uiterst overzichtelijke tutorial over gradiënten.

Grid

(Onderafdeling van CSS)

Inmiddels staan er op internet 3.769.980.417 tutorials en dergelijke over Grid en komen er per seconde 47 bij. Hieronder staat een heel kleine selectie van tutorials en dergelijke die er om een of andere reden wat uitspringen, bijvoorbeeld omdat ze heel erg duidelijk zijn. Er zijn ongetwijfeld nog veel meer goede sites over grid te vinden, maar wat hieronder staat, is in ieder geval kwalitatief goed.

Meer algemene artikelen over display, boxmodel, en dergelijke (waar grid een onderdeel van kan zijn) staan bij Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke).

Min of meer kant-en-klare lay-outs gebaseerd op Grid zie CSS → Lay-outs.

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Overzichtsartikelen over alle eenheden en bijbehorende functies staan bij CSS → Eenheden, calc(), min(), en dergelijke. Hier staan alleen artikelen specifiek over fr en minmax().

writing-mode zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

12daysofweb.dev/2022/css-subgrid
Voorbeelden van het gebruik van subgrid.

blog.logrocket.com/css-grid-guide
Uitgebreide tutorial met duidelijke voorbeelden en links naar meer info.

codingfantasy.com/games/css-grid-attack/play
Interactieve tutorial in de vorm van een spel met één lieverd en 'n stel booswichten. Om het spel volledig te spelen is registratie nodig.

css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs
Tutorial voor een flexibele lay-out met minimaal gebruik van grid.

css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit
Duidelijke uitleg over het verschil tussen auto-fill en auto-fit.

css-tricks.copm/snippets/css/css-grid-starter-layouts
Voorbeelden van veel voorkomende lay-outs, maar dan gemaakt met behulp van grid. Inclusief code.

css-tricks.com/snippets/css/complete-guide-grid
Systematisch overzicht van eigenschappen. Met afbeeldingen die het effect van de eigenschappen laten zien.

css-tricks.com/difference-explicit-implicit-grids
Artikel over het verschil tussen expliciete en impliciete grids.

css-tricks.com/introduction-fr-css-unit
Uitgebreide uitleg over de fr-eenheid.

cssgridgarden.com/#nl
Grid leren met behulp van een interactief spel (Nederlandstalig).

dev.to/mustapha/css-grid-illustrated-introduction
Overzichtelijke tutorial die stap voor stap de verschillende eigenschappen behandelt.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
Tutorial met de gebruikelijke grondigheid van Mozilla.

freecodecamp.org/news/complete-guide-to-css-grid
Uitgebreide interactieve tutorial in boekvorm.

ishadeed.com/article/css-grid-area
Tutorial over grid-template-areas.

ishadeed.com/article/css-grid-minmax
Tutorial over minmax() bij grid.

ishadeed.com/article/learn-css-subgrid
Tutorial over subgrid. Met een aantal praktische voorbeelden.

joshwcomeau.com/css/interactive-guide-to-grid
Interactieve tutorial.

matuzo.at/blog/the-dark-side-of-the-grid
Serie artikelen over toegankelijkheid en grid en hoe eventuele problemen te voorkomen.

mozilladevelopers.github.io/playground/css-grid
Tutorial met voorbeelden en uitleg hoe developertools te gebruiken voor grid. De code van de voorbeelden kan worden gewijzigd, waardoor je gelijk het effect van veranderingen ziet.

sitepoint.com/css-grid-repeat-function
Tutorial over repeat().

smashingmagazine.com/2020/01/understanding-css-grid-container
Uitgebreide meerdelige tutorial over grid.

testdriven.io/blog/css-grid
Uiterst overzichtelijke tutorial over grid.

wpshout.com/css-grid-tutorial-layout
Uitgebreide interactieve tutorial. Met mogelijkheid om content van rechts naar links te laten lopen.

Hulpmiddelen

(Onderafdeling van CSS)

Gecomprimeerde CSS weer leesbaar maken, SCSS omzetten naar gewone CSS, en dergelijke zie Gereedschap → Code leesbaar maken.

Comprimeren, ongebruikte CSS verwijderen, en dergelijke zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren.

Kleuren

(Onderafdeling van CSS)

Hieronder is ook meer algemene informatie over de opbouw van het oog, de opbouw van kleuren, en dergelijke te vinden.

Gradiënten zie CSS → Gradiënten.

Kleurenblindheid (soorten, voorkomen van problemen, en dergelijke) is te vinden bij Toegankelijkheid → Contrast en kleurenblindheid.

Online kleuren samenstellen, kleurenpalet samenstellen, converteren, en dergelijke zie Gereedschap → Kleuren.

12daysofweb.dev/2024/css-light-dark
Tutorial over light-dark().

abhisaha.com/blog/interactive-post-oklch-color-space
Interactieve tutorial over oklch().

blog.logrocket.com/exploring-css-color-module-level-5
Overzicht van nieuwe functies en dergelijke uit CSS Color Module Level 5.

blog.logrocket.com/oklch-css-consistent-accessible-color-palettes
Tutorial over oklch().

cloudfour.com/thinks/hsl-a-color-format-for-humans
Uitleg over hsl()-notatie en vergelijking daarvan met de hexadecimale notatie.

colorandcontrast.com
Artikel over de bouw van het oog, theorie van kleuren, contrast, en dergelijke. Omdat je op verschillende plaatsen instellingen kunt veranderen, wordt ook goed zichtbaar hoe simpel je oog is te misleiden.

css-tricks.com/nerds-guide-color-web
Overzichtsartikel over de opbouw van kleuren, eigenschappen die met kleur te maken hebben, voorbeelden, en dan nog wat meer.

developer.chrome.com/blog/css-relative-color-syntax
Tutorial over de color()-functie.

developer.chrome.com/docs/css-ui/high-definition-css-color-guide
Uitgebreid vergelijkend overzicht van alle denkbare kleur-formaten. Met uitgebreide theoretische onderbouwing.

developer.mozilla.org/en-US/blog/color-palettes-css-color-mix
Tutorial over color-mix().

developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors
Tutorial over de color()-functie.

ericportis.com/posts/2024/okay-color-spaces
Uitleg hoe colorspaces zoals rgb(), oklab() en oklch() zijn opgebouwd.

evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
Vergelijking tussen oklch(), rgb() en hsl().

frontendmasters.com/blog/using-currentcolor-in-2025
currentCollor vergeleken met CSS-variabelen.

ishadeed.com/article/css-color
Uitgebreid artikel over alle manieren om met css kleuren te definiëren, veranderen, en noem maar op.

ishadeed.com/article/css-relative-colors
Tutorial over relatieve kleuren.

joshwcomeau.com/css/color-formats
Vergelijkend overzicht van alle manieren om kleuren te definiëren in CSS.

keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color
Tutorial over oklch().

medium.com/dev/channel/css-hex-colors-demystified
Uiterst gedetailleerde uitleg over hexadecimale waarden bij kleuren.

smashingmagazine.com/2021/07/hsl-colors-css
Tutorial over hsl(), met praktische voorbeelden.

smashingmagazine.com/2023/08/oklch-color-spaces-gamuts-css
Tutorial over oklch().

web.dev/articles/light-dark
Tutorial over light-dark().

xhtml5.nl/naslag/kleuren
Nederlandstalig overzicht van in CSS gebruikte namen en bijbehorende hexadecimale codes.

Kolommen (inclusief column-...)

(Onderafdeling van CSS)

break-before, break-after en dergelijke staan bij CSS → Printen (inclusief @page, page-break-..., en dergelijke).

Min of meer kant-en-klare lay-outs met soms kolommen zie CSS → Lay-outs.

css-tricks.com/revisiting-css-multi-column-layout
Artikel hoe met behulp van nieuwere eigenschappen tal van problemen met kolommen kunnen worden opgelost.

pepelsbey.dev/articles/two-columns
Zes (min of meer) goede en vijf (min of meer) slechte technieken om een lay-out met twee kolommen te maken.

smashingmagazine.com/2019/01/css-multiple-column-layout-multicol
Tutorial over CSS-kolommen met voor- en nadelen, hoe ze op dit moment bruikbaar kunnen zijn en over toekomstige ontwikkelingen.

Lay-outs

(Onderafdeling van CSS)

Sectievormenden elementen zoals <section> en <nav> zie HTML → Kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>).

Theorie over boxmodel, positioneren, en dergelijke is te vinden onder Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke).

Tutorials (met soms voorbeelden) over Flexbox zie CSS → Flexbox.

Tutorials (met soms voorbeelden) over Grid zie CSS → Grid.

Tutorials (met soms voorbeelden) over kolommen zie CSS → Kolommen (inclusief column-...).

css-voorbeelden.nl/lay-out
Ingangspagina naar voorbeelden en uitleg over lay-outs. Nederlandstalig.

htmlrev.com
Vrij te gebruiken lay-outs. Onder de knop HTML staan lay-outs die alleen HTML en CSS gebruiken.

html5up.net
CSS-lay-outs onder een Creative Commons-licentie.

quackit.com/html/templates
Grote hoeveelheid vrij te gebruiken lay-outs.

templated.co
Lay-outs onder een Creative Commons-licentie.

themewagon.com
Lay-outs waarvan veel vrij te gebruiken onder verschillende licenties.

Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke

(Onderafdeling van CSS)

lang-attribuut en (meerdere) talen zie Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke → Taal en lang-attribuut.

Logical properties specifiek voor één eigenschap (zoals padding-inline en border-start-start-radius) staan in principe bij die specifieke eigenschap. Hier staan alleen de meer theoretische achtergronden.

adrianrosellil.com/2019-11/css-logical-properties
Uitleg over logical properties. Met handige 'vertaaltabel' tussen oude en nieuwe eigenschappen en waarden.

css-tricks.com/css-logical-properties-and-values
Uitgebreide tutorial over logical properties, met steeds overzichtelijk het verschil met de 'gewone' eigenschappen.

ishadeed.com/article/css-logical-properties
Tutorial over logical properties.

rtlstyling.com/posts/rtl-styling
Zeer uitgebreide tutorial over verschillende tekstrichtingen en de samenhang daarvan met tal van andere eigenschappen.

smashingmagazine.com/2019/08/writing-modes-layout
Artikel over writing-mode met de nadruk op de samenhang met flexbox en grid.

webdesign.tutsplus.com/an-introduction-to-css-logical-properties
Cursus in de vorm van video's over logical properties (met ondertiteling).

Media Query's, Container Query's en Responsive Web Design

(Onderafdeling van CSS)

Browser sniffing zie Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen → Algemeen.

Specifiek voor e-mail zie Gereedschap → E-mail ontwerpen.

Specifiek voor video's zie HTML → <audio>, <embed>, <iframe>, <object> en <video> → Theorie, code en voorbeelden.

Viewport, dpi, ppi, verschil tussen CSS-pixels en device-pixels, dingen die specifiek voor mobiele apparatuur gelden, en dergelijke zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>)

(Onderafdeling van CSS → Media Query's, Container Query's en Responsive Web Design)

Achtergrond-afbeeldingen zie CSS → background, background-image, image-set(), sprites, en dergelijke.

alt-attribuut zie Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke → alt-attribuut.

border-image zie CSS → border-image, borders, hoeken, figuren en outline.

CLS (Cumulative Layout Shift) zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Snelheid (theorie en verbeteren).

<figure> en <figcaption> zijn niet alleen bedoeld voor afbeeldingen en staan bij HTML → <figure> en <figcaption>.

Figuren maken met behulp van alleen CSS zie CSS → border-image, borders, hoeken, figuren en outline.

Gereedschappen om afbeeldingen te bewerken, converteren, enz. staan bij Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren. Hieronder staan alleen de links naar meer theoretische artikelen en dergelijke.

Sites, artikelen, en dergelijke die over meer dan alleen afbeeldingen gaan, staan gelijk hieronder bij CSS → Media Query's, Container Query's en Responsive Web Design → Overig.

cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images
Artikel over een juist gebruik van loading="lazy".

compress-or-die.com/Understanding-PNG
Uitgebreide uitleg hoe een PNG is opgebouwd.

compress-or-die.com/Understanding-JPG
Uitgebreide uitleg hoe een JPG is opgebouwd.

css-tricks.com/the-complete/guide/to-lazy-loading-images
Uitgebreide uitleg over 'lazy loading', met overzicht van verschillende technieken om dat te doen.

css-voorbeelden-nl/afbeelding/overig/afbeelding-117
Voorbeeld van art direction (verschillende afbeeldingen afhankelijk van grootte en dergelijke van venster) met behulp van <picture>. Nederlandstalig.

danburzo.ro/responsive-images-html
Tutorial met een overzicht van verschillende soorten responsieve afbeeldingen.

evanhahn.com/worlds-smallest-png
Uitleg hoe een PNG is opgebouwd.

evilmartians.com/chronicles/decoding-avif-deep-dive-with-cats-and-imgproxy
Uiterst leesbare vergelijking tussen AVIF en andere formaten.

imagekit.io/blog/how-to-resize-image-in-html
Overzicht van manieren (en nadelen) van het verkleinen van afbeeldingen bij de cliënt (in de browser).

imagekit.io/blog/lazy-loading-images-complete-guide
Uitgebreid artikel over de werking van 'lazy loading'.

imagekit.io/responsive-images
Uitgebreide tutorial over responsieve afbeeldingen.

jakearchibald.com/2020/avif-has-landed
Vergelijking tussen het AVIF-formaat en andere formaten.

jakearchibald.com/2021/serving-sharp-images-to-high-density-screens
Uiterst leesbare uitleg hoe met relatief weinig moeite afbeeldingen scherp weer te geven op hogeresolutieschermen.

jakearchibald.com/2022/img-aspect-ratio
Artikel over het verschil tussen width, height en aspect-ratio bij afbeeldingen, en wanneer wat te gebruiken.

parametric.press/issue-01/unraveling-the-jpeg
Uitleg over hoe een JPG-afbeelding wordt gecomprimeerd.

smashingmagazine.com/2021/04/humble-img-element-core-web-vitals
Overzicht van alle manieren om een afbeelding zo snel mogelijk in de juiste resolutie op de juiste grootte weer te geven.

smashingmagazine.com/2021/09/modern-image-formats-avif-webp
Uitgebreid artikel over het AVIF- en het WebP-formaat.

stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element
Artikel over de invloed van afbeeldingen op snelheid en dataverbruik, met tips om dit te optimaliseren.

unwttng.com/compression-decompressed
De theoretische basis van het optimaliseren van afbeeldingen, video, en dergelijke uitgelegd.

web.dev/learn/images
Uitgebreide cursus afbeeldingen, inclusief formaten, responsieve afbeeldingen, en dergelijke. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webdesign.tutsplus.com/quick-tip-how-to-use-html5-picture-for-responsive-images
Tutorial over <picture>.

wpshout.com/responsive-images
Tutorial hoe afbeeldingen responsief te maken.

Overig

(Onderafdeling van CSS → Media Query's, Container Query's en Responsive Web Design)

Algemene artikelen over eenheden en bijbehorende functies zie CSS → Eenheden, calc(), min(), en dergelijke. Hieronder staan alleen clamp(), als dat specifiek wordt gebruikt om de lettergrootte aan te passen aan het browservenster, en artikelen en dergelijke specifiek over de bij Container Query's gebruikte eenheden cq...

Testen in verschillende resoluties zie Gereedschap → Weergave en dergelijke testen.

Viewport, dpi, ppi, verschil tussen CSS-pixels en device-pixels, dingen die specifiek voor mobiele apparatuur gelden, en dergelijke zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

12daysofweb.dev/2021/container-queries
Tutorial over Container Query's.

blog.logrocket.com/elements-responsive-typography
Verschillende manieren om de lettergrootte aan te passen aan de grootte van het venster.

css-tricks.com/a-few-times-container-size-queries-would-have-helped-me-out
Praktische voorbeelden van het gebruik van Container Query's.

css-tricks.com/css-container-queries
Tutorial over Container Query's.

css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions
Artikel over mogelijke problemen met de media query's pointer, any-pointer, hover en any-hover.

developer.chrome.com/docs/css-ui/style-queries
Tutorial over Container style().

developer.mozilla.org/en-US/blog/getting-started-with-css-container-queries
Tutorial over Container query's.

fluid-type-scale.com
Code aanmaken voor lettergrootte die zich aanpast aan de breedte van het venster.

github.com/sturobson/Awesome-Container-Queries
Pagina met links naar van alles over Container Query's.

ishadeed.com/article/css-container-query-guide
Interactieve tutorial over Container Query's.

ishadeed.com/article/say-hello-to-css-container-queries
Tutorial over Container Query's.

joshwcomeau.com/css/container-queries-introduction
Tutorial over Container Query's.

joshwcomeau.com/css/container-queries-unleashed
Tutorial over Container Query's met praktische voorbeelden.

modern-fluid-typography.vercel.app
Code aanmaken voor lettergrootte die zich aanpast aan de breedte van het venster.
De zeer uitgebreide theoretische onderbouwing van dit gereedschap, inclusief mogelijke problemen, is te vinden op smashingmagazine.com.

moderncss.dev/container-query-units-and-fluid-typography
Tutorial hoe lettergrootte automatisch aan te passen met behulp van Container Query's.

oddbird.net/2022/08/18/cq-syntax/
Tutorial over Container Query's, waarin ook de verschillen tussen eerdere en recente syntax worden belicht.

polypane.app/blog/the-complete-guide-to-css-media-queries
Zeer uitgebreide tutorial over media query's.

smashingmagazine.com/2021/05/complete-guide-css-container-queries
Tutorial over container query's.

smashingmagazine.com/2022/03/guide-hover-pointer-media-queries
Tutorial over de media query's hover, pointer, any-hover en any-pointer.

smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type
Atrikel over mogelijke problemen met toegankelijkheid bij gebruik van clamp() voor de lettergrootte.

smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for
Tutorial over Container Query's.

stackdiary.com/css-media-queries
Tutorial over media query's.

techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/container-query-length-units
Tutorial over de bij Container Query's gebruikte eenheden cqw, cqh, cqi, cqb, cqmax en cqmin.

tobiasahlin.com/blog/responsive-fluid-css-type-scales
Gedetailleerde uitleg hoe lettergrootte aan te passen aan breedte van het venster.

udacity.com/course/responsive-web-design-fundamentals
Cursus responsieve site maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

utopia.fyi/type/calculator
Lettergroottes uitproberen om vloeiend aan te passen aan de venstergrootte.
Bijbehorende pagina met demo.
Bijbehorende theoretische onderbouwing.
Twee eenvoudiger uitvoeringen van deze calculator zijn te vinden op 9elements.com en op utopia.fyi/clamp/calculator.

web.dev/learn/design
Interactieve cursus Responsive Web Design. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webdesign.tutsplus.com/introduction-to-css-container-queries
Cursus Container Query's in de vorm van video's (met ondertiteling).

Menu's, lijsten, counter(), ::marker, en dergelijke

(Onderafdeling van CSS)

Uitklapmenu's (dropdownmenu's) werken heel vaak niet of niet goed op touchscreens. Als er niet nadrukkelijk bij staat dat ze zijn getest (en werken) op touchscreens, kun je er waarschijnlijk vanuit gaan dat ze niet (goed) werken op een touchscreen. Ook zijn veel menu's volstrekt ontoegankelijk voor schermlezers en dergelijke.

blog.logrocket.com/styling-numbered-lists-with-css-counters
Tutorial over het gebruik van counters bij lijsten.

css-tricks.com/list-markers-and-string-styles
Artikel over welke eigenschappen je wel en niet kunt gebruiken bij het opmaken met behulp van ::marker, inclusief bugs.

css-tricks.com/some-things-you-might-not-know-about-custom-counter-styles
Tutorial over @counter-style.

css-tricks.com/styling-counters-in-css
Uitgebreid overzicht van manieren om counters op te maken.

css-voorbeelden.nl/lijst/lijst-065
Geneste lijsten met automatische nummering met behulp van counter() en counters(). Nederlandstalig.

smashingmagazine.com/2019/07/css-lists-markers-counters
Tutorial over counters en ::marker.

web.dev/articles/css-marker-pseudo-element
Tutorial hoe ::marker te gebruiken voor aangepaste bullets. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

Nieuwsbrieven en dergelijke

(Onderafdeling van CSS)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Overzicht eigenschappen, tips, specificatie, en dergelijke

(Onderafdeling van CSS)

Algemene cursussen CSS zijn te vinden bij CSS → Cursussen CSS en/of HTML.

Overzichten met alleen pseudo-elementen en/of pseudo-classes zijn te vinden bij CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke → Algemeen.

css-tricks.com/almanac
Inhoudsopgave van op css-tricks.com beschreven eigenschappen en selectors. Meestal met voorbeeldcode, links naar pagina's met meer info, en dergelijke.

cssportal.com/css-properties
Overzicht van eigenschappen. Met veel aan te passen voorbeelden.

cssvalues.com
Bij alle css-eigenschappen snel de toegestane waarden en dergelijke, browser support en uitleg opzoeken.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/CSS/Reference
Mozilla's uitgebreide overzicht (met uitleg en voorbeelden) van wat Firefox ondersteunt aan eigenschappen, attributen, selectors, enzovoort. Heeft ook verwijzingen naar wat andere browsers ondersteunen, en op welke (afwijkende) manier die dat doen.

drafts.csswg.org/indexes
Alfabetisch overzicht van alle in CSS-specificaties genoemde eigenschappen, selectors, enzovoort, met links naar betreffende specificatie.

quackit.com/css/reference
Alfabetisch overzicht van eigenschappen, @-regels, functies, en dergelijke. Met veel aan te passen voorbeelden.

tympanus.net/codrops/css_reference
Heel uitgebreid overzicht van eigenschappen, functies, enzovoort, met voorbeelden, links naar meer info, demo's, enzovoort. Veel voorbeelden kun je online uitproberen.

w3.org/Style/CSS/all-descriptors
Overzicht van alle CSS-descriptors (media-regels, counters, en dergelijke) met links naar de bijbehorende specificatie.

w3.org/Style/CSS/all-properties
Overzicht van alle CSS-eigenschappen met links naar de bijbehorende specificatie.

w3.org/Style/CSS/current-work
Beknopt overzicht van de status van en links naar alle CSS-modules na versie 2.2 (de laatste versie die als één geheel is verschenen.)

w3.org/TR/CSS2
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Officiële specificatie CSS 2.1. Met ingang van CSS3 is CSS opgesplitst in een hele serie afzonderlijke modules, die elk een eigen level-nummer hebben.

w3.org/TR/CSS22
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification. Officiële specificatie CSS 2.2. Bevat kleine verbeteringen en dergelijke ten opzichte van de hierboven genoemde versie 2.1.
Nederlandse vertaling.

Printen (inclusief @page, page-break-..., en dergelijke)

(Onderafdeling van CSS)

alvaromontoro.hashnode.dev/css-tip-style-your-radio-buttons-and-checkboxes-for-printing
Tutorial over print-color-adjust (bepaalt of achtergronden en dergelijke ook worden geprint).

didoesdigital.com/blog/print-styles
Uitgebreid overzicht van problemen met en oplossingen voor printen van HTML.

sitepoint.com/css-printer-friendly-pages
Artikel met tips om met behulp van CSS een pagina printvriendelijk te maken.

smashingmagazine.com/2019/02/css-fragmentation
Tutorial over break-before, break-after, en dergelijke. Met tips hoe dit te gebruiken in browsers die dit (nog) niet ondersteunen.

Quirks modus

(Onderafdeling van CSS)

Doctype zie HTML → Doctype (DTD).

hsivonen.fi/doctype
Zeer uitgebreid artikel over wat welk doctype doet, almost standards, standards en quirks modus, compatibiliteitsweergave in Internet Explorer, enzovoort.

jkorpela.fi/quirks-mode
Uitgebreid artikel over wat quirks modus is en hoe de weergave in quirks modus is.

Schaduw

(Onderafdeling van CSS)

Online uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Schaduwen die met behulp van een filter worden gemaakt zie CSS → Compositing, filters en blending.

css-tricks.com/getting-deep-into-shadows
Theoretische achtergronden, praktische tips en voorbeelden met code van allerlei soorten schaduw.

css-voorbeelden.nl/schaduw
Ingangspagina naar voorbeelden en uitleg over schaduw, waaronder box-shadow, text-shadow en drop-shadow. Nederlandstalig.

joshwcomeau.com/css/designing-shadows
Artikel over de theorie achter het maken van goede schaduwen.

Scrollbalk

(Onderafdeling van CSS)

Scrollen en dergelijke zie CSS → Scrollen, Scroll Snap, overflow-behavior, en dergelijke.

Voorkomen van een horizontale scrollbalk zie Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke) → overflow.

digitalocean.com/community/tutorials/css-scrollbars
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

filamentgroup.com/lab/scrollbars
Overzichtsartikel hoe je het uiterlijk van een scrollbalk kunt wijzigen. Inclusief tal van vreemdigheden die de verschillende browsermakers er kennelijk als ietwat eigenaardige hobby in stoppen.

ishadeed.com/article/custom-scrollbars-css
Tutorial over het aanpassen van het uiterlijk van de scrollbalk.

Scrollen, Scroll Snap, overflow-behavior, en dergelijke

(Onderafdeling van CSS)

overflow zie CSS → Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke) → overflow.

position: sticky zie CSS → Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke) → Centreren, Containing Block, position, Stacking Context en z-index.

Scroll Driven Animations zie CSS → animation, transform, transition en Motion Path.

Uiterlijk van de scrollbalk aanpassen zie CSS → Scrollbalk.

Voorkomen van een horizontale scrollbalk zie CSS → Boxmodel en toebehoren (anchor, aspect-ratio, breedte, Containing Block, display, fit/max-min-content, hoogte, marges, object-fit, overflow, position, Stacking Context, z-index, en dergelijke) → overflow.

bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation
Artikel over manieren om soepeler te scrollen.

css-tricks.com/practical-css-scroll-snapping
Tutorial over Scroll Snap. Met ook aandacht voor de (nog vele) problemen en praktische voorbeelden.

web.dev/articles/css-scroll-snap
Uitgebreide tutorial over Scroll Snap.

ishadeed.com/article/css-scroll-snap
Tutorial over Scroll Snap.

ishadeed.com/article/prevent-scroll-chaining-overscroll-behavior
Tutorial over overscroll-behavior.

newinweb.com/2018/09/06/css-scroll-snap
Tutorial over het maken van een slideshow met behulp van Scroll Snap.

smashingmagazine.com/2018/08/scroll-bouncing-websites
Tutorial over hoe bij fixed footers en dergelijke het stuiter-effect bij scrollen te voorkomen.

Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke

(Onderafdeling van CSS)

Bij pseudo-classes en pseudo-elementen (:... en ::...) wil de ondersteuning van de nieuwere soorten nog wel eens niet (volledig) aanwezig zijn in alle browsers. Bij CSS → Browser support en Release Notes kun je vinden welke browser wat ondersteunt.

Checkbox hack zie CSS → Forms, buttons, :disabled, :enabled, checkbox hack, en dergelijke.

Container en Media Query's zie CSS → Media Query's, Container Query's en Responsive Web Design.

@supports zie CSS → Bugs, hacks en @supports → CSS wegfilteren/aanpassen (inclusief @supports).

[...] (attribute selector) en :lang()

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

bitsofco.de/use-the-lang-pseudo-class-over-the-lang-attribute-for-language-specific-styles
Artikel over het verschil tussen p:[lang="nl"] en p:lang(nl). (Geldt natuurlijk ook voor andere elementen en talen.)

smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css
Uitgebreide tutorial met voorbeelden over de attribute selector [].

::after en ::before

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

::after en ::before zie CSS → Generated content, ::after, ::before, en dergelijke.

Algemeen

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance
Artikel over de invloed van verschillende soorten selectors op de snelheid van weergave.

bram.us/2024/05/05/misconceptions-about-css-specificity
Artikel over drie veel voorkomende misverstanden over specificiteit.

codepen.io/nanacodesign/full
Spiekbriefje om snel de werking van een bepaalde selector op te kunnen zoeken.

css-speedrun.netlify.app
Kennis over selectors testen. Met hints en links naar tutorials.

css4-selectors.com
Site over selectors tot en met selectors level 4. Onder andere online testen wat de browser ondersteunt, uitleg, voorbeelden, artikelen.

cssportal.com/css-pseudo-class
Overzicht van pseudo-classes en pseudo-elementen. Met veel aan te passen voorbeelden.

elad.medium.com/understanding-the-initial-inherit-and-unset-css-keywords
Uitleg over de sleutelwoorden inherit, initial, unset en revert.

flukeout/github.io
Interactieve tutorial over selectors.

kevinpowell.co/article/initial-unset-revert
Uitleg over de werking van de waarden initial, unset en revert.

moderncss.dev/guide-to-advanced-css-selectors
Uitgebreide tutorial over selectors. Met veel voorbeelden en links voor meer info.

piccalil.li/blog/a-primer-on-the-cascade-and-specificity
Tutorial over specificiteit.

piccalil.li/blog/css-inheritance
Tutorial over inheritance.

polypane.app/css-specificity-calculator
Specificiteit van selector berekenen.

quirksmode.org/blog/archives/2021/06/inherit_initial
Uitleg over het gebruik van en de verschillen tussen inherit, initial, unset en revert.

specificity.keegan.st
Met behulp van duidelijke beelden kijken welke van twee of meer selectors de meeste specifiteit heeft.

:defined, :host, :host-context, ::part en ::slotted

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

:defined, :host, :host-content, ::part en ::slotted zie HTML → Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen).

:dir()

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

:dir() zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

:disabled en :enabled

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

:disabled en :enabled zie CSS → Forms, buttons, :disabled, :enabled, checkbox hack, en dergelijke.

:empty

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

dev.to/samanthaming/css-empty-selector
Tutorial over :emtpy met voorbeelden hoe je deze pseudo-class kunt gebruiken.

:first-child, :first-of-type, :last-child, :last-of-type, :nth-child(), :nth-last-child(), :nth-last-of-type() en :nth-of-type()

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

css-tricks.com/examples/nth-child-tester
:nth-child(); :nth-last-child(); :nth-of-type() en :nth-last-of-type() uitproberen. Met voorbeelden.

developer.chrome.com/docs/css-ui/css-nth-child-of-s
Artikel over nieuwe mogelijkheden van selectors level 4, zoals de selector:(An + B [of S])-syntax.

lea.verou.me/demos/nth
:nth-child(), :nth-last-child(), :nth-of-type() en :nth-last-of-type() uitproberen.

:focus, :focus-visible en :focus-within

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

bitsofco.de/when-is-focus-visible-visible
Interactief overzicht wanneer wel en wanneer geen visuele focus wordt getoond.

blog.chromium.org/2020/09/giving-users-and-developers-more
Uitleg over de werking van pseudo-class :focus-visible.

hidde.blog/focus-visible-more-than-keyboard
Artikel over de werking van :focus-visible.

matthiasott.com/notes/focus-visible-is-here
Tutorial over :focus-visible.

:has(), :is(), :matches(), :not() en :where()

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

austingil.com/css-has-with-html-forms
Voorbeelden van het gebruik van :has() om een formulier op te maken, bijvoorbeeld een rode border bij een fout.

bitsofco.de/on-not-and-specificity
Uitgebreide uitleg over :not() en specificiteit.

blog.logrocket.com/deep-dive-css-where-is-functions
Tutorial over :where() and :is().

bram.us/2022/11/17/style-a-parent-element-based-on-its-number-of-children-using-css-has
Tutorial hoe met behulp van :has() een element op te maken, afhankelijk van het aantal kinderen van het element.

dev.to/logrocket/deep-dive-into-the-css-where-function
Tutorial over :where(), met veel voorbeelden.

developer.chrome.com/blog/has
Voorbeelden van wat er mogelijk is met de selector :has().

ishadeed.com/article/conditional-css-has-nth-last-child
Tutorial hoe lay-out aan te passen afhankelijk van het aantal kinderen van een element.

ishadeed.com/article/css-has-guide
Tutorial over :has() met veel voorbeelden.

ishadeed.com/article/css-has-parent-selector
Uitgebreide tutorial met voorbeelden over :has().

joshwcomeau.com/css/has
Hele reeks voorbeelden hoe :has() is te gebruiken.

matthiasott.com/notes/css-has-a-parent-selector-now
Tutorial over :has() (met een leuke inleiding over de kommer en kwel die :has() eindelijk oplost).

meyerweb.com/eric/thoughts/2018/06/06/specificity-in-not-has-and-matches
Uitleg over de specificiteit van :not(), :has() en :matches().

polypane.app/blog/decoding-css-selectors-has-not-vs-not-has
Uitleg over het verschil tussen :has(:not) en :not(:has).

polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier
Tutorial over :where(), :is() en :has().

smashingmagazine.com/2023/01/level-up-css-skills-has-selector
Praktische voorbeelden voor het gebruik :has().

tobiasahlin.com/blog/previous-sibling-css-has
Een of meer voorgaande elementen selecteren met behulp van :has().

web.dev/articles/css-is-and-where
Tutorial over :is() en :where().

webkit.org/blog/13096/css-has-pseudo-class
Tutorial over :has() met een aantal uitgebreid besproken voorbeelden.

@layer

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer
Tutorial over @layer.

css.oddbird.net/layers/explainer
Uitgebreide tutorial over @layer.

css-tricks.com/css-cascade-layers
Uitgebreide tutorial over @layer.

developer.chrome.com/blog/cascade-layers
Uitgebreide tutorial over @layer.

ishadeed.com/article/cascade-layers
Uitgebreide tutorial over @layer.

smashingmagazine.com/2022/01/introduction-css-cascade-layers
Uitgebreide tutorial over @layer.

::marker

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

::marker zie CSS → Menu's, lijsten, counter(), ::marker, en dergelijke.

Nesten

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

ishadeed.com/article/css-nesting
Tutorial met veel voorbeelden.

kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting
Artikel over makkelijk te maken vergissingen wat betreft specificiteit.

webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview
Korte uitleg over het nesten van selectors.

::selection

(Onderafdeling van CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke)

::selection zie CSS → Fonts, typografie, tekst, emoticons en lijnen → user-select en ::selection.

Trigonometrische functies

(Onderafdeling van CSS)

danielcwilson.com/posts/css-shapes-with-trig-functions
Voorbeelden van het maken van vormen met behulp van functies als cos() en sin().

danielcwilson.com/posts/mathematicss-rem-mod
Interactieve tutorial over rem() en mod().

dev.to/jh3y/circular-text-with-css
Tutorial hoe in een cirkel ronddraaiende tekst te maken.

tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry
Deel 2 Deel 3
Driedelige tutorial met veel praktische voorbeelden.

Validators

(Onderafdeling van CSS)

csstree.github.io/docs/validator
CSS-validator.

jigsaw.w3.org/css-validator
W3C CSS-validator. Geeft vaak raadselachtige meldingen, maar is wel redelijk beknopt. Om overbodige foutmeldingen te voorkomen: onder Meer opties zit de mogelijkheid om te kiezen voor CSS3 en om voorvoegsels als -moz- geen fout te laten geven.

Variabelen ('custom properties') en @property

(Onderafdeling van CSS)

blog.logrocket.com/how-to-use-css-variables
Tutorial met voorbeelden over CSS-variabelen.

codersblock.com/blog/what-can-you-put-in-a-css-variable
Overzicht van wat er allemaal in een CSS-variabele kan worden gestopt.

css-tricks.com/a-complete-guide-to-custom-properties
Uitgebreide tutorial over custom properties.

freecodecamp.org/news/everything-you-need-to-know-about-css-variables
Zeer gedetailleerde tutorial over CSS-variabelen met uitleg op beginnersniveau.

ishadeed.com/article/css-vars
Tutorial met veel voorbeelden over CSS-variabelen.

matthiasott.com/notes/css-custom-properties-fail-without-fallback
Artikel over hoe te voorkomen dat (meer ingewikkelde) CSS-variabelen soms niet werken.

moderncss.dev/how-custom-property-values-are-computed
Artikel over de soms onverwachte effecten van een variabele met een ongeldige waarde.

sitepoint.com/how-to-use-variables-in-css
Uitgebreide tutorial over CSS-variabelen.

utilitybend.com/blog/taking-a-closer-look-at-property-in-css
Tutorial over @property.

web.dev/articles/at-property
Tutorial over @property.

Forums (gespecialiseerde forums zie onderwerp)

css-voorbeelden.nl/forum
Forum van deze site. Nederlandstalig. Bedoeld voor vragen over de voorbeelden op deze site, maar je kunt andere vragen natuurlijk altijd proberen...

helpmij.nl/forum
Nederlandstalig forum over alle denkbare computer-onderwerpen, waaronder het maken van sites.

nationaalcomputerforum.nl
Nederlandstalig forum over alle denkbare computer-onderwerpen, waaronder het maken van sites.

stackoverflow.com/questions
Engelstalig forum, maar vanwege de (vaak) hoge kwaliteit van de antwoorden hier toch vermeld.

Gereedschap

Afbeelding maken, bewerken, converteren en optimaliseren

(Onderafdeling van Gereedschap)

Hieronder staan alleen de praktische gereedschappen voor het bewerken, converteren, en dergelijke van afbeeldingen. Meer theoretische onderwerpen zoals het verschil tussen de diverse formaten staan bij CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet CSS-methoden zoals SVG, <picture> en <img>.

Exif-data en dergelijke bekijken zie Privacy, loskomen van datadieven, en dergelijke.

Animatie maken

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

Animaties maken met behulp van CSS zie CSS → Online uitproberen, code genereren, en dergelijke.

blender.org
Blender is een open source programma om 3d-animaties te maken. (In Linux zal het meestal in de repo's zitten.)
Nederlandstalig forum.

ezgif.com
Animatie (GIF, WebP en AVIF) maken van eigen afbeeldingen of van video. Ook bewerken, zoals tekst toevoegen en splitsen.

fullystacked.net/how-to-gif-2025
Overzicht van voor- en nadelen van de verschillende formaten van een geanimeerde afbeelding.

gickr.com
Animatie (GIF) maken van eigen afbeeldingen.

loaders.holasvg.com
Bewegende laad-symbolen maken en bijbehorende code (SVG met bijbehorende CSS) genereren.

picasion.com
Animatie (GIF) maken van eigen afbeeldingen.

svgartista.net
Eigen SVG animeren en bijbehorende code genereren.

Bewerken en effecten aanbrengen

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

De hieronder genoemde online grafische programma's kunnen handig zijn, maar hebben (uiteraard) veel minder mogelijkheden dan een zelfstandig programma als Gimp of Blender.

Exif-data verwijderen zie Privacy, loskomen van datadieven, en dergelijke.

ditherit.com
Eigen afbeelding omzetten in raster met desgewenst andere kleuren. Opslaan als PNG.

doodad.dev/dither-me-this
Eigen afbeelding omzetten in grover of fijner raster. Opslaan als JPG of PNG.

duotone.shapefactory.co
Foto omzetten naar twee te kiezen basiskleuren. Opslaan als PNG.

duotones.co
Foto omzetten naar twee te kiezen basiskleuren. Opslaan als JPG.

gimp.org (GNU Image Manipulation Program)
Professioneel programma voor Linux, OS X en Windows om afbeeldingen te bewerken. Site is Engelstalig, programma is ook Nederlandstalig. (In Linux zal het meestal in de repo's zitten.)
Links naar sites over Gimp: gimp.startpagina.nl. Nederlandstalig.

glitchyimage.com
Eigen afbeelding voorzien van in te stellen streep-patroon. Opslaan als PNG.

irfanview.com
Populair programma voor Windows, geschikt voor simpele bewerkingen. Site is Engelstalig, programma is ook Nederlandstalig. (Als 'snap' ook te installeren op Linux vanaf snapcraft.io/irfanview.)

krita.org/en
Professioneel programma voor Linux, OS X en Windows om afbeeldingen te bewerken. Site is Engelstalig, programma is ook Nederlandstalig. (In Linux zal het meestal in de repo's zitten.)

mini2-photo-editor.netlify.app
Foto op allerlei manieren bewerken. Opslaan als JPG of PNG.

limus.netlify.app/app
Afbeelding in allerlei mogelijke hoeken draaien. Opslaan als PNG.

onlinegiftools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met GIF's te doen. (Op de gratis versie zitten wel enkele beperkingen.)

onlinejpgtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met JPG's te doen. (Op de gratis versie zitten wel enkele beperkingen.)

onlinepngtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met PNG's te doen. (Op de gratis versie zitten wel enkele beperkingen.)

onlinetools.com/image
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met afbeeldingen te doen. (Op de gratis versie zitten wel enkele beperkingen.)

pavellaptev.github.io/warp-svg
Tekst vervormen en bijbehorende SVG-code genereren.

photopea.com
Afbeelding bewerken in GIMP-achtige editor met zeer uitgebreide mogelijkheden. Kan ook met PSD's overweg. Opslaan in allerlei formaten.

pixlr.com/nl/express
Bitmap-afbeelding (JPG, GIF, PNG, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden. Nederlandstalig. Opslaan als JPG, PNG, WebP of PDF.

redact.photo
Heel simpel deel van afbeelding vervagen of verwijderen. Opslaan als JPG, PNG of WebP.

tezumie.github.io/Image-to-Pixel
Afbeelding pixeleren (veranderen in blokjes). Met veel instelmogelijkheden. Opslaan als PNG.

Converteren

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

cloudconvert.com/png-to-webp
Afbeelding converteren van PNG naar WebP. Met klein aantal instelmogelijkheden.

compress-or-die.com
Afbeelding converteren naar en van JPG, PNG, GIF, WebP en SVG. Met veel instelmogelijkheden.

tinywow.com/tools/image
Afbeelding converteren naar een ander formaat. Onder andere van en naar EPS, GIF, HEID, JPG, PNG, PDF, SVG, TIFF en WebP.

vert.sh
Open source privacyvriendelijk afbeelding converteren naar en van groot aantal formaten.

Nieuwe afbeelding, patroon, speciale vorm, tile, en dergelijke maken (inclusief SVG)

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

'Afbeeldingen' die alleen gemaakt worden met behulp van CSS zie ook CSS → Online uitproberen, code genereren, en dergelijke en CSS → border-image, borders, hoeken, figuren en outline.

Online gradiënten met behulp van CSS maken of uitproberen zie CSS → Online uitproberen, code genereren, en dergelijke.

Sprite maken zie Gereedschap → Sprite maken.

avamake.com
Avatar samenstellen, opgebouwd uit verschillende te kiezen onderdelen. PNG- en SVG-formaat.

drawsvg.org/drawsvg
SVG ontwerpen en bijbehorende code genereren. Ook op te slaan als PNG.

editor.method.ac
SVG ontwerpen en bijbehorende code genereren. Kan ook worden opgeslagen als PNG.

excalidraw.com
SVG ontwerpen en bijbehorende code genereren. Ook op te staan als PNG.

fffuel.co/llline
Allerlei soorten lijnen ontwerpen en bijbehorende SVG genereren. Met veel instelmogelijkheden.

fffuel.co/mmmotif
Patroon met aan te passen geometrische driedimensionale patronen maken en bijbehorende SVG genereren.

fffuel.co/pppointed
Pijl ontwerpen en de bijbehorende SVG genereren.

glyphdrawing.club
Zeer gedetailleerde glyphe maken (kleinere of grotere afbeelding, op de pixel precies) in PNG- of SVG-formaat.

haikei.app
Allerlei vormen, patronen en achtergrond-afbeeldingen met bijbehorende code maken in SVG-formaat. Met veel instelmogelijkheden. Ook te downloaden als PNG.

learnui.design/tools/mesh-gradient-generator
Veelkleurige SVG-gradiënt maken. Met veel instelmogelijkheden.

lissajous.eva.town
Spiraal maken en aanpassen en bijbehorende SVG genereren.

noisetexturegenerator.com
Gestippelde achtergrond-afbeelding (tile) in PNG-formaat maken. Dichtheid en dergelijke kunnen worden ingesteld.

orama-interactive.itch.io/pixelorama
Pixel art-afbeelding maken. Onder andere PNG-, JPG-, GIF- en WebP-formaat.

pattern.monster
Groot aantal aan te passen patronen met bijbehorende SVG-code. Ook te downloaden als PNG.

patterncooler.com
Online achtergrond-afbeeldingen (tiles) met allerlei zich herhalende patronen in JPG- of PNG-formaat maken.

perfect-freehand-example.vercel.app
Met de hand lijntekening maken en bijbehorende SVG genereren.
Bijbehorende documentatie is te vinden op github.com.

sitepoint.com/6-incredible-svg-pattern-generators
Korte uitleg over SVG patterns (vergelijkbaar met CSS tiles) en bespreking van zes online generators.

stripegenerator.com
Achtergrond-afbeeldingen (tiles) met allerlei lijn-patronen in PNG-formaat maken.

svg.wtf
Eén of meer SVG-figuren maken en bijbehorende code genereren. Te wijzigen door slepen en dergelijke, waarbij de code gelijk mee verandert. Hierdoor is goed te zien, wat bepaalde code doet.

svgedit.netlify.app/editor
SVG-afbeelding maken en bijbehorende code genereren. Ook op te slaan als PNG.

svgeditor.publicdomainvectors.org/dist/editor
SVG-afbeelding maken en bijbehorende code genereren. Ook op te slaan als PNG, JPG, BMP, WebP en PDF.

tldraw.com
Uitgebreide SVG-editor. Ook op te slaan als PNG.

voxels.layoutit.com
Verbluffend ingewikkelde uit kubussen opgebouwde figuren maken. Genereert ook de benodigde HTML en CSS. Ook op te slaan als PNG.

yqnn.github.io/svg-path-editor
Path-editor voor SVG. Op een heel simpele manier is code voor de wildste paden (vormen) te maken.

Optimaliseren, verkleinen en snelheid

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

Optimaliseren kan vaak ook door een afbeelding te converteren naar een ander formaat. Converteren is te vinden bij Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Converteren.

compress-or-die.com
JPG, JPEG XL, PNG, GIF, WebP en SVG optimaliseren. Met veel instelmogelijkheden.

compressimage.io
Privacyvriendelijk JPG- en PNG-afbeeldingen comprimeren.

imagecompressor.com
Gelijktijdig tot twintig JPG-, GIF- en PNG-afbeeldingen optimaliseren. De compressie is per afbeelding in te stellen en het resultaat is vooraf per afbeelding te bekijken. Nederlandstalig.

imagekit.io/website-analyzer
Afbeeldingen binnen een pagina analyseren en tips voor een kleinere bestandsgrootte krijgen.

imageoptim.com/online
Gelijktijdig meerdere JPG- en PNG-afbeeldingen optimaliseren.

industrialempathy.com/posts/image-optimizations
Overzicht van technieken om afbeeldingen zo snel en efficiënt mogelijk weer te geven.

jakearchibald.github.io/svgomg
SVG optimaliseren.

jpeg.rocks
Privacyvriendelijk JPG optimaliseren.

msurguy.github.io/svg-cropper-tool
Eigen SVG-afbeelding verkleinen en bijbehorende code genereren.

omatsuri.app/svg-compressor
SVG comprimeren.

squoosh.app
Afbeelding comprimeren en/of converteren van en naar onder andere AVIF, JPG, WebP en PNG. Ook zijn eenvoudige bewerkingen mogelijk.

tinypng.com
Gelijktijdig tot twintig PNG-, JPG- en WebP-afbeeldingen optimaliseren. Converteert PNG-24 naar PNG-8.

webspeedtest.cloudinary.com
Geeft over alle afbeeldingen op een pagina gedetailleerde informatie, waaronder of comprimeren zinvol is. Desgewenst kun je de (eventueel gecomprimeerde) afbeelding in diverse formaten downloaden.

Audio

(Onderafdeling van Gereedschap)

Geluidsbestanden converteren, code genereren voor <audio>, enzovoort zie HTML → <audio>, <embed>, <iframe>, <object> en <video>.

Code leesbaar maken

(Onderafdeling van Gereedschap)

Broncode tonen in mobiele browsers zie Mobiele apparatuur → Emulators, SDK's, hulpprogramma's, en dergelijke voor en van specifieke systemen → Algemeen.

XML(-sitemap) formatteren zie ook Zoekmachines → XML-sitemap.

a11y-tools/markup-de-crapulator
In elke browser kun je de code van een pagina bekijken. Maar dat levert vaak een volstrekt onleesbare brij op. Op deze site kun je online allerlei bijzaken weghalen, zodat je door de bomen het bos weer kunt zien.
Het bijbehorende artikel is te vinden op tpgi.com.

cleancss.com/css-beautify
Ongeformatteerde of gecomprimeerde CSS netjes laten inspringen en dergelijke.

cleancss.com/html-beautify
Ongeformatteerde of gecomprimeerde HTML netjes laten inspringen en dergelijke.

cleancss.com/javascript-beautify
Ongeformatteerd of om andere redenen onleesbaar JavaScript netjes laten inspringen en dergelijke.

cleancss.com/php-beautify
PHP netjes laten inspringen en dergelijke.

cleancss.com/sql-beautify
Ongeformatteerde of om andere redenen onleesbare SQL netjes laten inspringen en dergelijke.

cssportal.com/less-to-css
LESS converteren naar gewone CSS.

cssportal.com/scss-to-css
SCSS converteren naar gewone CSS.

j-brooke.github.io/FracturedJson
JSON omzetten naar een voor mensen leesbaarder formaat.

json.pub
Ongeformatteerde JSON omzetten naar een voor mensen leesbaarder formaat.

jsoncrack.com/editor
Geneste JSON-objects grafisch weergeven op een uiterst duidelijke manier.

jsonformatter.org/scss-to-css
SCSS converteren naar gewone CSS.

onlinetools.com/json/prettify-json
JSON formatteren.

pretty-print-json.js.org
Ruwe JSON-code omzetten naar geformatteerde code.

unminify.com
Gecomprimeerde CSS, HTML, JavaScript, XML en JSON weer netjes formatteren.

Combinaties van CSS, HTML, JavaScript, enzovoort uitproberen en eventueel delen

(Onderafdeling van Gereedschap)

codepen.io
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen. (Voor opslaan en/of delen moet je je registreren).
Op imaginarycloud.com staat een korte tutorial.

cssdeck.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

dabblet.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

developer.mozilla.org/en-US/play
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen (daarvoor is wel een gratis account nodig). Vanuit de documentatie op mozilla.org kunnen voorbeelden hier simpel worden bewerkt.

jsbin.com
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen. Er kunnen ook bibliotheken worden gebruikt.

jsfiddle.net
CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

jsitor.com
CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

jsplayground.dev
Heel simpele editor om CSS, HTML en JavaScript uit te proberen.

liveweave.com
CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

rendera.org
CSS, HTML en JavaScript uitproberen. Met voorbeelden.

Commandline (terminal, NPM, Grunt, Gulp, en dergelijke)

(Onderafdeling van Gereedschap)

Browser support voor Node.js en dergelijke zie CSS → Browser support en Release Notes.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

bun.sh
Alternatief voor Node.js.

css-tricks.com/a-complete-beginners-guide-to-npm
Uitgebreide tutorial over NPM en Node.

itsfoss.com/linux-terminal-basics
Beginnerstutorial over de terminal.

joshwcomeau.com/javascript/terminal-for-js-devs
Inleiding voor websitebouwers in het gebruik van de terminal.

modernways.be/myap/it/school/course/De terminal voor ontwikkelaars
Vlaamstalige cursus werken in de terminal, waarbij ook het installeren van een server, MySQL, en dergelijke worden behandeld. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

sherpa.guide/paths/node
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om Node.js te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

CSS

(Onderafdeling van Gereedschap)

Door de veelheid aan online hulpmiddelen voor CSS, is het nogal lastig al het gereedschap voor CSS hier bij Gereedschap neer te zetten. Veel staat onder Gereedschap, maar vooral voor CSS3 staat ook een en ander bij CSS:

Combinaties van CSS, HTML, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van CSS, HTML, JavaScript enzovoort uitproberen en eventueel delen.

CSS comprimeren zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren.

Online gereedschap voor fonts zie CSS → Fonts, typografie, tekst, emoticons en lijnen.

Online hulpmiddelen voor het omrekenen van eenheden staan bij CSS → Eenheden, calc(), min(), en dergelijke.

Online hulpmiddelen voor selectors, specificiteit, en dergelijke staan bij CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke.

Online testen wat welke browser ondersteunt zie CSS → Browser support en Release Notes.

Online testen welke media query's worden ondersteund en wat precies wordt doorgegeven zie CSS → Media Query's, Container Query's en Responsive Web Design.

Online wijzigingen van alleen CSS uitproberen, code genereren, en dergelijke zie CSS → Online uitproberen, code genereren, en dergelijke.

Data-URI maken en base64-hulpmiddelen

(Onderafdeling van Gereedschap)

Een data-URI (of -URL) is een - meestal kleine - afbeelding die versleuteld in de HTML of CSS zelf wordt opgenomen.

codebeautify.org/all-tools#base64-tools
Hulpmiddelen voor base64, waaronder een groot aantal converters van en naar base64.

csswizardry.com/2017/02/base-64-encoding-and-performance
Artikel waarin wordt uitgelegd, waarom je beter geen grote afbeeldingen op deze manier kunt opnemen in CSS.

debugbear.com/blog/base64-data-urls-html-css
Artikel over de invloed van base64 op de laadsnelheid van de pagina.

dopiaza.org/goodies/data-uri-generator
Data-URI maken van eigen afbeelding of afbeelding op internet.

Debuggen

(Onderafdeling van Gereedschap)

Bugs melden, opzoeken, omzeilen, en dergelijke zie CSS → Bugs, hacks en @supports.

Default stylesheets zie Default stylesheets (standaard stijlbestanden).

Mobiele systemen en browsers zie Mobiele apparatuur.

In diverse browsers weergave testen, meerdere versies van 'n browser installeren, en dergelijke zie Gereedschap → Weergave en dergelijke testen.

Handleidingen voor het debuggen van specifieke eigenschappen en dergelijke, zoals Grid in Firefox, kunnen bij de betreffende eigenschappen en dergelijke staan.

Voor de hieronder staande browsers zijn (soms ongelooflijk veel) extensies beschikbaar, die kunnen helpen bij debuggen en testen. Als een browser iets niet kan, kijk dan even, of er een extensie beschikbaar is.

Algemeen

(Onderdeel van Gereedschap → Debuggen)

alan.norbauer.com/articles/browser-debugging-tricks
Lijst met trucs die kunnen helpen met debuggen in Google Chrome, Edge, Firefox en Safari. Al wat ouder, maar nog steeds bruikbaar.

canidev.tools
Overzicht van wat met het ingebouwde ontwikkelgereedschap van Google Chrome, Firefox, Safari en Edge wel (en niet) mogelijk is. Met (onder de vinkjes) hoe je het betreffende onderdeel kunt bereiken.

chenhuijing.com/blog/devtools-for-css-layouts-2021-edition
Overzicht van in browsers ingebouwde hulpmiddelen voor Flexbox en Grid.

devtoolstips.org
Lange lijst met dingen die je kunt doen met het ingebouwde ontwikkelgereedschap van browsers. (Vrijwel onmogelijk om hier géén nuttige tips te vinden, ook al ontwikkel je nog zo lang.)

smashingmagazine.com/2021/02/useful-chrome-firefox-devtools-tips-shortcuts
Artikel stampvol handige tips voor het gebruik van het ingebouwde ontwikkelgereedschap in Google Chrome, Edge, Firefox en Safari.

smashingmagazine.com/2021/10/guide-debugging-css
Artikel met veel praktische tips hoe CSS te debuggen.

Edge

(Onderdeel van Gereedschap → Debuggen)

blogs.windows.com/msedgedev/2021/09/14/edge-devtools-93-personalization
Tutorial over het aanpassen van het in Edge ingebouwde ontwikkelgereedschap.

learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing
Handleiding voor het in Edge ingebouwde ontwikkelgereedschap.

Firefox

(Onderafdeling van Gereedschap → Debuggen)

addons.mozilla.org/nl/firefox/extensions
Firefox heeft tal van uiterst nuttige exensies voor het maken van een site. Als je echter naar de categorie 'Webontwikkeling' gaat, vind je daar van alles, maar vrijwel niets voor het maken van sites. Vandaar dat hier een link naar álle extensies staat en niet specifiek naar die voor het maken van sites.

firefox-source-docs.mozilla.org/devtools-user
Heel uitgebreide uitleg over het in Firefox ingebouwde ontwikkelgereedschap.

mozilla.org/en-US/firefox/developer
Speciale versie van Firefox voor ontwikkelaars.

Google Chrome

(Onderafdeling van Gereedschap → Debuggen)

chromewebstore.google.com
Extensies voor het maken van sites. Gedeeltelijk Nederlandstalig.

debugbear.com/blog/use-chrome-devtools
Tutorial over ontwikkelgereedschap in Google Chrome.

developer.chrome.com/docs/devtools
Uitgebreide handleiding Chrome Developer Tools. Met voorbeelden, tips, enzovoort, enzovoort.

Safari

(Onderafdeling van Gereedschap → Debuggen)

Web (ook bekend als Epiphany) is een browser voor Linux die WebKit gebruikt, dezelfde weergavemachine als Safari. Deze kan helpen problemen op te sporen, maar kan testen in de 'echte' Safari niet volledig vervangen.

In de appstore van Apple kan de extensie 'Web Inspector' worden gedownload, waarmee in Safari op iOS en iPadOS de html van een pagina kan worden bekeken en gewijzigd. Je kunt ook inline-stijlen toevoegen, waardoor je het effect van bepaalde css kunt zien.
LET OP: je moet 'webkit inspector' van ontwikkelaar 'And a Dinosaur' hebben. Er zijn meerdere extensies onder deze naam, waarvan sommige alleen betaalde aankopen lijken te stimuleren. Deze extensies is gratis.

webkit.org/web-inspector
Handleiding voor Web Inspector.

E-mail ontwerpen

(Onderafdeling van Gereedschap)

caniemail.com
Overzicht van ondersteuning van HTML en CSS in een groot aantal e-mail-programma's.

github.com/hteumeuleu/email-bugs/issues
Overzicht van bugs in verschillende e-mail-programma's, met soms oplossingen.

smashingmagazine.com/2021/04/complete-guide-html-email-templates-tools
Overzicht van hulpmiddelen, tutorials, en dergelijke om e-mails te ontwerpen. Met heel veel links.

webdesign.tutsplus.com/build-an-html-email-temoplate-from-scratch
Gedetailleerde stap-voor-stap tutorial voor het ontwerpen van een e-mail.

webdesign.tutsplus.com/series/mastering-html-email
Pagina met links naar serie tutorials over het ontwerpen van een e-mail.

Editors, IDE's, en dergelijke

(Onderafdeling van Gereedschap)

Editors en IDE's voor specifiek één taal staan in de regel bij die specifieke taal. Editors en dergelijke voor SVG kunnen vaak ook in allerlei andere formaten exporteren. Deze staan bij Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren → Nieuwe afbeelding, patroon, speciale vorm, tile, en dergelijke maken (inclusief SVG).

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Tenzij anders vermeld, draaien onderstaande programma's in ieder geval op Linux, OS X en Windows. (Eventuele ondersteuning voor OpenBSD, FreeBSD, en dergelijke moet je zelf even opzoeken.)

Er bestaan nog veel meer (gratis en/of open source) editors en IDE's. Hieronder staan ook pagina's, waar een vollediger overzicht is te vinden.

Bij veel van deze programma's zijn (ongelooflijk veel) extensies te installeren. Als een programma iets niet kan doen, kijk dan even, of er een extensie beschikbaar is.

Bij sommige van deze programma's is mogelijk een (gedeeltelijke) Nederlandse vertaling beschikbaar. Maar er is kennelijk een competitie 'Hoe verstop ik het best een vertaling' gaande, waarbij de deelnemers vaak heel getalenteerd blijken. Daarom wordt hieronder niet meer aangegeven, of een programma een Nederlandse vertaling heeft, tenzij die vertaling duidelijk staat aangegeven. Het kan dus zijn dat een programma - mogelijk na verwoed zoeken - toch een Nederlandse vertaling blijkt te hebben, ook als dat hieronder niet is aangegeven.

Als een site overduidelijk automatisch is vertaald naar het Nederlands, wordt die niet als Nederlandstalig aangegeven. Automatische vertalingen leveren op dit moment soms nog de grootst mogelijke wartaal op.

Veel van deze programma's ondersteunen LSP. Dat betekent dat ze heel veel talen ondersteunen. Een lijst met programma's die LSP ondersteunen staat hieronder bij microsoft.github.io.

bluefish.openoffice.nl
Bluefish: open source editor voor 'n hele reeks talen, waaronder HTML, CSS en PHP.

code.visualstudio.com
Visual Studio Code: (oorspronkelijk) door Microsoft gemaakte open source editor met onder andere ondersteuning voor CSS, HTML en JavaScript.
Visual Studio Code is gebaseerd op open source. Iedereen kan dat in principe zelf compileren. Visual Studio Code is wat Microsoft van deze open source maakt. Er zit bijvoorbeeld wat telemetrie in over gebruik en crashes. (Overigens zijn ze hier heel open over.)
Een compilatie zonder de door Microsoft toegevoegde telemetrie en dergelijke is te vinden op vscodium.com. Hier zitten wel wat nadelen aan, zoals dat extensies van marketplace.visualstudio.com niet gebruikt kunnen of mogen worden. VSCodium heeft echter een eigen site voor extensies: open-vsx.org.
Een uitgebreider verhaal over de verschillen tussen beide versies is te vinden op ruky.me. En in aanvulling op bovenstaande: die telemetrie gaat toch wel heel erg ver, blijkt uit roboleary.net/tools/2022/04/20/vscode-telemetry.

cudatext.github.io
CudaText: open source editor voor onder andere HTML en CSS.

eclipse.org
Eclipse: open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal.

en.wikipedia.org/wiki/Comparison_of_text_editors
Uitgebreide vergelijking van groot aantal editors.

geany.org
Geany: IDE voor onder andere CSS, HTML, JavaScript, Perl, PHP en Python.

jedit.org
jEdit: open source editor met ondersteuning voor meer dan 200 talen.

kate-editor.org/nl
Kate: tekstverwerker, onder andere Nederlandstalig. Met behulp van plug-ins kunnen allerlei talen worden bewerkt.

kdevelop.org
KDevelop: IDE voor onder andere JavaScript, PHP en Python. Site is Engelstalig, programma is ook Nederlandstalig.

lap.dev/lapce
Lapce: open source editor voor allerlei talen, waaronder HTML, CSS en JavaScript.

microsoft.github.io/language-server-protocol/implementors/tools
Lijst met programma's die LSP ondersteunen.

neovim.io
Op Vim gebaseerde open source editor met veel uitbreidingsmogelijkheden.

notepad-plus-plus.org
Notepad++: simpele, maar goede open source editor voor Windows.. Ondersteunt veel talen. (Als 'snap' ook te installeren op Linux.)

penpot.app
Penpot: open source alternatief voor Figma.

pragtical.dev
Pragtical: editor met support voor tal van talen, waaronder CSS, HTML en JavaScript.

phcode.io/#/home
Phoenix Code: (opvolger van Brackets). Ondersteunt HTML, CSS en JavaScript. Er is ook een online-versie beschikbaar op phcode.div.

scintilla.org
Scintilla: editor voor Windows en Linux, geschikt voor 'n hele serie talen.

slant.co/topics/1686/~best-javascript-ides-or-editors
Vergelijkend overzicht van groot aantal IDE's, die geschikt zijn voor (onder andere) JavaScript.

theia-ide.org
Theia: IDE voor tal van talen. Open source alternatief van Eclipse voor Visual Studio Code.

VSCodium. Open sourceversie van Visual Studio Code zonder de telemetrie en dergelijke van Microsoft. Links en dergelijke staan iets hierboven bij code.visualstudio.com.

Emulators en SDK's voor mobiele apparatuur

(Onderafdeling van Gereedschap)

Zie bij Mobiele appratuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen.

Favicon maken, testen, en dergelijke

(Onderafdeling van Gereedschap)

Vanuit veiligheidsoverwegingen verbergen inmiddels (vrijwel) alle browsers standaard favicons in de adresbalk.

en.wikipedia.org/wiki/Favicon
Overzichtsartikel met links naar meer artikelen, browser support, enzovoort.

evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
Tutorial hoe met drie bestanden toch overal een favicon te tonen.

favicon.cc
Zelf ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

favicon.io
Favicon maken gebaseerd op eigen ontwerp, tekst, afbeelding of emoticon.

icon.kitchen
Icon uitkiezen en aanpassen en daar vervolgens een volledige set favicons van maken.

xiconeditor.com
Zelf ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

Fonts

(Onderafdeling van Gereedschap)

Zie CSS → Fonts, typografie, tekst, emoticons en lijnen.

FTP-programma's

(Onderafdeling van Gereedschap)

filezilla-project.org
Uitstekende open source ftp-client. Site is Engelstalig, programma is ook Nederlandstalig.

Grafiek en diagram maken

(Onderafdeling van Gereedschap)

Voor bibliotheken en dergelijke die SVG en dergelijke gebruiken zie SVG.

app.diagrams.net
Diagram maken. Keuze uit veel voorbeelden, die bewerkt kunnen worden. Kan worden opgeslagen als onder andere SVG en PNG.

chartle.com
Diagram maken en opslaan als JPG, PNG, WebP of PDF.

nces.ed.gov/nceskids/createagraph
Diagram maken en opslaan als onder andere PNG, JPG, PDF of SVG.

piechartmaker.co
Taartdiagram maken. Veel instelmogelijkheden. Downloaden als PNG, JPG of SVG.

rawgraphs.io
Diagram maken van tekst of spreadsheet en exporteren als SVG, JPG of PNG. Keuze uit heel veel soorten.

HTML

(Onderafdeling van Gereedschap)

Door de veelheid aan online hulpmiddelen voor HTML, is het nogal lastig al het gereedschap voor HTML hier bij Gereedschap neer te zetten. Veel staat onder Gereedschap, maar vooral voor HTML5 staat ook een en ander bij HTML:

Combinaties van CSS, HTML, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van CSS, HTML, JavaScript enzovoort uitproberen en eventueel delen.

HTML comprimeren zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren.

Online <canvas> uitproberen zie HTML → <canvas>.

Online uitproberen en dergelijke van formulieren, input, en dergelijke zie HTML → Formulieren, <input>, en dergelijke.

Online url encoderen zie HTML → Links, URL-encoding (escaping), en dergelijke.

Online wijzigingen uitproberen van alleen HTML zie HTML → Online wijzigingen uitproberen.

Video en audio converteren, code voor <video> en <audio> genereren, enzovoort zie HTML → <audio>, <embed>, <iframe>, <object> en <video>.

HTTP Request en Response Header, cache

(Onderafdeling van Gereedschap)

Protocollen zie Protocollen en foutcodes (statuscodes).

csswizardry.com/2019/03/cache-control-for-civilians
Gedetailleerde tutorial over cache-control.

redbot.org
Inhoud van Response Header bekijken. Geeft suggesties om eventuele problemen op te lossen.

request.urih.com
Inhoud HTTP Request bekijken.

simonhearne.com/2022/caching-header-best-practices
Uitgebreide tutorial over het gebruik van headers voor cache-controle.

whichbrowser.net
Browser-identificatie-string bekijken.

Imagemap maken

(Onderafdeling van Gereedschap)

image-map.net
Met behulp van klikken en slepen imagemap maken.

maschek.hu/imagemap
Met behulp van klikken en slepen imagemap maken.

Kleuren

(Onderafdeling van Gereedschap)

Hieronder staan vooral hulpmiddelen voor het uitzoeken van één of meer kleuren of volledige kleurpaletten.

Meer algemene artikelen en dergelijke over de opbouw van het oog, de opbouw van kleuren, en dergelijke staan bij CSS → Kleuren.

Contrast-ratio en dergelijke testen en kleurenblindheid simuleren zie Toegankelijkheid → Contrast en kleurenblindheid.

codebeautify.org/all-tools#color-tools
Kleuren converteren naar en van een groot aantal formaten.

codepen.io/robdimarzo/full
Hexadecimale kleur uitkiezen door middel van uiterst simpel te bedienen kleurencirkel.

color.hailpixel.com
Op uiterst intuïtieve wijze bij elkaar passende kleuren zoeken. Zoeken in hex, levert notatie ook in hsl() en rgb().

colorbox.io
Tussenkleuren tussen twee kleuren opzoeken en daarvan de hex-code krijgen. Aantal tussenkleuren, begin- en eindkleur, en nog veel meer, is in te stellen.

colorcolor.in
Twee (of meer) kleuren opgeven en tot 19 tussenkleuren krijgen. Met een indrukwekkend aantal instelmogelijkheden voor de tussenkleuren. Notatie in hex.

colordesigner.io/convert
Kleuren omzetten naar en van rgb(), hex, hsl(), cmyk(), hsv() en lab().

components.ai/color-scale
Heel gedetailleerd in te stellen kleurenpalet met bijbehorende code maken.

cssgenerator.org/rgba-and-hex-color-generator
Op uiterst makkelijke manier rgba()- of hex-kleur aanmaken.

degraeve.com/color-palette
Op zelf te kiezen afbeelding gebaseerd kleurenpalet maken. Notatie in hex.

fffuel.co/cccolor
Kleur kiezen met behulp van schuifknoppen. Notatie in hsla(), rgba(), rgb(), oklch() en hex.

hslpicker.com
hsl(), hwb() en rgb() kleuren uitproberen en gelijk vertalen naar de andere formaten.

htmlcolorcodes.com/color-picker
Tot zes (niet) bij elkaar passende kleuren zoeken. Levert notatie in hex, hsl() en rgb().

it-tools.tech/color-converter
Kleur uitzoeken en weergeven in hex, rgb(), hsl(), hwb(), lch(), cmyk() en (dichtstbijzijnde) css-naam.

johndecember.com/html/spec/colorshades
Uitgaande van een basiskleur worden drie bijbehorende lichtere kleuren getoond. Notatie in hex.

maketintsandshades.com
Twee (of meer) kleuren opgeven en codes voor de negen tussenliggende kleuren genereren. Notatie in hex.

meyerweb.com/eric/tools/color-blend
Twee kleuren opgeven en tot tien tussenliggende kleuren krijgen. Notatie in rex of rgb().

oklch.com
Kleurenkiezer oklch() en lch(). Werkt heel intuïtief met schuifknoppen. Laat ondersteuning door monitor zien en geeft eventueel fallback-kleur.

pinetools.com/monochromatic-colors-generator
Kleur kiezen in hex of door slepen. Levert code voor (vrijwel) onbeperkt aantal donkerder en lichtere tinten. Uitvoer in hex.

planetcalc.com
Complementaire hexadecimale kleur vinden.

projects.verou.me/css-colors
Namen van css3-kleurnamen omzetten naar hsl(), rgb() en hex.

projects.susielu.com./viz-palette
Kleurenreeks maken, speciaal gericht op grafieken. Notatie in hex, hsl() en rgb().

slayeroffice.com/tools/color_palette
Kleurenreeks maken van twee keer vijf bij elkaar horende kleuren (notatie in hex).

toolness.github.io/accessible-color-matrix
Van een kleurenpalet met zes aan te passen kleuren van elke combinatie gelijk het (on)voldoende contrast geven.

webfx.com/web-design/color-picker
Uiterst simpele kleurenkiezer voor één kleur. Levert notatie in hex, rgb() en hsl().

workwithcolor.com
Allerlei gereedschappen voor kleuren, waaronder een hsl() kleurzoeker met vertaling naar hsla(), rgba() en hex, zoeken op kleurnaam en een kleurenschema maken.

Knoppenmakers

(Onderafdeling van Gereedschap)

Kant-en-klare knoppen staan bij Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Knoppen voor formulieren maken (zoals <input>) zie CSS → Online uitproberen, code genereren, en dergelijke. Hier staan alleen gereedschappen voor algemene knoppen.

bestcssbuttongenerator.com
Knop ontwerpen en bijbehorende CSS genereren. Veel aanpassingen mogelijk.

cooltext.com
Knoppenmaker. Tekst in de knop kan op veel manieren worden weergegeven. Het eindresultaat is een afbeelding in GIF, JPG of PNG-formaat.

css-tricks.com/examples/ButtonMaker
CSS-knoppenmaker. De CSS moet wel worden ontdaan van verouderde regels.

sciweavers.org/1i2style
CSS-knoppenmaker. Het basispatroon kan op heel veel manieren worden aangepast. De CSS moet wel worden ontdaan van verouderde regels.

Label maken

(Onderafdeling van Gereedschap)

acme.com/labelmaker
Label, zoals dat uit een lettertang komt, maken, maar is op veel manieren aan te passen. Levert een afbeelding in GIF-formaat.

Links controleren

(Onderafdeling van Gereedschap)

Hieronder staan maar een paar linkcheckers. Op internet zijn er tientallen, zo niet honderden, te vinden. Met enig zoeken kun je nog veel andere linkcheckers vinden die een (behoorlijk) aantal pagina's en/of links gratis controleren. Maar let op: niet al die linkcheckers controleren álle links. Sommige controleren bijvoorbeeld geen afbeeldingen of links binnen de pagina. De hieronder staande doen dat wel.

brokenlinkcheck.com
Tot 3000 pagina's gratis controleren. De gratis versie controleert niet op links naar documenten (PDF, DOC, en dergelijke), afbeeldingen en adressen waarin een '/' zit. Je kunt met de gratis versie dus alleen de hele site controleren.

github.com/linkchecker/linkchecker
Open source link-checker met veel extra's. Hier zijn de instructies voor installatie te vinden. (In Linux zal deze meestal ook in de repositories zitten.)
Als je ook ankers wilt valideren, moet je hiervoor een plugin inschakelen. Zie hiervoor de handleiding.

home.snafu.de
Xenu's Link Sleuth: gratis programma om links te controleren. Werkt helaas alleen op Windows. (Jaren geleden zou het volgens geruchten op Linux goed draaien onder Wine. Of dat nog zo is, is onduidelijk. Linux-gebruikers weten wat met Wine wordt bedoeld. En voor de rest: nee, dat betekent niet dat al je links mooie dingen tevoorschijn toveren als je maar genoeg gezopen hebt.)

validator.w3.org/checklink (W3C)
Links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen. Deze validator controleert ook ankers en dergelijke.

Logo maken

(Onderafdeling van Gereedschap)

cooltext.com
Logo maken. Maakt een PNG-afbeelding.

Lorem Ipsum (opvultekst) maken

(Onderafdeling van Gereedschap)

Tenzij anders vermeld, leveren deze generators alleen gewone tekst, zonder HTML-tags en dergelijke. Het kunnen wel meerdere paragrafen of zo met tekst zijn, maar de HTML moet je zelf nog aanbrengen.

blindtextgenerator.com/lorem-ipsum
Lorem Ipsum-tekst genereren. Keuze uit meerdere teksten.

catipsum.com
Lorem Ipsum-tekst voor kattenliefhebbers genereren.

cupcakeipsum.com
Lorem Ipsum-tekst voor zoetekauwen genereren.

generator-lorem-ipsum.info
Lorem Ipsum-tekst genereren. Keuze uit meerdere talen. Deze generator kan meerdere paragrafen maken, inclusief de benodigde <HTML>, maar je krijgt dan wel de HTML voor een complete pagina, inclusief <head> en dergelijke. De lengte van de paragrafen is niet in te stellen.

hipsum.co
Artistieke Lorum Ipsum-tekst genereren.

it-tools.tech/lorem-ipsum-generator
Lorum Ipsum-tekst genereren. Aantal woorden, zinnen en paragrafen is in te stellen. Levert ook benodigde HTML-tags.

meettheipsums.com
Hele serie links naar allerlei soorten generators voor opvultekst.

nl.lipsum.com
Lorem Ipsum-tekst genereren. Nederlandstalige site. Keuze uit meerdere talen, waaronder Nederlands.

tinywow.com/other/lorem-ipsum-generator
Lorem Ipsum-tekst genereren. Als je voor paragrafen (<p>'s) kiest. wordt ook de benodige HTML gegenereerd. Aantal paragrafen is in te stellen, de lengte van de paragrafen niet.

webfx.com/web-design/html-ipsum
Lorem Ipsum-tekst maken. Tekst kan desgewenst gelijk binnen een element zoals <ol>, <dl>, <p>,enzovoort geplaatst worden, maar gelijktijdig meer dan één element maken is niet mogelijk.

Monitor site

(Onderafdeling van Gereedschap)

downforeveryoneorjustme.com/
Is 'n site alleen voor mij down of voor iedereen?

uptimerobot.com
Meldt per mail, twitter, en dergelijke of site offline is. Tot vijftig sites.

visualping.io
Meldt als een pagina op 'n site is veranderd. Gratis tot vijf controles per dag.

webbuddy.nl
Meldt per mail als site offline is. Nederlandstalig. Met uitgebreide statistieken en dergelijke. Uiterst betrouwbaar, wordt op deze site al jaren gebruikt.

PDF bewerken

(Onderafdeling van Gereedschap)

ilovepdf.com
Van en naar PDF converteren en enkele simpele bewerkingen.

tinywow.com/tools/pdf
Hele serie gereedschappen om PDF te bewerken, te converteren, samen te voegen, afbeeldingen te extraheren, en dergelijke.

Reguliere expressies

(Onderafdeling van Gereedschap)

Er zijn kleine verschillen tussen talen zoals PHP, JavaScript en Perl bij het gebruik van reguliere expressies. Als hieronder geen taal wordt genoemd, is niet echt duidelijk, hoe dit op de betreffende site zit.

Overig

(Onderafdeling van Gereedschap → Reguliere expressies)

github.com/aloisdg/awesome-regex
Pagina met veel links naar van alles over reguliere expressies, zoals cursussen, oefeningen, testers, enzovoort.

regular-expressions.info
Site over reguliere expressies met voorbeelden, tutorial, enzovoort.

Testen en uitproberen

(Onderafdeling van Gereedschap → Reguliere expressies)

extendsclass.com/regex-tester
Reguliere expressie uitproberen. Met (beknopte) uitleg (JavaScript-, Python-, Ruby-, Java-, PHP- of MySQL-stijl).

jex.im/regulex
Met behulp van een soort schema, in combinatie met normale mensentaal, laten zien wat een bepaalde reguliere expressie doet (JavaScript-stijl).

pemistahl.github.io/grex-js
Zoektekst opgeven en daarvan met behulp van aankruisvakjes een reguliere expressie voor JavaScript van maken.

phphub.net/regex
Reguliere expressies uitproberen (PHP-stijl).

regex101.com
Uiterst handige tester voor reguliere expressies (JavaScript-, PHP-, Python- of Golang-stijl).

regexpal.com
Reguliere expressies testen (JavaScript- en Perl-stijl).

regexper.com
Reguliere expressies grafisch weergeven (JavaScript-stijl).

Tutorials en dergelijke

(Onderafdeling van Gereedschap → Reguliere expressies)

freecodecamp.org/news/regular-expressions-for-javascript-developers
Uitgebreide tutorial in boekvorm over reguliere expressies in JavaScript.

github.com/ziishaned/learn-regex
Interactieve tutorial.

learnbyexample.github.io/learn_js_regexp
Lesboek met veel voorbeelden en oefeningen (JavaScript-stijl).
Er is ook een op Python gericht lesboek.

levelup.gitconnected.com/practical-examples-for-learning-regular-expressions-a-guide-with-real-life-usage
Tutorial.

quickref.me/regex
Uiterst overzichtelijk spiekbriefje.

refrf.dev
Cursus reguliere expressies, gebaseerd op voorbeelden.

regexcrossword.com
Tutorial in de vorm van op te lossen kruiswoordraadsels. (Heel origineel en leuk om te doen.)

regexone.com
Interactieve cursus reguliere expressies.

regexr.com
Door de reguliere expressie te veranderen, zie je wat er wordt gevonden in een uitgebreide voorbeeldtekst. Met uitgebreide uitleg. (JavaScript-, Perl en PHP-stijl.)

sherpa.guide/paths/regex
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om reguliere expressies te leren. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

softwium.com/regex-explainer
De werking van een reguliere expressie zichtbaar gemaakt met behulp van een schema. (JavaScript-stijl.)

wanago.io/courses/regex-course
Cursus reguliere expressies.

webdesign.tutsplus.com/html5-form-validation-with-the-pattern-attribute
Tutorial over valideren met behulp van het pattern-attribuut.

Server installeren

(Onderafdeling van Gereedschap)

Eigen server installeren zie PHP → Overig.

Sitemap maken en dergelijke

(Onderafdeling van Gereedschap)

Alles over het maken, testen enzovoort van een sitemap voor zoekmachines is te vinden bij Zoekmachines → XML-sitemap.

Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke

(Onderafdeling van Gereedschap)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Comprimeren

(Onderafdeling van Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke)

Als je CSS, HTML, JavaScript, en dergelijke comprimeert, moet je het resultaat grondig testen. Een compressor wil nog wel eens ál te enthousiast te werk gaan, waardoor fouten ontstaan.

codebeautify.org/all-tools#minifier-tools
HTML, XML, JavaScript, CSS, JSON en SQL comprimeren.

cssportal.com/css-optimize
CSS comprimeren. Met veel instelmogelijkheden.

cssshrink.com
CSS comprimeren.

kangax.github.io/html-minifier
HTML comprimeren. Met veel instelmogelijkheden.

minifier.org
CSS en JavaScript comprimeren.

minifier.org/html-minifier
HTML comprimeren. Met veel instelmogelijkheden.

purifycss.online
Ongebruikte CSS verwijderen van de geteste pagina en desgewenst de resterende CSS comprimeren.
Dit lijkt allemaal heel mooi, maar als een stijlbestand voor meerdere pagina's wordt gebruikt, kun je niet zomaar CSS verwijderen, alleen maar omdat die op de geteste pagina niet wordt gebruikt. Je kunt in deze tester echter de gewijzigde CSS vergelijken met de originele, waardoor dit risico veel kleiner wordt. (In de meeste testers kan dat niet, waardoor de kans heel groot is dat je onterecht CSS verwijdert. Daarom staat hier ook alleen maar een link naar deze site.)

refresh-sf.com
JavaScript, CSS en HTML comprimeren.

toptal.com/developers/cssminifier
CSS comprimeren.

toptal.com/developers/javascript-minifier
JavaScript comprimeren.

Snelheid (testen)

(Onderafdeling van Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke)

Snelheid testen in het ontwikkelgereedschap van de browser zie bij Gereedschap → Debuggen.

debugbear.com/html-size-analyzer
Totale omvang per element-soort weergeven, met en zonder compressie.

debugbear.com/test/website-speed
Snelheid van pagina testen. Geeft een gedetailleerd overzicht met tips om mogelijke problemen op te lossen.

dotcom-tools.com/website-speed-test
Snelheid van pagina testen vanaf 27 (te kiezen) plaatsen op de wereld. Je kunt maximaal drie plaatsen gelijktijdig testen. Ook kan nog gekozen worden tussen onder andere browsers en besturingssystemen.

giftofspeed.com
Snelheid pagina testen. Met gedetailleerde tips hoe die te verbeteren.

giftofspeed.com/gzip-test
Testen of gzip of brotli aanstaat, en hoeveel bytes je daarmee bespaart.

internetmarketingninjas/tools/tools/pagespeed
Snelheid pagina testen. Met uitleg hoe eventuele problemen op te lossen.

lighthouse-metrics.com
Testen op een hele serie onderdelen, waaronder snelheid en toegankelijkheid.

pagespeed.web.dev
Testen hoe snel de pagina laadt en dergelijke. Met suggesties voor oplossingen. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

speedvitals.com
Snelheid van pagina testen. Met tips om die te verbeteren.

tools.pingdom.com/
Heel overzichtelijke waterfall, overzicht aantal verzoeken aan de server, en dergelijke maken. Geeft ook overzicht van enkele mogelijke knelpunten.

webpagetest.org
Onderaan bij Advanced Configuration kun je heel veel dingen instellen, zoals specifieke browsers en specifieke mobiele apparaten. Als je in het testresultaat op de icoontjes klikt, krijg je tips voor verbeteringen.
Een uitgebreide uitleg over de waterfall is te vinden op nooshu.com.

webvitals.dev/cls
Testen of pagina geen CLS heeft.

yellowlab.tools
Hele serie tests uitvoeren op allerlei zaken die mogelijk de snelheid van de site nadeling kunnen beïnvloeden.

Snelheid (theorie en verbeteren)

(Onderafdeling van Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke)

Sommige snelheidstests (staan gelijk hierboven) geven ook aanwijzingen hoe de snelheid is te verbeteren.

content-visibility zie CSS → content-visibility.

Invloed van animaties, zoals transform en transition, op de snelheid zie CSS → animation, transform, transition en Motion Path → Overig.

'Lazy loading' zie CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

Resource hints, priority hints en dergelijke zie HTML → <head>, metadata, Priority hints, Resource hints, en dergelijke.

Selectors en hun invloed op snelheid zie CSS → Selectors → Algemeen.

Specifiek gericht op afbeeldingen zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Webfonts optimaliseren en de invloed ervan op de snelheid zie CSS → Fonts, typografie, tekst, emoticons en lijnen → @fontface (hulpmiddelen en theorie), FOUT, fonts vergelijken, info over fonts, en dergelijke.
Specifiek over subsetting zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Zelf font samenstellen of aanpassen (inclusief subsetting).

3perf.com/talks/web-perf-101
Uitgebreid overzicht van manieren om de snelheid van 'n site te verbeteren.

abhisaha.com/blog/exploring-browser-rendering-process
Gedetailleerd overzicht van wat er gebeurt tussen het opvragen en de weergave van een pagina.

blog.sentry.io/what-is-inp
Tutorial over INP.

calibreapp.com/blog/causes-of-slow-websites
Acht veel voorkomende oorzaken van een trage site en hoe die te verbeteren.

calibreapp.com/core-web-vitals
Uitleg wat Core Web Vitals zijn.

csswizardry.com/2023/07/core-web-vitals-for-search-engine-optimisation
Uitgebreide uitleg over Core Web Vitals.

github.com/davidsonfellipe/awesome-wpo
Pagina met heel veel links naar van alles wat met de snelheid van de site te maken heeft.

perf.rocks/tools
Pagina met zeer groot aantal links naar van alles wat met snelheid te maken heeft.

smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist
Zeer uitgebreid overzicht van technieken om 'n site sneller te maken. Met heel veel links naar meer info.

smashingmagazine.com/2021/04/complete-guide-measure-core-web-vitals.
Uitleg over de belangrijkste begrippen zoals CLS en Core Web Vitals.

smashingmagazine.com/2021/06/how-to-fix-cumulative-layout-shift-issues
Tutorial hoe CLS te voorkomen.

speedcurve.com/blog/15-neglected-page-speed-optimizations
Vijftien tips om een site sneller te maken.

speedcurve.com/web-performance-guide
Uitgebreide gids waarop te letten voor een zo snel mogelijke weergave.

tonsky.me/blog/pwa
Artikel waarom PWA's en AMP niet nodig zijn voor een snelle site.

web.dev/articles/css-web-vitals
Tutorial hoe CLS te voorkomen. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

web.dev/learn/performance
Cursus optimaliseren van een site. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webdesign.tutsplus.com/what-are-core-web-vitals
Uitgebreide uitleg over Core Web Vitals.

Sprite maken

(Onderafdeling van Gereedschap)

(Naarmate het gebruik van http/2 toeneemt, worden sprites voor gewone afbeeldingen steeds minder belangrijk.)

css.spritegen.com
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

cssportal.com/css-sprite-generator
Afbeeldingen uploaden en sprite plus bijbehorende code aanmaken.

responsive-css.spritegen.com
Afbeeldingen uploaden en responsieve sprite plus bijbehorende code aanmaken.

toptal.com/developers/css/sprite-generator
Afbeeldingen uploaden en combineren tot een sprite. De manier waarop de afbeeldingen binnen de sprite worden verwerkt, zoals padding, kan enigszins worden opgegeven.

Tabel maken

(Onderafdeling van Gereedschap)

divtable.com/table-styler
HTML-tabel maken met bijbehorende CSS. Met heel veel opmaakmogelijkheden.

tableizer.journalistopia.com
HTML-tabel maken van Excel-, Calc- of andere spreadsheet.

tablesgenerator.com/
HTML-tabel maken met bijbehorende CSS. Met veel opmaakmogelijkheden. Ook kan een bestaande tabel of CSV-bestand als basis worden gebruikt.

Tekstbrowser simuleren

(Onderafdeling van Gereedschap)

invisible-island.net/lynx
Website van Lynx met onder andere downloads voor 32-bits Windows. Nieuwere versies van Lynx zijn te vinden op invisible-mirror.net. (In Linux zal Lynx meestal in de repositories aanwezig zijn.)

links.twibright.com
Links. De site is een puinhoop. Downloads voor Windows (ook 64 bit) zijn te vinden op download. In Linux zal Links meestal in de repositories aanwezig zijn.

w3.org/services/html2txt
HTML omzetten in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Teksten vergelijken

(Onderafdeling van Gereedschap)

difftext.com
Twee teksten met elkaar vergelijken. Heel simpeL en heel duidelijk.

Thumbnails maken

(Onderafdeling van Gereedschap)

makethumbnails.com
Thumbnails maken van (groot) aantal geüploade afbeeldingen. Maat en kwaliteit kunnen worden ingesteld.

Tijdelijk online zetten

(Onderafdeling van Gereedschap)

codeshare.io
Tijdelijk code online zetten en gezamenlijk met anderen bewerken.

webdevout.net/test
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

URL-encoding

(Onderafdeling van Gereedschap)

URL-encoding zie HTML → Links, URL-encoding, en dergelijke.

Validators

(Onderafdeling van Gereedschap)

Validators staan bij de taal, het element, het doel, en dergelijke, waarvoor ze zijn bedoeld.

Vector-editor

(Onderafdeling van Gereedschap)

Zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Video

(Onderafdeling van Gereedschap)

Video's converteren en bewerken, code genereren voor <video>, bijschriften maken, enzovoort zie HTML → <audio>, <embed>, <iframe>, <object> en <video>.

Weergave en dergelijke testen

(Onderafdeling van Gereedschap)

Er worden hier alleen - voor zover bekend - gratis mogelijkheden vermeld. Er zijn nog tal van programma's en services, waarin je tegen betaling kunt testen in verschillende (versies van) browsers. Voor je ergens voor betaalt, kun je het best eerst heel erg goed recensies lezen, want er schijnt nogal wat kaf onder het (soms dure) koren te zitten.

Bij de meeste sites hieronder wordt alleen de resolutie veranderd. Dat kun je in principe zelf ook met elke desktopbrowser. Maar als je het venster van een desktopbrowser verkleint tot de afmetingen van een mobieltje, heb je absoluut nog geen mobieltje: je bent slechts in het gelukkige bezit van een doodgewone desktopbrowser met de grootte van een mobieltje. De meeste hieronder genoemde sites zijn dus absoluut geen vervanging voor het testen op een écht mobieltje en dergelijke.

Sites voor mobiele apparatuur en dergelijke testen zie Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen. Hiet staat alleen het testen van verschillende resoluties.

asisness.com/asisness/tools/screensize
Uiterlijk van de pagina bekijken in een aantal vooringestelde resoluties.

mattkersley.com/responsive
Uiterlijk van een pagina gelijktijdig in meerdere resoluties testen, die naast en onder elkaar op het scherm worden gezet.

virtualbox.org
Binnen een bestaand besturingssysteem een ander besturingssysteem installeren. Omdat je echt een heel besturingssysteem met browsers en al installeert, geeft dit een (vrijwel) perfecte testmogelijkeheid. Hiermee kun je Windows 7 installeren binnen Windows 8 of Linux, OS X installeren binnen Linux, Linux installeren binnen Windows 10, enzovoort. Pagina's met handleidingen worden hier niet vermeld, want die veranderen te snel. Maar als je even op internet zoekt, vind je zat goede en actuele handleidingen. Om echt lekker te kunnen werken, heeft je computer wel voldoende geheugen nodig.

WhoIs, traceroute, en dergelijke

(Onderafdeling van Gereedschap)

ping.eu
Ping, traceroute, whois, DNS lookup, en dergelijke.

sidn.nl
Informatie over in Nederland geregistreerde sites. Nederlandstalig.

sitereport.netcraft.com
Allerlei info over 'n site en de hoster daarvan.

viewdns.info/reverseip
Welke andere domeinen staan er op dezelfde server?

whatismyip.com/ip-address-lookup
Naam van 'n site bij het IP-adress opzoeken.

whois.domaintools.com
Eigenaar, hoster, enzovoort van site opzoeken.

.htaccess

Redirects op juistheid controleren zie Protocollen en foutcodes (statuscodes).

css-tricks.com/snippets/htaccess
Hele serie voorbeelden voor van alles en nog wat in .htaccess.

homepage-maken.nl/htaccess
Cursus .htaccess. Nederlandstalig.

htaccesscheck.com
.htaccess-validator.

htaccesseditor.com
.htaccess-bestand aanmaken met redirects, 404-pagina, enzovoort.

htaccessredirect.net
.htaccess-bestand aanmaken met mogelijkheid voor veel details.

htmlbasix.com/generator/disable-hotlinking-generator
Code genereren om hotlinken (rechtstreeks linken naar afbeeldingen en dergelijke) te verbieden.

ip2location.com/free/visitor-blocker
Lijsten met alle ip-nummers van 'n land om via .htaccess te blokkeren. Of dit écht alle ip-nummers van een land bestrijkt, is twijfelachtig. Bovendien zijn er de laatste jaren nogal wat blokken verhandeld tussen landen. Verder blokkeer je hiermee dus álle bezoekers, ook fatsoenlijke.

ipaddressguide.com
Gereedschappen voor ip-adressen, zoals het omzetten van een reeks ip-adressen naar CIDR-notatie.

onetomarket.nl/kennishub/301-redirect-tutorial
Uitgebreid artikel over redirecten met behulp van de 301-code. Nederlandstalig.

shop.alterlinks.com/htaccess/validator
.htaccess-validator.

HTML

<audio>, <embed>, <iframe>, <object> en <video>

(Onderafdeling van HTML)

Geluiden en video's om te downloaden zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video en dergelijke.

Converteren en bewerken

(Onderafdeling van HTML → <audio>, <embed>, <iframe>, <object> en <video>)

audacityteam.org
Open source programma om audio te converteren (en bewerken). Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)

audiomass.co
Geluidsbestand bewerken.

ffmpeg.org
Open source programma om audio en video te converteren. Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)
Op evanhahn.git.io kun je in gewone mensentaal (helaas alleen voor video) aangeven wat je wilt. De site zet dit dan om in de wiskundige formule voor cum laude-studenten die ffmpeg nodig heeft.
Uitgebreide handleiding (ook te begrijpen door gewone stervelingen): img.ly/blog/ultimate-guide-to-ffmpeg.

handbrake.fr
Open source programma om video te converteren. Geschikt voor Linux, OS X en Windows. (In Linux zal het meestal in de repo's zitten.)

tinywow.com/tools/video
Video en audio converteren tussen hele serie formaten en enkele gereedschappen voor simpele bewerkingen als verkleinen en extraheren van geluid.

vert.sh
Open source privacyvriendelijk audio en video converteren naar en van groot aantal formaten.

video.online-convert.com/convert-to-webm
Video converteren naar WebM.

wavacity.com
Geluidsbestand bewerken. Nederlandstalig.

Ondertiteling en bijschriften (<track>) en toegankelijkheid

(Onderafdeling van HTML → <audio>, <embed>, <iframe>, <object> en <video>)

accessibilityoz.com/2020/03/the-importance-of-captioning
Artikel over het belang van (een juist gebruik van) bijschriften bij video's.

adrianroselli.com/2023/09/browser-video-players-review
Overzicht van de toegankelijkheid van de in browsers ingebouwde videospelers.

developer.mozilla.org/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
Tutorial hoe ondertiteling en bijschriften aan te brengen bij <video>.

go.3playmedia.com/captions-format-converter
Ondertitels converteren van SRT en SBV naar een aantal andere formaten, waaronder WebVTT (aanmelden met e-mail noodzakelijk).

internetacademy.nl/ebooks/toegankelijke-online-video-en-audio
Nederlandstalige tutorial over het toegankelijk maken van video en audio. Ook te downloaden als PDF en ePub.

meryl.net/captioned-videos-complete-guide
Uitgebreide tutorial over bijschriften bij video's.

w3.org/TR/webvtt1
Ontwerp-specificatie WebVTT (ondertitels en dergelijke).

w3.org/WAI/media/av
Tutorial over het toegankelijk maken van <audio> en >video>.

w3c.github.io/webvtt.js/parser
Validator voor WebVTT.

zcorpan.github.io/live-webvtt-viewer
Onderschriften in WebVTT-formaat bekijken (om te controleren of het goed werkt).

Theorie, code en voorbeelden

(Onderafdeling van HTML → <audio>, <embed>, <iframe>, <object> en <video>)

Ingebedde inhoud aanpassen voor responsive weergave zie CSS → Media Query's, Container Query's en Responsive Web Design.

css-voorbeelden.nl/afbeelding/video/afbeelding-080
Video zonder plug-in in (bijna) elke browser met behulp van <video>. Met uitgebreide Nederlandstalige uitleg.

css-voorbeelden.nl/afbeelding/video/afbeelding-116
Met behulp van wat JavaScript naar een kleiner venster (zoals van een smartphone) een kleinere video sturen dan naar een groter venster. Nederlandstalig.

css-voorbeelden.nl/afbeelding/audio/afbeelding-126
Geluid afspelen met behulp van het <audio>-element. Nederlandstalig.

css-voorbeelden.nl/tekst/invoegen/tekst-108
Bestanden invoegen met behulp van <object>. Met uitgebreide Nederlandstalige uitleg.

jakearchibald.com/2022/html-codecs-parameter-for-av1
Tutorial om aan de hand van een praktijkvoorbeeld de juiste waarden voor de codecs-parameter te vinden.

simpl.info/video/events
Laat zien welke events optreden tijdens het afspelen, pauzeren, enzovoort van een video. De events worden achter elkaar vertoond.

scottjehl.com/posts/using-responsive-video
Tutorial hoe met <video> en <source> een video met aangepaste grootte te sturen.

w3.org/2010/05/video/mediavents
Laat zien welke events optreden tijdens het afspelen, pauzeren, enzovoort van een video. De events worden gelijktijdig vertoond.

w3schools.com/html/html_media
Multimedia tutorials en online uitproberen.

<b>, <blockquote>, <cite>, <del>, <em>, <i>, <ins>, <mark> en <strong>

(Onderafdeling van HTML)

adrianroselli.com/2023/07/blockquotes-in-screen-readers
Test hoe schermlezers verschillende vormen van <blockquote> en <cite> voorlezen.

css-tricks.com/the-double-emphasis-thing
Artikel over de verschillen tussen <i>, <b>, <em> en <strong> en wanneer wat te gebruiken.

Browser support

(Onderafdeling van HTML)

zie CSS → Browser support en Release Notes.

Bugs en hacks

(Onderafdeling van HTML)

zie CSS → Bugs, hacks en @supports.

<canvas>

(Onderafdeling van HTML)

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve
Canvas Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve
Canvas kwadratische Bézier-kromme uitproberen. De lijn verandert door de controlepunten te verslepen, waarbij de code gelijk mee verandert.

developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
Zeer uitgebreide <canvas>-tutorial.

goalkicker.com/HTML5CanvasBook
Gratis PDF-boek over <canvas>, samengesteld door Stack Overflow. Dit is geen echte stap-voor-stap-cursus, maar het staat wel boordevol nuttige informatie en is daardoor eigenlijk toch 'n soort cursus.

jenkov.com/tutorials/html5-canvas
Tutorial over <canvas>.

pauljadam.com/demos/canvas
Tutorial over toegankelijkheid en <canvas>.

udacity.com/course/html5-canvas
Cursus canvas. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

Charsets, unicode, entiteiten

(Onderafdeling van HTML)

In HTML5 is het aantal entiteiten enorm uitgebreid. Lang niet alle browsers ondersteunen al deze entiteiten, dus testen op een correcte weergave is absoluut nodig. Of gewoon de utf-8-code gebruiken.

In het algemeen is utf-8 de enig juiste karakterset voor websites. Andere karaktersets staan hier eigenlijk alleen nog maar voor het geval je iets op wilt zoeken. (En voor gevorderde masochisten die zichzelf op 'n winteravond gezellig willen pesten door deze ellendepukkels nog 'ns te bekijken.)

Hoe schermlezers omgaan met entiteiten is te vinden bij Toegankelijkheid → Browser (en schermlezer) support.

Opzoeken welke karakters in een bepaald font zitten zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Typografie.

Lijsten met karakters en/of opzoeken van entiteit, utf-8-code, codepoint, en dergelijke

(Onderafdeling van HTML → Charsets, unicode, entiteiten)

aymkdn.github.io/characters
utf-8-code voor HTML (&#....;) en CSS (content: "\....";) opzoeken voor grote hoeveelheid pijlen, valuta, emoticons, vormen, wiskundige symbolen, getallen, interpunctie en symbolen.

charactercodes.net/block
Alle unicode-karakters, opgedeeld in blokken. Met bij elk karakter uitgebreide informatie.

charactercodes.net/category
Unicode en uitgebreide info opzoeken bij een karakter aan de hand van een indeling in categorieën zoals, hoofd- en kleine letters, wiskundige symbolen en cijfers, ongeacht het codeblok waar ze in zitten.

charactercodes.net/html-named-entities
Lijst met entiteiten uit HTML5. LET OP: mogelijk werken deze niet allemaal in alle browsers, zeker niet in oudere.

cryptii.com/pipes/unicode-lookup
In één keer alle unicode codepoints (en diverse andere coderingen) voor een stuk tekst opzoeken.

emojipedia.org
Overzicht van alle emoticons uit Unicode. Met zoekmogelijkheid op onder andere trefwoord, categorie, besturingssysteem en versie. Geeft voorbeelden van de weergave op verschillende besturingssystemen, codepoints, en dergelijke.

en.wikipedia.org/wiki/List_of_Unicode_characters
In westerse landen meest gebruikte unicode-karakters op één pagina, opgedeeld in blokken. Met links naar andere blokken met andere karakters.

invisible-characters.com/view
In een stuk tekst onzichtbare karakters vervangen door hun unicode.

kirillbelyaev.com/s
Codes voor alle mogelijke soorten spaties en andere witruimtes.

quackit.com/character_sets/unicode
utf-8-code en entiteit opzoeken. Zoekmogelijkheid op onder andere utf-8-code en entiteit.

shapecatcher.com
Karakter, emoticon, en dergelijke tekenen en bijbehorende utf-8-code krijgen. (Ongelooflijk. Je hoeft niet eens goed te kunnen tekenen en dan werkt het al!)

spec.whatwg.org/multipage/named-characters
Lijst met entiteiten uit HTML5. LET OP: mogelijk werken deze niet allemaal in alle browsers, zeker niet in oudere.

texteditor.com/font-converter
utf-8-code en dergelijke opzoeken voor groot aantal tekens, emoticons, en dergelijke.

toptal.com/designers/htmlarrows
Entiteit, utf-8-code, en dergelijke opzoeken voor grote hoeveelheid pijlen, valuta, letters, wiskundige symbolen, interpunctie, getallen en symbolen.

unicode.org/charts/ (The Unicode Consortium)
Alle unicode-karakters, opgedeeld in blokken. Elk blok is te downloaden als PDF.

unilist.raphaelbastide.com
Overzichtelijke lijst met grote hoeveelheid makkelijk te kopiëren emoticons, getallen, pijlen, symbolen, en dergelijke.

Overig

(Onderafdeling van HTML → Charsets, unicode, entiteiten)

dir-attribuut zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

css-voorbeelden.nl/artikelen/html/head/artikelen-064
Artikel over charset, tekenset, utf-8, entiteiten, accenten, en dergelijke. Nederlandstalig.

fileformat.info/info/unicode
Zeer uitgebreide informatie over utf-8 zoals welk font welk teken ondersteunt en een alfabetische lijst van unicode-karakters.

iana.org/assignments/character-sets
Zeer uitgebreid overzicht en beschrijving van charsets, waaronder de meest dolzinnige uit de tijd dat charsets elkaar de tent uitvochten en je vaak algebra zag, als je probeerde 'n Windows-bestand op 'n Mac te lezen. En omgekeerd. Aanbevolen voor de liefhebbers van 'Vroeger was alles beter'.

onlinetools.com/utf8
Grote verzameling gereedschap om utf-8 te converteren, te bewerken, codepoints op te zoeken, enzovoort.

r12a.github.io/app-conversion
Van en naar hele reeks formaten (hex, unicode, enzovoort) converteren.

reedbeta.com/blog/programmers-intro-to-unicode
Artikel over de opbouw van unicode.

smashingmagazine.com/2012/06/all-about-unicode-utf8-character-sets
Uitgebreide uitleg over de opbouw van unicode, tekensets, en dergelijke. Al ouder maar, behalve de verouderde HTML, nog steeds geldig.

tonsky.me/blog/unicode
Artikel over de opbouw van en mogelijke problemen met unicode.

Code bekijken

(Onderafdeling van HTML)

In elke browser kun je de HTML van een pagina bekijken, maar die is vaak gecomprimeerd of om andere redenen volstrekt onleesbaar. Hulpmiddelen om de HTML leesbaar te maken, vind je bij Gereedschap → Code leesbaar maken.

Cursusen

(Onderafdeling van HTML)

Omdat HTML en CSS in toenemende mate in samenhang worden behandeld, staan alle algemene cursussen HTML en/of CSS bij elkaar bij CSS → Cursussen CSS en/of HTML.

Cursussen en dergelijke specifiek voor Responsive Web Design, responsieve afbeeldingen, en dergelijke staan bij CSS → Media Query's, Container Query's en Responsive Web Design.

Cursussen en dergelijke specifiek voor toegankelijkheid zijn te vinden bij Toegankelijkheid → Cursussen, algemene tutorials, en dergelijke.

data-attribuut (data-*)

(Onderafdeling van HTML)

css-tricks.com/a-complete-guide-to-data-attributes
Tutorial met voorbeelden.

developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes
Korte uitleg over het data-attribuut.

sitepoint.com/how-why-use-html5-custom-data-attributes
Tutorial met voorbeelden over het gebruik van het data-attribuut.

<details> en <summary>

(Onderafdeling van HTML)

css-tricks.com/exploring-what-the-details-and-summary-elements-can-do
Allerlei niet direct voor de hand liggende voorbeelden van wat mogelijk is met <details> en <summary>.

scottohara.me//blog/2022/09/12/details-summary
Uitgebreide beschrijving van <details> en <summary>.

<dialog>, inert- en popover-attribuut

(Onderafdeling van HTML)

Het inert-attribuut is hier ondergebracht, omdat dit vaak samen met <dialog> gebruikt zal worden.

amitmerchant.com/popover-api
Tutorial over popover-attribuut.

css-tricks.com/focus-management-and-inert
Tutorial over het inert-attribuut.

frontendmasters.com/blog/menus-toasts-and-more
Tutorial over het popover-attribuut.

frontendmasters.com/blog/whats-the-difference-between-htmls-dialog-element-and-popovers
Gedetailleerd overzicht van de verschillen tussen <dialog> en het popover-attribuut.

gomakethings.com/an-intro-to-the-dialog-element
Tutorial over <dialog>.

hidde.blog/dialog-modal-popover-differences
Artikel over het verschil tusen <dialog> en het popover-attribuut.

hidde.blog/popover-accessibility
Artikel over het popover-attribuut en toegankelijkheid.

hidde.blog/popover-semantics
Artikel over waar het popover-attribuut geschikt voor is.

matuzo.at/blog/2023/focus-dialog
Artikel over verschillen tussen browsers bij <dialog> en focus, en hoe die op te lossen.

scottohara.me/blog/2019/03/05/open-dialog
Tutorial over <dialog>, met veel aandacht voor toegankelijkheid.

stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers
Uitgebreide tutorial over <dialog>.

voorhoede.nl/nl/blog/the-popover-api-your-new-best-friend-for-tooltips
Tutorial hoe met het popover-attribuut tooltips te maken.

web.dev/articles/building/a-dialog-component
Uitgebreide tutorial over <dialog>.

webkit.org/blog/12209/introducing-the-dialog-element
Tutorial over het <dialog>-element, aangestuurd door JavaScript.

webkit.org/blog/12578/non-interactive-elements-with-the-inert-attribute
Tutorial over het inert-attribuut.

Dingen mogelijk maken die (nog) niet werken

(Onderafdeling van HTML)

Zie CSS → Bugs, hacks en @supports → Niet-ondersteunde, elementen, eigenschappen, enzovoort mogelijk maken.

Doctype (DTD)

(Onderafdeling van HTML)

Quirks modus zie CSS → Quirks modus.

css-voorbeelden.nl/artikelen/html/head/artikelen-102
Wat is het beste doctype? En waarom is dat zo? En hoe is dat zo gekomen? En waarom...? Daarom! Nederlandstalig.

w3.org/QA/04/valid-dtd-list
Lijst met geldige doctypes (DTD's).

w3schools.com/xml/xml_dtd_intro
DTD Tutorial en overzicht. (Dit is een heel theoretisch verhaal en alleen interessant voor echt geïnteresseerden.)

xhtml5.nl/naslag/html/doctype
Nederlandstalig overzicht van doctypes, met korte uitleg.

Favicon

(Onderafdeling van HTML)

Alles over facicons, ook de theorie, is te vinden bij Gereedschap → Favicon maken, testen, en dergelijke.

<figure> en <figcaption>

(Onderafdeling van HTML)

<img> en <picture> zijn, anders dan <figure>, alleen bedoeld voor afbeeldingen en staan bij CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

scottohara.me/blog/2019/01/21/how-do-you-figure
Artikel over het gebruik van <figure>, <figcaption> en eventueel alt.

Formulieren, <input>, en dergelijke

(Onderafdeling van HTML)

(Code voor) kant-en-klare knoppen en dergelijke zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Online cursussen, voorbeelden, uitproberen en dergelijke van reguliere expressies voor pattern attribuut zie Gereedschap → Reguliere expressies.

Opmaak (het uiterlijk) van formulieren, <input>, en dergelijke zie CSS → Forms, buttons, :disabled, :enabled, checkbox hack, en dergelijke.

adrianroselli.com/2022/07/use-legend-and-fieldset
Artikel over het nut van <fieldset> en ≤legend> voor toegankelijkheid, en hoe bepaalde problemen daarbij op te lossen.

austingil.com/how-to-build-html-forms-right-semantics
Zeer uitgebreide tutorial over het maken van (toegankelijke) formulieren.

business.scope.org.uk/how-to-design-accessible-web-forms
Tutorial over het maken van toegankelijke formulieren.

buttoncheatsheet.com
Voorbeelden met uitleg van (on)toegankeljke knoppen.

cloudfour.com/thinks/progressively-enhanced-form-validation-part-1-html-and-css
Tutorial over het valideren van (toegankelijke) formulieren.
Deel 2 Deel 3 Deel 4

css-tricks.com/form-validation
Zeer uitgebreide tutorial over in de browser valideren van formulieren. (Vier delen, onderaan staan de links naar de andere delen.)

css-tricks.com/html-inputs-and-labels-a-love-story
Artikel over het belang van (een juist gebruik van ) <label> voor toegankelijkheid.

deque.com/blog/accessible-forms-the-problem-with-placeholders
Artikel over problemen met toegankelijkheid en het placeholder-attribuut en mogelijke oplossingen daarvoor.

htmhell.dev/adventcalendar/2024/15
Waarom een echte <button> beter is dan een tot <button> omgebouwde <div>.

inputtypes.com
Kijken welke invoer bij welk soort velden en dergelijke geldig is.

hackernoon.com/a-quick-guide-on-how-to-create-accessible-buttons-in-html
Tutorial hoe toegankelijke <button>'s te maken.

matuzo.at/blog/2022/button-baader
Allerlei manieren om een <button> toegankelijk te maken.

nativeformelements.com
Laat zien hoe alle form-elementen er in de browser, waarmee je deze pagina bezoekt, uitzien.

nngroup.com/articles/checkboxes-design-guidelines
Tutorial over een juist gebruik van keuzevakjes.

ovl.design/text/inclusive-inputs
Handleiding hoe <input>'s toegankelijk te maken.

scale.at/blog/forms-ux-problems-solutions
Aantal veel gemaakte fouten in formulieren en hoe het beter kan.

smashingmagazine.com/2022/09/inline-validation-web-forms-ux
Artikel over de voor- en nadelen van diverse manieren van valideren van velden.

smashingmagazine.com/2023/02/guide-accessible-form-validation
Tutorial over valideren van toegankelijke formulieren.

stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input
Artikel over de problemen met <input type="number"> en hoe die te voorkomen.

tetralogical.com/blog/2025/01/31/foundations-fieldset-and-legend
Tutorial over een juist gebruik van <fieldset> en <legend>.

tpgi.com/how-to-meet-sc-2-5-3-label-in-name
Artikel over waaraan een goed label moet voldoen.

tpgi.com/labeling-the-point-scenarios-of-label-misuse-in-wcag
Voorbeelden van (vaak gemaakte) fouten bij <label> die toegankelijkheid verminderen.

udacity.com/course/building-high-conversion-web-forms
Cursus efficiënte formulieren maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

web.dev/learn/forms
Interactieve cursus formulieren maken. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

webcode.tools/html-generator
Code voor allerlei onderdelen van formulieren en dergelijke maken, waarbij gelijk het resultaat wordt getoond.

xd.adobe.com/ideas/principles/web-design/best-practices-form-design
Uitgebreid artikel met tips om goede formulieren te maken.

Forums

(Onderafdeling van HTML)

Zie CSS → Forums

<head>, metadata, Priority hints, Resource hints, en dergelijke

(Onderafdeling van HTML)

meta viewport zie Mobiele apparatuur → Theorie, links, forums, en dergelijke.

Snelheid testen, comprimeren, en dergelijke zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke.

3perf.com/blog/link-rels
Uitgebreide uitleg over preload, prefetch, preconnect, dns-prefetch, prerender en modulepreload.

blog.logrocket.com/understanding-css-preload-other-resource-hints
Tutorial over preload, prefetch, dns-prefetch en preconnect.

debugbear.com/resource-hint-validator
Validator voor resource hints.

getoutofmyhead.dev
Overzicht welke tags in de <head> in welke asociale media en dergelijke werken.

htmhell.dev/adventcalendar/2022/21
Overzicht met voorbeelden van waarden die bij rel="..." kunnen worden gebruikt.

htmlhead.dev
Uitgebreid overzicht van alles wat in <head> kan worden geplaatst. (En dat is veel...) Met veel links naar meer uitleg en dergelijke.

iana.org/assignments/link-relations
Overzicht van alle geregistreerde relaties bij <link ...>. Met link naar bijbehorende specificatie en dergelijke.

imkev.dev/fetchpriority-opportunity
Tutorial over priority hints.

microformats.org/wiki/existing-rel-values
Lijst met toegestane waarden bij rel="..."

smashingmagazine.com/2019/04/optimization-performance-resource-hints
Uitgebreide uitleg over het gebruik van dns-prefetch, preconnect, prefetch, prerender.

<hr>

(Onderafdeling van HTML)

Afbeeldingen met lijnen zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video en dergelijke.

Volledig met CSS gemaakte lijnen en met CSS aangepaste <hr>'s zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Lijnen.

Imagemap

(Onderafdeling van HTML)

Online imagemap maken zie Gereedschap → Imagemap maken.

<img>

(Onderafdeling van HTML)

alt-attribuut zie Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke → alt-attribuut.

Al het overige over afbeeldingen is op één plaats te vinden bij CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

lang-attribuut en internationalisatie

(Onderafdeling van HTML)

Eigenschappen die rekening houden met de richting van de taal zoals Logical properties, writing-mode, dir-attribuut, :dir(), en dergelijke zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

lang-attribuut en talen zie Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke → Taal en lang-attribuut.

Lay-outs

(Onderafdeling van HTML)

Min of meer kant-en-klare lay-outs zie CSS → Lay-outs.

Lijsten (<dl>, <li>, <ol> en <ul>)

(Onderafdeling van HTML)

Ondersteuning van <th> en dergelijke door schermlezers staat bij Toegankelijkheid → Browser (en schermlezer) support.

benmyers.dev/blog/on-the-dl
Artikel over de voordelen van <dl> wat betreft toegankelijkheid. Met voorbeelden.

tutorialspoint.com/html/html_lists
Uitgebreide tutorial over <ul>, <ol>, <dl> en de bijbehorende elementen en attributen.

Links, URL-encoding, en dergelijke

(Onderafdeling van HTML)

dev.to/frontenddeveli/a-down-to-earth-explication-of-the-noopener-noreferrer-attributes
Heldere uitleg over de attributen noopener en noreferrer in een link.

digitala11y.com/external-links-in-or-out
Artikel over de ontoegankelijkheid van links die in een nieuwe tab openen, en hoe dat te voorkomen.

meyerweb.com/eric/tools/dencoder
url encoderen (speciale tekens vervangen door codes) en decoderen.

opinionatedgeek.com/codecs/urlencode
url encoderen (speciale tekens vervangen door codes).

prototypr.io/post/designing-better-hyperlinks
Uitgebreid artikel hoe goede, toegankelijke links te maken.

w3schools.com/tags/ref_urlencode
Lijst met URL-encoding codes (dat zijn die % in url's).

<meter> en <progress>

(Onderafdeling van HTML)

htmhell.dev/adventcalendar/2022/5
Tutorial over <meter>.

quackit.com/html/tags/html_progress_tag
Tutorial over <progress>.

Microdata

(Onderafdeling van HTML)

html.spec.whatwg.org/multipage/microdata
Rechtstreekse link naar het hoofdstuk microdata in de HTML-specificatie.

linter.structured-data.org
Validator voor microdata.

schema.org
Overzicht van gedefinieerde microdata.

search.google.com/test/rich-results
Validator voor bepaalde extra gegevens voor Google's zoekmachine, zoals data en te kopen producten.

validator.schema.org
Validator voor schema.org.

MIME-types

(Onderafdeling van HTML)

freeformatter.com/mime-types-list
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

it-tools.tech/mime-types
Lijst van MIME-types zoals die onder andere kunnen worden gebruikt bij formulieren.

Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken

(Onderafdeling van HTML)

Zie CSS → Bugs, hacks en @supports → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Nieuwsbrieven en dergelijke

(Onderafdeling van HTML)

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Online wijzigingen uitproberen

(Onderafdeling van HTML)

Alle (grotere) browsers hebben ingebouwde ontwikkelgereedschappen, waarin je online code kunt wijzigen. Ook als het om sites van anderen gaat. Zie hiervoor Gereedschap → Debuggen.

Als iets niet hier bij HTML staat, kun je het ook bij Gereedschap proberen. Combinaties van CSS, HTML, JavaScript, enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van CSS, HTML, JavaScript enzovoort uitproberen en eventueel delen.

Het uitproberen van en code genereren voor CSS, bijvoorbeeld om een knop in een formulier op te maken, staat bij CSS → Online uitproberen, code genereren, en dergelijke.

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Kopregels (<h...>) en sectievormende elementen (zoals <section> en <nav>)

(Onderafdeling van HTML)

a11yproject.com/posts/how-to-accessible-heading-structure
Artikel over het belang van een juist gebruik van <h>'s voor toegankelijkheid.

blog.pope.tech/2022/08/04/5-heading-accessibility-issues-and-how-to-fix-them
Artikel over fouten bij het gebruik van <h>'s en hoe die fouten te herstellen.

gsnedders.html5.org/outliner
Outline controleren (juiste volgorde van <h...> en dergelijke).

scottohara.me/blog/2021/07/16/section
Artikel over het juiste gebruik van <section>.

scottohara.me/blog/2022/01/20/divisive
Artikel over wanneer een <div> gebruikt kan worden, en wanneer een semantisch element beter is.

smashingmagazine.com/2022/07/article-section-elements-accessibility
Heel uitgebreide tutorial wanneer <article> en wanneer <section> te gebruiken. Met veel links naar meer info.

webaim.org/techniques/headings
Artikel over een juist gebruik van <h>'s en veel voorkomende fouten.

webdesign.tutsplus.com/the-importance-of-heading-levels-for-assistive-technology
Artikel over het belang voor toegankelijkheid van (een juist gebruik) van <h>'s.

Overzicht elementen, attributen, tips, specificatie, en dergelijke

(Onderafdeling van HTML)

Algemene cursussen HTML zijn te vinden bij CSS → Cursussen CSS en/of HTML.

cssportal.com/html-attributes
Overzicht van attributen. Met veel aan te passen voorbeelden.

cssportal.com/html-tags
Overzicht van elementen. Met veel aan te passen voorbeelden.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort. Zeer overzichtelijk ingedeeld.

developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes
Overzicht van alle HTML-attributen en bij welke elementen ze gebruikt mogen worden.

developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
Overzicht van alle HTML-elementen met bij elk element link naar uitgebreide uitleg.

html.spec.whatwg.org/dev
(Min of meer) leesbare versie voor sitebouwers van de HTML-specificatie hier gelijk onder.

html.spec.whatwg.org/multipage
'Living Standard' HTML. Dit is de laatste versie van HTML, die voortdurend wordt bijgewerkt.

htmlreference.io
Alfabetisch overzicht van elementen met bij elk element een voorbeeld.

internetacademy.nl/ebooks/webtechniek
Nederlandstalige zeer uitgebreide uitleg van de belangrijkste begrippen, opbouw van een pagina, en dergelijke. Ook te downloaden als PDF en ePub.

quackit.com/html/codes
Elementen gegroepeerd naar gebruik. Met veel live aan te passen voorbeelden.

quackit.com/html/tags
Alfabetisch overzicht van elementen. Met veel voorbeelden.

tutorialrepublic.com/references
Overzicht van elementen met mogelijkheid om ze interactief uit te proberen.

w3schools.com/tags
HTML-referentie met overzicht van tags, attributen, en dergelijke. Met uitgebreide uitleg bij elke ingang.

<picture>

(Onderafdeling van HTML)

Zie CSS → Media Query's, Container Query's en Responsive Web Design → Images (inclusief 'lazy loading' en niet-CSS-methoden zoals SVG, <picture> en <img>).

<pre>

(Onderafdeling van HTML)

sitepoint.com/everything-need-know-html-pre-element
Uitgebreid artikel over het <pre>-element met allerlei mogelijke problemen en daarbij horende mogelijke oplossingen.

Snelheid

(Onderafdeling van HTML)

Afbeeldingen optimaliseren zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren.

Algemene tests op snelheid, tips, theorie, cache-control, en dergelijke zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke.

Invloed van animaties, zoals transform en transition, zie CSS → animation, transform, transition en Motion Path → Overig.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Snelheid mobiele apparatuur testen zie Mobiele apparatuur → Validators, browser sniffing,en dergelijke.

Webfonts downloaden versnellen zie CSS → Fonts, typografie, tekst, emoticons en lijnen.

Tabellen (<table>, <td>, en dergelijke)

(Onderafdeling van HTML)

Online tabel maken zie Gereedschap → Tabel maken.

Tabellen voor Responsive Web Design zie CSS → Media Query's, Container Query's en Responsive Web Design.

css-tricks.com/complete-guide-table-element
Uitgebreid artikel over het gebruik van tabellen. Met een beschrijving van alle onderdelen, links naar meer info, enzovoort.

smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1
Tutorial hoe een toegankelijke responsieve tabel te maken deel 1.
Deel 2

w3.org/WAI/tutorials/tables
Voorbeelden van verschillende soorten toegankelijke tabellen.

Validators

(Onderafdeling van HTML)

htmlhint-playground.netlify.app
HTML-validator die desgewenst ook kan controleren op het sluiten van <p>, plaats van het doctype, en dergelijke. Dingen die niet móéten, maar wel verstandig zijn. Zoiets als HTML controleren met de strengere maatstaven van het overleden xhtml. Je kunt deze validator installeren of online gebruiken

jsonschemavalidator.net
Web manifest validator.

manifesttester.com
Web manifest validator.

validator.w3.org/nu
Validator van W3C, de club die de officiële specificactie van onder andere HTML5 bijhoudt. Online bij één pagina tegelijk HTML valideren. Valideert op onder andere HTML5, ARIA, MathML en SVG.

Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen)

(Onderafdeling van HTML)

abeautifulsite.net/posts/a-web-components-primer
Uiterst duidelijke uitleg over Web Components en Shadow DOM.

css-tricks.com/an-introduction-to-web-components
Uitgebreide tutorial in vijf delen over Web Components (bovenaan de pagina staan links naar de andere delen).

css-tricks.com/web-component-pseudo-classes-and-pseudo-elements
Tutorial over ::part, ::slotted, :defined, :host, en:host-context.

dev.to/thepassle/web-components-from-zero-to-hero
Uitgebreide tutorial over Web Components en alles daaromheen.

genericcomponents.netlify.app
Kleine sortering toegankelijke Web Components die je kunt gebruiken zonder dat half github aan frameworks nodig is.

github.com/web-padawan/awesome-web-components
Pagina met veel links naar van alles wat met Web Components te maken heeft.

lea.verou.me/blog/2020/09/the-failed-promise-of-web-components
Kritisch artikel over de huidige staat van Web Components.

matuzo.at/blog/2023/web-components-accessibility-faq
Veel voorkomende vragen (en antwoorden) over Web Components en toegankelijkheid.

thenewobjective.com/web-development/a-criticism-of-web-components
Kritisch artikel over de huidige staat van Web Components.

JavaScript, DOM en CSSOM

Browser support en referenties zie CSS → Browser support en Release Notes.

CORS zie Malware, spam, beveiliging, en dergelijke.

JSON zie JSON.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Node.js zie Commandline (terminal, NPM, Grunt, Gulp, en dergelijke).

CSSOM

(Onderafdeling van JavaScript, DOM en CSSOM)

css-tricks.com/an-introduction-to-the-css-object-model-cssom
Uitleg over de CSSOM en hoe deze gebruikt kan worden om CSS te wijzigen.

DOM en events

(Onderafdeling van JavaScript, DOM en CSSOM)

Shadow DOM zie HTML → Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen).

In de meer algemene tutorials en voorbeelden onder JavaScript, DOM en CSSOM → Tutorials, voorbeelden is vaak ook nog info over de DOM te vinden.

cssportal.com/html-event-attributes
OVerzicht van events. Met veel aan te passen voorbeelden.

developer.mozilla.org/en-us/docs/Web/Events
Overzicht van events, met links naar bijbehorende specificatie en dergelijke.

digitalocean.com/community/tutorials/introduction-to-the-dom
Uitgebreide uitleg over de DOM.

egghead.io/courses/your-ultimate-guide-to-understanding-dom-events
Zeer uitgebreide curus in videovorm over events. Met ondertiteling.

freecodecamp.org/news/dom-manipulation-htmlcollection-vs-nodelist
Gedetaillerde beschrijving van het verschil tussen een HTMLCollection en een NodeList.

itnext.io/using-the-dom-like-a-pro
Overzicht van veel gebruikte methoden voor DOM-manipulatie, zoals toevoegen, wijzigen en verwijderen van elementen.

Forums

(Onderafdeling van JavaScript, DOM en CSSOM)

Zie CSS → Forums

Scripts, bibliotheken, frameworks en API's

(Onderafdeling van JavaScript, DOM en CSSOM)

Scripts, polyfils en dergelijke om dingen mogelijk te maken in browsers die iets niet ondersteunen staan bij CSS → Bugs, hacks en @supports → Niet ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Scripts en dergelijke speciaal voor één soort element, eigenschap, en dergelijke (zoals voor canvas of fonts) kunnen ook bij dat onderwerp staan.

Afzonderlijke bibliotheken en frameworks staan hier niet meer, alleen nog pagina's met overzichten daarvan en dergelijke. Een konijnenfokker zou jaloers zijn op het voortplantingstempo van deze dingen: het is gewoon simpelweg niet bij te houden. Laat staan dat een enigszins fatsoenlijke controle op de kwaliteit van deze geboortegolf mogelijk is.

apislist.com
Overzicht van publieke API's. (Variërend van fantastische sympathieke non-profit projecten tot de meest griezelige datadieven, dus wel even kritisch bekijken voor je iets op je site zet.)

github.com/Chalarangelo/30-seconds-of-code
Groot aantal korte stukjes code voor veel voorkomende taken.

github.com/mnater/Hyphenopoly
Script dat woorden automatisch laat afbreken, net zoals dat in een tekstverwerker zou gebeuren. Werkt met veel talen, waaronder Nederlands. Nederlands is summier getest, en het lijkt goed te werken.

jquery.com
Bibliotheek met allerlei functies.
Heel vaak wordt een grote bibliotheek als jQuery gebruikt, terwijl één regeltje JavaScript die hele bibliotheek overbodig maakt. jQuery blonk uit in het oplossen van incompabitliteiten tussen browsers, maar is daar nauwelijks nog voor nodig. Als je het alleen daarvoor gebruikte, heb je het dus inmiddels mogelijk niet meer nodig.
youmightnotneedjquery: laat zien wat jQuery doet en wat de code rechtstreeks in JavaScript is.
tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript: handige gids om jQuery te vervangen door JavaScript.

jster.net
Gigantisch overzicht van bibliotheken, ingedeeld naar waar ze voor zijn bedoeld.

microjs.com
Gigantisch aantal gespecialiseerde kleine bibliotheken.

plainjs.com
Groot aantal scripts en functies die werken zonder externe bibliotheek.

selection.datavisualization.ch
Lijst met links naar bibliotheken, frameworks, en dergelijke voor gespecialiseerde doeleinden.

Tutorials, voorbeelden

(Onderafdeling van JavaScript, DOM en CSSOM)

JavaScript of CSS gebruiken voor animaties staat bij CSS → animation, transform, transition en Motion Path → Overig.

Shadow DOM zie Web Components (Custom elements, Shadow DOM, <template> en <slot>, en de bijbehorende pseudo-classes en -elementen).

Specifiek voor API's en dergelijke voor HTML5 zie bij HTML.

Tutorials en dergelijke voor specifiek DOM en events zie JavaScript, DOM en CSSOM.

code.tutsplus.com/learn-modern-javascript-fundamentals-in-7-hours-free-course
Basiscursus JavaScript in de vorm van video's (met ondertiteling).

dapelican.dev/js-exercises
Links naar oefeningen.

devdocs.io
Browser support voor zo'n beetje elk denkbare taal, ook in mobiele browsers. Met voorbeelden, links naar meer info, enzovoort.

developer.mozilla.org/en-US/docs/Web/JavaScript
Links naar allerlei uiterst nuttige onderwerpen, zoals wat nieuw is in welke versie van JavaScript, uitgebreide tutorials, referentie, enzovoort.

eloquentjavascript.net
Uitgebreid online lesboek over JavaScript. Met oefeningen (en oplossingen). Ook te downloaden als PDF, ePub en MOBI.

exploringjs.com/impatient-js
Online boek over JavaScript, inclusief ECMAScript 2022.
Op exploringjs.com/deep-js staat het vervolg voor gevorderden.
Van beide boeken kan ook een betaalde, iets uitgebreidere, versie worden besteld.

freecodecamp.org/news/learn-javascript-with-new-data-structures-and-algorithms-certification-projects/
Interactieve cursus JavaScript in de vorm van 21 projecten. (Op deze site staat ook een enorme hoeveelheid meer gespecialiseerde tutorials over JavaScript.)

freecodecamp.org/news/the-complete-javascript-handbook
Korte cursus JavaScript.

freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript
Artikel over het verschil tussen JavaScript en ECMAScript, maar ook uitleg over Babel, JavaScript-engines in browsers, enzovoort.

geeksforgeeks.org/javascript
Korte interactieve handleidingen, gesorteerd op onderwerp. (Voor het interactieve deel moet je je wel registreren.)

github.com/leonardomso/33-js-concepts
Enorme lijst met links naar artikelen, tutorials, enzovoort, ingedeeld naar onderwerp.

javascript.info
Waanzinnig goede, zeer uitgebreide en duidelijke tutorial in de vorm van een boek. Overzichtelijk ingedeeld in hoofdstukken. Met opgaven (en oplossingen), een uitstekende zoekfunctie en de mogelijkheid om (na registratie) vragen te stellen.

javascriptkicks.com/stories
Site met enorme hoeveelheid aan tutorials en handleidingen. Als je 'n zoekterm invoert, vind je gegarandeerd een (of heel veel) tutorials.

kirupa.com/html5/learn_javascript
Uiterst duidelijke cursus JavaScript.

michael-karen.medium.com/learning-modern-javascript-with-tetris
Cursus JavaScript in de vorm van het maken van het spelletje Tetris. (Mogelijk mis je hierdoor wel wat dingen, maar het is wel heel erg leuk. En je kunt later altijd een wat schoolsere cursus volgen.)

o7planning.org/12171/ecmascript-javascript
Duidelijke, uitgebreide tutorials over allerlei onderdelen van JavaScript.

phuoc.ng/collection/html-dom
Kant-en-klare stukjes code voor veel voorkomende bewerkingen.

sherpa.guide/paths/javascript
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om JavaScript. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

tutorialrepublic.com/javascript-tutorial
Interactieve cursus JavaScript.

udacity.com/catalog
Aantal kwalitatief goede cursussen, waaronder een aantal gratis. Bovenaan de pagina kun je zoeken op onderwerp, prijs, en dergelijke. Je moet je wel registreren.

udemy.com/course/javascript-essentials
Basiscursus JavaScript in videovorm. Met automatische ondertiteling. De cursus is gratis, maar je moet je wel registreren.
Een iets dieper gaande vervolgcursus: udemy.com/course/advanced-and-object-oriented-javascript.

v8.dev/blog/cost-of-javascript-2019
Uitgebreid artikel over de vertragende werking van JavaScript en hoe dat zoveel mogelijk te voorkomen.

w3schools.com/js
Interactieve JavaScript-tutorial en overzicht van de taal.

web.dev/learn/javascript
Cursus JavaScript. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

wesbos.com/javascript
Uitgebreide cursus.

Validators, debuggers, formatteren, online uitproberen, generators, en dergelijke

(Onderafdeling van JavaScript, DOM en CSSOM)

Combinaties van CSS, HTML, JavaScript enzovoort online uitproberen en eventueel delen met anderen zie Gereedschap → Combinaties van CSS, HTML, JavaScript enzovoort uitproberen en eventueel delen.

JavaScript comprimeren zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren.

Onleesbaar (bijvoorbeeld gecomprimeerd) JavaScript leesbaar maken zie Gereedschap → Code leesbaar maken.

Reguliere expressies uitproberen zie Gereedschap → Reguliere rexpressies → Testen en uitproberen.

jshint.com
JavaScript-validator. Online, maar kan ook worden gedownload.

jslint.com
JavaScript-validator. Gruwelijk streng.

mothereff.in/js-variables
Namen van variabelen valideren.

omatsuri.app/events-keycode
Code generen voor eventlistener keydown. Geeft ook de codes voor event.key, event.code, en event.which.

runjs.app/play
Online JavaScript uitproberen. Geeft ook foutmeldingen.

toptal.com/developers/keycode
Waardes vinden bij het indrukken van een toets voor event.key, event.location, event.which en event.code.

w3schools.com/js/ (JavaScript Examples)
Wijzigingen in JavaScript uitproberen.

JSON

Online code formatteren en leesbaarder maken zie Gereedschap → Code leesbaar maken.

codebeautify.org/all-tools#json-tools
Converters en andere hulpmiddelen voor JSON.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/JSON
Tutorial met interactieve voorbeelden.

freeformatter.com/json-validator
JSON-validator.

jsoneditoronline.org
Editor en validator voor JSON.

jsonformatter.curiousconcept.com
JSON-validator.

mockaroo.com
Tot 1000 regels nep-data in JSON-formaat genereren.

onlinetools.com/json
Hele reeks hulpmiddelen voor JSON, onder andere bewerken en converteren.

planetcalc.com
CSV-tabel omzetten naar JSON.

planetcalc.com
HTML-tabel omzetten naar JSON.

quackit.com/json/tutorial
Interactieve tutorial.

tutorialspoint.com/json
Tutorial over JSON.

w3schools.com/js/js_json_intro
Interactieve tutorial over JSON.

Juridisch

European Accessibility Act zie Toegankelijkheid → Overig.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

clinic.nl
Site over allerlei juridische zaken op het gebied van ICT. Mogelijkheid om (gratis) juridisch advies te krijgen voor beginnende bedrijfjes en particulieren. Nederlandstalig.

blog.iusmentis.com
Blog van ICT-jurist Arnoud Engelfriet, met elke dag een nieuw onderwerp met reacties. Nederlandstalig en uiterst leesbaar geschreven.

blog.iusmentis.com/2023/01/11
Vraag en antwoord hoe te reageren op een schadeclaim voor ongeoorloofd gebruik van een foto. Nederlandstalig.

blog.iusmentis.com/2024/08/14
Hoe (niet) te reageren op een claim van Copytrack voor ongeautoriseerd gebruik van een foto. Nederlandstalig.

iusmentis.com/auteursrecht/nl/vvv
Veelgestelde vragen over auteursrecht, door ICT-jurist Arnoud Engelfriet. Nederlandstalig.

iusmentis.com/auteursrecht/spoedcursus/intro
Spoedcursus auteursrecht door ICT-jurist door Arnoud Engelfriet. Nederlandstalig.

iusmentis.com/auteursrecht/symbool
Het copyright-symbool, door ICT-jurist Arnoud Engelfriet. Nederlandstalig.

netkwesties.nl/1464/actie-tegen-overdreven-fotoclaims
Nederlandstalig artikel met veel links over (wat te doen tegen) claims voor het gebruik van foto's.

netkwesties.nl/1693/anp-negeert-bij-haar-fotoclaims-het-recht
Nederlandstalig artikel met overwegingen over wel of niet betalen (en hoeveel) bij een auteursrechtenclaim.

tldrlegal.com
Overzicht van software-licenties (volledige tekst en een korte samenvatting).

tweakers.net/reviews/11256/blafbrief-over-dat-ene-leuke-plaatje-arnoud-engelfriet-over-auteursrechtinbreuk
Nederlandstalig artikel en discussie hoe te reageren op een blafbrief over auteursrechtinbreuk.

Malware, spam, beveiliging, en dergelijke

anti-abuse.org/multi-rbl-check
Controleren op groot aantal blacklists of site erop staat.

blacklistchecker.com
Controleren op groot aantal blacklists of site erop staat.

blog.cloudflare.com/turnstile-private-captcha-alternative
Turnstile: privacyvriendelijk alternatief voor reCaptcha (op deze pagina staan beschrijving en aanwijzingen voor het gebruik).

dev.to/lydiahallie/cs-visualized-cors
Duidelijke uitleg over CORS en het nut ervan.

developer.mozilla.org/en-US/observatory
Scanner voor aantal beveiligings-instellingen.

github.com/decalage2/awesome-security-hardening
Enorme lijst met links naar tutorials, gidsen, en dergelijke over alle denkbare beveiligingsonderwerpen.

hcaptcha.com
hCaptcha: privacyvriendelijk alternatief voor reCaptcha.

jakearchibald.com/2021/cors
Tutorial over CORS.

mcaptcha.org
Privacyvriendelijk open source alternatief voor reCaptcha.

mxtoolbox.com/blacklists
Controleren op groot aantal blacklists of site erop staat.

near.blog/you-probably-dont-need-recaptcha
Artikel dat helpt besluiten of je reCaptcha wel nodig hebt. Als dat zo is, komt het met een overzicht van meer pricavy-vriendelijke alternatieven (reCaptcha is een dataverzamelaar voor Google, zie bijvoorbeeld Google's new reCaptcha has a dark side).

projecthoneypot.org
Project gericht op de bestrijding van spammers. Iedereen kan eraan deelnemen. Er kan gezocht worden op 'foute' IP-adressen.

simplelocalize.io/blog/posts/what-is-cors
Uitleg wat CORS is en hoe problemen daarmee op te lossen.

stopforumspam.com
Grote database met forumspammers. Er kan op IP-adres worden gezocht.

web.dev/articles/hacked
Stap-voor-stap-handleiding hoe een gehackte site op te schonen.

whynopadlock.com
Testen waarom pagina geen slotje ('padlock') in browser toont bij https-verbinding.

MathML

developer.mozilla.org/en-US/docs/Web/MathML
Overzichtspagina van Mozilla over MathML met voorbeelden, referentie, links, enzovoort.

validator.w3.org/nu
W3C-validator voor HTML, XHTML, SMIL, MathML, enzovoort. Online één pagina tegelijk testen. W3C is de organisatie die de officiële standaard voor HTML, CSS, enzovoort bij houdt.

xhtml5.nl/naslag/mathml/entiteiten
Nederlandstalig overzicht van entiteiten, ingedeeld in groepen.

w3.org/TR/mathml-core
Ontwerp-specificatie MathML.

Milieu

Hieronder wordt groen vaak geschreven als 'groen'. Dat is omdat er enorm veel wordt gerotzooid met de term 'groen'. Dat zal bij hosters en dergelijke niet anders zijn dan bij Shell. En de enige écht groene site is geen site. Vandaar.

Artikelen en dergelijke over de invloed van één bepaald iets op het milieu, kunnen ook bij dat bepaalde iets staan.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

aremythirdpartiesgreen.com
Laat zien of externe bronnen van een site ('third parties') 'groen' worden gehost.

developer.mozilla.org/en-US/blog/introduction-to-web-sustainability
Artikel met tips om een groenere site te maken.

digitalbeacon.co
Meten hoeveel (een in te stellen aantal bezoekers) van een pagina bijdraagt aan de koolstofuitstoot. Met tips om dit te verbeteren.

ecograder.com
Invloed van hele serie onderdelen van een site op de CO2-uitstoot laten zien. Geeft suggesties hoe die te verminderen.

imagecarbon.com
Invloed van afbeeldingen op CO2-uitstoot tonen. Laataat zien hoeveel je kunt besparen. (Let op: lang niet alle browsers ondersteunen nieuwe formaten.)

smashingmagazine.com/2021/09/reducing-carbon-emissions-on-web
Artikel over de invloed van websites op de CO2-uitstoot, met tips om die te verminderen.

smashingmagazine.com/2022/02/reducing-web-carbon-footprint-optimizing-social-media-embeds
Artikel over de invloed van 'sociale' (brrrr, als er iets anti-sociaal blijkt te zijn...) media, video's, en dergelijke op de koolstofuitstoot. Met tips om die te verminderen.

thegreenwebfoundation.org/tools/directory
Lijst met 'groene' hosters ('groen', want het lijkt erop dat ook iets als 'compensatie' door het aanplanten van bomen en dergelijke als 'groen' wordt gezien...).
Op thegreenwebfoundation.org kun je testen, of een site 'groen' wordt gehost.

thoughtbot.com/blog/so-you-wanna-create-an-eco-friendly-website
Tips om een site zo milieuvriendelijk mogelijk te maken.

w3c.github.io/sustyweb
Ontwerp-specificatie met vereisten voor een duurzame website.

webpagetest.org/carbon-control
Meten hoeveel CO2 een bezoek aan een pagina uitstoot.

websitecarbon.com
Meten hoeveel een pagina bijdraagt aan de koolstofuitstoot.

Mobiele apparatuur

Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen

(Onderafdeling van Mobiele apparatuur)

De meeste online simulators en dergelijke doen niet precies hetzelfde als een écht mobiel apparaat. In de regel wordt, met meer of minder succes, een mobiel apparaat geïmiteerd. Er is geprobeerd in dit overzicht geen simulators op te nemen die alleen het venster verkleinen, want dat heeft niets met een simulatie te maken en dat kun je zelf ook wel. Maar het kan best zijn dat er eentje doorheen is geglipt.

Dit is niet onbelangrijk, want je kunt tijden bezig zijn om iets te testen op zo'n nep-simulator, en dan blijkt het uiteindelijk gewoon niet te werken, omdat je bijvoorbeeld CSS gebruikt die op het echte apparaat niet wordt ondersteund. Om te testen kun je het best de downloads die door de officiële makers worden geleverd gebruiken. Of echte apparaten natuurlijk, maar dan moet je óf 'n hele grote vriendenkring hebben, óf eerst 'n bankoverval plegen of zoiets...

Alleen de resolutie testen zie Gereedschap → Weergave en dergelijke testen.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Algemeen

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

github.com/liriliri/eruda
Script om broncode te kunnen zien. Werkt in alle browsers op alle systemen. Meest handige: kan de volledige 'computed style' laten zien.
Een demo is te zien op eruda.liriliri.io.

neatnik.net/view-source
Broncode van opgegeven URL tonen.

Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.android.com/studio
Android SDK.

developer.chrome.com/docs/devtools/remote-debugging
Handleiding om Android-toestellen remote te debuggen via een USB-verbinding.

/e/

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

e.foundation
Startpagina van /e/: een versie van Android zonder alles wat Google er in stopt.

Firefox for Android

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging
Handleiding hoe Firefox for Android remote te debuggen op de desktop.

HarmonyOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

harmonyos.com/en/develop
Ingangspagina voor ontwikkelaars op HarmonyOS.

iOS en iPadOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

Dit superieure besturingssysteem met z'n superieure prijs verdient ook superieure aandacht in een tekst met een superieure lengte. Bij deze.

Apple heeft voor de tigste keer z'n site gewijzigd, zonder verwijzingen naar de gewijzigde pagina's. Je zult zelf naar de SDK en dergelijke moeten zoeken. Geen links meer hier naar de site van Apple, want je kunt bezig blijven met die ongein.

Goed, voor de doorzetter:

Je kunt bij Apple XCode downloaden, en daarin kun je allerlei versies van iOS en iPadOS simuleren. XCode kan alleen op OS X worden geïnstalleerd. Maar lees vooral even de aanvulling hieronder, voordat je hier luchthartig aan begint.

Aanvulling (alleen te lezen door masochisten die het staatsexamen Gevorderd Masochist met succes hebben afgelegd): je kunt, als je OS X hebt, XCode downloaden. Daarin kun je vervolgens simulators voor tal van versies van iOS en iPadOS installeren, waarin je 'n site kunt testen. Dit ontwikkelgereedschap is werkelijk met stip het grootste stuk bagger op het gebied van ontwikkelprogramma's dat hier in meer dan 35 jaar is gezien. Maar goed, uiteindelijk werkt het, en je kunt heerlijk koffiedrinken, uitgebreid poepen en ook nog de krant lezen tijdens het opstarten van deze ellendepukkel. En dat niet gelijktijdig, maar lekker rustig achter elkaar.

In Big Sur is dit martelwerktuig kennelijk verbeterd, waardoor je gewoon helemaal geen simulators meer kunt installeren. Alleen testen op de laatste versies van iOS, tvOS en watchOS kan nog. In theorie kun je nog simulators voor andere versies downloaden, maar dat duurt zo'n vijf uur. Per simulator. Helaas valt tijdens het downloaden na een aantal uren de verbinding weg en kun je opnieuw beginnen (en dat ligt dus niet aan deze kant van de verbinding). Wie weet, de machine staat gewoon aan, misschien is er volgende week wel één van de simulators volledig gedownload...

Het regent hier klachten over op internet (zoek even op 'xcode simulator download failed' of zoiets). Uiteraard reageert Apple nergens op een klacht, want dat doen ze gewoon nooit. Stel je voor, communiceren met het plebs. Brrr. Voorlopig blijft hier dus het stuk ellende op Mojave gebruikt worden. Dat werkt in ieder geval, met de kanttekening dat een wedstrijd hardlopen door slakken opwindender is.

Zo, dat lucht op, na weer ruim drie uur downloaden en de melding dat de verbinding is verbroken...

Aanvulling twee: na zo'n zeventig uur (!) van mislukte downloads zijn de drie simulators eindelijk gedownload en geïnstalleerd op Big Sur. Het gaat dus om 'n download die normaal genomen ongeveer één minuut duurt...

Aanvulling drie (na enkele weken): eerlijk is eerlijk, als het installeren eindelijk is gelukt, werkt het verder prima.

Had je gedacht dus. Bij een nieuwe versie van iOS of iPadOS moet je namelijk ook een nieuwe simulator installeren. En dat duurt dus weer zo'n vijf uur, met tig mislukkingen. Apple is een weerzinwekkend onsympathiek bedrijf dat alleen in geld is geïnteresseerd (net als andere internetgiganten trouwens). Maar wat kan het financiële voordeel zijn van het frustreren van mensen die de moeite nemen op jouw apparaten te testen? Want dit is natuurlijk geen toeval: alleen het downloaden van simulators heeft dit probleem.

Dat blijft dus onbekend, want Apple heeft op geen enkele van de vele honderden klachten hierover ooit gereageerd.

En dan de allerlaatste aanvulling: de laatste update van Big Sur heeft gezorgd dat de simulators helemaal niet meer werken. Waarmee alle problemen zijn opgelost, want het kreng is nu definitief verwijderd hier.

KaiOS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.kaiostech.com
Ingangspagina voor ontwikkelaars op KaiOS.

paul.kinlan.me/debugging-web-pages-on-the-nokia-8110-with-kaios
Korte uitleg hoe een website op KaiOS te debuggen op een gewone desktopcomputer .

Sailfish OS

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

docs.sailfishos.org
Startpagina voor SailfishOS met onder andere links naar SDK.

Tizen

(Onderafdeling van Mobiele apparatuur → Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen)

developer.tizen.org/development/tizen-studio/download
Tizen IDE.

Theorie, links, forums, en dergelijke

(Onderafdeling van Mobiele apparatuur)

Browser support voor CSS, HTML, JavaScript en/of SVG zie CSS → Browser support en Release Notes.

Media query's, responsive images, en dergelijke zie CSS → Media Query's, Container Query's en Responsive Web Design (ook bijvoorbeeld methoden om afbeeldingen te verkleinen, die géén CSS gebruiken staan daar bij elkaar).

Oplossingen voor dingen als scrollen binnen een div, fixed positie, en dergelijke zie CSS → Bugs, hacks en @supports → Niet-ondersteunde elementen, eigenschappen, enzovoort mogelijk maken.

Toegankelijkheid zie Toegankelijkheid.

Viewport eenheden (vw, vh, vmax, vmin, en dergelijke) zie CSS → Eenheden.

developer.mozilla.org/en-US/docs/Web/HTML/Guides/Viewport_meta_element
Uitleg hoe de viewport-tag wordt gebruikt om de lay-out aan te passen aan mobiele browsers.

mobiforge.com
Site met handleidingen, artikelen, enzovoort.

quirksmode.org/mobile/viewports
Zeer uitgebreide, zeer gedetailleerde en zeer duidelijke uitleg over de gespleten persoonlijkheid van viewport (het verschil tussen CSS-pixels en hardware- of device-pixels).

sebastien-gabriel.com/designers-guide-to-dpi
Tutorial over (de verschillen tussen) dpi, ppi, CSS-pixels, device-pixels, en dergelijke.

Validators, browser sniffing, en dergelijke

(Onderafdeling van Mobiele apparatuur)

@supports zie CSS → Bugs, hacks en @supports → CSS wegfilteren/aanpassen (inclusief @supports)..

Theoretische artikelen, zoals uitleg over een waterfall, online tests met praktische tips voor verbeteringen, testen van de snelheid van de pagina, en dergelijke zie Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke.

bing.com/webmaster/tools/mobile-friendliness
Online (oppervlakkig) testen of de pagina geschikt is voor mobiel.

experte.com/mobile-friendly
Online hele site (maximaal 500 url's) testen op geschiktheid voor mobiele apparaten. Met tips voor verbeteringen.

nielsleenheer.com/articles/2024/the-problem-with-user-agent-strings
Geschiedenis van de User Agent String en waarom deze (tegenwoordig) volstrekt onbetrouwbaar is.

whatismybrowser.com/detect/what-is-my-user-agent
Geeft de User Agent String van de gebruikte browser weer. Met desgewenst gedetailleerde analyse.

Nieuwsbrieven, nieuwssites, en dergelijke

Omdat veel nieuwsbrieven en dergelijke over meerdere onderwerpen gaan, staan ze hier allemaal bij elkaar en niet verspreid over de verschillende onderwerpen. Omdat (vrijwel) alle nieuwsbrieven soms ook over onderwerpen buiten hun eigen specialisme schrijven, is ook een indeling in categorieën niet echt goed mogelijk.

a11yweekly.com
A11yWeekly: wekelijkse nieuwsbrief over toegankelijkheid.

accessible-mobile-apps-weekly.ghost.io
Accessible Mobile Apps: tweewekelijkse nieuwsbrief over toegankelijkheid en mobiele apparatuur.

asthon.codes/subscribe-to-frequent11y
day11y, week11y, fortnight11y, month11y: naar wens dagelijkse, wekelijkse, tweewekelijkse of maandelijkse nieuwsbrief over toegankelijkheid.

bitsoffreedom.nl/volg-ons
Tweewekelijkse nieuwsbrief van Bits of Freedom over (de volledige sloop van) privacy en dergelijke. Nederlandstalig.

blog.iusmentis.com/schrijf-je-voor-de-nieuwsbrief
Nederlandstalige wekelijkse nieuwsbrief van ict-advocaat Arnoud Engelfriet over allerlei juridische zaken die met ict (waaronder internet) te maken hebben.

buttondown.com/jster
JSter: onregelmatig verschijnende nieuwsbrief over JavaScript-bibliotheken, -frameworks, en dergelijke.

css-weekly.com
CSS Weekly: wekelijkse nieuwsbrief over CSS.

discu.eu/weekly/webdev
Web Development recap: wekelijkse nieuwsbrief met links naar van alles over het maken van sites.

duckduckgo.com/newsletter
Privacy Weekly: wekelijkse nieuwsbrief over privacy.

ecmascript.news
ECMAScriptNews: wekelijkse nieuwsbrief met links naar artikelen over JavaScript.

edri.org/take-action/edri-gram
EDRi-gram: tweewekelijkse nieuwsbrief van European Digital Rights, een overkoepelende Europese organisatie voor privacy en dergelijke.

frontend.horse
Frontend Horse: wekelijkse nieuwsbrief over van alles wat met het maken van sites te maken heeft.

frontendfoc.us
Frontend Focus: wekelijkse nieuwsbrief over HTML5, CSS, WebGL, en dergelijke.

frontendweekly.co
Frontend Weekly: wekelijkse nieuwsbrief over van alles wat met het maken van sites te maken heeft.

heydesigner.com
HeyDesigner: wekelijkse nieuwsbrief over van alles wat met het maken van sites te maken heeft.

itsfoss.com/newsletter
FOSS Weekly: wekelijkse nieuwsbrief over Linux en open source.

javascriptkicks.com
JSK Weekly: wekelijkse nieuwsbrief over JavaScript

javascriptweekly.com
JavaScript Weekly: wekelijkse nieuwsbrief over JavaScript.

js.libhunt.com/newsletter
Awesome JavaScript Newsletter: wekelijkse nieuwsbrief over JavaScript.

jster.net
JSter: maandelijkse nieuwsbrief over JavaScript.

nodeweekly.com
Node Weekly: wekelijkse nieuwsbrief over Node.js.

perf.email
Performance Newsletter: tweewekelijkse nieuwsbrief over optimaliseren, snelheid, en dergelijke (van een commercieel bedrijf, maar bevat goede artikelen).

perlweekly.com
Perl Weekly: wekelijkse nieuwsbrief over Perl.

php.libhunt.com/newsletter
Awesome PHP Newsletter: wekelijkse nieuwsbrief over PHP.

phpweekly.com
PHP Weekly News: wekelijkse nieuwsbrief over PHP.

postgresweekly.com
Postgres Weekly: wekelijkse nieuwsbrief over PostgreSQL.

privacynieuws.nl
Privacynieuws weekbrief: Nederlandstalige wekelijkse nieuwsbrief over privacy.

pubhubs.net
Nederlandstalige nieuwsbrief over Nederlands open source netwerk.

publicspaces.net/nieuwsbrief
PublicSpaces Nieuwsbrief: Nederlandstalige nieuwsbrief van samenwerkingsverband dat publieke waarden terug wil brengen op internet.

pycoders.com
PyCoder's Weekly: wekelijkse nieuwsbrief over Python.

python.libhunt.com/newsletter
Awesome Python Newsletter: wekelijkse nieuwsbrief over Python.

rootwebdesign.studio/beneath-the-surface
Beneath the surface: tweemaandelijkse nieuwsbrief met tips voor het maken van energiezuinige sites.

securitynewsletter.co
Security Newsletter: wekelijkse nieuwsbrief over beveiliging en dergelijke.

sidebar.io
Sidebar newsletter: dagelijkse nieuwsbrief met elke dag vijf links over het maken van sites en alles daaromheen.

smashingmagazine.com/the-smashing-newsletter/
Smashing Newsletter: tweewekelijkse nieuwsbrief met voornamelijk (links naar) artikelen over CSS, HTML, en dergelijke..

social.us18.list-manage.com/subscribe
~this week in security~: wekelijkse nieuwsbrief over beveiliging, datalekken, en dergelijke.

speedcurve.com/newsletter
Speed Matters Newsletter: ongeveer maandelijkse nieuwsbrief met de nadruk op een snelle(re) weergave.

sustainableux.substack.com
SUX Newsletter maandelijkse nieuwsbrief over sites en dergelijke en milieu.

t12t.se/accessibility-newsletter
The Accessibility Newsletter: onregelmatig verschijnende nieuwsbrief over toegankelijkheid.

tempertemper.net
The tempertemper newsletter: maandelijkse nieuwsbrief over toegankelijkheid.

themarkup.org/newsletter
Hello World en Klaxon: twee nieuwsbrieven over internet en daarmee samenhangende zaken, vooral over privacy, trackers, en dergelijke. Op de Verenigde Staten gericht, maar vaak ook interessant voor de rest van de wereld, omdat het ook vaak over bijvoorbeeld Google, Facebook en Twitter gaat.

tldr.tech/webdev
TLDR Web Dev: dagelijkse nieuwsbrief met links naar van alles over het maken van sites.

tympanus.net/codrops/collective
Collective: overzicht van interessante artikelen met betrekking tot internet, het maken van sites, (nieuwe) fonts, (nieuwe) lay-outs, enzovoort. (Je kunt je ook inschrijven voor de wekelijkste nieuwsbrief 'Collective').

wdrl.info
Web Development Reading List: wekelijkse nieuwsbrief over van alles wat met websites, internet, en dergelijke te maken heeft.

webaim.org/newsletter
The WebAIM Newsletter: maandelijkse nieuwsbrief over toegankelijkheid.

webweekly.email
Web Weekly: wekelijkse nieuwsbrief over CSS, HTML, JavaScript, en dergelijke.

Perl

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Reguliere expressies uitproberen zie Gereedschap → Reguliere expressies → Testen en uitproberen.

cpan.org/ (Comprehensive Perl Archive Network)
Scripts en modules.

geeksforgeeks.org/perl-programming-language
Interactieve cursus Perl. (Voor het interactieve deel moet je je wel registreren.)

learn-perl.org
Interactieve cursus Perl.

perl.org
De grote Perl site.

perl-tutorial.org
Links naar tutorials over Perl.

perlmaven.com/perl-tutorial
Zeer uitgebreide tutorial.

perlmonks.org
Community rondom Perl met onder andere veel handleidingen.

PHP

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Online PHP formatteren zie Gereedschap → Code leesbaar maken.

Forums

(Onderafdeling van PHP)

phphulp.nl/php/forum
Forum met de nadruk op PHP. Nederlandstalig.

Overig

(Onderafdeling van PHP)

apachefriends.org
Pakket met de Apache server, PHP, Perl en MariaDB downloaden om op de eigen computer te installeren (XAMPP). Dit is nodig als je op je eigen computer PHP en/of Perl wilt testen.

phphub.net
PHP formatteren, valideren en uitproberen.

Scripts

(Onderafdeling van PHP)

pear.php.net
Enorme bibliotheek met open source code.

phpclasses.org/browse
Gigantische hoeveelheid classes.

phphulp.nl/php/scripts
Scripts. Nederlandstalig.

Tutorials, voorbeelden

(Onderafdeling van PHP)

Reguliere expressies uitproberen zie Gereedschap → Reguliere expressies → Testen en uitproberen.

code.tutsplus.com/php-tutorial-for-beginners-free-7-hour-course
Cursus PHP in de vorm van video's.

css-voorbeelden.nl/tekst/invoegen/tekst-052
Tekst invoegen met behulp van PHP. Nederlandstalig.

devdocs.io
Uitgebreide overzichten van elementen, attributen, enzovoort. Met browser support, ook voor mobiele browsers, voorbeelden, links naar meer info, enzovoort.

freecodecamp.org/news/the-php-handbook
Uitgebreide tutorial in boekvorm.

geeksforgeeks.org/php-tutorial
Interactieve cursus PHP. (Voor het interactieve deel moet je je wel registreren.)

modernways.be/myap/it/school/course/Programmeren 4
Vlaamstalige cursus PHP. (De cursus is voor een school, maar ook prima daarbuiten te volgen.)

php.net
Officiële site van PHP met veel documentatie.

phpboek.net
Nederlandstalig uiterst leesbaar boek over PHP. Feitelijk een cursusboek.

phphulp.nl/php/tutorials
Tutorials. Nederlandstalig.

phptherightway.com
Site met tutorials, links naar tools, enzovoort, waarbij geprobeerd wordt verouderde informatie te vermijden.

quackit.com/php/tutorial
Interactieve tutorial.

w3schools.com/php/default
Interactieve PHP-tutorial en overzicht van de taal.

Privacy, loskomen van datadieven, en dergelijke

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Privacy specifiek rondom het gebruik van elders gehoste fonts (zoals Google fonts) zie CSS → Fonts, typografie, tekst, emoticons en lijnen → Webfonts (om te downloaden).

Privacyvriendelijke captcha-systemen zie Malware, spam, beveiliging, en dergelijke.

Privacyvriendelijke statistieken zie Statistieken, browsergebruik, besturingssysteem, bezoekersteller, en dergelijke.

bitsoffreedom.nl
Nederlandstalige organisatie voor de verdediging van digitale burgerrechten.
Bits of Freedom is een van de weinige Nederlandse organisaties die opkomt voor dingen als privacy, die tegenwicht biedt voor de spionagedrift van de overheid, enzovoort. Het werk van deze organisatie is onmisbaar voor een vrij internet. Omdat Bits of Freedom geen subsidie krijgt, is de organisatie volledig afhankelijk van donateurs. Als je een vrij internet belangrijk vindt, wordt dan donateur!

blog.wesleyac.com/posts/why-not-javascript-cdn
Artikel met redenen waarom je beter geen CDN kunt gebruiken.

chris-wood.design/resources/linux-for-ux-designers
Ervaringen van een ontwerper die overstapt naar Linux.

chromium.woolyss.com/f/HTML-Google-Tag-Manager-the-new-anti-adblock-weapon
Artikel over hoe Google Tag Manager misbruikt kan worden om mensen te volgen.

cloudfour.com/thinks/youtube-no-cookies-adds-cookies
Hoe het 'privacyvriendelijke' youtube-nocookie.com je ronduit belazert en gewoon cookies gebruikt.

codeberg.org
Codeberg: open source alternatief voor GitHub.

complydog.com/free-cookie-checker-tool
Laat zien welke cookies met welke inhoud een site gebruikt.

compress-or-die.com/analyze
Heel uitgebreide informatie, zoals exif-data, over een afbeelding krijgen.

contrachrome.com/comic/page01
Uitstekende strip over wat Google allemaal aan informatie over je verzamelt. En niet alleen via hun browser.

coveryourtracks.eff.org
Laat zien hoe je computer (vrijwel) uniek is te identificeren aan de hand van gegevens die je browser doorstuurt.

cryptpad.org
Online gezamenlijk documenten en dergelijke bewerken.

dasprive.be
Vlaamstalige pagina over privacy, met onder andere overzicht van privacyvriendelijke programma's en dergelijke (onder het kopje Dasprive Tooltips). (Als die programma's en dergelijke binnen een categorie op deze pagina met links vallen, staan die mogelijk ook hier.)

edri.org
Site van European Digital Rights. Uitgever van de uitstekende nieuwsbrief EDRI-gram. Van deze koepelorganisatis is onder andere het iets hierboven genoemde Bits of Freedom lid.
PDF met tips om ethisch verantwoorde sites te bouwen (PDF). Met alternatieven voor veel gebruikte spionage-software.

european-alternatives.eu
Groot aantal Europese alternatieven voor (vooral) Amerikaanse techgiganten.

exifcleaner.com
Open source programma om exif-data uit afbeeldingen en films te verwijderen.

friendi.ca
Friendica: open source alternatief voor Facebook.

gebiedonline.nl
Nederlandstalig coöperatief platform voor groepen rondom een buurt, onderwerp, en dergelijke.

github.com/anitwek/alternatives-to-us
Alternatieven voor in de VS gevestigde diensten, zoekmachines, en dergelijke.

itsfoss.com/google-photos-alternatives
Open source alternatieven voor Google Photos.

itsfoss.com/mainstream-social-media-alternaives
Open source alternatieven voor Facebook, Instagram, Medium, Messenger, Reddit, WhatsApp, X en YouTube.

jimpl.com
exif-data van een foto bekijken en eventueel verwijderen. (Er staat soms hééĺ veel info in zo'n foto...)

join-lemmy.org
Lemmy: open source alternatief voor Reddit.

joinmastodon.org/no-NL
Mastodon: (Nederlandstalig) privacyvriendelijk open source alternatief voor X.

joinpeertube.org
PeerTube: open source alternatief voor YouTube en TikTok.

linux.vooreenbeginner.nl
Je computer weggooien in oktober omdat Windows 10 niet meer wordt ondersteund? Bekijk dit eens. Uiterst toegankelijk geschreven Nederlandstalige inleiding over Linux.

lucble.com/randomprojects/cookielesscookies
Uitleg over een methode om browsers (en dus mensen) uniek te identificeren en te volgen, zonder gebruik van cookies, JavaScript, en dergelijke

neustadt.fr/essays/against-a-user-hostile-web
Uitstekend artikel over pricacy en waarom bedrijven als Google, Facebook, en dergelijke de pest voor internet zijn. Al wat ouder, maar helaas steeds actueler.

nirsoft.net/show_my_ip_address
Laat zien wat je browser zoal verstuurt en toont externe IP-adres. (Inmiddels verstuurt je browser nog veel meer gegevens, maar het blijft 'n aardig overzicht.)

pixelfed.org
Pixelfed: open source alternatief voor Instagram.

prism-break.org/nl
Nederlandstalige site met alternatieven voor programma's en bedrijven die hun deur wijd open hebben staan voor inlichtingendiensten als de NSA, de AIVD, en dergelijke.

privacy.net/analyzer
Testen of je browser je privacy (enigszins) beschermt.

privacytests.org
Overzicht van hoe (een heel groot aantal) browsers omgaat met privacybescherming.

privacytools.io
Privacyvriendelijke alternatieven voor allerlei software.

removephodata.com
Exif-gegevens verwijderen van foto's en dergelijke. De foto wordt niet geüpload.

publicspaces.net
Samenverwerkingsverband van tal van Nederlandse organisaties dat publieke waarden terug wil brengen op internet.

quodari.com/nl
Privacyvriendelijk Nederlandstalig alternatief voor Facebook en Instagram.

security.nl/posting
Artikel over hoe Google reCaptcha misbruikt voor tracking en gratis arbeid.

signal.org/nl
Signal: open source alternatief voor WhatsApp. Nederlandstalig.

switching.software
Alternatieven voor software van grote bedrijven als Microsoft, Google en Meta.

themarkup.org/blacklight
Kijken of een site trackers, Third-party cookies, en dergelijke gebruikt.

themarkup.org/citizen-browser/2021/09/21/facebook-rools-out-news-feed-change-that-blocks-watchdogs-from-gathering-data
Dit artikel hoort hier eigenlijk niet, maar deze truc van Facebook om onderzoek te bemoeilijken ten koste van toegankelijkheid is van zo'n uitzonderlijk smerig niveau dat er 'n uitzondering voor wordt gemaakt.

themarkup.org/levelup/2023/01/31/in-2023-resolve-to-fix-your-organizations-meta-pixel-problem
Artikel over de beruchte Meta Pixel van Facebook en wat daaraan te doen.

theverge.com/23711172/google-amp-accelerated-mobile-pages-search-publishers-lawsuit
Artikel over de opkomst en ondergang van AMP.

tosdr.org
Beknopte samenvatting van Algemene Voorwaarden van veel (grote) sites, softwarebedrijven, enzovoort, waaronder Facebook, Google, Apple en Microsoft.

trackme.dev
Laat zien wat de browser allemaal aan informatie doorgeeft bij het laden van een pagina.

violating-gdpr.com
(Oppervlakkig) controleren of een site de AVG schendt.

vpngids.nl/privacy/social-media/wat-weet-instagram-over-mij
Goed overzicht van wat Instagram allemaal over je opslaat. (Op deze site staan trouwens met regelmaat zeer goede artikelen over privacy.) Nederlandstalig.

wired.com/story/the-wired-guide-to-protecting-yourself-from-government-surveillance
Gids hoe je te beschermen tegen de regering-Trump. Ook in Nederland te gebruiken om je te beschermen tegen het kabinet-Wilders.

Protocollen en foutcodes (statuscodes)

HTTP Request en Response Header zie Gereedschap → HTTP Request en Response Header, cache.

cssportal.com/http-status-codes
Foutcodes (statuscodes) van servers. Met uitgebreide uitleg.

devonperoutky.super.site/blog-posts/mediocre-engineers-guide-to-https
Tutorial over HTTPS.

fasterthanli.me/articles/the-http-crash-course-nobody-asked-for
Zeer gedetailleerde (en leesbare) beschrijving van het HTTP-protocol.

httpstatus.io
Redirects valideren op juiste werking. Met mogelijkheid user agent in te stellen.

serversmtp.com/smtp-error
Foutcodes (statuscodes) e-mail.

nl.wikipedia.org/wiki/Lijst_van_HTTP-statuscodes
Foutcodes (statuscodes) van servers (HTTP-foutcodes). Nederlandstalig.

w3schools.com/tags/ref_httpmessages
HTTP Status Messages (foutcodes zoals 404).

webfx.com/web-development/glossary/http-status-codes
Lijst met foutcodes (statuscodes). Als je op 'n code klikt, ga je naar een uitgebreide omschrijving. Vooral de tamelijk onbekende code 418 is uiterst interessant.

Python

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Reguliere expressies uitproberen zie Reguliere expressies → Testen en uitproberen.

codecademy.com/learn/learn-python
Interactieve cursussen Python. De cursus is gratis, maar je moet je wel registreren.

freecodecamp.org/learn
Interactieve cursus Python.

freecodecamp.org/news/learn-python-book
Uitgebreide tutorial in boekvorm.

futurecoder.io
Interactieve cursus Python.

geeksforgeeks.org/python-programming-language-tutorial
Interactieve cursus Python. (Voor het interactieve deel moet je je wel registreren.)

github.com/pamoroso/free-python-books
Lijst met gratis boeken over Python. (Veel hiervan zijn waarschijnlijk wel (wat) verouderd.)

learnpython.org
Interactieve cursus.

python-course.eu/python-tutorial
Cursus python.

python.org
Officiële python website. Veel handleidingen en dergelijke.
Complete cursus.

pythonspot.com
Cursus Python.

quackit.com/python/tutorial
Tutorial.

sitepoint.com/best-python-ide-and-code-editors
Beschrijving van negen voor Python geschikte IDE's.

softwium.com/python-checker
Syntax checker.

thepythoncodingbook.com
Cursus Python in boekvorm.

thonny.org
Python IDE voor beginners.

tutorialspoint.com/python
Cursus Python.

udacity.com/course/introduction-to-python
Cursus python. De cursus is gratis, maar je moet je wel registreren.

w3schools.com/python
Interactieve Python-tutorial en overzicht van de taal.

SQL, NoSQL, databases, en dergelijke

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

SQL comprimeren zie Snelheid testen en verbeteren, gzip, CLS, comprimeren, en dergelijke → Comprimeren

SQL formatteren zie Gereedschap → Code leesbaar maken.

freecodecamp.org/news/a-beginners-guide-to-sql
Uitgebreide tutorial in boekvorm.

geeksforgeeks.org/sql-tutorial
Cursus SQL.

learnsqlonline.org
Interactieve cursus SQL.

mariadb.com/kb/en
Ingangspagina naar handleidingen en dergelijke over MariaDB.

mariadb.org
MariaDB is een open source vervanger van MySQL dat in handen van Oracle is veranderd in een melkkoe die nooit meer het weiland in mag.

phphulp.nl/php/forum/databases-en-sql
Nederlandstalig forum over databes en SQL.

postgresql.org/docs/current/tutorial
Officiële handleiding voor PostgresSQL.

quackit.com/database
Hele serie tutorials over databases, onder andere SQLite, MongoDB en MySQL.

selectstarsql.com
Interactieve cursus SQL. Als lesmateriaal wordt de doodstraf in Texas in de Verenigde Staten gebruikt. Hopelijk ben je na deze cursus ook tegenstander van de doodstraf.

softwium.com/sql-validator
Validator voor SQL.

sqlite.org
Centrale site van SQLite.

tutorialrepublic.com/sql-tutorial
Interactieve cursus SQL.

tutorialspoint.com/postgresql
Tutorial PostgreSQL.

tutorialspoint.com/sql
Cursus SQL.

udacity.com/course/intro-to-relational-databases
Basiscursus relationale databases (onder andere SQL). De cursus is gratis, maar je moet je wel registreren.

w3schools.com/sql
SQL-referentie en interactieve tutorial.

SSI (Server Side Includes)

SSI is min of meer aan het uitsterven. Je kunt tegenwoordig beter PHP gebruiken, omdat dat veel meer mogelijkheden heeft.

homepage-maken.nl/ssi/overssi
SSI-cursus. Nederlandstalig.

Statistieken, browsergebruik, besturingssysteem, bezoekersteller, en dergelijke

Tenzij er na opname hier dingen zijn veranderd, is alle hieronder staande statistieken-software privacyvriendelijk en gratis, of met minstens een gratis versie. De meeste zijn open source en kunnen op een eigen server worden geïnstalleerd, een enkele kan (ook) via internet worden gebruikt. Wie nu nog durft te beweren dat er geen alternatieven zijn voor Google Analytics, mag z'n mond met zand en zeep gaan spoelen.

algustionesa.com/google-analytics-alternatives
Uitgebreide bespreking van voor- en nadelen van tien alternatieven voor Google Analytics.

awstats.org
Open source software voor privacyvriendelijke statistieken.

blog.iusmentis.com/2022/02/02/ik-zou-maar-vast-een-alternatief-voor-google-analytics-gaan-zoeken-als-ik-jou-was
Nederlandstalig artikel over de mogelijke juridische gevolgen van het gebruik van Google Analytics.

clicky.com/marketshare
Statistieken over browser, besturingssysteem, en dergelijke (voor internet in het algemeen).

counter.dev
Open source software voor privacyvriendelijke statistieken.

developer.apple.com/support/app-store
Overzicht van gebruikte versies van iOS en iPadOS (in de kolom rechts).

en.wikipedia.org/wiki
Oude en (min of meer) actuele statistieken over browsers uit 'n hele serie bronnen.

github.com/electerious/Ackee
Open source software voor privacyvriendelijke statistieken.

github.com/milesmcc/shynet
Open source software voor privacyvriendelijke statistieken.

goatcounter.com
Open source software voor privacyvriendelijke statistieken.

gs.statcounter.com
Statistieken over resolutie, browser, besturingssysteem, en dergelijke (voor internet in het algemeen).
Omdat deze moeilijk is te vinden hier de rechtstreekse link naar overzicht van gebruikte versies van Android.

jouwstats.nl
Nederlandstalige statistieken. Enigszins beperkt en je moet een icoontje onderaan elke pagina zetten, maar wel privacyvriendelijk. (Een betaalde versie heeft meer mogelijkheden, zoals het verbergen van het icoontje.)

matomo.org
Open source software voor privacyvriendelijke statistieken.

offen.dev
Open source software voor privacyvriendelijke statistieken.

openwebanalytics.com
Open source software voor privacyvriendelijke statistieken.

piwik.pro
Professionele zusje van het iets hierboven staande matomo.org. Heeft ook een (ietwat beperkte) gratis versie.

plausible.io/blog/remove/google-analytics
Artikel met redenen om Google Analytics niet te gebruiken. Geschreven door een open source concurrent, maar dat maakt de redenen niet minder geldig.

posthog.com
Open source software voor privacyvriendelijke statistieken. Gratis voor één project.

rootwebdesign.studio/articles/the-environmental-benefits-of-privacy-focussed-web-design
Artikel over de invloed van statistieken en dergelijke op het energieverbruik van een site.

tweakers.net/reviews/11370/privacyvriendelijke-alternatieven-voor-google-analytics
Uitgebreide vergelijking van Matomo, Plausible, Umami en Clicky. Nederlandstalig.

umami.is
Open source software voor privacyvriendelijke statistieken.

w3schools.com/browsers
Statistieken over resolutie, browser, besturingssysteem, en dergelijke (van bezoekers van w3schools).

withcabin.com
Privacyvriendelijke statistieken. De basisversie is gratis.

SVG

Afbeelding maken, bewerken, code genereren, converteren, optimaliseren, en dergelijke met SVG zie Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren. Hieronder staan alleen links naar meer theoretische artikelen en dergelijke.

Browser support zie CSS → Browser support en Release Notes.

Kant-en-klare iconen en dergelijke in SVG-formaat zie Achtergronden, animaties, knoppen, pijlen, iconen, foto's, geluid, video, en dergelijke.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

apike.ca/prog_svg
Tutorial voor beginners.

css-tricks.com/comparison-animation-technologies
Overzicht van verschillende methodes voor animatie, inclusief externe bibliotheken. Met voor- en nadelen.

developer.mozilla.org/en-US/docs/Web/SVG
Ingangspagina over SVG. Met referentie, tutorial, voorbeelden, enzovoort.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML
Overzicht van manieren om een SVG-afbeelding in HTML op te nemen. Met voor- en nadelen van de diverse manieren.

fffuel.co/sssvg
Interactief spiekbriefje voor de meest gebruikte elementen van SVG.

heydonworks.com/article/the-canvas-element
Artikel over waar SVG beter geschikt voor is dan <canvas>.

inkscape.org
Open source editor om SVG mee te schrijven en bewerken. De site is Engelstalig, in het programma is ook een Nederlandse vertaling te installeren.

jenkov.com/tutorials/svg
Uitgebreide cursus met veel voorbeelden.

jointjs.com/blog/svg-versus-canvas
Voor- en nadelen van SVG en <canvas> met elkaar vergeleken.

nan.fyi
Interactieve cursus SVG, met de nadruk op het path-commando.

smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand
Stap-voor-stap beginners-tutorial.

svg-path-visualizer.netlify.app
Als je code invoert, zie je gelijk de afbeelding en een uitleg van de code in gewone taal. Met voorbeeldcode.

svg-tutorial.com
Tutorial aan de hand van voorbeelden.

unimelb.edu.au/accessibility/techniques/accessible-svg
Artikel met tips voor toegankelijk SVG.

w3.org/TR/SVG11
Officiële specificatie SVG 1.1.

w3.org/TR/SVG2
Ontwerp-specificatie SVG 2.

w3c.github,io/svgwg/specs/svg-authoring
Praktische richtlijnen van w3c voor het gebruik van SVG.

w3schools.com/graphics/svg_intro
SVG-tutorial en -referentie. Met mogelijkheid om zelf online uit te proberen.

webdesign.tutsplus.com/how-to-hand-code-svg
Gedetailleerde tutorial over het maken van iconen met SVG.

Verzendlijsten

laposta.nl
Nieuwsbrieven versturen. Nederlandstalig. De gratis versie gaat tot maximaal 2.000 contacten en maximaal 12.000 nieuwsbrieven per maand.

listmonk.app
Privacyvriendelijke open source software voor verzendlijsten en nieuwsbrieven.

ymlp.com/nl
verzendlijsten en nieuwsbrief versturen. Nederlandstalig. De gratis versie gaat tot maximaal 1.000 contacten en maximaal 1.000 e-mails per maand.

Toegankelijkheid

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Nieuwsbrieven zie Nieuwsbrieven, nieuwssites, en dergelijke.

Accessibility tree, semantische HTML, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Sectioning elements en landmarks zie Toegankelijkheid → WCAG en WAI-ARIA.

archive.24days.in/umbraco-cms/2020/semantics-in-web-development
Uitleg waarom semantisch juist gebruik van HTML, bestandsnamen, en dergelijke belangijk is.

benmyers.dev/blog/accessibility-tree
Heldere uitleg over wat de accessibility tree is.

localghost.dev/blog/the-right-tag-for-the-job-why-you-should-use-semantic-html
Artikel waarom een juist semantisch gebruik van HTML belangrijk is.

Afvinklijstjes, overzichten waarop te letten, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

a11yproject.com/checklist
Af te vinken controlelijst met links naar meer info.

accessguide.io
Punten waarop gelet moet worden met onder elk punt een link naar meer uitleg en dergelijke.

accessibilite.public.lu
Overzicht waarop te letten voor toegankelijkheid met links naar uitleg en dergelijke (onder de knoppen 'Web' en 'Mobile').

dev.to/grahamthedev/101-digital-accessibility-tips-and-tricks
Zeer uitgebreid overzicht met dingen die belangrijk zijn voor toegankelijkheid.

digitala11y.com/wcag-checklist
Duidelijke checktlist WCAG 2.1, met bij elk onderwerp een link naar meer informatie.

htmlhell.dev
Lijst met veel voorkomende fouten en oplossingen daarvoor. (In het overzicht kun je 'n onderwerp opzoeken, maar even de hele lijst bekijken kan geen kwaad.)

magentaa11y.com/web
Af te vinken controlelijst met links naar tips hoe te testen, meer info, en dergelijke.

moritzglantz.de/accessibility-cheatsheet
Kort, overzichtelijk spiekbriefje met de belangrijkste dingen wat betreft toegankelijkheid.

romeo.elsevier.com/accessibility_checklist
Checklist voor toegankelijkheid. Er kan worden gefilterd op richtlijnen, specifieke regels voor elementen, en dergelijke.

smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components
Alfabetisch overzicht van elementen en technieken met tips voor toegankelijkheid.

tetralogical.com/blog/2022/01/18/quick-accessibility-tests-anyone-can-do
Lijstje met tien dingen die toegankelijkheid een heel stuk verbeteren, zonder dat ze erg veel moeite of tijd kosten.

tetralogical.com/blog/2024/03/18/accessbility-foundations
Lijst met punten waarop te letten voor toegankelijkheid. Met bij elk punt een link naar uitgebreide extra informatie.

viget.com/articles/how-to-make-your-web-content-accessible
Niet-technisch, uiterst leesbaar overzicht van dingen die belangrijk zijn voor toegankelijkhleid. Met simpele voorbeelden.

w3.org/WAI/test-evaluate/preliminary
Artikel met enkele simpele vuistregels die toegankelijkheid bevorderen en veel links naar uitgebreidere info.

w3.org/WAI/WCAG22/quickref
Beknopte checklist voor WCAG 2.1 met links naar meer uitleg, voorbeelden, en dergelijke.

webaim.org/standards/wcag/checklist
Leesbare checklist voor WCAG 2.2-richtlijnen.
Vlaamse vertaling (dit is nog versie 2.1).

websitesetup.org/web/accessibility-checklist
Uitgebreide checklijst met punten die belangrijk zijn voor toegankelijkheid.

Browser (en schermlezer) support

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

200ok.nl/tips.speciale-tekens-en-screenreaders
Lijst met speciale tekens en de uitspraak daarvan door een aantal schermlezers (getest in 2020). Nederlandstalig.

200ok.nl/tips/bedragen-en-screenreaders
Lijst met verschillende vormen van een geldbedrag en hoe een aantal schermlezers die voorleest (of zich er fataal in verslikt...). Nederlandstalig.

a11ysupport.io
Groot aantal tests in diverse schermlezer/browser-combinaties. Onder andere WAI-ARIA en HTML-elementen.

adrianroselli.com/2022/02/column-headers-and-browser-support
Overzicht van ondersteuning van <th> door allerlei combinaties van schermlezers en browsers.

adrianroselli.com/2022/12/brief-note-on-description-list-support
Overzicht van ondersteuning van <dl> door allerlei combinaties van schermlezers en browsers.

elevenways.be/en/articles/screenreaders-special-characters
Lijst met speciale tekens en de uitspraak daarvan door een aantal schermlezers (getest in 2023).

html5accessibility.com
Overzicht van toegankelijkheids-ondersteuning door grote browsers van groot aantal HTML-elementen.

matuzo.at/blog/2023/aria-haspopup
Browser support voor aria-haspopup in verschillende schermlezers.

powermapper.com/tests
Zeer groot aantal tests op ondersteuning in diverse schermlezer/browser-combinaties. Onder andere WAI-ARIA, HTML-attributen en -elementen.

tpgi.com/screen-readers-support-for-text-level-html-semantics
Overzicht van ondersteuning van <b>, <del> <em>, <i>, <ins>, <mark> en <strong> door schermlezers.

webaxe.org/strikethrough-html-accessibility
Overzicht van ondersteuning van het <s>-element (doorstrepen).

Contrast en kleurenblindheid

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Firefox en Google Chrome hebben tal van extensies op het gebied van toegankelijkheid.

Het samenstellen van (toegankelijke) kleurenpaletten met meerdere kleuren is te vinden bij Gereedschap → Kleuren.

Meer algemene artikelen en dergelijke over de opbouw van het oog, de opbouw van kleuren, en dergelijke staan bij CSS → Kleuren.

aditus.io/button-contrast-checker
Contrast van knoppen op een pagina controleren in normale staat, bij :hover en bij :focus.

baselinehq.com/blog/colourblindness-information-ui-design-red-green-problems-tips-tricks
Artikel van een kleurenblinde ontwerper over het (gebrek aan) onderscheid tussen rood en groen, en hoe problemen daarmee te voorkomen.

datawrapper.de/blog/colorblindness-part1
Driedelig artikel over kleurenblindheid. Deel 2 Deel 3.

blog.pope.tech/2022/11/08/color-contrast-accessibility-requirements-explained
Artikel over de noodzaak van voldoende contrast.

buttonbuddy.dev
Kleuren bij een <button> uitzoeken en controleren op voldoende contrast, ook bij :hover en :focus. Invoer van kleur in hex.

colorcontrast.app
Controlen op voldoende contrast. Houdt ook rekening met lettergrootte en kan kleurenblindheid simuleren. Met suggestie voor alternatief voor voldoende contrast. Invoer van kleur in hex.

colorhexa.com
Veel informatie over één op te geven kleur krijgen en simuleren hoe kleurenblinden die kleur zien. Invoer van kleur in hex, rgb() en hsl().

contrast-finder.tanaguru.com
Voor- en achtergrondkleur opgeven en (reeks) kleuren krijgen die voldoende contrast hebben en zoveel mogelijk op de originele kleuren lijken. In- en uitvoer van kleuren in hex en rgb().

contrast-triangle.com
Controleren of links zonder onderstreping voldoende contrast met de omringende tekst hebben. (Als je die onderstreping gewoon laat staan, is dat wel zo makkelijk...)

engineering.khanacademy.org/posts/windows-high-contrast-mode
Uitleg over Windows High Contrast Mode.

getstark.co/blog/accessible-contrast-ratios-and-a-levels-explained
Artikel over de samenhang tussen contrast en de verschillende A-levels (toegankelijkheids-levels).

goodpractices.design/articles/colour-contrast
Tutorial met uitleg over contrast. Met veel praktische tips.

jansensan.github.io/color-contrast-matrix
(Groot) aantal kleuren opgeven en die in alle combinaties controleren op voldoende contrast.

juicystudio.com/services/luminositycontrastratio
Controleren of contrast tussen twee kleuren groot genoeg is. Invoer van kleuren in hex.

learnui.design/tools/accessible-color-generator
Kleur opgeven en suggestie voor meest overeenkomende kleur met voldoende contrast voor tekst krijgen. In- en uitvoer van kleur in hex.

lowvision/support
Laat de pagina zien, zoals die bij allerlei soorten kleurenblindheid wordt gezien.

oddcontrast.com
Controleren op voldoende contrast. Invoer van kleur in oklch() met automatische conversie naar hex, hsl(), lab(), lch(), oklab(), color() en rgb().

siegemedia.com/contrast-ratio
Controleren of contrast tussen twee kleuren groot genoeg is. Invoer van kleuren in hex, rgb(), rgba(), hsl() en hsla().

toptal.com/designers/colorfilter
Veel voorkomende vormen van kleurenblindheid simuleren. De originele pagina wordt naast de gesimuleerde versie getoond.

uxdesign.cc/getting-the-wcag-color-contrast-right
Uitgebreid artikel over hoe je bij allerlei combinaties voldoende contrast kunt krijgen.

uxmatters.com/mt/archives/2021/09/color-and-universal-design
Uitgebreid artikel over verschillende soorten kleurenblindheid en hoe je daar rekening mee kunt houden.

webaim.org/articles/contrast
Artikel over contrast en het (verkeerd) gebruik van kleuren.

webaim.org/resources/contrastchecker
Controleren of contrast tussen twee kleuren voldoende is. Geeft aan of voldaan wordt aan de richtlijnen van WCAG. Invoer van kleuren in hex.

webaim.org/resources/linkcontrastchecker
Controleren of contrast tussen tekst- en achtergrondkleur van link en achtergrondkleur van pagina voldoende is. Geeft aan of voldaan wordt aan de richtlijnen van WCAG. Invoer van kleuren in hex.

whocanuse.com
Controleren op voldoende contrast bij groot aantal verschillende vormen van kleurenblindheid en slechtziendheid. Invoer van kleuren in hex en hsl().

Cursussen, algemene tutorials, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

academy.abra.ai/courses/kick-off
Beknopte cursus toegankelijkheid.

accessibility-developer-guide.com
Zeer uitgebreide en duidelijke tutorial over toegankelijkheid. Van het opzetten van een test-omgeving tot het gebruik van WAI-ARIA en voorbeelden.

blog.pope.tech/2023/08/31/how-to-make-charts-and-graphs-more-accessible
Tutorial hoe toegankelijke grafieken te maken.

developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility
Overzicht van artikelen, tutorials, en dergelijke op mozilla.org op het gebied van toegankelijkheid.

sherpa.guide/paths/webaccessibility
Lijstje met (min of meer) op elkaar aansluitende cursussen en dergelijke om een website toegankelijk te maken. Daarnaast veel links naar allerlei sites met cursussen, tutorials, en dergelijke.

ta11y.org/learning
Cursus toegankelijkheid.

udacity.com/course/web-accessibility
Cursus toegankelijke sites maken. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

w3.org/WAI/courses/list
Lijst met cursussen toegankelijkheid, waaronder gratis.

web.dev/learn/accessibility
Interactieve cursus CSS. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken. De cursus is bijvoorbeeld even goed in Firefox te volgen. En het is echt niet nodig om Google aan nog meer data te helpen door Google fonts te gebruiken.

webdesign.tutsplus.com/series/web-accessibility-the-complete-learning-guide
Serie tutorials, waarvan het merendeel gratis is.

Focus, tabindex, toetsenbordnavigatie, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Ondersteuning die specifiek met één attribuut, element en dergelijke te maken heeft, kunnen ook bij dat specifieke attribuut, element, en dergelijke staan.

:focus, focus:visible en :focus-within zie CSS → Selectors, specificiteit, class, id, erfelijkheid, @layer, en dergelijke → :focus, :focus-visible en :focus-within.

a11y-collective.com/blog/tabindex-accessibility
Tutorial over het tabindex-attribuut.

a11yproject.com/posts/how-to-use-the-tabindex-attribute
Korte tutorial over het tabindex-attribuut.

blog.logrocket.com/why-you-should-use-focus-styles
Artikel waarom een indicatie van focus belangrijk is, en allerlei ideeën om dat beter en mooier te doen dan de standaardfocus.

deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators
Artikel over het belang van focus-indicators. Met voorbeelden.

devyarns.com/logical-focus-order
Artikel over het belang van een logische tab-volgorde, met tips om fouten te voorkomen.

focus.hteumeuleu.com
Spelletje dat laat zien hoe rampzalig het ontbreken van een focus-indicatie is voor gebruikers van de Tab-toets.

medienbaecker.com/articles/focus-outlines
Gedetailleerde tutorial over het maken van een focus-indicator.

nicchan.me/blog/tips-for-focus-styles
Artikel waarom een indicatie van focus belangrijk is, en allerlei ideeën om dat beter en mooier te doen dan de standaardfocus.

sarasoueidan.com/blog/focus-indicators
Artikel over het belang en de vereisten van een goede focus-indicator.

shopify.com/partners/blog/keyboard-accessibility
Artikel over waarop te letten wat betreft toegankelijkheid voor gebruikers van de Tab-toets.

smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1
Deel 1 van een uitgebreide tutorial over toegankelijkheid en toetsenbord, gericht op CSS en HTML.
Deel 2 is gericht op JavaScript.

smashingmagazine.com/2025/04/what-mean-site-be-keyboard-navigable
Waar je op moet letten voor een pagina die toegankelijk is voor toetsenbordgebruikers.

tempertemper.net/blog/how-to-browse-the-web-with-the-keyboard-alone
Artikel hoe een pagina kan worden bekeken, bewerkt, enzovoort met gebruik van alleen het toetsenbord.

tpgi.com/when-is-a-skip-link-needed
Artikel over het belang van een skip-link.

webaim.org/techniques/keyboard
Artikel over toegankelijkheid met toetsenbord en gebruik van tabindex en accesskey.

Lijsten met links, gespecialiseerde sites, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

a11yproject.com/resources
Pagina met links naar van alles over toegankelijkheid, ingedeeld in hoofdstukken.

anysurfer.be/nl
Site met veel informatie over toegankelijkheid. Vlaamstalig.

getstark.co/library
Grote verzameling links over toegankelijkheid, ingedeeld in rubrieken.

pauljadam.com/resources
Groot aantal links over toegankelijkheid, overzichtelijk ingedeeld in groepen.

raindrop.io/a11ycat/a11y-cat-digital-accessibility-resources
Bijna 3000 links over toegankelijkheid. Doorzoekbaar op categorie.

w3.org/WAI/resources
Links van W3C naar van alles over toegankelijkheid.

Overig

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

blog.pope.tech/2023/05/01/inaccessible-pdfs-how-to-know-when-to-use-html-webpages-instead-of-pdfs
Artikel waarom een HTML-pagina in het algemeen beter is dan een PDF.

craigabbott.co.uk/blog/european-accessibility-act-what-you-need-to-know
Artikel over de verplichtingen wat betreft toegankelijkheid onder de European Accessibility Act.

deque.com/blog/7-tactics-that-benefit-both-accessibility-and-seo
Artikel over hoe een goede toegankelijkheid ook kan helpen bij een hogere plaats in zoekmachines.

digitaaltoegankelijk.nl/nieuws/european-accessibility-act-2025
Nederlandstalig artikel over de verplichtingen wat betreft toegankelijkheid onder de European Accessibility Act.

ishadeed.com/article/target-size
Tutorial over minimale grootte knoppen, links, en dergelijke. Met veel voorbeelden.

matuzo.at/blog/accessible-to-some
Artikel over ontoegankelijke sites, met een voorbeeld van een ontoegankelijke pagina, maar dan ontoegankelijk gemaakt voor 'gewone' browsers.

tetralogical.com/blog/2025/03/19/understanding-the-eaa
Overzicht van eisen van de European Accessibility Act

w3.org/WAI/people-use-web/abilities-barriers
Overzicht van verschillende soorten beperkingen en de problemen die die (kunnen) opleveren.

Schermlezers, tekstbrowsers, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Ondersteuning van elementen, getallen, speciale tekens, en dergelijke zie Toegankelijkheid → Browser (en schermlezer) support.

Specifiek voor kleurenblindheid staat onder Toegankelijkheid → Contrast en kleurenblindheid.

Algemeen

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

adrianroselli.com/2021/10/blaming-screen-readers-red-flag
Artikel met enkele voorbeelden van voor schermlezers vrijwel ontoegankelijke creaties.

axesslab.com/what-is-a-screen-reader
Tutorial over het gebruik van verschillende schermlezers, gericht op sitebouwers.

digitala11y.com/screen-readers
Overzicht van schermlezers met onder andere licenties en op welke systemen ze draaien.

en.wikipedia.org/wiki/Comparison_of_screen_readers
Uitgebreid overzicht van schermlezers met prijzen, op welke systemen ze draaien, enzovoort.

epicweb.dev/testing-accessibility-with-screen-readers
Tutorial hoe te testen in verschillende schermlezers.

sarasoueidan.com/blog/testing-environment-setup
Uitleg hoe je een testomgeving voor schermlezers kunt opzetten.

smashingmagazine.com/2019/02/accessibility-webinar
Video over de problemen waar een gebruikster van een schermlezer tegenaan kan lopen. Absolute aanrader!

webaim.org/projects/screenreadersurvey10
Onderzoek uit 2024 hoe schermlezers worden gebruikt.

ChromeVox (Chrome OS)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

ChromeVox is een extensie voor Google Chrome op besturingssysteem ChromeOS. In het verleden was deze extensie ook bruikbaar in de browser Google Chrome op andere besturingssystemen. Zo werd het ook hier (op Linux) gebruikt om op toegankelijkheid te testen.

Inmiddels werkt het echter alleen op ChromeOS nog goed, op andere systemen geeft het enorme problemen. Zo maakt het op Linux bijvoorbeeld de instellingen van Google Chrome onzichtbaar, om maar iets te noemen. Helaas is het dus niet meer mogelijk hierin te testen. Op heel veel sites wordt ChromeVox nog steeds voor alle systemen aangeraden, maar dit is dus echt verouderde informatie. Gezien de hardnekkigheid van deze verouderde info is hier de reactie van chromium zelf op de gemelde bug: bugs.chromium.org. (Dat verhaal kort samengevat: buiten ChromeOS is ChromeVox voor lezen mogelijk nog bruikbaar, voor testen niet.)

Mogelijk gaat hier in de toekomst weer getest worden in ChromeVox, als een verouderd systeem mogelijk door een versie van ChromeOS wordt vervangen. (Mogelijk ook niet, want om nou reclame te gaan maken voor het besturingssysteem van een gerenommeerd datadief...)

Jaws (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

Jaws is een veel gebruikte schermlezer op Windows. Deze wordt hier alleen genoemd, omdat die veel wordt gebruikt.

De probeerversie is gratis veertig minuten te proberen, daarna moet je Windows opnieuw opstarten. Maar tot eind 2017 verbood de licentie expliciet de gratis versie te gebruiken om sites te testen. Als je dus de moeite neemt om je site te testen op toegankelijkheid, mag je wat Jaws betreft als beloning 'n kapitaal neerleggen voor hun programma. Reden om over te stappen op NVDA, wat minstens zo goed is, en nog open source ook.

Begin januari 2018 verscheen een nieuwe EULA. Hierin staat geen expliciet verbod meer, maar nog wel dat het programma alleen mag worden gebruikt in de veertig-minutenmodus in afwachting van een licentie. Het is nu dus ietwat onduidelijk. Via de link iets hiervoor naar de EULA kunnen mensen die zin hebben in een proefproces, of die geld over hebben, de link naar het programma zelf vinden.
Begin januari 2019 is de ellenlange EULA nog ellenlanger geworden en nog steeds even onduidelijk.
En begin maart 2021 is de link weer 'ns aangepast. Wie er lol in heeft, kan de ellenlange EULA zelf uitspitten op juridische spitsvondigheden.
Mei 2022: joechei, 't is in de mei, dus legt elke vogel een ei en Jaws een nieuwe licentie. De link is zowaar niet gewijzigd, maar de licentie weer wel. De gevorderde masochist mag het zelf gaan lezen.
September 2022: het is weer duidelijk. Je mag Jaws alleen gedurende maximaal drie maanden gebruiken in de veertig-minutenmodus, in afwachting van een betaalde licentie. Om te kunnen testen moet je dus nog steeds een kapitaal neerleggen.

September 2022 voor het eerst ook de (eveneens ellenlange) privacyverklaring doorgelezen. Jaws blijkt allerlei informatie over je te verzamelen en door te geven aan anderen voor onder andere advertenties.

Omdat niet op Jaws wordt getest, staan hier ook geen links naar artikelen en dergelijke over Jaws. Het is onmogelijk de kwaliteit daarvan te beoordelen zonder Jaws te gebruiken.

Lynx (Windows-versie)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

Lynx is een tekstbrowser die de pagina ongeveer laat zien, zoals een spraakbrowser en dergelijke hem zien.

invisible-island.net/lynx
Download, uitleg, en dergelijke voor Lynx op Windows.
Mogelijk is Lynx ook op OS X te installeren, maar daarvoor moet je zelf op internet zoeken. Er zijn ongelooflijk veel instructies te vinden, hoe je dit moet doen, maar het overgrote deel daarvan stamt nog uit de tijd van Napoleon.

NVDA (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

NVDA is een gratis open source schermlezer voor Windows.

In NVDA zelf is een zeer uitgebreide Nederlandstalige handleiding aanwezig.

a11ysupport.io/learn/at/nvda
Belangrijkste sneltoetsen.

babbage.com/download/handleiding/handleiding-NVDA
Nederlandstalige handleiding voor NVDA.

babbage.com/download/handleiding/handleiding-NVDA/NVDA Sneltoetskaart (word)
Word-document met de belangrijkste sneltoetsen. Opent ook prima in LibreOffice. Nederlandstalig.

bbc.github.io/accessibility-news-and-you/assistive-technology/testing-steps/nvda-windows
Overzicht hoe te testen in NVDA.

dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts.
Overzicht van de belangrijkste sneltoetsen. (Ook te downloaden als PDF.)

nvaccess.org
NVDA. Gratis, uitstekende open source schermlezer. Werkt alleen op Windows.
download.nvaccess.org/documentation/userGuide
Gebruikershandleiding.

webaim.org/articles/nvda.
Beknopte handleiding hoe NVDA te gebruiken om toegankelijkheid te testen.

Orca (Linux)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

Orca is een schermlezer voor Linux. In de meeste distributies zal deze zijn opgenomen, en kan dus op de gebruikelijke simpele manier geïnstalleerd worden.

Orca is van oorsprong op Gnome georiënteerd. In andere omgevingen kan het (grote) problemen opleveren. Zo lukte het hier niet om Orca op Kubuntu te laten werken: het blokkeerde álle sneltoetsen, zelfs nadat het werd gekild. Inmiddels werkt het wel goed op KDE Neon. En daarmee waarschijnlijk ook op andere distributies met KDE.

a11yproject.com/posts/getting-started-with-orca
Beknopte handleiding met de meest essentiële toetsen en dergelijke.

a11ysupport.io/learn/at/orca
Belangrijkste sneltoetsen.

help.gnome.org/users/orca/stable
Handleiding.

TalkBack (Android)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

TalkBack is de op Android meegeleverde schermlezer.

In TalkBack zelf zijn een Nederlandstalige handleiding en oefeningen aanwezig.

a11ysupport.io/learn/at/talkback
Belangrijkste gebaren.

appt.org/nl/docs/android/functies/talkback
Nederlandstalige handleiding voor TalkBack.
Op screenreader.app staat info over een app met oefeningen om TalkBack te leren gebruiken.

bbc.github.io/accessibility-news-and-you/assistive-technology/testing-steps/talkback-android
Overzicht hoe te testen in TalkBack.

dequeuniversity.com/assets/pdf/screenreaders/talkback-guide.pdf (PDF)
PDF met beschrijvingen van de belangrijkste gebaren en dergelijke om TalkBack te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/talkback-images-guide.pdf (PDF)
PDF met tekeningen van de belangrijkste gebaren om TalkBack te kunnen bedienen.

support.google.com/accessibility/android
Nederlandstalige pagina over toegankelijkheid in Android. Hier is ook de handleiding voor de ingebouwde schermlezer Talkback te vinden.

Verteller (Narrator) (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

Verteller is de op Windows meegeleverde schermlezer. Met ingang van Windows 10 werkt deze uitstekend. (In eerdere versies van Windows was het ding volstrekt onbruikbaar.)

a11ysupport.io/learn/at/narrator
Belangrijkste sneltoetsen.

support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller
Nederlandstalige uitleg over de in Windows 10 en 11 ingebouwde schermlezer Verteller.
Niet alle sneltoetsen uit deze uitleg blijken te werken. Bovendien zijn het er zoveel dat je door de bomen het bos niet meer ziet. Een kortere Engelstalige lijst met de belangrijkste sneltoetsen is te vinden op dequeuniversity.com. Hoewel de combinaties anders zijn, lijken deze ook in de Nederlandse versie te werken.

VoiceOver (iOS en iPadOS)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

VoiceOver is de op iOS en iPadOs meegeleverde schermlezer.

a11ysupport.io/learn/at/vo_ios
Belangrijkste gebaren op iOS en iPadOS.

appt.org/nl/docs/ios/functies/voiceover
Nederlandstalige handleiding voor VoiceOver op iOS en iPadOS.
Op screenreader.app staat info over een app met oefeningen om VoiceOver op iOS en iPadOS te leren gebruiken.

bbc.github.io/accessibility-news-and-you/assistive-technology/testing-steps/voiceover-ios
Overzicht hoe te testen in VoiceOver op iOS en iPadOS.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-guide.pdf (PDF)
PDF met beschrijvingen van de belangrijkste gebaren om VoiceOver op iOS en iPadOS te kunnen bedienen.

dequeuniversity.com/assets/pdf/screenreaders/voiceover-ios-images-guide.pdf (PDF)
PDF met tekeningen van de belangrijkste gebaren om VoiceOver op iOS en iPadOS te kunnen bedienen.

support.apple.com/nl-nl/guide/ipad/ipad9a246584/13.0/ipados/13
Nederlandstalige handleiding voor de in iPadOS 13 tot en met 17 ingebouwde schermlezer VoiceOver. (Bovenaan de pagina kan de versie van iPadOS worden gekozen.)

support.apple.com/nl-nl/guide/iphone/iph3e2e2281/12.0/ios/12
Nederlandstalige handleiding voor de in iOS 12 tot en met iOS 17 ingebouwde schermlezer VoiceOver. (Bovenaan de pagina kan de versie van iOS worden gekozen.)

VoiceOver (OS X)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

VoiceOver is de op OS X meegeleverde schermlezer.

a11ysupport.io/learn/at/vo_macos
Belangrijkste sneltoetsen op OS X.

bbc.github.io/accessibility-news-and-you/assistive-technology/testing-steps/voiceover-mac
Overzicht hoe te testen in VoiceOver op OS X.

dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts
Sneltoetsen voor de bediening van VoiceOver op OS X.

help.apple.com/voiceover/command-charts
Printbare toetsenbord lay-out voor VoiceOver op OS X. (Onderaan de pagina staat 'macOS Sonoma', maar dit zal in andere versiews van OS X grotendeels hetzelfde zijn.)

support.apple.com/nl-nl/guide/voiceover/vo2711/9/mac/10.14
Nederlandstalige handleiding voor de in OS X 10.13 (High Sierra) tot en met OS X 14 (Sonoma) ingebouwde schermlezer VoiceOver. (Bovenaan de pagina kan de versie van OS X worden gekozen.)

webaim.org/articles/voiceover
Beknopte handleiding hoe VoiceOver op OS X te gebruiken om toegankelijkheid te testen.

yakim.nl/articles/voiceover-testing
Duidelijke tutorial hoe te testen met VoiceOver op OS X.

WebbIE (Windows)

(Onderafdeling van Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke)

WebbIE is een gratis te gebruiken tekstbrowser voor Windows. Het laat een pagina ongeveer zien, zoals een schermlezer die ziet.

webbie.org.uk
(Site is Engelstalig, programma heeft een Nederlandstalige versie.) Je hebt voor het testen van een site alleen de browser nodig.

Testen (gereedschap en theorie)

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Een geautomatiseerde test kan nooit het daadwerkelijk testen met echte schermlezers volledig vervangen.

Voor testen en dergelijke voor een speciale taal, zoals JavaScript, zie bij de betreffende taal. Tests voor een bepaald element, zoals formulieren, staan in de regel bij dat element.

Tests specifiek voor contrast en kleurenblindheid staan bij Toegankelijkheid → Contrast en kleurenblindheid.

Testen en dergelijke specifiek voor schermlezers staan bij Toegankelijkheid → Browser (en scherlezer) support.

Firefox, Google Chrome en veel andere browsers hebben tal van extensies op het gebied van toegankelijkheid (zoek op het trefwoord accessibility).

a11ygator.chialab.io
Pagina testen op toegankelijkheid.

a11yproject.com/posts/resize-text
Tutorial hoe te testen of de lettergrootte probleemloos kan worden veranderd door de bezoeker.

a11yproject.com/posts/using-firefox-for-accessibility-testing
Handleiding hoe in Firefox te testen op toegankelijkheid. Zowel de ingebouwde ontwikkeltools als extensies worden behandeld.

adrianroselli.com/2023/01/comparing-manual-and-free-automated-wcag-reviews
Vergelijking tussen aantal en soort gevonden fouten bij geautomatiseerd en handmatig testen.

blog.pope.tech/2023/03/01/a-beginners-guide-to-manual-accessibility-testing
Tutorial hoe op allerlei manieren te testen op toegankelijkheid.

de.torontomu.ca/wa/audit
Cursus in boekvorm over hoe te testen op toegankelijkheid. Het boek is ook te downloaden.

digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers
Lijst met extensies voor browsers op het gebied van toegankelijkheid.

experte.com/accessibility
Test een hele site (maximaal 500 url's) op toegankelijkheid. Met gedetailleerde tips voor verbeteringen.

firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector
Handleiding voor de in de ontwikkeltools van Firefox ingebouwde accessibility inspector.

lighthouse-metrics.com
Testen op een hele serie onderdelen, waaronder snelheid en toegankelijkheid.

matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score
Artikel over de beperkingen van geautomatiseerd testen. Wat niet wil zeggen dat je dat niet moet doen, maar dat je ook moet testen met echte schermlezers en dergelijke.

pagespeed.web.dev
Test op snelheid, toegankelijkheid, geschiktheid voor zoekmachines, en dergelijke. Omdat deze site volledig wordt gecontroleerd door Google, moet elke verwijzing naar Google, Chrome, en dergelijke wel kritisch worden bekeken.

personas-prototype.herokuapp.com
Simulator voor verschillende soorten toegankelijkheidsproblemen.

qualweb.di.fc.ul.pt/evaluator
Pagina testen op toegankelijkheid. Met uitgebreide omschrijving van (mogelijk) fouten.

smashingmagazine.com/2021/06/complete-guide-accessibility-tooling
Overzicht van hulpmiddelen om toegankelijkheid te testen.

w3.org/WAI/test-evaluate/tools/list
Links naar elke bekende toegankelijkheidstest, met uitgebreide toelichting bij elke link. Onderaan elke test staat de datum, waarop de informatie voor die test is bijgewerkt.

wave.webaim.org
Test je pagina op eventuele problemen met toegankelijkheid. Resultaten worden uiterst overzichtelijk weergegeven met behulp van icoontjes. Op hele lange pagina's loopt de online-test vast, maar je kunt 'n extensie installeren in Firefox en Google Chrome, en die werkt wel goed bij langere pagina's.
Uitgebreide uitleg over icoontjes en dergelijke is te vinden in de evalutionguide. Een handleiding in video-vorm (ondertiteld) is te vinden op youtube.
In veel browsers kan de extensie WAVE Evalution Tool worden geïnstalleerd. Een handleiding voor deze extensie is te vinden op blog.pope.tech.

uxdesign.cc/accessibility-tools-for-designers-and-developers
Overzicht van hulpmiddelen om toegankelijkheid te testen.

Tutorials over specifieke attributen, elementen, technieken, en dergelijke

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Onderwerpen die specifiek met één attribuut, element en dergelijke te maken hebben, kunnen ook bij dat specifieke attribuut, element, en dergelijke staan.

alt-attribuut

(Onderafdeling van Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke)

anysurfer.be/nl/documentatie/artikels/detail/technieken-tekstalternatief-voor-afbeeldingen
Vlaamstalige tutorial over alt-tekst bij afbeeldingen.

blog.pope.tech/2022/04/05/alternative-text-alt-text
Tutorial over alt-tekst bij afbeeldingen.

html5accessibility.com/stuff/2024/11/23/old-alt-text-advice
Heel uitgebreide tutorial over het alt-attribuut.

webaim.org/techniques/alttext
Tutorial over alt-tekst bij afbeeldingen.

Overig

(Onderafdeling van Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke)

24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute
Zeer uitgebreid artikel over het title-attribuut en toegankelijkheid.

a11y-collective.com/blog/the-perfect-link
Tutorial over het maken van toegankelijke links (<a>).

css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained
Artikel over waarop te letten voor toegankelijke animaties.

deque.com/blog/ensuring-negative-numbers-are-available-for-everyone
Tutorial hoe negatieve getallen aan te geven.

ericwbailey.website/published/dont-use-custom-css-mouse-cursors
Artikel over de problemen die een zelf ontworpen cursor kan veroorzaken.

ericwbailey.website/published/dont-use-custom-css-scrollbars
Artikel waarom je beter de scrollbalk niet kunt aanpassen.

github.com/scottaohara/accessible_components
Allerlei toegankelijke elementen en constructies zoals menu's, pop-ups en knoppen.

uxdesign.cc/emojis-in-accessibility-how-to-use-them-properly
Artikel met tips om emoji's op een toegankelijke manier te gebruiken.

Taal en lang-attribuut

(Onderafdeling van Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke)

Eigenschappen die rekening houden met de richting van de taal zoals Logical properties, writing-mode, dir-attribuut, :dir(), writing-mode, en dergelijke zie CSS → Logical properties, dir-attribuut, :dir(), writing-mode, en dergelijke.

benmyers.dev/blog/multilingual-web-accessibility
Tutorial waar rekening mee te houden bij een meertalig artikel.

craigabbott.co.uk/blog/using-the-language-attribute-to-make-your-website-accessible
Tutorial over het lang-attribuut met ook voorbeelden van meerdere talen door elkaar heen.

loc.gov/standards/iso639-2/php/English_list
Alfabetische lijst met álle ISO-landcodes. Voor een website wordt de tweeletterige ISO 639-1-code gebruikt, eventueel met een subcode.

nl.wikipedia.org/wiki/ISO_639
Nederlandstalig artikel over ISO 639, de standaard voor taalcodes. Hierin wordt uitstekend beschreven, hoe techneuten een toch niet al te ingewikkeld systeem vrijwel onbegrijpelijk weten te maken.

r12a.github.io/app-subtags
Zoekmogelijkheid om subcodes bij talen te vinden, zoals en-ca (Canadees Engels). Met eenvoudige validator.

w3schools.com/ref_language_codes
Alfabetische lijst met tweeletterige ISO 639-1 landcodes.

webaim.org/techniques/language
Uitgebreide tutorial over het gebruik van het lang-attribuut.

Verbergen van elementen en dergelijke

(Onderafdeling van Toegankelijkheid → Tutorials over specifieke attributen, elementen, technieken, en dergelijke)

ishadeed.com/article/hiding-web
Artikel over het verbergen van elementen, tekst, enzovoort, en de invloed daarvan op toegankelijkheid.

kittygiraudel.com/2021/02/17/hiding-content-responsibly
Overzicht van manieren om dingen te verbergen en de invloed daarvan op toegankelijkheid.

scottohara.me/blog/2017/04/14/inclusively-hidden
Artikel over verschillende manieren om elementen te verbergen en de invloed daarvan op schermlezers en dergelijke.

WCAG en WAI-ARIA

(Onderafdeling van Toegankelijkheid)

De spider van een zoekmachine is redelijk te vergelijken met een blinde. Toegankelijkheid helpt dus ook voor een hogere plaats in de zoekmachine.

Browser support, tests voor (correct) support van aria-attributen, en dergelijke staan bij Toegankelijkheid → Browser (en schermlezer) support.

Checklists en dergelijke zie Toegankelijkheid → Afvinklijstjes, overzichten waarop te letten, en dergelijke.

Specifiek over contrast en kleurenblindheid staat bij Toegankelijkheid → Contrast en kleurenblindheid.

Specifieke onderwerpen, zoals een toegankelijk formulier of ondertiteling bij video, kunnen ook bij het betreffende onderwerp staan.

a11y-collective.com/blog/aria-alert
Tutorial over aria alerts.

a11y-collective.com/blog/aria-describedby
Tutorial over aria-describedby.

a11y-collective.com/blog/aria-live
Tutorial over aria-live.

aaardvarkaccessibility.com/wcag-plain-english
WCAG in gewoon niet-technisch Engels.

anysurfer.be/nl/blog/detail/van-wcag-2-1-naar-wcag-2-2
Overzicht van de verschillen tussen WCAG 2.1 en 2.2. Nederlandstalig.

anysurfer.be/nl/documentatie/artikels/detail/live-regions
Nederlandstalige tutorial over live regions (aria-live en dergelijke).

appt.org/nl/richtlijnen
Nederlandstalige uitleg, richtlijnen, enzovoort voor toegankelijke apps, gebaseerd op WCAG 2.1. Hoewel dit is uitgewerkt voor apps, is het gebaseerd op precies dezelfde richtlijnen als die voor websites.
In een iets andere vorm is dit als Handboek Toegankelijkheid (PDF) ook als PDF te downloaden.

benmyers.dev/blog/dont-use-aria-label-on-static-text-elements
Artikel over waar aria-label en aria-labelledby wel en niet zijn toegestaan en eventuele alternatieve oplossingen.

blog.pope.tech/2023/07/03/aria-can-hurt-or-help-web-accessibility-how-to-review-your-websites-aria
Beknopte handleiding hoe WAI-ARIA-attributen te testen met behulp van de WAVE-extensie.

code.tutsplus.com/series/web-accessibility-with-aria
Serie tutorials over het gebruik van WAI-ARIA.

dennisdeacon.com/web/accessibility/a-note-about-wcag-conformance-levels
Uitleg over het verschil tussen WCAG level A, level AA en level AAA.

deque.com/blog/aria-spec-for-the-unninitiated
Tutorial over een juist gebruik van WAI-ARIA, deel 1.
deel 2 deel 3

digitaaltoegankelijk.nl/wcag-uitgelegd
Alle richtlijnen van WCAG 2.1 uitgelegd in gewone, normale, vriendelijke, begrijpelijke mensentaal. Nederlandstalig.

digitoegankelijk.nl/aan-de-slag/tips
Praktische tips voor een toegankelijke site.

digitala11y.com/wai-aria-1-1-cheat-sheet
Overzicht van WAI-ARIA 1.2 met onder elk punt een link naar meer uitleg.

ericwbailey.website/published
Uitgebreid artikel over een (on)juist gebruik van aria-label.

getstark.co/wcag-explained
WCAG 2.2. uitgelegd in gewoon Engels.

hassellinclusion.com/blog/html5-sectioning-elements-accessible-landmarks
Tutorial over de relatie tussen 'sectioning elements' (<main>, <header>, en dergelijke) en landmarks.

html5accessibility.com/stuff/2021/05/31/the-hidden-world-of-aria-hidden
Tutorial over een juist gebruik van aria-hidden.

html5accessibility.com/stuff/2022/04/03/aria-labelledby-usage-notes
Tutorial over wanneer en hoe aria-labelledby (niet) te gebruiken.

htmhell.dev/adventcalendar/2023/22
Tutorial over aria-live.

internetacademy.nl/ebooks/wcag-in-de-praktijk
Nederlandstalige tutorial hoe te voldoen aan de eisen van WCAG. Ook te downloaden als PDF en ePub.

sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-1
Uitgebreide tutorial over ARIA Live Regions Deel 2.

smashingmagazine.com/2022/09/wai-aria-guide
Overzicht van veel gemaakte fouten en hoe die te voorkomen.

tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working
Tutorial over aria-live.

w3.org/TR/2021/CR-wai-aria-1.2
Specificatie WAI-ARIA1.2.

w3.org/TR/wai-aria-1.3
Ontwerp-specificatie WAI-ARIA1.3.

w3.org/TR/html-aria
Praktisch gebruik van aria-attributen in HTML, met onder andere een tabel met toegestane en verboden attributen bij de diverse HTML-elementen.

w3.org/TR/using-aria
Uitleg voor makers van sites over de toepassing van WAI-ARIA.

w3.org/TR/wcag-3.0
Ontwerp-specificatie W3C Accessibility Guidelines (WCAG) 3.0.

w3.org/TR/WCAG21
Specificatie Web Content Accessibility Guidelines versie 2.1
Nederlandse vertaling.

w3.org/TR/WCAG22
Specificatie Web Content Accessibility Guidelines versie 2.2.
Nederlandse vertaling.

w3.org/WAI/ARIA/apg
Uitleg in min of meer normale mensentaal over het gebruik van WAI-ARIA. Met links naar voorbeelden.

w3.org/WAI/WCAG21/Understanding
Uitleg met voorbeelden over WCAG 2.1.

w3.org/WAI/WCAG22/Understanding
Uitleg met voorbeelden over WCAG2.2.

whatsock.com/training/matrices
Overzicht van WAI-ARIA-roles: wat ze betekenen en hoe ze te gebruiken.

WebGL

Canvas, CSS, WebGL, SVG of ...? staat bij SVG.

alain.xyz/blog/raw-webgl
Gedetailleerde tutorial, waarin een kleine applicatie wordt geschreven.

developer.mozilla.org/en-US/docs/Web/API/WebGL_API
Pagina met links naar voorbeelden, tutorials, enzovoort.

webglfundamentals.org
Hele serie tutorials over allerlei technieken en onderdelen.

xem.github.io/articles/webgl-guide
Uitgebreide tutorial.
Deel 2.

Zoekmachines

Dat hieronder alleen Google en Bing worden genoemd, betekent zeker niet dat er geen andere goede zoekmachines zijn. Integendeel: wat bijvoorbeeld privacy betreft zijn dit zo'n beetje de slechtste zoekmachines. Het zijn echter de enige zoekmachines die - naast de zoekmachine - uitgebreide hulpmiddelen voor webmasters hebben. Vandaar dat alleen deze twee worden genoemd.

(Baidu en Yandex hebben ook hulpmiddelen, maar die zijn voornamelijk op China en Rusland gericht. En voor je privacy hoef je die vermoedelijk ook niet te gebruiken...)

Algemene artikelen, hulpmiddelen, en dergelijke

(Onderafdeling van Zoekmachines)

Omdat de spider van een zoekmachine redelijk vergelijkbaar is met een blinde, is ook de informatie bij Toegankelijkheid van belang.

developers.google.com/search/docs/fundamentals/do-i-need-seo
Waar je op moet letten als je gaat betalen voor zoekmachine-optimalisatie (in het Engels wordt meestal de afkorting SEO) gebruikt. Dit is niet onbelangrijk, want op bijvoorbeeld het forum van Google staan regelmatig verhalen van mensen die kapitalen hebben betaald voor volkomen waardeloze of zelfs schadelijke 'optimalisatie'.

git-tower.com/blog/seo-for-developers
Overzicht van zaken waar zoekmachines op letten bij het indexeren.

internetacademy.nl/ebooks/seo
Nederlandstalige tips om beter gevonden te worden. Ook te downloaden als PDF en ePubePub.

searchengineland.com
Achtergrondartikelen over SEO, updates van zoekmachines, en dergelijke

seroundtable.com
Achtergrondartikelen over SEO, updates van zoekmachines, en dergelijke

Bing

(Onderafdeling van Zoekmachines)

bing.com/webmasters/about
Microsoft hulpmiddelen voor webmasters. Nederlandstalig. Inmiddels is de kwaliteit van de hulpprogramma's van Bing vergelijkbaar met die van Google, en sommige hebben zelfs meer mogelijkheden, zoals de SEO-analyse. Registratie noodzakelijk.

bing.com/webmasters/help/webmaster-guidelines
Richtlijnen voor webmasters. Nederlandstalig.

Google

(Onderafdeling van Zoekmachines)

developers.google.com/search/docs/crawling-indexing/special-tags
Welke metatags Google gebruikt. (Deze link is hier alleen neergezet vanwege de ongelooflijke hoeveelheden onjuiste informatie over dit onderwerp. Vrijwel alles wat op internet over metatags en Google te vinden is, is volstrekte onzin. Er is zelfs geboefte dat geld durft te vragen voor het plaatsen van volstrekt nutteloze en vaak zelfs nadelige metatags. En voor 10 euro per maand of zo worden ze bijgehouden. Volstrekt zinloos, gewoon ordinaire oplichterij.)

developers.google.com/search/docs/essentials
Overzicht van zaken die belangrijk zijn om geïndexeerd te worden door Google.

developers.google.com/search/docs/fundamentals/seo-starter-guide
Googles Startersgids voor zoekmachineoptimalisatie (SEO).

gsqi.com/marketing-blog/how-to-use-data-nosnippet
Tutorial hoe aan te geven dat iets niets als snippet gebruikt mag worden.

search.google.com/search-console/about
Nederlandstalige 'Search Console' met een hele reeks hulpmiddelen voor webmasters. Je moet je wel registreren.
Uitgebreide uitleg over Search Console.

static.googleusercontent.com/media/guidelines (PDF)
PDF met de richtlijnen van Google voor raters (mensen die voor Google handmatig sites beoordelen).

robots.txt

(Onderafdeling van Zoekmachines)

Zowel Google als Bing bieden binnen hun hulpmiddelen voor webmasters een mogelijkheid robots.txt te valideren.

developers.google.com/search/docs/crawling-indexing/robots/robots_txt
Uitgebreid artikel hoe robots.txt te gebruiken voor zoekmachines.

robotstoolkit.com
robots-txt-validator.

robotstoolkit.com/generator
robots.txt genereren aan de hand van in te vullen velden.

seoptimer.com/robots-txt-generator
robots.txt genereren aan de hand van in te vullen velden.

XML-sitemap

(Onderafdeling van Zoekmachines)

cleancss.com/xml-beautify
XML (zoals een sitemap) valideren en formatteren.

inspyder.com/free/SitemapValidator
XML-sitemap valideren.

sitemaps.org/nl
Uitgebreide Nederlandstalige uitleg over wat een sitemap is en zo.

xml-sitemaps.com
XML-sitemap genereren. Tot vijfhonderd pagina's is het gratis. (Om de relatieve waarde van de pagina's te bepalen, is het absoluut noodzakelijk een goede navigatiestructuur te hebben.)

xml-sitemaps.com/validate-xml-sitemap
XML-sitemap valideren.