Pagina met (voornamelijk externe) links

Afbeeldingen

(Onderafdeling van CSS)

Animation, transform, transition en Motion Path

(Onderafdeling van CSS)

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.

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.

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

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

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/advanced-css-animation-using-cubic-bezier
Interactieve tutorial over cubic-bezier.

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

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

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

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().

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

developer.chrome.com/articles/scroll-driven-animations
Tutorial over Scroll Driven Animations.

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

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

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

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

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

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

heartinternet.uk/blog/should-you-use-css-of-javascript-for-web-animations
Artikel over wanneer CSS en wanneer JavaScript beter is voor 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.

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

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

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

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

scroll-driven-animations.style
Tutorial over en demo's van Scroll Driven Animations.

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.

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.

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

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.

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

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

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

(Onderafdeling van CSS)

css-tricks.com/css-sprites
Artikel over de voordelen van het gebruik van sprites.

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.

Borders, hoeken en figuren

(Onderafdeling van CSS)

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-irl.info/logical-border-radius
Tutorial over border-radius, inclusief Logical Properties (border-start-start-radius en dergelijke).

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

css-voorbeelden.nl/kader/ronde-hoeken/kader-040
Uitgebreide uitleg van border-radius. Met voorbeelden. 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 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).

webdesign.tutsplus.com/quick-tip-rounded-corners-done-right
Tutorial hoe meerdere parallel lopende goed aansluitende borders met ronde hoeken te maken.

Boxmodel en toebehoren (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)

Browser support en release notes

(Onderafdeling van CSS)

Bugs en hacks

(Onderafdeling van CSS)

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

(Onderafdeling van CSS)

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/basic-shapes-path-never-twain-shall-meet
Tutorial over shape-outside en clip-path.

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/2017/06/css-shapes-clipping-and-masking
Korte vergelijking tussen clipping en masking. Met voorbeelden.

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.

Compositing, filters en blending

(Onderafdeling van CSS)

arthurgouveia.com/css-mix-blend-mode
Online uitproberen hoe tekst op een afbeelding er in verschillende modes uitziet. Foto en tekstkleur kunnen worden aangepast.

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 modes.

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.

CSS4

(Onderafdeling van CSS)

xanthir.com
Álles over CSS4 op één pagina! Door de nieuwe werkwijze van w3c past álle informatie over de laatste versie van CSS op maar één pagina. Ongelooflijk. Verplicht leesvoer voor alle mensen die verlangen naar CSS4.

Cursors

(Onderafdeling van CSS)

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)

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

developer.mozilla.org/en-US/docs/Learn/HTML
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)

freecodecamp.org/news/the-css-handbook-a-handy-guide-to-css-for-developers
Cursus CSS in boekvorm. Na registratie is de cursus (in ruil voor een abonnement op een nieuwsbrief) ook als e-book te downloaden.

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

geeksforgeeks.org/html
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.

internetingishard.netlify.app
Cursus CSS en HTML.

join.codecademy.com/learn/learn-html
Interactieve cursussen HTML en CSS. Alleen de basiscursussen zijn gratis. Je moet je wel registreren.

learn.shayhowe.com/html-css
Online interactieve cursus HTML en CSS.
Vervolgcursus.

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.)

qhmit.com/html
Uitgebreid overzicht van HTML-elementen met voorbeelden, cursussen, enzovoort.

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.

tutorialrepublic.com/html-tutorial
Interactieve cursus HTML.

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
Online interactieve CSS-tutorial.

w3schools.com/html
Interactieve HTML-tutorial.

web.dev/learn/css
Online 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
Online 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.

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

websitesmetstijl.nl
Uitgebreide Nederlandstalige cursus HTML.

Default ('standaard') stylesheets

(Onderafdeling van CSS)

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

searchfox.org/mozilla/central/source/layout/style/res/html.css
Browser stylesheet van Firefox.
Deze pagina is (of was in ieder geval) negentig procent van de tijd onbereikbaar. Je kunt ook in de adresbalk van Firefox chrome://browser/content/extension.css intypen. Dat is de stylesheet die Firefox op dat moment gebruikt.

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

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

(Onderafdeling van CSS)

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

areknawo.com/all-css-units-compared-and-explained
Kort en duidelijk overzicht van eenheden in CSS.

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.

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

css-tricks.com/a-couple-of-use-cases-for-calc
Enkele voorbeelden van het gebruik van calc().

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.

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.

misterpixel.nl/insights/css-eenheden-px-em-en-rem-gebruik-niet-alleen-maar-px
Nederlandstalig artikel over de verschillen tussen en voor- en nadelen van px, em en rem.

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.

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

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

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

Flexbox

(Onderafdeling van CSS)

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

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

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

codingfantasy.com/flexboxadventure
Tutorial over flexbox. Onderdeel is een spel om flexbox spelenderwijs te leren.

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.

david-gilbertson.medium.com/11-things-i-learned-reading-the-flexbox-spec
Uiterst humoristische beschrijving van de belangrijkste verschillen tussen flexbox-elementen en 'gewone' elementen.

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
Online 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.

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

flexboxfroggy.com
Uiterst duidelijke tutorial in de vorm van een spelletje met kikkers.

ishadeed.com/article/css-flex-property
Uitgebreide tutorial over flex (de eigenschap 'flex').

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.

sketchingwitchcss.com
Spiekbriefje waarin je snel kunt zien, welk attribuut wat doet.

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.

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 floats.

Fonts, typografie, tekst, emoticons en lijnen

(Onderafdeling van CSS)

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

(Onderafdeling van CSS)

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>.

a11withlindsey.com/blog/create-custom-keyboard-accessible-checkboxes
Stap-voor-stap-tutorial hoe je keuzevakjes op kunt maken én toegankelijk kunt houden.

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/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>.

jonathan-harrell.com/blog/advanced-css-form-styling
Formulieren opmaken met behulp van minder bekende selectors.

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/how-to-make-custom-accessible-checkboxes-and-radio-buttons
Tutorial over het opmaken van aankruisvakjes en radioknoppen, waarbij ook op toegankelijkheid wordt gelet.

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 en gespecialiseerde zoekmachines

(Onderafdeling van CSS)

css-voorbeelden.nl/forum
Forum van deze site. 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.

phind.com
Zoekmachine speciaal gericht op ontwikkelaars.

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

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

you.com
Zoekmachine speciaal gericht op ontwikkelaars en programmeurs. Als je bijvoorbeeld als zoekterm mede 'css' opgeeft, krijg je vrijwel alleen resultaten die met het schrijven van css te maken hebben, soms zelfs gesorteerd per site. Waarbij ook nog 'ns kwalitatief goede sites bovenaan staan. Een aanrader.

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

