Skip to main content


This page contains a wide range of resources that I found useful.


You need to have some knowledge first before you can create something. This is a list of trustworthy resources to get some knowledge.

FED Mentor

Grace Snow is an accessibility expert who writes amazing blog posts that can be easily understood by beginners. I highly recommend reading her blog posts.

Easy Checks – A First Review of Web Accessibility | Web Accessibility Initiative (WAI) | W3C

This page helps you start to assess the accessibility of a web page. With these simple steps, you can get an idea whether or not accessibility is addressed in even the most basic way.

Doing a basic accessibility check if you cannot do a detailed one - GOV.UK

Another basic accessibility check.

Solid Start

This is a good website for everyone that getting started to learn about web accessibility. It also provides some great resources.

A11y Coffee

It is a friendly website that teaches web accessibility, starting from "What is 'a11y'?". You can read the article while enjoying a cup of coffee.

Accessibility Myths

It is a project debunking common accessibility myths. There are 22 myths that have been debunked.

WebAIM: HTML Semantics and Accessibility Cheat Sheet

A table listing common HTML elements that have an impact on accessibility for users with disabilities.

Inclusive Components

This is my first go-to resource when I want to create an accessible component.

Patterns | APG | WAI | W3C

It is like "Inclusive Components". It contains various examples to create accessible components.

Axe HTML 4.5 rules

This contains rules to follow to create accessible HTML. Each rule has its article to explain how to fix the problem. I recommend bookmarking it.

Scott O'Hara - Blog Posts

Scott is an accessibility engineer at Microsoft. He has written a lot of blog posts about web accessibility since 2013.

Andy Bell (Piccalilli) - Blog Posts

His blog posts are about web accessibility and other topics that are related to web development such as CSS, progressive enhancement, and much more.

Adrian Roselli — Consultant, Writer, Speaker

Adrian is an accessibility expert who has been writing blogs since before I was born. I recommend exploring his website to learn more about web accessibility.

Checklist - The A11y Project

This contains practical things to do a manual accessibility audit.

Posts - The A11Y Project

The A11Y Project has a lot of amazing blog posts about web accessibility.

Resources - The A11Y Project

I also recommend checking the resources page.

Web Content Accessibility Guidelines (WCAG) 2.1

The WCAG is a set of technical standards developed by the World Wide Web Consortium (W3C) to provide guidelines for making web content accessible to users with disabilities.

How to Meet WCAG (Quickref Reference) 2.1

I did a manual accessibility using this.

Colour Blind Awareness

You can learn about different types of color blindness.

kdeldycke/awesome-falsehood: 😱 Falsehoods Programmers Believe in

The falsehood articles listed there give a comprehensive list of those false-beliefs that you should be aware of, to help you become a better programmer.

GitHub - denysdovhan/wtfjs: 🤪 A list of funny and tricky JavaScript examples

JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.

GitHub Pages: The Missing Manual | Simon Willison’s TILs

GitHub Pages is an excellent free hosting platform, but the documentation is missing out on some crucial details.

Deceptive Patterns - Home

Deceptive patterns (also known as “dark patterns”) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something.

The HTML Hell Page

A list of things to do when creating a website that comes from hell. Please do not create an HTML Hell Page.

Free For Life

A massive list including a huge amount of products and services that are completely free!

Your Personal Web Site

Bill Dietrich created a list that you can do to set up a personal website.

Exploring the Personal Web ~

Looking for inspiration to spice up your personal website? Or are you looking for someone to chat to on the internet? That blog post is a great place for those things.

Blogging platform

Once you have gained some knowledge, why not teach it to others? You can write and share what you have learned to improve your knowledge.

Bear Blog

A privacy-first, no-nonsense, super-fast blogging platform. No trackers, no javascript, no stylesheets. Just your words.

Mataroa — Blogging platform for minimalists

Naked blogging platform, for minimalists. Just write.

Conference Talks

You can get a lot of information from watching experts talk about web development.

How To Get Hired as a Web Developer & WOW Hiring Managers + much more | AMA with Matt Studdert - YouTube

In this video, Matt is answering some incredible questions. I like his answer for the "how do you choose what to focus on learning?". He said that you should just focus on the next thing. For me, that answer put my worries to rest.

Selfish Accessibility | Adrian Roselli | Talks at Google - YouTube

This is a great video to help you aware of web accessibility. Also, you will learn different situations of users that want to access the web. Plus, how to do manual testing to check the accessibility of your website. I highly recommend watching it.

Manuel Matuzović - Lost in Translation - YouTube

HTML is not as easy as you think.

Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

