Bookmarks | Roland Szabó | Senior Web Designer

Accessibility

Design Better Forms - Common mistakes designers make and how to fix them
A11Y Style Guide - The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.
Axess Lab Articles - Axess Lab has some great articles on the topic of accessibility.
A11Y with Lindsey - Lots of great articles on Accessibility by Lindsey Kopacz.
HTML5 Accessibility - Get the current accessibility support status of HTML5 features across major browsers.
We're Just Temporarily Abled - An eye-opening article on designing for our future selves.

HEAD - A free guide of everything that can go into an HTML5 <head> element.
How to Section your HTML - A reference article about HTML sectioning elements and their semantics.
HTML semantics cheat sheet - Every HTML element and their semantic meaning.
HTML semantics checklist - A checklist to... check before launching your website.
HTML Reference - A free guide of all HTML elements and attributes, explained.
HTML5 Cross Browser Polyfills - Collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them.

Autoprefixer - A tool that automatically adds vendor prefixes to CSS rules if they're necessary for cross-browser compatibility.
A Complete Guide to Flexbox - Flexbox bible.
A Complete Guide to Grid - CSS Grid bible.
Every Layout - Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Inclusive Components - A blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece.
CSS Guidelines - High-level advice and guidelines for writing sane, manageable, scalable CSS.
CSS Architecture - An old article on writing predictable, reusable, maintainable and scalable CSS.
BEM Cheat Sheet - Advice on how to gind the right classname for your BEM entities.
Bubbly - CSS speech bubbles made easy.
Hiding Elements On The Web - Many ways to hide elements on the web, explained.
How to Center in CSS - An old-time classic for beginners.

Web.dev/fast - Google's techniques for improving site performance. Bible.
TinyPNG - TinyPNG uses smart lossy compression techniques to reduce the file size of your images. I use it to optimize JPG and PNG images for the web, 20 at max.
Web Performance 101 - Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.

Type Terms - A beautiful, animated typographic cheat sheet.
Modular Scale - A tool to help web designers size their type in a more meaningful way.
Fontello - I use Fontello to create my own webfont library without having to use the full FontAwesome library.
Fluid Responsive Typography With CSS Poly Fluid Sizing - Az article on how to create scalable, fluid typography across multiple breakpoints.

UX Myths - A sadly discontinued list of 34 myths regarding user experience.
Learn Mobile Design - A curated list of mobile design resources
Learn UI Design Blog - Lots of great articles on UI Design by Erik Kennedy.
Design Systems - A Figma publication for design systems creators, designers, developers, and managers.
Grid Book [PDF] - Layout Essentials – 100 Design Principles for using grids by Beth Tondreau.
Photopea - A free online image editor that looks and works like Adobe Photoshop.
Ballpoint.io - A free online vector graphics editor that looks and works similar to Adobe Illustrator.

Unsplash - Over 1 million free high-res stock photos for commercial use.
Pexels - Free high-res stock photos for commercial use.
Caniuse - Caniuse provides up-to-date browser support information on frontend web technologies. I use it to check the browser support of a given CSS property I want to use.
Caniemail - Caniuse, but for emails.
Real Favicon Generator - My go-to all-in-one favicon generator. Upload an image, get all the favicons.
Text to ASCII Art - I use this tool to create eye-catching comment blocks in my code.
Front-End Checklist - An exhaustive list of all elements you need to have and test before launching your website to production. I'm currently working on the Hungarian translation of this.
Tiny Helpers - A collection of free single-purpose online tools for web developers. I'm sure you'll find many of my listed tools here as well.