Best of CSS — February 2024

1. 1
   Article

   freeCodeCamp·2y

   React Libraries to Use in Your Projects in 2024

   Learn about helpful libraries for building React applications in 2024, including the recommended React framework, styling options, state management, data fetching, routing, authentication, database and ORM options, date/time libraries, form libraries, drag and drop libraries, mobile app development, deployment platforms, and the importance of TypeScript. Don't miss out on the React Bootcamp for comprehensive React learning resources!

   911

   27
2. 2
   Article

   Lobsters·2y

   Online CSS Code Quality Analyzer

   Use the CSS Code Quality analyzer to analyze your CSS and get recommendations for performance, maintainability, and complexity.

   420

   27
3. 3
   Article

   Community Picks·2y

   Web Development Tutorials and Training for JavaScript, HTML, and CSS.

   Learn web development with tutorials and training in JavaScript, HTML, and CSS. Browse coding languages, explore skill paths, and stay up-to-date with current practices and technologies.

   201

   13
4. 4
   Article

   DEV·2y

   Tailwind CSS under the hood

   Learn about utility-first CSS and the benefits of using Tailwind CSS. Discover how Tailwind CSS works under the hood.

   172

   6
5. 5
   Article

   freeCodeCamp·2y

   Flexbox vs Grid in CSS – Which Should You Use?

   This post discusses the origin of CSS, the basic structure of CSS, and the differences between the flex and grid layouts. It explains how to use the flex and grid layouts in CSS and highlights the similarities between them. It also provides guidance on when to use flex and when to use grid in web design.

   119

   10
6. 6
   Article

   Community Picks·2y

   Tailwind vs. Semantic CSS

   This post compares the differences between Tailwind and Semantic CSS in terms of coding, rendering speed, separation of concerns, and more. It highlights that Semantic CSS is significantly smaller in size, faster in rendering, and allows for loose coupling and reusability.

   115

   25
7. 7
   Article

   freeCodeCamp·2y

   Advanced CSS Selectors – How and When to Use Them

   Discover the power and flexibility of advanced CSS selectors in styling elements. Learn how to build an interactive FAQ section using advanced CSS selectors. Improve your code efficiency and enhance user experience with advanced CSS selectors.

   114

   2
8. 8
   Article

   ByteByteGo·2y

   EP100: Polling vs. Webhooks

   Learn about the differences between polling and webhooks, how to manage configurations in a system, and an introduction to CSS and GraphQL.

   112

   1
9. 9
   Article

   DEV·2y

   CSS Cartoons

   Celebrating comiCSS's second anniversary, this post showcases a collection of CSS-coded cartoons created by the author. From a Cloud Developer to an Astronaut, each cartoon brings a unique twist to the world of CSS.

   104

   4
10. 10
    Article

    Medium·2y

    10 CSS One-Liners to Transform Your Web App

    Learn 10 CSS one-liners that can transform your web app in just a few minutes. Topics include centering divs, creating free flowing elements, positioning elements in the DOM, universal box sizing, responsive images, centering elements, creating custom checkbox styles, making text smoother, clearing floats, and resetting all styles.

    87
11. 11
    Article

    Community Picks·2y

    CSS Scroll-triggered Animations with Style Queries

    CSS Scroll-triggered Animations with Style Queries explores the use of scroll-driven animations and style queries in CSS, highlighting their potential and providing examples of how they can be used. The post also mentions the limitations of these techniques and suggests future improvements.

    64

    1
12. 12
    Article

    freeCodeCamp·2y

    How to Create Animations in React 18

    Learn how to create CSS animations in React 18 for a better user experience. Get a quick introduction to the 2048 game and see examples of highlighting and sliding animations. Find out the prerequisites for creating animations and discover a course on Udemy to build your own 2048 game.

    57
13. 13
    Article

    Community Picks·2y

    Mojo CSS · The Atomic CSS Framework for crafting gorgeous UIs without shipping any CSS.

    Mojo CSS is an Atomic CSS Framework that allows you to create beautiful UIs without shipping any CSS. It is lightweight, customizable, and comes with a built-in color engine and responsive design variants.

    55

    7
14. 14
    Article

    freeCodeCamp·2y

    How to Use Chrome DevTools – Simple Strategies for Smarter Web Development

    Learn how to effectively use Chrome DevTools to boost your web development process. Explore features like the Elements Panel, Console Panel, Network Panel, and more. Improve your debugging and performance optimization skills.

    48

    2
15. 15
    Article

    Cassidy's blog·2y

    Use CSS accent-color to style your inputs

    Learn how to use the CSS accent-color property to style your HTML inputs in your projects.

    42
16. 16
    Article

    Collections·2y

    CSS :has() Interactive Guide

    Guide on using the CSS :has() pseudo-class in web design and styling, showcasing its versatility and importance in real-world projects.

    38

    2
17. 17
    Article

    Web Tools Weekly·2y

    CSS Overview, Frameworks, Build Tools, Uncats

    The post discusses the CSS Overview feature in DevTools, including how to access it and the information it provides.

    38
18. 18
    Article

    freeCodeCamp·2y

    How to use the Fullscreen API in JavaScript

    Learn how to use the Fullscreen API in JavaScript to display a game or any HTML element in fullscreen mode. Discover how to enter fullscreen mode, style the fullscreen, display games with the canvas element in fullscreen, and how to exit fullscreen. Also, learn how to create a fullscreen toggle button with SVG.

    36

    3
19. 19
    Article

    Community Picks·2y

    Building Dynamic Progress Bars using only CSS

    Learn how to create dynamic progress bars using only CSS. No JavaScript is needed. Change the color and percentage dynamically using CSS variables.

    36
20. 20
    Article

    freeCodeCamp·2y

    How to Build a Camera App on the Web – No Plugins Required

    Learn how to build a camera app on the web using the MediaStream API. The article covers the components of the camera app and provides step-by-step instructions for HTML, CSS, and JavaScript code. Explore the possibilities for adding more features to the app.

    33
21. 21
    Article

    Community Picks·2y

    Going beyond pixels and (r)ems in CSS

    Explore different relative length units in CSS for sizing and fonts, including 'cap' for scale-independent layouts and 'ch' for creating responsive grids.

    29
22. 22
    Article

    Product Hunt·2y

    themex - Your bridge from visual design to fully functional code

    Themex is a tool that helps frontend developers bridge visual design and code. The post discusses the challenges of deciphering past projects and mentions the use of CSS frameworks like Bootstrap and Tailwind.

    27
23. 23
    Article

    CSS {IRL}·2y

    How I Solved My Font Rendering Problem

    The author shares how they solved a font rendering problem on their website, specifically on Safari and iOS. They learned about the @font-face rule and its properties for variable fonts.

    25

    1
24. 24
    Article

    Medium·2y

    Frontend Weekly Digest #348 (29 January — 5 February 2023)

    New tools in DevTools, CSS Motion Path, and the most actively developed Front-End framework in 2024.

    25

    1
25. 25
    Article

    Bootstrap·2y

    Bootstrap 5.3.3

    Bootstrap 5.3.3 has been released with bug fixes, documentation improvements, and enhancements for color modes. The release fixes a breaking change with color modes and a regression in the selector engine. Additionally, it introduces improvements to the color modes and miscellaneous fixes and enhancements.

    24

    4