Best of CSS — April 2024

1. 1
   Article

   CSS Tip·2y

   Write better CSS with modern CSS

   Learn how to write better CSS with modern CSS features that can help optimize your code and reduce redundancy.

   1.1K

   42
2. 2
   Article

   Community Picks·2y

   Learn CSS, HTML and JavaScript by Playing Coding Games

   Learn CSS, HTML, and JavaScript by playing coding games in an engaging and interactive environment. Traditional learning methods lack practice, engagement, and can be boring. By combining practice and an interactive learning environment, you can make learning to code more efficient, interesting, and fun.

   712

   31
3. 3
   Article

   Atomic Spin·2y

   5 Tailwind CSS Anti-Patterns to Avoid

   Tailwind CSS has been a game-changer for developers, but there are anti-patterns to avoid when working with it. Avoid relying solely on the built-in color palette, under-utilize theme customization, and use a component-based framework. Additionally, avoid using the `@apply` directive and using Tailwind in domain-level components.

   485

   32
4. 4
   Article

   freeCodeCamp·2y

   How to Create an Interactive Terminal-Based Portfolio Website

   Learn how to create an interactive terminal-based portfolio and resume in JavaScript using the jQuery Terminal library. Improve your command line skills and showcase your projects.

   332

   17
5. 5
   Article

   Product Hunt·2y

   20+ Free Tailwind CSS & React Blocks - Fully Coded UI Sections with Designer File Included

   A collection of completely free blocks styled with Tailwind CSS for React websites and applications. Fully coded and customizable with a Figma designer file included!

   200

   4
6. 6
   Article

   DEV·2y

   : vs :: in CSS3

   Learn the difference between : and :: in CSS3, how to use pseudo-classes, and examples of pseudo-elements.

   189

   13
7. 7
   Article

   asayer·2y

   Using Rarer HTML Tags for Styling

   Using rare HTML tags for styling offers advantages such as reducing code bloat and improving code readability, as well as enhancing website performance by minimizing CSS file size.

   184

   14
8. 8
   Article

   Community Picks·2y

   Why UI designers should understand Flexbox and CSS Grid

   Learn why UI designers should understand Flexbox and CSS Grid for responsive design. Explore the differences between column-based design and modern CSS layouts.

   157

   6
9. 9
   Article

   Hacker News·2y

   Hidden Gems of Tailwind CSS

   Tailwind CSS offers hidden gems like changing radio/checkbox colors, using the peer-modifier, styling file inputs, changing color opacity, combining font-size and line-height, using pointer events, truncating multi-line text, creating square elements, highlighting text, styling named groups, adding custom variants, and using arbitrary values.

   128

   5
10. 10
    Article

    CSS Articles·2y

    css-shape.com: The Ultimate Collection of CSS-only Shapes ⚡️

    A website called css-shape.com is the ultimate collection of CSS-only shapes. It offers shapes created with a single element, modern CSS, optimized code, flexibility, and easy usage.

    121

    3
11. 11
    Article

    DEV·2y

    I built these 5 types of loading animation in HTML and CSS, which do you prefer?

    Explore 5 unique loading animations created using HTML and CSS, including a minimalist spinner, a bouncing ball, a morphing blob, pulsing dots, and a filling rotating square.

    113

    7
12. 12
    Article

    Community Picks·2y

    CSS Grid vs. Flexbox: Which Should You Use and When?

    Flexbox and CSS Grid are two CSS layout modules that allow for the creation of complex layouts. Flexbox is suitable for content flow and flexibility, while CSS Grid focuses on precise content placement and allows for two-dimensional layouts. The choice between the two depends on the specific requirements of each layout.

    98
13. 13
    Article

    freeCodeCamp·2y

    How To Use CSS Variables – Explained with Code Examples

    Learn how to use CSS variables to reduce code repetition and improve styling. This guide covers basic examples in plain HTML and CSS to more advanced examples in React and Next.js.

    80

    1
14. 14
    Video

    Theo - t3․gg·2y

    The Correct Base Font Size

    This post discusses the ideal base font size, the advantages of using relative units for font sizes, and offers tips for making text fields more usable and accessible. It also highlights the importance of respecting user preferences and following WCAG standards.

    66

    4
15. 15
    Article

    freeCodeCamp·2y

    How to Build a Marquee Component with React

    Learn how to build an engaging marquee component in React with this step-by-step guide. Discover the benefits of marquee components, how to plan and design them, and best practices for development

    60
16. 16
    Article

    Community Picks·2y

    15 Best Books On Web Design You Must Read

    A list of 15 best web design books for beginners, covering topics such as design principles, HTML and CSS, color theory, typography, UX design, design systems, and more.

    57

    1
17. 17
    Article

    asayer·2y

    Exploring Atomic CSS: A Scalable Architecture for Modern Web Development

    Learn about Atomic CSS, a scalable architecture for modern web development that uses small, single-purpose classes. Discover the advantages of implementing Atomic CSS, such as improved code organization, scalability for large projects, performance optimization, and enhanced collaboration. Find out how to avoid common pitfalls when using Atomic CSS.

    56

    2
18. 18
    Article

    Community Picks·2y

    No more dreadful dropdowns — long live Popover!

    Firefox has released support for the Popover API, making it easier to create components like dropdowns, toasts, and dialogs without the need for Javascript. The Popover API allows elements to pop over existing content and comes with a new CSS feature called Top layer that simplifies styling and control.

    53
19. 19
    Article

    DEV·2y

    Earth rescue - A CSS only game

    A CSS-only game created for the Frontend Challenge, inspired by Earth Day. Includes information on generating waves in CSS, using the BEM Pattern for CSS, creating an earth design with CSS grid, improving CSS animations for performance, and using checkboxes to control game state. The game features icons for ecological disasters and a CSS robot companion.

    50

    1
20. 20
    Article

    David Walsh·2y

    HTML popover Attribute

    Learn how to create a native HTML modal using the popover attribute and style its contents. Discover how to add a background layer to the popover modal.

    50

    7
21. 21
    Article

    LogRocket·2y

    Mojo CSS vs. Tailwind: Choosing the best CSS framework

    CSS frameworks like Tailwind and Mojo CSS offer different features and benefits. Tailwind is popular, well-documented, and has a large userbase. Mojo CSS is newer, lightweight, and requires no CSS coding. Tailwind is recommended for most projects, but Mojo CSS might be a good choice for lightweight projects.

    48

    12
22. 22
    Article

    Community Picks·2y

    MetalliCSS

    A script for creating a MetallicSS playground with a specified class, size, and background color.

    47

    3
23. 23
    Article

    asayer·2y

    A set of CSS Snippets and Tricks for Common Design Problems

    CSS snippets and tricks are ready-made solutions to common web design issues. They can solve problems related to layout, animation, typography, and responsiveness.

    45
24. 24
    Article

    CSS Tip·2y

    Create CSS Shapes with a single element

    Learn how to create CSS shapes with a single element using optimized code. Check out css-shape.com for a collection of CSS-only shapes that are easy to customize and copy with a single click.

    37

    2
25. 25
    Article

    Community Picks·2y

    Motion extraction with mostly CSS

    Learn how to perform motion extraction using CSS and mix-blend-mode. Discover how to create interesting effects by overlapping videos and applying filters.

    37

    5