Best of CSSMarch 2022

  1. 1
    Article
    Avatar of joshwcomeauJosh W Comeau·4y

    Understanding Layout Algorithms

    CSS is so much more than a collection of properties. It's a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms. We need to learn how the layout algorithms work, and how they use the properties we provide to them.

  2. 2
    Article
    Avatar of css-irlCSS {IRL}·4y

    New CSS Features In 2022

    There are a lot of new CSS features in development as I write this. 2022 is the year that some big ones will be landing in a browser near you. There are potential for big changes in the way we write CSS. I explored some of these new features for Smashing Magazine.

  3. 3
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·4y

    CSS Tools, Databases, JSON, SVG

    There are a number of different ways to remove empty items from an array in JavaScript. To remove blank values alone is something more specific, but there are a few ways to do it. You can find all the above examples in this CodePen. Now on to this week's tools!

  4. 4
    Article
    Avatar of hashnodeHashnode·4y

    CSS Tricks to Create that Dark Futuristic Web3 Look

    The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you can add to your app:Gradient Glowing effect Bright and white text over a dark background Semi transparent backgrounds A quick and easy transition on hover.

  5. 5
    Article
    Avatar of hashnodeHashnode·4y

    Writing Cleaner CSS using BEM Methodology

    The Block Element Modifier methodology (abbreviated BEM) is a popular naming convention for HTML and CSS classes. It helps to keep your code organized and maintainable. BEM is mostly used when you have a project that has multiple pages, HTML selectors and a large code structure.

  6. 6
    Article
    Avatar of freecodecampfreeCodeCamp·4y

    Create a Portfolio with React featuring Cool Animations

    We just published a React tutorial that will teach you how to build a frontend portfolio with neat animations. Creating a portfolio website is a great way to improve your frontend development skills. Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5 hour watch).

  7. 7
    Article
    Avatar of logrocketLogRocket·4y

    The best styling options for Next.js

    Next.js is a JavaScript framework based on React. With its ability to offer static and server rendering, its popularity quickly shot up amongst developers. Next.js offers many ways to support CSS in your application. In this tutorial, you will discover a few ways to implement styling in your next.js application.

  8. 8
    Article
    Avatar of leerobLee Robinson·4y

    Building an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson

    This tutorial shows you how to create a Next.js application that fetches content from a Postgres database. It also serves optimized, blur-up images with next/image and styles components with Tailwind CSS. I used this to create swag.vercel.app, which is a collection of tweets.

  9. 9
    Article
    Avatar of logrocketLogRocket·4y

    Creating animations with p5.js

    P5.js is a JavaScript library used for creative coding. It is free and open-source because they believe software, and the tools to learn it, should be accessible to everyone. The advantage of using the JavaScript programming language is its widespread availability and support everywhere. There are many more benefits, including the following:

  10. 10
    Article
    Avatar of beyondcodeBeyond Code·4y

    CSS to Tailwind converter – Windy

    Windy is a browser extension for Google Chrome and Firefox. It automatically converts any existing HTML elements into Tailwind CSS components. The process directly allows you to create new components and make adjustments where needed. As Windy does the heavy lifting, this reduces the time for the conversion by an order of magnitude.

  11. 11
    Article
    Avatar of hashnodeHashnode·4y

    CSS Logos: Netflix logo

    The Netflix logo is built up by three sticks of the same size; however, the middle one casts a shadow and is skewed. We'll leverage borders for the two side pillars and pseudo-elements to make the skew stick + the rounded bottom section. The result is the following CodePen.

  12. 12
    Article
    Avatar of hashnodeHashnode·4y

    10 amazing games to learn CSS

    There are some fun ways to learn this monster called CSS. Learning CSS can be quite a challenge, and you will have to get your hands dirty. This article will highlight ten amazing games you can play to learn CSS. Once you've mastered these games, you can enter some CSS challenges and battles.

  13. 13
    Article
    Avatar of tilThis is Learning·4y

    Tailwind vs Sass/SCSS: Structure and Consistency over Style and Comfort

    Sass is an extension of CSS that provides features that seem to have been left out of CSS itself. Tailwind proposes a utility-first approach to CSS where styles pre-exist with classes. Both aim to increase the quality of life around writing CSS but their approach however differs.

  14. 14
    Article
    Avatar of chromeChrome Developers·4y

    New in Chrome 99

    Chrome 100 ships in late March (2022), and Firefox 100 ships shortly after in early May. The showPicker() method allows you to programmatically show a browser picker for elements like date, color, and datalist. CSS cascade layers gives you more control over your CSS, and helps to prevent style-specificity conflicts.

  15. 15
    Article
    Avatar of freecodecampfreeCodeCamp·4y

    Create a Portfolio Website Using HTML, CSS, & JavaScript

    In this course, you will improve your HTML, CSS and JavaScript skills by building a portfolio website. You can use what you learn in this course to show off your work history and design skills. Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch)

  16. 16
    Article
    Avatar of hashnodeHashnode·4y

    How to create a custom scrollbar with CSS in 5 mins

    Using CSS we can add personality to our site’s design with custom scrollbars. The code below will work with most modern browsers and operating systems. To create a custom scrollbar, we must first define the size of the scrollbar. We can style it by adding background colors, shadows, border radius, and borders.

  17. 17
    Article
    Avatar of css_tricksCSS-Tricks·4y

    CSS-Tricks is joining DigitalOcean! | CSS-Tricks

    DigitalOcean has acquired CSS-Tricks. The site and content is staying right here. DigitalOcean is committed to continuing to produce high-quality content on front-end development and tending to the trove of content that exists here already. You can build anything on DigitalOcean infrastructure.

  18. 18
    Article
    Avatar of devdojoDevDojo·4y

    19 Valuable GitHub Repositories for Beginner Developers 📚✨

    GitHub is a great place to start your web development career. I've compiled a list of some of the best repositories I know. Categories include basics, courses, handbooks, best practices, projects, interviews, and resources. I wish I knew them when I started myself, so treat them as a valuable shortcut.

  19. 19
    Article
    Avatar of dwbDavid Walsh·4y

    CSS :has

    The :has pseudo-class allows styling a parent based on a relative CSS selector. Apple's Safari is the first browser to support :has , though we should see others quickly follow suit as it's part of the official CSS spec. Now that we have this new pseudo- class, do you think you'll use it much? Or will you stick to your current workarounds?

  20. 20
    Article
    Avatar of codropsCodrops·4y

    Creating Native Web Components

    Native web components have been here for a while, but they still seem like the new kid on the block. Today we will build some native web components with Minze, a simple JavaScript framework. We will be building several web components for a fictive Smart Home dashboard application.

  21. 21
    Article
    Avatar of smashingSmashing Magazine·4y

    New CSS Features In 2022 — Smashing Magazine

    Container queries enable us to style an element depending on the size of its parent. This is a crucial difference from media queries, which only query the viewport. This has long been a problem for responsive design, as often we want a component to adapt to its context. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022.

  22. 22
    Article
    Avatar of hashnodeHashnode·4y

    CSS Logos: Hashnode logo

    I wanted to start this CSS challenge a while ago by recreating some fantastic logos in CSS only. I'll be starting with Hashnode, as I re-created this recently for the CSS Hashnode challenge. The mask option is a powerful tool to mask out parts of your elements. The background shows through the logo, excellent!

  23. 23
    Article
    Avatar of hashnodeHashnode·4y

    How I made Postman Clone using HTML, CSS & JavaScript

    Postman is a popular application programming interface that makes it easy for developers to create, share, test and document APIs. In this tutorial, we are going to build a website using Postman and Bootstrap. For this project, we will use the Visual Studio Code.

  24. 24
    Article
    Avatar of hashnodeHashnode·4y

    CSS Interview Questions

    Cascading Stylesheet Sheet is a stylesheet language that determines how the elements and content should look on the page. CSS is used to develop a consistent look and feel to the webpage. In today's world of tech, it's not easy to land a job while it's impossible to know answers to all questions that an interviewer may ask you.

  25. 25
    Article
    Avatar of hashnodeHashnode·4y

    CSS Vs CSS Modules

    React allows you to create different components for your application. Since each component has its own stylesheet, you wouldn't want those stylesheets to override one another. The goal of CSS Modules is to protect overlapping class names. The best part is, it is actually simple and straightforward.