(Onderafdeling van CSS)

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.

freefrontend.com/css-before-after
Tutorial over ::after en ::before, met links naar andere voorbeelden en tutorials.

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

smashingmagazine.com/2013/04/css-generated-content-counters
Tutorial over content, ::after en ::before, met hele serie voorbeelden. Artikel is al wat ouder, maar bevat heel veel voorbeelden.

Gradiënten

(Onderafdeling van CSS)

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)

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

alistapart.com/article/practical-grid
Artikel waarin Eric Meyer het ombouwen van zijn site naar grid beschrijft.

bitsofco.de/css-grid-terminology
Uitleg over allerlei bij grid gebruikte begrippen.

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

chenhuijing.com/blog/basic-grid-with-fallbacks
Eenvoudige grid lay-out waarbij het vooral gaat om fallbacks voor browsers die grid niet ondersteunen.

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

codingfantasy.com/games/css-grid-attack/play
Interactieve tutorial in de vorm van een spel met één lieverd en 'n stel booswichten.

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/CSS/CSS_layout/Grids
Tutorial met de gebruikelijke grondigheid van Mozilla.

fjolt.com/article/a-guide-to-css-grid
Met heel weinig tekst wordt behulp van knoppen op een uiterst simpele en duidelijke manier getoond, wat voor effect de verschillende waarden hebben.

freecodecamp.org/news/learn-css-grid-in-5-minutes
De basisprincipes van grid uitgelegd in duidelijke stappen.

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

gridbyexample.com
Site over grid met veel voorbeelden met bijbehorende code, tutorials, links naar andere sites, en dergelijke.

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.

learncssgrid.com
Uitgebreide uitleg met duidelijke illustraties bij elke eigenschap.

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/2017/09/css-grid-gotchas-stumbling-blocks
Oplossingen voor problemen die veel mensen tegenkomen, als ze met grid beginnen.

smashingmagazine.com/2017/10/naming-things-css-grid-layout
Tutorial over hoe namen te geven in grid.

smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid
Artikel over het oplossen van problemen met browsers die grid niet (volledig) of onjuist ondersteunen.

smashingmagazine.com/2017/12/grid-inspector
Uitgebreide handleiding voor de in het ontwikkelgereedschap van Firefox ingebouwde Grid Inspector.

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

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

varun.ca/css-grid
Heel duidelijke stap-voor-stap-tutorial.

viget.com/articles/getting-started-with-css-grid-part-1
Duidelijke tutorial over grid. Inclusief debuggen en het maken van een voorbeeld-pagina.
Deel 2.

webdesign.tutsplus.com/series/understanding-the-css-grid-layout-module
Serie tutorials over grid.

webkit.org/blog/7434/css-grid-layout-a-new-layout-modole-for-the-web
Beschrijving van Grid door een van de ontwikkelaars voor webkit.

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 (inclusief theorie), en dergelijke.

Kleuren

(Onderafdeling van CSS)

blog.logrocket.com/exploring-css-color-module-level-5
Overzicht van nieuwe functies en dergelijke uit CSS Color Module Level 5. (Nog niet alles wordt al ondersteund door alle browsers.)

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/articles/high-definition-css-color-guide
Uitgebreid vergelijkend overzicht van alle denkbare kleur-formaten. Met uitgebreide theoretische onderbouwing.

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

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

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.

medium.com/pilcro/the-surprising-science-behind-colour-codes
Uiterst leesbaar artikel over de opbouw van kleuren en de verschillende codes om kleuren te definiëren.

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().

webfx.com/blog/web-design/css-colors
Overzicht van de verschillende manieren om kleuren op te geven in CSS.

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

Kolommen (inclusief column-*)

(Onderafdeling van CSS)

css-tricks.com/guide-responsive-friendly-css-columns
Uitleg over het juiste gebruik van CSS-kolommen, waarbij ook op het probleem van kolommen hoger dan het venster (voortdurend terug naar boven scrollen) wordt ingegaan.

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)

cssplay.co.uk/layouts/ (Stu Nicholls | CSSplay)
CSS-lay-outs. Voor het gebruik van sommige lay-outs is eerst toestemming nodig.

free-css-templates.com
CSS-lay-outs onder een Creative Commons-licentie.

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

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

solucija.com/home/templates/free
CSS-lay-outs onder een Creative Commons-licentie.

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

(Onderafdeling van CSS)

24ways.org/2016/css-writing-modes
Tutorial over writing-mode.

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)

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

(Onderafdeling van CSS)

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-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/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)

Overzicht eigenschappen, tips, specificatie, en dergelijke

(Onderafdeling van CSS)

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.

cssreference.io
Alfabetisch overzicht van eigenschappen met bij elke eigenschap (werkende) 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.

o7planning.org/11829/css
Duidelijke, uitgebreide tutorials over een aantal afzonderlijke eigenschappen, selectors, en dergelijke.

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

qhmit.com/css
Uitgebreid overzicht van CSS-eigenschappen met voorbeelden, cursussen, enzovoort.

tutorialrepublic.com/references
Overzicht van eigenschappen met mogelijkheid om ze interactief uit te proberen.

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/CSS21
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).

css-voorbeelden.nl/artikelen/printen/artikelen-090
Nederlandstalig artikel over het gebruik van CSS bij het printen.

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

smashingmagazine.com/2018/05/print-stylesheets-in-2018
Artikel met praktische tips over het gebruik van stylesheets voor printen.

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 mode

(Onderafdeling van CSS)

hsivonen.fi/doctype
Zeer uitgebreid artikel over wat welk doctype doet, almost standards, standards en quirks mode, compatibiliteits­weergave in Internet Explorer, enzovoort.

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

Schaduw

(Onderafdeling van CSS)

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

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

Scrollbalk

(Onderafdeling van CSS)

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)

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/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 de eigenschap 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.

webdesign.tutsplus.com/how-to-scroll-snap-using-css
Tutorial over Scroll Snap.

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

(Onderafdeling van CSS)

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().

dev.to/jh3y/circular-text-with-css
Tutorial hoe in een cirkel ronddraaiende tekst te maken.

Validators

(Onderafdeling van CSS)

csstree.github.io/docs/validator
Online CSS-validator.

jigsaw.w3.org/css-validator
Online 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-like-a-pro
Tutorial met voorbeelden over CSS-variabelen.

blogs.windows.com/msedgedev/2017/03/24/css-custom-properties
Korte inleiding over CSS-variabelen in Edge.

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.

