Best of CSS — 2024

  1. 1
    Article
    Avatar of communityCommunity Picks·2y

    8 Frontend Tools to Become a Better Developer

    Front-end developers can significantly boost their productivity and create high-quality applications by incorporating lesser-known tools into their workflows. Essential tools include Uiverse for UI elements, the Motion plugin for Figma, CSSFX for animations, Frontend Mentor for real-world coding challenges, GSAP for high-performance animations, CodePen for code experimentation, Polypane for multi-device previews, and Can I Use for browser compatibility checks.

  2. 2
    Article
    Avatar of communityCommunity Picks·2y

    100 FREE Frontend Challenges

    The post offers a set of 100 free frontend challenges aimed at improving web development skills, focusing on HTML & CSS, with opportunities to incorporate JavaScript and other frameworks. Each challenge involves recreating a design to build a working website or web app. The goal is to foster a project-based learning approach, encouraging developers to complete all challenges and enhance their chances of landing a web development job.

  3. 3
    Article
    Avatar of devtoDEV·2y

    Make naked websites look great with matcha.css!

    matcha.css is a drop-in semantic styling library in pure CSS that can make naked websites look great without any build steps, JavaScript, configuration, or refactoring. It provides additional modern styles out-of-the-box and is easily customizable and reversible.

  4. 4
    Article
    Avatar of devtoDEV·2y

    New CSS media queries syntax 💥

    The new CSS media query syntax simplifies defining responsive breakpoints, making code cleaner and more intuitive. It offers enhanced clarity, efficiency, and compatibility across modern browsers, streamlining the development process.

  5. 5
    Article
    Avatar of opensourcefrontendOpen Source Front End·2y

    I built a Flexbox Playground with Awesome Animations

    Flexbox labs is an open source visual tool designed to help you create and customize CSS Flexbox layouts. Key features include an edit tab, save tab, pre-built layouts, and options for customizing the app. The tool is built using React, TypeScript, Sass, and Framer Motion.

  6. 6
    Article
    Avatar of devtoDEV·2y

    50 Best Websites for Web Design Inspiration and Ideas

    Discover a curated list of 50 best websites offering web design inspiration and ideas. These resources cater to various needs, from business and ecommerce to portfolios and landing pages. Sources are categorized into multipurpose, focused, and niched inspirations, including both free and paid options. Special mentions include award galleries and website builder showcases.

  7. 7
    Article
    Avatar of devtoDEV·2y

    2024 Cheat Sheet Collection

    A collection of cheat sheets for developers that provide concise reference guides for various programming languages, including CSS Grid and Flexbox. Also includes recommendations for comprehensive cheat sheet collections.

  8. 8
    Article
    Avatar of thedevcraftThe Dev Craft·2y

    The Best Guide to Flexbox Ever

    Flexbox is a powerful tool in web development for creating responsive layouts. The post highlights a top resource for learning flexbox and emphasizes its utility. A recommended guide is provided for further reading.

  9. 9
    Article
    Avatar of devtoDEV·2y

    Useful CSS Tools

    Explore a curated list of CSS tools that can enhance your web design by simplifying the styling process and adding creativity and efficiency. This includes gradient generators, shadow creators, glassmorphism effects, sophisticated shadows, CSS scanning, animated hamburger icons, easing gradients, neumorphic design generators, CSS buttons, glow generators, and a CSS animation playground.

  10. 10
    Article
    Avatar of devtoDEV·2y

    CSS One-Liners to Improve (Almost) Every Project

    This guide provides a series of CSS one-liners aimed at enhancing the appearance and readability of web content. Key tips include limiting content width, increasing text size and line height, making images responsive, and improving table readability. Additionally, the guide offers solutions for balanced heading wrapping, matching form control colors to page styles, and reducing animations based on user preferences.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    Goodbye SASS 👋, welcome back native CSS

    CSS has undergone rapid development and now includes features once unique to Sass such as variables and CSS nesting. The :is pseudo-class revolutionizes the selector concept and container queries allow elements to adjust based on container size. Despite these advancements, Sass still has advantages like mixins and functions.

  12. 12
    Article
    Avatar of devtoDEV·1y

    100+ Frontend Projects to level up your Skills

    Finding interesting frontend projects to work on can be challenging for both beginners and experienced developers. This post shares a GitHub repository with over 100 frontend projects, complete with source code. The projects range from beginner to advanced levels, covering a variety of applications like calculators, e-commerce websites, and more. Tips on how to select, analyze, and customize these projects are also provided to help developers improve their skills and build an impressive portfolio.

  13. 13
    Article
    Avatar of codemotionCodemotion·2y

    Creating a Fallout-Style UI Using Modern CSS

    Learn how to create a retro-futuristic user interface inspired by the Pip-Boy 3000 from the Fallout series using modern CSS techniques. The tutorial covers semantic HTML, responsiveness, typography and colors, responsive layout, visual effects and animations, and using generative AI for sci-fi content.

  14. 14
    Article
    Avatar of csstipCSS 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.

  15. 15
    Article
    Avatar of communityCommunity Picks·2y

    Frontend resources! 🚀

    A collection of frontend resources for UI creation, performance optimization, and more.

  16. 16
    Article
    Avatar of freecodecampfreeCodeCamp·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!

  17. 17
    Article
    Avatar of devtoDEV·2y

    Get Screen Size in Pure CSS

    Learn how to use pure CSS to get screen size measurements, define custom properties, and perform mathematical operations on those properties. This method updates in real-time without JavaScript, utilizing new CSS features like @property, atan2, and tan functions.

  18. 18
    Article
    Avatar of faunFaun·2y

    Top Tips and Tricks with Tailwind CSS

    Learn top tips and tricks to enhance your Tailwind CSS projects, including how to properly delegate classes, manage spacing between elements, and avoid overuse of the @apply utility. Discover how to add opacity, transitions, and animations, utilize group hover and pseudo-classes, and customize input values. Check out the provided resources for pre-made components and use the Tailwind IntelliSense plugin for an improved workflow.

  19. 19
    Article
    Avatar of communityCommunity Picks·2y

    How to center a div?

    Learn various methods to center a div in CSS, including techniques using Flexbox, Grid, absolute positioning, margin auto, and inline-block display. Each method provides examples to help achieve vertical and horizontal centering effectively.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    CSS Cheat Sheet - Interactive, not a PDF

    A comprehensive cheat sheet for CSS properties, including alignment, animation, background, border, font, margin, padding, and more.

  21. 21
    Article
    Avatar of medium_jsMedium·2y

    We Forgot Frontend Basics

    This post discusses how frontend development has become overcomplicated with endless trends and paradigms, and highlights the importance of mastering basic skills, such as vanilla JavaScript, HTML, and CSS. It also provides tips for improving frontend development skills.

  22. 22
    Article
    Avatar of freecodecampfreeCodeCamp·2y

    Create 24 CSS Projects

    Improve your CSS skills through a new course on the freeCodeCamp.org YouTube channel, featuring 24 challenges that teach you to recreate components and layouts from apps like GitHub, CodePen, and Instagram. The course covers key CSS techniques such as transitions, pseudo-elements, hover effects, and keyframe animations, with solutions provided by CSS expert Treasure Porth.

  23. 23
    Article
    Avatar of communityCommunity 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.

  24. 24
    Article
    Avatar of asayerasayer·2y

    Best 7 Practice Projects to Level Up your Skills

    Building hands-on projects is essential for web development growth. This post discusses seven practice projects - To-Do List App, Simple Calculator, Weather App, E-commerce Product Page, Tic-Tac-Toe Game, Real-time Chat Application, and Personal Portfolio Website. Each project helps enhance various skills such as JavaScript event handling, API usage, responsive design, and more. Tips for leveling up include breaking down projects, using version control, seeking help, experimenting, and continual learning.

  25. 25
    Article
    Avatar of moderncssModern CSS Solutions·2y

    12 Modern CSS One-Line Upgrades

    Learn about 12 modern CSS one-line upgrades that can improve your application's CSS. The upgrades include stable fixes for hacks or long-standing issues, improved experiences with well-supported modern properties, and progressive enhancements. Some of the properties explored are aspect-ratio, object-fit, text-underline-offset, margin-inline, text-underline-offset, outline-offset, scroll-margin-top/bottom, color-scheme, accent-color, width: fit-content, overscroll-behavior, text-wrap, and scrollbar-gutter.

See all CSS archives