A great talk by Andy Bell that will tell you that good HTML markup can be a strong foundation for your website. Then, how to write modern CSS with progressive enhancement.

Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

Another great talk that covers modern CSS. I recommend watching it to take your CSS skill to the next level.

Resilient CSS: 7-part Series - YouTube

This series created by Jen Simmons taught me different ways to write CSS that will fail nicely. Also, a guide to using the "Can I Use" website to help me decide how I craft my CSS.

Writing Less Damned Code – Heydon Pickering – btconfBER2016 - YouTube

Less is less. Less code means less problems, less issues, and more time to spend for other things in life.

Heydon Pickering - Why Inclusive Design is like cooking a curry - YouTube

Learning web accessibility can be like learning to cook a curry.

Sophie Koonin – This Website Is under Construction, a Love Letter to the Personal Website – btconf - YouTube

Personal websites are wild. Those websites are the places to do experiment, post anything you like, and many other things. This talk is about how websites have evolved from the early days to now.

AXSchat with Heydon Pickering. UX designer, accessibility advocate, and illustrator. - YouTube

"Designing is thinking and developing is doing and if you can't do either of those or you can't do both at the same time then you are not awake basically.", said Heydon Pickering at 37:26

Andy Bell – Be the browser’s mentor, not its micromanager - YouTube

Andy Bell shows you how to use modern CSS to create responsive website without media queries.

CSS for Software Engineers for CSS Developers – Harry Roberts / Front-Trends 2016 - YouTube

Harry Roberts explains how to use programming principles—such as Don't Repeat Yourself (DRY), The Single Responsibility Principle, and many more—to write CSS.

FaCSSt: CSS & Performance. Harry Roberts. JS Fest 2018 - YouTube

Harry Roberts shares seven ways to improve CSS performance in a room full of JavaScript developers.

From Milliseconds to Millions: The Numbers Driving Web Perf | Harry Roberts | 2019 - YouTube

"Don't do it for the money, but never do it for no money." — Oliver Reichenstein, a friend of Harry Roberts

Harry Roberts - Get Your "head" Straight - YouTube

Despite being the only section of a website that a user never sees, the head element is arguably the most important. It is bound to its own unique set of rules and often governs the overall speed of the page.

Harry Roberts - Optimising Largest Contentful Paint - YouTube

Harry Roberts shares some ways to optimize Largest Contentful Paint (LCP).

Harry Roberts - Why Fast Matters - YouTube

With more and more emerging markets coming online, and more and more apps moving to the web platform, we’re reaching an intersection where connections are getting slower and websites are getting heavier. In this talk, Harry Roberts will teach us what these emerging markets mean to us, and how we can begin to move in the right direction.

Refactoring CSS Without Losing Your Mind - Harry Roberts @ WeAreDevelopers Conference 2017 - YouTube

Harry Roberts shares some tips to refactor CSS.

Rich Harris - Rethinking reactivity - YouTube

Rich Harris compares Svelte to React.

Take Back Your Web - Tantek Çelik - YouTube

Own your domain. Own your content. Own your social connections. Own your reading experience.

What's new in responsive design by Rachel Andrew - YouTube

Rachel Andrew explains the new CSS features to create responsive design.


Validate your code!

W3C HTML Validator

Accessible website starts with valid HTML. So, make sure that your website has valid HTML.

The W3C CSS Validation Service

Valid CSS is also important to ensure that the styling of your site works as expected.

W3C Feed Validation Service, for Atom and RSS

I use this tool to validate my RSS feed.

W3C Link Checker

Make sure that you have valid links on your site.

Schema Validator

Validate your schema data.


These tools can help me improve my writing in English.

Grammarly: Free Online Writing Assistant

This tool prevents me from doing typos in my writing.

DeepL Write: AI-powered writing companion

I use this to fix grammar issues and paraphrase sentences.

LanguageTool - Online Grammar, Style & Spell Checker

Another good grammar fixer and paraphraser.

Paraphrasing Tool - QuillBot AI

Another good paraphraser.

Wordtune | Your personal writing assistant & editor

I use this to paraphrase a short sentence.

Hemingway Editor

It makes my writing clear and bold by highlighting potential words that can be removed.

Lingva Translate

Alternative front-end for Google Translate, serving as a Free and Open Source translator with over a hundred languages available. I use this to translate words or sentences from Indonesian to English and vice versa.


Check and improve the performance of your website.


I recommend using this as the first automatic testing tool for your site. It can catch some accessibility issues and do different types of tests too.

PageSpeed Insights

You can use this website to share with people about your Lighthouse score.

GTmetrix | Website Performance Testing and Monitoring