medium.com/dev-channel/css-variables-no-really
Uitgebreide tutorial over CSS-variabelen. Met tal van voorbeelden.

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.

smashingmagazine.com/2017/04/start-using-css-custom-properties
Uitgebreide tutorial met voorbeelden.

web.dev/at-property
Tutorial over @property.

vertical-align

(Onderafdeling van CSS)

bitsofco.de/the-vertical-align-property
Uitgebreide beschrijving met voorbeelden.

christopheraue.net/design/vertical-align
Uitgebreid artikel over de vele valkuilen, voetangels en doolhoven van vertical-align. En had ik de dwaallichtjes al genoemd?

Animatie maken

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

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
Online animatie (GIF) maken van eigen afbeeldingen of van video. Ook bewerken van GIF, zoals tekst toevoegen en splitsen.

ezgif.com/avif-maker
Online animatie (AVIF) maken van eigen afbeeldingen of van video.

gickr.com
Online animatie (GIF) maken van eigen afbeeldingen.

loaders.holasvg.com
Online bewegende laad-symbolen maken en bijbehorende code (SVG met bijbehorende CSS) genereren.

picasion.com
Online animatie (GIF) maken van eigen afbeeldingen.

svgartista.net
Online eigen SVG animeren en bijbehorende code genereren.

Bewerken en effecten aanbrengen

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

ditherit.com
Online eigen afbeelding omzetten in raster met desgewenst andere kleuren. Opslaan als PNG.

doodad.dev/dither-me-this
Online eigen afbeelding omzetten in grover of fijner raster. Opslaan als JPG of PNG.

duotones.co
Online 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.
Groot aantal Nederlandstalige handleidingen over Gimp: handleiding.helpmij.nl.

glitchyimage.com
Online 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/irfanviews.)

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.)

limus.netlify.app/app
Online 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.

onlinejpgtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met JPG's te doen.

onlinepngtools.com
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met PNG's te doen.

onlinetools.com/image
Grote verzameling gereedschappen om de meest uiteenlopende conversies en bewerkingen met afbeeldingen te doen.

pavellaptev.github.io/warp-svg
Online tekst vervormen en bijbehorende SVG-code genereren.

photopea.com
Online afbeelding bewerken in GIMP-achtige editor met zeer uitgebreide mogelijkheden. Kan ook met PSD's overweg. Opslaan in allerlei formaten.

pixelicious.xyz
Online eigen afbeelding omzetten in raster met desgewenst andere kleuren. Opslaan als PNG.

pixlr.com/nl/x
Online bitmap-afbeelding (JPG, GIF, PNG, en dergelijke) bewerken in GIMP-achtige editor met uitgebreide mogelijkheden. Nederlandstalig.

redact.photo
Online heel simpel deel van afbeelding vervagen of verwijderen.

Converteren

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

avif.io
Online privacy-vriendelijk afbeeldingen naar AVIF-formaat converteren.

compress-or-die.com
Afbeelding converteren naar en van JPG, PNG, GIF, WebP en SVG. Met veel instelmogelijkheden.

convert2svg.com
Online afbeelding converteren naar SVG. Met aantal filters en dergelijke.

gif2avif.com
Online GIF converteren naar AVIF.

tinywow.com/tools/image
Online een afbeelding converteren naar een ander formaat. Onder andere van en naar EPS, GIF, HEID, JPG, PNG, PDF, SVG, TIFF en WebP.

Nieuwe afbeelding, patroon, speciale vorm, tile, en dergelijke maken

