Understanding Layout Algorithms is definitely how I got decent at CSS.

The article explains a mental model shift needed to grasp CSS more intuitively. It explains that layout algorithms—like Flexbox, Grid, and Flow—are the ones that define how CSS properties behave. It provides insights into how these algorithms handle properties differently and how a deeper understanding of these mechanisms can lead to better, more predictable coding outcomes.

The CSS Layout Generator is a tool designed to help create CSS and HTML for layout components that manage the spacing and arrangement of child elements within a webpage.

This approach is based on the philosophy that UI components should not include margins that affect surrounding elements, ensuring better encapsulation and usability. This tool allows for straightforward creation of components that control direction and spacing, enhancing design flexibility and consistency.

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Lucide.dev offers a collection of customizable vector icons, designed with a focus on consistency, cleanliness, and scalability.

These lightweight icons are tree-shakable, ensuring that only the icons you use are imported into your projects. Lucide supports all major package managers and offers extensive customization options, such as adjusting color, size, and stroke width.

Lucide is a fork of Feather Icons backed by an active community due to Feather being abandoned and no longer actively maintained. Feather had 287 icons and since moving apart, Lucide has added over 1000 icons (right now they have a total of 1460 icons).

Accessibility Myths challenges common misconceptions about web accessibility through a series of debunked myths.

It emphasizes that accessibility benefits not only people with disabilities but everyone, improving overall user experience and increasing website usability.

Integrating accessibility from the beginning of a project is cost-effective and enhances a development team’s skills while reducing legal risks.

Dead Simple Websites is a curated selection of websites following a minimal design.

(yes, at some point I'll improve this website with some inspiration from here)

shadcn/ui offers a selection of ready-to-use, customizable design components that you can simply copy and paste into your projects without needing to install them as dependencies.

This approach allows for greater flexibility and control over the code, as you can customize each component to your specific needs. It's designed to be accessible and open-source, providing a practical resource for building your own component libraries.

In their website you can find also a theme builder and bigger blocks putting together the components into cohesive pages.

Tailwind CSS is a utility-first CSS framework that helps you design and build modern, responsive websites directly within your HTML.

It offers a wide range of classes for various styling options, from layout control to typography and colors, enabling a more efficient and customizable design process. Its system encourages consistency while still allowing for pixel-perfect custom designs, making it a versatile choice for web development.

TailwindCSS automatically purges the generated CSS, plus using a limited set of utility classes allows the output css files to be small.