Best of CSS — July 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

    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.

  4. 4
    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.

  5. 5
    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.

  6. 6
    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.

  7. 7
    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.

  8. 8
    Article
    Avatar of communityCommunity Picks·2y

    Mamba UI

    Mamba UI is a free, open-source collection of UI components and templates built with Tailwind CSS. It offers over 150 building blocks that are modular and customizable, making it easy to create various layouts for websites quickly. Users can copy-paste code directly into their projects and customize it. The project is continuously updated, and new features are in the pipeline.

  9. 9
    Article
    Avatar of communityCommunity Picks·2y

    Franken UI

    Learn how to install and initialize Franken UI, a tool for web development, using Tailwind CSS and PostCSS with a simple npm command.

  10. 10
    Article
    Avatar of piccalilliPiccalilli·2y

    Styling Tables the Modern CSS Way

    Modern CSS simplifies creating aesthetically pleasing and functional HTML tables. The post explains the fundamental HTML components for tables and modern CSS techniques to enhance their appearance and accessibility. It covers the use of elements such as <table>, <thead>, <tbody>, <tfoot>, styling strategies like text alignment, border handling, sticky positioning, and responsive design considerations. The guide is aimed at making readable, accessible, and visually appealing data tables.

  11. 11
    Article
    Avatar of csstipCSS Tip·2y

    Get the screen width & height without JavaScript

    Learn how to obtain screen width and height as pixel values using only CSS, avoiding JavaScript. This method leverages @property and trigonometric functions, providing unitless values that update in real-time upon screen resize.

  12. 12
    Article
    Avatar of communityCommunity Picks·2y

    Creating a Responsive Profile Settings UI with Tailwind CSS

    Learn how to design a user profile settings interface using Tailwind CSS. The guide includes creating minimalist and enhanced profile settings, along with a responsive profile settings page featuring a sidebar. Focus is on using Tailwind CSS's utility-first approach to style various components for a visually appealing and user-friendly interface.

  13. 13
    Article
    Avatar of devsquadDev Squad·2y

    Introducing Animata

    Animata is a free and open-source project designed to simplify the addition of animations to React and Tailwind projects. It offers a diverse collection of 40+ customizable animation components. Users can browse for inspiration, utilize pre-built animations, and dive into the code to learn the principles of CSS animations. The project encourages contributions and provides detailed documentation to assist with implementation. Feedback is welcome to improve the project, which is currently in its beta phase.

  14. 14
    Article
    Avatar of communityCommunity Picks·2y

    CSS Can Get You in Jail

    Rendering legal documents using CSS counters can cause legal issues due to potential changes in the hierarchical numbering, which serve as unique identifiers. This can lead to documents being legally incorrect if referential integrity is broken. Using browser rendering engines introduces unpredictability, and human errors in numbering can invalidate the text. The recommended solution is to hardcode numbers in such documents for stability and correctness.

  15. 15
    Article
    Avatar of csstipCSS Tip·2y

    Inverted border-radius using CSS mask

    Learn how to use a CSS mask to create an inverted radius corner with minimal code, without the need for extra elements or pseudo-elements, and optimized with CSS variables.

  16. 16
    Article
    Avatar of communityCommunity Picks·2y

    Design GUI

    The browser extension helps manage colors in CSS variables, offering features like AI-generated color palettes, accessibility testing, and support for popular UI frameworks like daisyUI and shadcn/ui. It allows real-time changes to CSS variables directly from the browser, bridges the design/technical gap, and facilitates the documentation of color palettes. Additionally, users can export CSS variable changes and ensure adherence to accessibility standards.

  17. 17
    Video
    Avatar of wdsWeb Dev Simplified·2y

    We Can Finally Animate height: auto; in CSS!

    Animating height:auto in CSS has always been a challenge, often requiring JavaScript hacks. However, new CSS features like the calc size function and the starting style property make it much easier to create smooth transitions without excessive JavaScript. These properties help developers create better animations and transitions, even if their browser support is still limited. Progressive enhancement ensures older browsers still function correctly, albeit without the animations.

  18. 18
    Article
    Avatar of ishadeedAhmad Shadeed·2y

    CSS Grid Areas

    Despite being available since 2017, CSS grid template areas are underused in web development. This post highlights the simplicity and power of grid template areas, demonstrating how they can simplify positioning elements within a grid layout. By naming grid areas and referencing them in CSS, building and visualizing complex layouts become more intuitive. Practical examples and demos illustrate the ease of making responsive designs and adjusting layouts, enhancing development efficiency and collaboration among team members.

  19. 19
    Article
    Avatar of devtoDEV·2y

    What's new in Web Dev this month?

    The web development landscape has recently introduced several updates, including new Set methods in JavaScript, advanced gradient color interpolation in CSS, and experimental AI capabilities in Chrome Canary. Additionally, ECMAScript 2024 has been approved, featuring new ways to handle promises. These updates enhance code efficiency, creative control, and interactive web application possibilities.

  20. 20
    Video
    Avatar of kevinpowellKevin Powell·2y

    A background-image trick most people don't know about

  21. 21
    Article
    Avatar of communityCommunity Picks·2y

    Javascript Colored Tags Generator

    Learn how to generate colored tags using JavaScript for various widgets to improve UI. Methods include using template literals and dynamic color assignment for better visual data scanning. The guide covers basic tag HTML structure, dynamically generating tags from arrays, and assigning colors either through a config object or automatically for large tag lists.

  22. 22
    Article
    Avatar of hnHacker News·2y

    CSS Grid Generator

    CSS Grid Generator is a new tool launched on Product Hunt that assists developers in creating custom CSS grid layouts. Users can specify the number of columns, rows, and gutter size to customize their grids easily. Developed by Kristjan, this tool simplifies web development tasks.

  23. 23
    Video
    Avatar of wdsWeb Dev Simplified·2y

    You Should Know These 7 CSS Responsive Sizing Features

  24. 24
    Article
    Avatar of gcgitconnected·2y

    Learn CSS Flexbox, the easy way

    CSS Flexbox simplifies complex layout designs, such as vertical centering, equal distribution of space among elements, and uniform column heights, which were challenging using floats and positioning. Key properties include `display: flex`, `flex-direction`, `justify-content`, `align-items`, and `flex-wrap`, allowing flexible and responsive designs. Flexbox also offers control over individual items with properties like `align-self`, `flex-grow`, `flex-shrink`, and `flex-basis`. The `order` property allows reordering of elements but may impact accessibility. The `gap` property offers easy spacing without manual margins.

  25. 25
    Article
    Avatar of michaelnthiessenMichael Thiessen·2y

    Create Beautiful PDFs with HTML, CSS, and Markdown

    A tool has been developed to create beautiful ebooks and PDFs using HTML, CSS, and Markdown, bypassing the complexities of traditional tools like Adobe InDesign. This tool uses the Prince engine for conversion, allowing hot-reloading for immediate previews, and integrates easily with existing branding and styles.

See all CSS archives