(Onderdeel van Gereedschap → Afbeelding maken, bewerken, converteren en optimaliseren

avamake.com
Online avatar samenstellen, opgebouwd uit verschillende te kiezen onderdelen.

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

drawsvg.org/drawsvg
Online SVG ontwerpen en bijbehorende code genereren.

editor.method.ac
Online SVG ontwerpen en bijbehorende code genereren. Kan ook worden opgeslagen als PNG.

fffuel.co/llline
Online allerlei soorten lijnen ontwerpen en bijbehorende SVG genereren. Met veel instelmogelijkheden.

fffuel.co/mmmotif
Online patroon met aan te passen geometrische driedimensionale patronen maken en bijbehorende SVG genereren.

fffuel.co/pppointed
Online een pijl ontwerpen en de bijbehorende SVG genereren.

glyphdrawing.club
Online zeer gedetailleerde glyphe maken (kleinere of grotere afbeelding, op de pixel precies) in PNG- of SVG-formaat.

haikei.app
Online allerlei vormen, patronen en achtergrond-afbeeldingen met bijbehorende code maken in SVG-formaat. Met veel instelmogelijkheden. Ook te downloaden als PNG.

noisetexturegenerator.com
Online gestippelde achtergrond-afbeelding (tile) in PNG-formaat maken. Dichtheid en dergelijke kunnen worden ingesteld.

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
Online met de hand tekening 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
Online achtergrond-afbeeldingen (tiles) met allerlei lijn-patronen in PNG-formaat maken.

svgeditor.publicdomainvectors.org/dist/editor
Online SVG-afbeelding met bijbehorende code ontwerpen. Ook op te slaan als PNG, JPG, bmp, WebP en pdf.

tartanmaker.com
Online achtergrond-afbeeldingen met allerlei ruit-patronen (tiles) in PNG-formaat maken.

tldraw.com
Uitgebreide online-SVG-editor.

yqnn.github.io/svg-path-editor
Online 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

compress-or-die.com
Online JPG, PNG, GIF, WebP en SVG optimaliseren. Met veel instelmogelijkheden.

compressimage.io
Privacyvriendelijk JPG- en PNG-afbeeldingen comprimeren.

imagecompressor.com
Gelijktijdig tot twintig JPG- en PNG-afbeeldingen online optimaliseren. De compressie is per afbeelding in te stellen en het resultaat is vooraf per afbeelding te bekijken. Nederlandstalig.

imagekit.io/website-analyzer
Online afbeeldingen binnen een pagina analyseren en tips voor een kleinere bestandsgrootte krijgen.

imageoptim.com/online
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
Online SVG optimaliseren.

jpeg.rocks
Online privacy-vriendelijk JPG optimaliseren.

kraken.io/web-interface
Gelijktijdig tot 1 MB aan JPG-, png-, gif- en SVG-afbeeldingen optimaliseren.

msurguy.github.io/svg-cropper-tool
Online eigen SVG-afbeelding verkleinen en bijbehorende code genereren.

omatsuri.app/svg-compressor
Online SVG comprimeren.

responsivebreakpoints.com
Online de benodigde afbeeldingen aanmaken voor een in te stellen aantal breakpoints en resoluties. Ook art direction is mogelijk. Maakt ook benodigde afbeeldingen en code.
Op smashing­magazine.com zijn een algemene tutorial voor deze generator en een tutorial specifiek voor art direction te vinden.

shrink.media
Online PNG-, JPG- of WebP-afbeelding comprimeren en/of verkleinen. Uiterst simpel te bedienen.

smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick
Handleiding hoe afbeeldingen te verkleinen met behulp van het gratis open source programma ImageMagick. (In Linux zal dit meestal in de repo's zitten.)

squoosh.app
Online afbeelding comprimeren en/of converteren van en naar onder andere AVIF, JPG, WebP en PNG. Ook zijn eenvoudige bewerkingen mogelijk.

tinypng.com
Online gelijktijdig tot twintig PNG-, JPG- en WebP-afbeeldingen optimaliseren. Converteert PNG-24 naar PNG-8.

webspeedtest.cloudinary.com
Geeft online 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)

Bewaking 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.

Code leesbaar maken

(Onderafdeling van Gereedschap)

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
Online ongeformatteerde of gecomprimeerde CSS netjes laten inspringen en dergelijke.

cleancss.com/html-beautify
Online ongeformatteerde of gecomprimeerde HTML netjes laten inspringen en dergelijke.

cleancss.com/javascript-beautify
Online ongeformatteerde of om andere redenen onleesbaar JavaScript netjes laten inspringen en dergelijke.

cleancss.com/php-beautify
Online php netjes laten inspringen en dergelijke.

cleancss.com/sql-beautify
Online ongeformatteerde of om andere redenen onleesbare SQL netjes laten inspringen en dergelijke.

cssportal.com/less-to-css
Online LESS converteren naar gewone CSS.

cssportal.com/scss-to-css
Online SCSS converteren naar gewone CSS.

j-brooke.github.io/FracturedJson
Online 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
Online SCSS converteren naar gewone CSS.

onlinejsontools.com/prettify-json
Online JSON formatteren.

pretty-print-json.js.org
Online ruwe JSON-code omzetten naar geformatteerde code.

Combinaties van CSS, HTML, JavaScript, enzovoort uitproberen en eventueel delen

(Onderafdeling van Gereedschap)

codepen.io
Online 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.

dabblet.com
Online CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

developer.mozilla.org/en-US/play
Online 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.

hawramani.com/wp-content/jstinker
Online uiterst simpel HTML, CSS en JavaScript uitproberen. Met mogelijkheid bibliotheken te gebruiken en anderen mee te laten kijken.

jsbin.com
Online CSS, HTML en JavaScript uitproberen en eventueel delen met anderen. Er kunnen ook bibliotheken worden gebruikt.

jsfiddle.net
Online CSS, HTML en JavaScript uitproberen en eventueel delen met anderen.

jsitor.com
Online CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

jsplayground.dev
Heel simpele editor om online CSS, HTML en JavaScript uit te proberen.

liveweave.com
Online CSS, HTML en JavaScript uitproberen. Er kunnen ook bibliotheken worden gebruikt.

rendera.org
Online CSS, HTML en JavaScript uitproberen. Met voorbeelden.

Commandline (terminal, NPM, Grunt, Gulp, en dergelijke)

(Onderafdeling van Gereedschap)

bun.sh
Alternatief voor Node.js.

css-tricks.com/a-complete-beginners-guide-to-npm
Uitgebreide tutorial over NPM en Node.

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.

webdesign.tutsplus.com/series/the-command-line-for-web-design
Serie tutorials over zaken als NPM, Grunt, Gulp en andere hulpmiddelen.

CSS

(Onderafdeling van Gereedschap)

Data-URI maken (base64)

(Onderafdeling van Gereedschap)

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.

dopiaza.org/tools/datauri
Online data-URI maken van eigen afbeelding of afbeelding op internet..

Debuggen

(Onderafdeling van Gereedschap)

E-mail ontwerpen

(Onderafdeling van Gereedschap)

caniemail.com
Overzicht van ondersteuning van HTML en CSS in - op het moment van schrijven - 44 e-mail-programma's.

github.com/hteumeuleu/email-bugs/issues
Overzicht van bugs in verschillende e-mail-programma's, met soms oplossingen.

paul-airy.medium.com/some-questions-on-accessibility-in-email-answered-7e231f375fd3
Onderzoek naar wat lezers van e-mail belangrijk vinden wat betreft toegankelijkheid.

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 en IDE's

(Onderafdeling van Gereedschap)

activestate.com/products/komodo-edit (Komodo Edit)
Open source editor voor 'n hele reeks talen, waaronder HTML, CSS, JavaScript en php. Naast Komodo Edit is er de (niet-gratis) uitgebreidere versie Komodo IDE.

bluefish.openoffice.nl
Open source editor voor 'n hele reeks talen, waaronder HTML, CSS en PHP. Site is Engelstalig, programma is ook Nederlandstalig.

brackets.io
Open source editor met de nadruk op HTML, CSS en JavaScript.

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.) Het open source deel is te vinden op github.com/microsoft/vscode.
Een compilatie zonder de door Microsoft toegevoegde telemetrie en dergelijke is te vinden op github.com/VSCodium. Hier zitten wel wat nadelen aan, zoals dat extensies mogelijk niet gebruikt kunnen of mogen worden.
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
Open source editor voor onder andere HTML en CSS.

eclipse.org
Open source framework voor het ontwikkelen in zo'n beetje elk denkbare taal.

en.wikipedia.org/wiki/Comparison_of_text_editors
Zeer uitgebreide vergelijking van groot aantal editors.

geany.org
IDE voor onder andere CSS, HTML, JavaScript, Perl, PHP en Python.

jedit.org
Open source editor met ondersteuning voor meer dan 200 talen.

kdevelop.org
IDE voor onder andere JavaScript, PHP en Python. Site is Engelstalig, programms is ook Nederlandstalig.

neovim.io
Op Vim gebaseerde editor met veel uitbreidings­mogelijkheden.

notepad-plus-plus.org/ (Notepad++)
Simpele, maar goede editor. Ondersteunt veel talen. (Als 'snap' ook te installeren op Linux.)

scintilla.org (SciTE)
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.

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)

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 zes bestanden toch overal een favicon te tonen.

favicon.cc
Zelf online ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

favicon.io
Online favicon maken gebaseerd op eigen ontwerp, tekst, afbeelding of emoticon.

