Best of CSS — March 2023

1. 1
   Article

   builder.io·3y

   Become a CSS Grid wizard with grid-template-areas

   Learn how to use grid-template-areas in CSS Grid to easily describe complex layout, reorder elements, create 2D grids, and stretch elements. Discover important rules to follow and the use cases of CSS Grid and grid-template-areas.

   159

   3
2. 2
   Article

   Community Picks·3y

   CSS Nesting is now available with Vanilla CSS

   CSS Nesting simplifies the CSS structure, improves code readability, and is compatible with Vanilla CSS.

   132

   24
3. 3
   Article

   Bits and Pieces·3y

   15 Awesome CSS Properties You Need to Know 🎯

   These CSS properties will help any developer build a project quickly and efficiently. I have included the CodePen link at the end of the article, where you can find all these examples in action. You can add the Glass Effect to your next project using a few lines of code. Glass effects are beautiful and add elegance to your design.

   97

   4
4. 4
   Article

   Community Picks·3y

   A (more) Modern CSS Reset

   A modern CSS reset that provides a base for starting projects. It includes rules for box sizing, font size, margins, list styles, line heights, and more. The reset is customizable and can be adjusted to fit individual needs.

   90

   6
5. 5
   Article

   DEV·3y

   5 tips to become better at CSS

   Tips to improve your CSS skills, including understanding the box model, canceling out margins, and using tables for styling tables.

   78

   8
6. 6
   Article

   Community Picks·3y

   Unleashing Your Power With Vue Animation

   Learn how to create animations in Vue using CSS and GSAP (GreenSock Animation Platform), as well as how to create custom directives for animations. Unlock the power of animations in Vue to enhance user experience and make your applications stand out.

   68

   10
7. 7
   Article

   Chrome Developers·3y

   New in Chrome 111

   Chrome 111 brings new features for developers, including the View Transitions API for creating smooth transitions in single page apps, support for CSS Color Level 4 which offers more colors to choose from, and new color devtools features.

   64

   3
8. 8
   Article

   freeCodeCamp·3y

   Learn Web Development from Harvard University (CS50 Web)

   Learn web programming with Python and JavaScript from Harvard University's CS50's Web Programming course. Topics include HTML, CSS, Git, Python, Django, SQL, JavaScript, user interfaces, testing, scalability, and security. Watch the full course on the freeCodeCamp YouTube channel.

   54

   6
9. 9
   Article

   Community Picks·3y

   Defensive CSS

   Learn how to defend the layout in case of long user-generated content and achieve consistency using defensive CSS techniques. Also, discover the importance of truncating text and sharpen your CSS skills.

   46

   10
10. 10
    Article

    Codrops·3y

    Double Image Hover Effects with Clip-Path Animations

    Explore how to utilize CSS clip-path to create interesting-looking hover effects that reveal the same image in a unique way.

    46

    5
11. 11
    Article

    Deno·3y

    You Don't Need a Build Step

    Node's server-side JavaScript isn't compatible with browser JavaScript, because each implementation satisfies two entirely different systems. JavaScript was created for browsers where scripts/resources are imported asynchronously via URLs. Node is modularized, so code from different Node modules need to be bundled and minified to reduce code being shipped to the client.

    44

    3
12. 12
    Article

    web.dev·3y

    6 CSS snippets every front-end developer should know in 2023

    Learn about container queries, scroll snap, grid positioning, creating circles, cascade layers, and logical properties in CSS.

    40

    3
13. 13
    Article

    asayer·3y

    Theming With Tailwind CSS

    Learn how to create multiple themes in a Tailwind CSS application and toggle between them using a switch.

    38

    2
14. 14
    Article

    Community Picks·3y

    CSS Container Query Units

    Learn about CSS query units, how they work, and their use cases for enhancing component responsiveness based on container width.

    35
15. 15
    Article

    freeCodeCamp·3y

    CSS Grid Handbook – Complete Guide to Grid Containers and Grid Items

    This tutorial discusses everything you need to know to use CSS Grid like a pro.

    34
16. 16
    Article

    freeCodeCamp·3y

    How to Make a Clickable SVG Map With HTML and CSS

    Learn how to make a clickable SVG map with HTML and CSS. Discover the benefits of SVG maps, add interactivity with CSS, and link areas of the map to external webpages.

    29

    1
17. 17
    Article

    Codrops·3y

    Web Design & Development News: Collective #757

    Share your insights on tools, processes, and habits that help you get more done in less time. Get inspired: Maximize your productivity as a developer and help shape the industry’s future. Participate in the Developer Productivity survey today to win amazon gift cards and other prizes worth over $200.

    26

    1
18. 18
    Article

    asayer·3y

    Text Formatting in HTML

    Learn about text formatting in HTML, including popular tags, the advantages of semantic HTML, and using CSS for advanced text formatting.

    22
19. 19
    Article

    asayer·3y

    Creating drop-down menus with CSS in 2023

    Learn how to create effective and aesthetically pleasing dropdown menus with CSS in 2023. Explore the basics, enhance menus with CSS3, and make them responsive. Discover advanced techniques like creating multilevel menus and integrating with CSS frameworks.

    21

    2