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.
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.
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.
Another basic accessibility check.
This is a good website for everyone that getting started to learn about web accessibility. It also provides some great resources.
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.
It is a project debunking common accessibility myths. There are 22 myths that have been debunked.
A table listing common HTML elements that have an impact on accessibility for users with disabilities.
This is my first go-to resource when I want to create an accessible component.
It is like "Inclusive Components". It contains various examples to create accessible components.
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 is an accessibility engineer at Microsoft. He has written a lot of blog posts about web accessibility since 2013.
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 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.
This contains practical things to do a manual accessibility audit.
The A11Y Project has a lot of amazing blog posts about web accessibility.
I also recommend checking the resources page.
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.
I did a manual accessibility using this.
You can learn about different types of color blindness.
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 Pages is an excellent free hosting platform, but the documentation is missing out on some crucial details.
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.
A list of things to do when creating a website that comes from hell. Please do not create an HTML Hell Page.
A massive list including a huge amount of products and services that are completely free!
Bill Dietrich created a list that you can do to set up a personal website.
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.
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.
Naked blogging platform, for minimalists. Just write.
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.
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.
HTML is not as easy as you think.
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.
Another great talk that covers modern CSS. I recommend watching it to take your CSS skill to the next level.
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.
Less is less. Less code means less problems, less issues, and more time to spend for other things in life.
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.
"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 shows you how to use modern CSS to create responsive website without media queries.
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.
From Milliseconds to Millions: The Numbers Driving Web Perf | Harry Roberts | performance.now() 2019 - YouTube
"Don't do it for the money, but never do it for no money." — Oliver Reichenstein, a friend of Harry Roberts
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 shares some ways to optimize Largest Contentful Paint (LCP).
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 compares Svelte to React.
Own your domain. Own your content. Own your social connections. Own your reading experience.
Rachel Andrew explains the new CSS features to create responsive design.
Validate your code!
Accessible website starts with valid HTML. So, make sure that your website has valid HTML.
Valid CSS is also important to ensure that the styling of your site works as expected.
I use this tool to validate my RSS feed.
Make sure that you have valid links on your site.
Validate your schema data.
These tools can help me improve my writing in English.
This tool prevents me from doing typos in my writing.
I use this to fix grammar issues and paraphrase sentences.
Another good grammar fixer and paraphraser.
Another good paraphraser.
I use this to paraphrase a short sentence.
It makes my writing clear and bold by highlighting potential words that can be removed.
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.
You can use this website to share with people about your Lighthouse score.
Test the performance of your website for free.
Test the performance of your website for free.
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.
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.
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.
I use this tool to generate favicons for this website.
Practice writing regular expression easily.
Another test that you can run.
Test how good your website's SSL (Secure Sockets Layer).
Test how easy your content to be understood.
Preview the social media card of your website.
Compare two colors to see the contrast of them.
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.
Check the browser's compatibility with the features that you want to use.
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.
Check the compatibility of screen readers with the ARIA attributes you want to use.
Generate a mailto link easily.
A simple kanban board on a web browser.
A real-time website privacy inspector. You can scan any website to see trackers or ads on that website.
Estimate your web page carbon footprint.
Determines if your website is not comply with EU Cookie Law.
Find out how much it costs for someone to use your site on mobile networks around the world.
It is beneficial to learn how to use screen readers to do manual testing on your website. Here are some videos to help.
Learn how to use NVDA screen reader on Windows.
Learn the basics of navigating with TalkBack.
Everything you need to know to start using Narrator.
Learn to get started to use VoiceOver on iOS devices.
Learn to use the free screen reader built into the Mac.
List of resources for various screen readers like Narrator, TalkBack, NVDA, and JAWS.
This is a great article to help you learn the basics of NVDA.
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
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?
The last time I played this, I think I got around 50 HTML elements. Can you beat mine?
This is a place for me to type something other than code.
A collection of games to play in your browser. I like the optical toys.
A game that has a purpose to put a ball inside a box. I have played 30 levels and got all three stars.
An interesting tower defense where you have to gather resources and defense your base.
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.
It has a simple graphic. It has a small file size, only 6MB.