favicon.software
Online serie favicons maken van eigen afbeelding.

icon.kitchen
Online een icon uitkiezen en aanpassen en daar vervolgens een volledige set favicons van maken.

realfavicongenerator.net
Online favicon maken van bestaande afbeelding. Levert alle inmiddels ongeveer 372 formaten en maten plus bijbehorende code.
Handleiding voor bovenstaande generator: sitepoint.com.

xiconeditor.com
Zelf online ontwerpen of bestaande afbeelding uploaden en bewerken. Alleen ico-formaat.

Fonts

(Onderafdeling van Gereedschap)

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
Online diagram maken. Keuze uit veel voorbeelden, die bewerkt kunnen worden. Kan worden opgeslagen als afbeelding, SVG, enzovoort.

chartle.com
Online diagram maken en opslaan als afbeelding of PDF.

nces.ed.gov/nceskids/createagraph
Online diagram maken en opslaan als afbeelding, pdf, SVG, en dergelijke.

piechartmaker.co
Online taartdiagram maken. Veel instelmogelijkheden. Downloaden als PNG, JPG of PDF.

rawgraphs.io
Online diagram maken van tekst of spreadsheet en exporteren als SVG of PNG. Keuze uit veel soorten.

HTML

(Onderafdeling van Gereedschap)

HTTP Request en Response Header, cache

(Onderafdeling van Gereedschap)

csswizardry.com/2019/03/cache-control-for-civilians
Gedetailleerde tutorial over cache-control.

redbot.org
Online inhoud van Response Header bekijken. Geeft suggesties om eventuele problemen op te lossen.

request.urih.com
Online inhoud HTTP Request bekijken.

simonhearne.com/2022/caching-header-best-practices
Uitgebreide tutorial over het gebruik van headers voor cache-controle.

whichbrowser.net
Online browser-identificatie-string bekijken.

Imagemap maken

(Onderafdeling van Gereedschap)

image-map.net
Online imagemap maken.

Kleuren

(Onderafdeling van Gereedschap)

0to255.com
Levert online tientallen donkerder en lichtere tinten van uit te zoeken basiskleur. Notatie in hex, rgb() en hsl().

codepen.io/robdimarzo/full
Online hexadecimale kleur uitkiezen door middel van uiterst simpel te bedienen kleurencirkel.

color.hailpixel.com
Online op uiterst intuïtieve wijze bij elkaar passende kleuren zoeken. Zoeken in hex, levert notatie ook in hsl() en rgb().

colorbox.io
Online tussenkleuren tussen twee kleuren opzoeken en daarvan de hex-code krijgen. Aantal tussenkleuren, begin- en eindkleur, en nog veel meer, is in te stellen.

components.ai/color-scale
Online heel gedetailleerd in te stellen kleurenpalet met bijbehorende code maken.

cssgenerator.org/rgba-and-hex-color-generator
Online op uiterst makkelijke manier rgba()- of hex-kleur aanmaken.

degraeve.com/color-palette
Online op zelf te kiezen afbeelding gebaseerd kleurenpalet maken. Notatie in hex.

hslpicker.com
Online hsla() kleurenwaarden uitproberen en gelijk vertalen naar rgba() en hex.

htmlcolorcodes.com/color-picker
Online tot zes (niet) bij elkaar passende kleuren zoeken. Levert notatie in hex, hsl() en rgb().

it-tools.tech/color-converter
Online kleuren omzetten naar en van hex, rgb(), hsl(), hwb(), lch(), cmyk() en (dichtstbijzijnde) naam.

johndecember.com/html/spec/colorshades
Uitgaande van een basiskleur worden online drie bijbehorende lichtere kleuren getoond. Notatie in hex.

maketintsandshades.com
Twee (of meer) kleuren opgeven en codes voor de negen tussenliggende kleuren genereren.

oklch.com
Online kleurenkiezer voor oklch() en lch(). Kan ook van hex en rgba() hiernaartoe converteren.

planetcalc.com
Online complementaire hexadecimale kleur vinden.

projects.verou.me/css-colors
Online namen van css3-kleurnamen omzetten naar hsl(), rgb() en hex.

projects.susielu.com./viz-palette
Online kleurenreeks maken, speciaal gericht op grafieken. Notatie in hex, hsl() en rgb().

slayeroffice.com/tools/color_palette
Online kleurenreeks maken van twee keer vijf bij elkaar horende kleuren (notatie in hex).

toolness.github.io/accessible-color-matrix
Online wordt van een kleurenpalet met zes aan te passen kleuren van elke combinatie gelijk de toegankelijkheid (voldoende contrast) gegeven.

webfx.com/web-design/color-picker
Uiterst simpele kleurenkiezer voor één kleur. Levert notatie in hex, rgb() en hsl().

workwithcolor.com
Allerlei online 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)

bestcssbuttongenerator.com
Online een knop ontwerpen en bijbehorende CSS genereren. Veel aanpassingen mogelijk.

cooltext.com
Online knoppenmaker. Tekst in de knop kan op ontzettend veel manieren worden weergegeven. Het eindresultaat is een afbeelding in GIF, JPG, PNG of XCF-formaat.

css-tricks.com/examples/ButtonMaker
Online CSS-knoppenmaker. De CSS moet wel worden ontdaan van verouderde regels.

sciweavers.org/12style
Online 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
Online label, zoals dat uit een lettertang komt, maken, maar is op veel manieren aan te passen. Levert een afbeelding in GIF-formaat.

Lay-out maken

(Onderafdeling van Gereedschap)

cssportal.com/layout-generator
Online code voor één tot drie kolommen, header en footer maken.

Links controleren

(Onderafdeling van Gereedschap)

brokenlinkcheck.com
Online 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.