Test the performance of your website for free.

Free Website Speed Test | DebugBear

Test the performance of your website for free.

Yellow Lab Tools - Page Speed audit

This tool checks the performance of your website. It also analyzes the code of your website. I like the fact that it checks for bad CSS like duplicated selectors, duplicated properties, redundant selectors, and more.

Other tools

You can make your development process better and quicker by using these tools.


Optimize your images so that your users will not be frustrated with their cellular data usage.

Free Design Tool: Presentations, Video, Social Media | Canva

I use this to design the banners for my READMEs and favicons.


I usually use this website to convert TTF (TrueType) to WOFF2 (Web Open Font Format 2).


Optimize your SVG files by removing unnecessary code.

Favicon Generator for perfect icons on all browsers

I use this tool to generate favicons for this website.

RegExr: Learn, Build, & Test RegEx

Practice writing regular expression easily.

Test for modern Internet Standards like IPv6, DNSSEC, HTTPS, DMARC, STARTTLS and DANE.

Another test that you can run.

SSL Server Test (Powered by Qualys SSL Labs)

Test how good your website's SSL (Secure Sockets Layer).

Juicy Studio: Readability Test

Test how easy your content to be understood.

Meta Tags — Preview, Edit and Generate

Preview the social media card of your website.


Compare two colors to see the contrast of them.

Free Broken Link Checking Tool - Dead Link Checker

You can check the links on your entire website for free and without creating an account.


If you get confused about whether anchor tag is valid to be a child element of the code element, then you can use this tool to verify that.

Can I use... Support tables for HTML5, CSS3, etc

Check the browser's compatibility with the features that you want to use.

Can I DevTools?

Check whether or not the features are available in the browser developer tools. For example, I can know that only the developer tool of Safari browser that can count CSS specificity of a selector.

Accessibility Support

Check the compatibility of screen readers with the ARIA attributes you want to use. | The Mailto Link Generator

Generate a mailto link easily.

Ngx-Kanban | Tasks and To-Dos

A simple kanban board on a web browser.

Blacklight – The Markup

A real-time website privacy inspector. You can scan any website to see trackers or ads on that website.

Website Carbon Calculator v3 | What's your site's carbon footprint?

Estimate your web page carbon footprint.

Free Online EU Cookie Law Analyzer | CookieMetrix

Determines if your website is not comply with EU Cookie Law.

What Does My Site Cost?

Find out how much it costs for someone to use your site on mobile networks around the world.

Screen Readers

It is beneficial to learn how to use screen readers to do manual testing on your website. Here are some videos to help.

Screen Reader Basics: NVDA -- A11ycasts #09 - YouTube

Learn how to use NVDA screen reader on Windows.

Assistive Tech: TalkBack - YouTube

Learn the basics of navigating with TalkBack.

Complete guide to Narrator - Microsoft Support

Everything you need to know to start using Narrator.

Assistive Tech: VoiceOver on iOS - YouTube

Learn to get started to use VoiceOver on iOS devices.

Screen Reader Basics: VoiceOver -- A11ycasts #07 - YouTube

Learn to use the free screen reader built into the Mac.

Screen Reader Keyboard Shortcuts and Gestures

List of resources for various screen readers like Narrator, TalkBack, NVDA, and JAWS.

Using NVDA to Evaluate Web Accessibility

This is a great article to help you learn the basics of NVDA.

Best practices

If you do not have one, you can follow these guidelines first. Then, as you gain more experience, you will be able to develop your own guidelines.

CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS

High-level advice and guidelines for writing sane, manageable, scalable CSS

GitHub - ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript

Try this.

Sass Guidelines

An opinionated style guide for writing sane, maintainable and scalable Sass.


Tired of coding? Why don't you try playing some of these games to relax?

HTML Tags Memory Test

The last time I played this, I think I got around 50 HTML elements. Can you beat mine?

TypeRacer - Play Typing Games and Race Friends

This is a place for me to type something other than code.

The Useless Web

A collection of games to play in your browser. I like the optical toys.

dulvui/ball2box: Casual ball game created with Godot Engine.

A game that has a purpose to put a ball inside a box. I have played 30 levels and got all three stars.

Anuken/Mindustry: The automation tower defense RTS

An interesting tower defense where you have to gather resources and defense your base.

agateau/pixelwheels: A top-down retro racing game for PC (Linux, macOS, Windows) and Android.

A great racing game with a simple controller and running smoothly on my low-end device. No in-app purchase. Meaning you can get all the cars by playing the game.

mjaun/android-anuto: Another ugly tower defense for Android

It has a simple graphic. It has a small file size, only 6MB.