home.snafu.de/ (Xenu's Link Sleuth)
Gratis programma om links te controleren. Werkt helaas alleen op Windows. (Volgens geruchten zou het op Linux goed draaien onder Wine. Linux-gebruikers weten wat ik bedoel. 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)
Online links controleren van 1 tot maximaal 150 pagina's. Geeft heel gedetailleerde info over fouten en suggesties hoe die te herstellen.

wummel.github.io/linkchecker
Open source link-checker met veel extra's. Werkt op Windows en Linux, en een oudere versie ook op OS X. (In Linux zal hij meestal ook in de repositories zitten.)

Logo maken

(Onderafdeling van Gereedschap)

cooltext.com
Online logo maken. Maakt een PNG-afbeelding.

Lorem Ipsum (opvultekst) maken

(Onderafdeling van Gereedschap)

blindtextgenerator.com/lorem-ipsum
Online Lorem Ipsum-tekst genereren. Keuze uit meerdere teksten.

catipsum.com
Online Lorem Ipsum-tekst voor kattenliefhebbers genereren.

cupcakeipsum.com
Online Lorem Ipsum-tekst voor zoetekauwen genereren.

generator-lorem-ipsum.info
Online 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
Online artistieke Lorum Ipsum-tekst genereren.

it-tools.tech/lorem-ipsum-generator
Online 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
Online Lorem Ipsum-tekst genereren. Nederlandstalige site. Keuze uit meerdere talen, waaronder Nederlands.

tinywow.com/other/lorem-ipsum-generator
Online 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
Online 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.

PDF bewerken

(Onderafdeling van Gereedschap)

tinywow.com/tools/pdf
Hele serie gereedschappen om online PDF bewerken, converteren, samen te voegen, afbeeldingen te extraheren, en dergelijke.

Reguliere expressies ('Regular Expressions')

(Onderafdeling van Gereedschap)

extendsclass.com/regex-tester
Online reguliere expressie uitproberen. Met (beknopte) uitleg. Naar keuze JavaScript, Python, Ruby, Java, PHP of MySQL-stijl.

github.com/aloisdg/awesome-regex
Pagina met veel links naar van alles over reguliere expressies, zoals cursussen, oefeningen, testers, enzovoort.

github.com/ziishaned/learn-regex
Interactieve tutorial.

ihateregex.io
Aantal veel gebruikte reguliere expressies, die kunnen worden aangepast en getest. Met duidelijke grafische uitleg.
Zelf uitproberen op playground

jex.im/regulex
Met behulp van een soort schema, in combinatie met normale mensentaal, laten zien wat een bepaalde reguliere expressie doet.

learnbyexample.github.io/learn_js_regexp
Online lesboek met veel voorbeelden en oefeningen.
Er is ook een op Python gericht lesboek.

levelup.gitconnected.com/practical-examples-for-learning-regular-expressions-a-guide-with-real-life-usage
Tutorial.

pemistahl.github.io/grex-js
Online zoektekst opgeven en daarvan met behulp aankruisvakjes een reguliere expressie voor JavaScript van maken.

projects.lukehaas.me/regexhub
Voorbeelden van veel gebruikte expressies. Kunnen online worden gewijzigd en uitgeprobeerd.

qntm.org/re_en
Tutorial met oefenopgaven die gelijk nagekeken worden.

refrf.dev
Cursus reguliere expressies, gebaseerd op voorbeelden.

regex101.com
Uiterst handige online-tester voor reguliere expressies. Naar keuze JavaScript-, PHP-, Python- of Golang-stijl.

regexcrossword.com
Tutorial in de vorm van op te lossen kruiswoordraadsels. (Heel origineel en leuk om te doen.)

regexone.com
Interactieve cursus reguliere expressies.

regexpal.com
Online reguliere expressies testen.

regexper.com
Online reguliere expressies uitproberen (JavaScript-stijl).

regexr.com
Door de reguliere expressie te veranderen, zie je wat er wordt gevonden in een uitgebreide voorbeeldtekst. Met uitgebreide uitleg.

regular-expressions.info
Site over reguliere expressies met voorbeelden, tutorial, enzovoort.

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.

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)

Sitemap maken en dergelijke

(Onderafdeling van Gereedschap)

Snelheid testen en verbeteren, gzip, CLS, comprimeren (inclusief theorie), en dergelijke

(Onderafdeling van Gereedschap)

3perf.com/talks/web-perf-101
Uitgebreid overzicht van manieren om de snelheid van 'n site te verbeteren.

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.

codebeautify.org/minify-html
Online HTML comprimeren.

cssportal.com/css-optimize
Online CSS comprimeren. Met veel instelmogelijkheden.

cssshrink.com
Online CSS comprimeren.

csswizardry.com/2023/07/core-web-vitals-for-search-engine-optimisation
Uitgebreid uitleg over Core Web Vitals.

debugbear.com/html-size-analyzer
Online totale omvang per element-soort weergeven, met en zonder compressie.

debugbear.com/test/website-speed
Online snelheid van pagina testen. Geeft een gedetailleerd overzicht met tips om mogelijke problemen op te lossen.

dotcom-tools.com/website-speed-test
Online snelheid van site testen vanaf 24 plaatsen op de wereld, waarbij gekozen kan worden uit vijf verschillende browsers. Van elke plaats is onder andere een waterfall beschikbaar. Je kunt maar één combinatie van een plaats en een browser tegelijk testen.

giftofspeed.com/gzip-test
Online testen of gzip aanstaat en hoeveel bytes je daarmee bespaart.

github.com/davidsonfellipe/awesome-wpo
Pagina met heel veel links naar van alles wat met de snelheid van de site te maken heeft.

gtmetrix.com/
Online testen hoe snel de pagina laadt. Met suggesties voor oplossingen.

internetmarketingninjas/tools/tools/pagespeed
Online snelheid pagina testen. Met uitleg hoe eventuele problemen op te lossen.

kangax.github.io/html-minifier
Online HTML comprimeren.

lighthouse-metrics.com
Online testen op een hele serie onderdelen, waaronder snelheid en toegankelijkheid.

medium.com/@fox/talk-the-state-of-the-web
Overzichtsartikel van dingen die met de weergavesnelheid te maken hebben. Met tips voor mogelijke verbeteringen.

misterpixel.nl/insights/googles-core-web-vitals-wat-zijn-het-en-hoe-verbeter-je-ze
Nederlandstalige korte, duidelijke uitleg van Core Web Vitals.

pagespeed.web.dev
Online 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.
Uitleg over de belangrijkste begrippen is te vinden op smashingmagazine.com.

perf.rocks/tools
Pagina met zeer groot aantal links naar van alles wat met snelheid te maken heeft.

purifycss.online
Online op de geteste pagina ongebruikte CSS verwijderen en desgewenst de resterende CSS comprimeren.
Dit lijkt allemaal heel mooi, maar als een stylesheet 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.)

refresh-sf.com
Online JavaScript, CSS en HTML comprimeren.

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/06/how-to-fix-cumulative-layout-shift-issues
Tutorial hoe CLS te voorkomen.

speedvitals.com
Online snelheid van pagina testen. Met tips om die te verbeteren.

tonsky.me/blog/pwa
Artikel waarom PWA's en AMP niet nodig zijn voor een snelle site.

tools.pingdom.com/
Online heel overzichtelijke waterfall, overzicht aantal verzoeken aan de server, en dergelijke maken. Geeft ook overzicht van enkele mogelijke knelpunten.

toptal.com/developers/cssminifier
Online CSS comprimeren.

toptal.com/developers/javascript-minifier
Online JavaScript comprimeren.

web.dev/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.

webdesign.tutsplus.com/what-are-core-web-vitals
Uitgebreid uitleg over Core Web Vitals.

webpagetest.org
Online in echte browsers op een aantal plaatsen in de wereld testen hoe snel de pagina laadt. Bij 'browser' kun je ook kiezen voor specifieke browsers op een fors aantal mobiele apparaten. Als je in het testresultaat op de icoontjes klikt, krijg je tips voor verbeteringen.
Uitleg op moz.com: Algemeen, Specifiek voor waterfall.
Een andere uitgebreide uitleg over de waterfall is te vinden op nooshu.com.

websiteoptimization.com/services/analyze
Online testen hoe snel de verschillende onderdelen van 'n pagina laden.

webvitals.dev/cls
Online tester of pagina geen CLS heeft.

yellowlab.tools
Online hele serie tests uitvoeren op allerlei zaken die mogelijk de snelheid van de site nadeling kunnen beïnvloeden.

Sprite maken

(Onderafdeling van Gereedschap)

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 online 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
Online HTML-tabel maken met bijbehorende CSS. Met heel veel opmaakmogelijkheden.

tableizer.journalistopia.com
Online HTML-tabel maken van Excel-, Calc- of andere spreadsheet.

tablesgenerator.com/
Online 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
Zet online HTML om in platte tekst zonder enige opmaak, behalve 'n indeling in alinea's. Prima manier om te zien of de inhoud logisch is opgebouwd.

Thumbnails maken

(Onderafdeling van Gereedschap)

makethumbnails.com
Online thumbnails maken van (groot) aantal geüploade afbeeldingen. Maat en kwaliteit kunnen worden ingesteld.

Tijdelijk online zetten

(Onderafdeling van Gereedschap)

webdevout.net/test
Tijdelijk 'n pagina online zetten, zodat anderen hem kunnen bekijken en bewerken.

URL-encoding

(Onderafdeling van Gereedschap)

Validators

(Onderafdeling van Gereedschap)

Vector-editor

(Onderafdeling van Gereedschap)

Video

(Onderafdeling van Gereedschap)

Weergave en dergelijke testen

(Onderafdeling van Gereedschap)

asisness.com/asisness/tools/screensize
Online het uiterlijk van de pagina bekijken in een aantal vooringestelde resoluties.

browserstack.com/text-on-microsoft-edge-browser
Gratis online testen in Edge. Je moet je wel registreren bij browserstack.

mattkersley.com/responsive
Online het 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.

wysiwyg-editor

(Onderafdeling van Gereedschap)

en.wikipedia.org/wiki
Vergelijkend overzicht van groot aantal wysiwyg-editors.

htmleditor.online/full
Online HTML-editor. Code wordt gegenereerd door het indrukken van knoppen en dergelijke.
Een vereenvoudigde versie staat op htmleditor.online.

<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.

html5doctor.com/i-b-em-strong-element
Artikel over de verschillen tussen <i>, <b>, <em> en <strong> in HTML4 en HTML5, en wanneer wat te gebruiken.

Browser support

(Onderafdeling van HTML)

Bugs en hacks

(Onderafdeling van HTML)

<canvas>

(Onderafdeling van HTML)

blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve
Online 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
Online 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.

udacity.com/course/html5-canvas
Online cursus canvas. De (uitstekende) cursus is gratis, maar je moet je wel registreren.

Charsets, unicode, entiteiten

(Onderafdeling van HTML)

Code bekijken

(Onderafdeling van HTML)

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 het optimaliseren van een website zijn te vinden bij Gereedschap → Snelheid testen en verbeteren, gzip, CLS, comprimeren (inclusief theorie), en dergelijke.

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 → Artikelen, tutorials, links, en dergelijke.

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.)

data-attribuut (data-*)

(Onderafdeling van HTML)

css-tricks.com/a-complete-guide-to-data-attributes
Tutorial met voorbeelden.

developer.mozilla.org/en-US/Learn/HTML/Howto/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)

css-tricks.com/focus-management-and-inert
Tutorial over het inert-attribuut.

css-tricks.com/some-hands-on-with-the-html-dialog-element
Korte tutorial met mogelijkheden van <dialog>.

developer.chrome.com/blog/introducing-popover-api
Tutorial over 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-semantics
Artikel 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>.

viget.com/articles/the-dialog-element
Korte beschrijving van het <dialog>-element.

web.dev/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)

Doctype (DTD)

(Onderafdeling van HTML)

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!

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.

<embed>, <object>, <video>, <audio>, <iframe>

(Onderafdeling van HTML)

Favicon

(Onderafdeling van HTML)

<figure> en <figcaption>

(Onderafdeling van HTML)

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)

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.

better-mobile-inputs.netlify.app
Laat online het effect van allerlei soorten <input>'s op toetsenborden en dergelijke op iOS en Android hebben.

business.scope.org.uk/article/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 (toegankelijk) valideren van 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.

css-tricks.com/the-output-element
Artikel over het gebruik van het <output>-element.

css-voorbeelden.nl/tekst/bewerken/tekst-079
Formulier met meerdere soorten invoervelden en Nederlandstalige uitleg.

deque.com/blog/accessible-forms-the-problem-with-placeholders
Artikel over problemen met toegankelijkheid en het placeholder-attribuut en mogelijke oplossingen daarvoor.

gerireid.com/forms
Uitgebreide tutorial over (de verschillende onderdelen van) een formulier. Met heel veel links voor meer informatie.

inputtypes.com
Online kijken welke invoer bij welk soort velden en dergelijke geldig is.

matuzo.at/blog/2022/button-baader
Allerlei manieren om een <button> toegankelijk te maken.

nativeformelements.com
Online zien hoe alle form-elementen er in de browser, waarmee je deze pagina bezoekt, uitzien.

ovl.design/text/inclusive-inputs
Handleiding hoe <input>'s toegankelijk te maken.

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 toegankelijk valideren van 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.

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
Online 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/generators/html
Online 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)

<head>, metadata, Priority hints, Resource hints, en dergelijke

(Onderafdeling van HTML)

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.

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.

smashingmagazine.com/2019/04/optimization-performance-resource-hints
Uitgebreide uitleg over het gebruik van dns-prefetch, preconnect, prefetch, prerender.

Imagemap

(Onderafdeling van HTML)

<img>

(Onderafdeling van HTML)

Landcodes (lang="...") en internationalisatie

(Onderafdeling van HTML)

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
Online zoekmogelijkheid om subcodes bij talen te vinden, zoals en-ca (Canadees Engels). Met eenvoudige validator.

rtlstyling.com/posts/rtl-styling
Uitgebreide tutorial waarin systematisch wordt uitgelegd, waar je op moet letten, als je je site geschikt wilt maken voor talen die van rechts naar links lopen.

validator.w3.org/i18n-checker
Pagina of bestand controleren op potentiële problemen op het gebied van internationalisatie.

w3schools.com/ref_language_codes
Alfabetische lijst met tweeletterige ISO 639-1 landcodes.

Lay-outs

(Onderafdeling van HTML)

Lijsten (<dl>, <li>, <ol> en <ul>)

(Onderafdeling van HTML)

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

(Onderafdeling van HTML)

dev.to/elisabethleonhardt/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.

prototypr.io/post/designing-better-hyperlinks
Uitgebreid artikel hoe goede, toegankelijke links te maken.

<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
Online 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)

Nieuwsbrieven en dergelijke

(Onderafdeling van HTML)

Online wijzigingen uitproberen

(Onderafdeling van HTML)

w3schools.com/html/html_examples
HTML-voorbeelden online uitproberen.

Outline, 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.

css-tricks.com/how-to-section-your-html
Uitgebreid artikel over hoe <nav>, <aside>, <article>, <section>, <header>, <footer>, <h>'s te gebruiken, eventueel in combinatie met aria-label en dergelijke.

gsnedders.html5.org/outliner
Online 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.

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)

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/Attributes
Overzicht van alle HTML-attributen en bij welke elementen ze gebruikt mogen worden.

developer.mozilla.org/en-US/docs/Web/HTML/Element
Overzicht van alle HTML-elementen met bij elk element link naar uitgebreide uitleg.

https://html.spec.whatwg.org/multipage/
'Living Standard' HTML. Dit is de laatste versie van HTML, die voortdurend wordt bijgewerkt. Deze link gaat naar de inhoudsopgave.
De hele (echt gigantische) specificatie op één pagina.

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.

rawgit.com/w3c/elements-of-html
Overzicht van álle elementen uit xhtml en HTML, ook elementen die niet meer bestaan. Met links naar bijbehorende specificatie. Wat verouderd, maar kan nog handig zijn.

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)

<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)

Tabellen (<table>, <td>, en dergelijke)

(Onderafdeling van HTML)

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/2019/01/table-design-patterns-web
Artikel over het maken van toegankelijke responsieve tabellen.

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.

webaim.org/techniques/tables/data
Tutorial over het maken van een toegankelijke tabel.

URL-encoding (escaping), URL-rewriting en links

(Onderafdeling van HTML)

meyerweb.com/eric/tools/dencoder
Online url encoderen (speciale tekens vervangen door codes) en decoderen.

microformats.org/wiki/existing-rel-values
Lijst met toegestane waarden bij rel="..."

opinionatedgeek.com/codecs/urlencode
Online url encoderen (speciale tekens vervangen door codes).

w3schools.com/tags/ref_urlencode
URL-encoding Reference (Dat zijn die % in url's).

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 op htmlhint-playground.

jsonschemavalidator.net
Web manifest validator.

manifesttester.com
Web manifest validator.

validator.nu
Alternatief adres voor de hieronder genoemde validator op validator.w3.org/nu.

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.

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)

developer.mozilla.org/en-us/docs/Web/Events
Overzicht van alle bestaande events, met links naar bijbehorende specificatie en dergelijke.

digitalocean.com/community/tutorials/introduction-to-the-dom
Uitgebreide uitleg over de DOM.

domenlightenment.com
Online-versie van DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM. Uitgebreide uitleg over het rechtstreeks manipuleren van de DOM, zonder gebruik van een bibliotheek zoals jQuery.

egghead.io/courses/your-ultimate-guide-to-understanding-dom-events
Zeer uitgebreide curus in videovorm over events. Met ondertiteling.

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)

Scripts, bibliotheken, frameworks en API's

(Onderafdeling van JavaScript, DOM en CSSOM)

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/30-seconds/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.

javascripting.com
Uitgebreid overzicht van bibliotheken, frameworks en plug-ins. Met uitgebreide beschrijvingen, links, enzovoort.

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)

code.tutsplus.com/learn-modern-javascript-fundamentals-free-course
Basiscursus JavaScript in de vorm van video's (met ondertiteling).

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/learn/javascript-algorithms-and-data-structures
Interactieve cursus JavaScript. (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.

join.codecademy.com/learn/introduction-to-javascript
Interactieve cursussen JavaScript. Alleen de basiscursussen zijn gratis. Je moet je wel registreren.

kirupa.com/html5/learn_javascript
Uiterst duidelijke online 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.

wesbos.com/javascript
Uitgebreide online cursus.

Validators, debuggers, formatteren, online uitproberen, generators, en dergelijke

(Onderafdeling van JavaScript, DOM en CSSOM)

jshint.com
JavaScript-validator. Online, maar kan ook worden gedownload.

jslint.com
Online JavaScript-validator. Gruwelijk streng.

mothereff.in/js-variables
Online namen van variabelen valideren.

omatsuri.app/events-keycode
Online code generen voor eventlistener keydown. Geeft ook de codes voor event.key, event.code, en event.which.

toptal.com/developers/keycode
Online waardes vinden bij het indrukken van een toets voor event.key, event.location, event.which en event.code.

w3schools.com/js/ (JavaScript Examples)
Online wijzigingen in JavaScript uitproberen.

Emulators, SDK's, specificaties, hulpprogramma's, en dergelijke voor en van specifieke systemen

(Onderafdeling van Mobiele apparatuur)

Theorie, links, forums, en dergelijke

(Onderafdeling van Mobiele apparatuur)

developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
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)

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.

ready.mobi
Online testen of een pagina geschikt is voor mobiel. Niet iedereen zal het gelijk eens zijn over alle suggesties, dus niet alles blindelings overnemen.

search.google.com/test/mobile-friendly
Online (oppervlakkig) testen of de pagina geschikt is voor mobiel. Nederlandstalig.

whatismybrowser.com/detect/what-is-my-user-agent
Geeft de User Agent String van de gebruikte browser weer. Met desgewenst gedetailleerde analyse.

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.

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)

code.tutsplus.com/php-tutorial-for-beginners
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.

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
Cursus PHP voor beginners.

w3schools.com/php/default
Interactieve PHP-tutorial en overzicht van de taal.