--- title: Best CSS posts — August 2021 | daily.dev description: The most upvoted CSS posts from August 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/css/best-of/2021/08 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/css/best-of/2021/08 og:type: website og:site_name: daily.dev og:title: Best CSS posts — August 2021 | daily.dev og:description: The most upvoted CSS posts from August 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of CSS — August 2021 1. 1 [](/posts/6-awesome-css-layout-generators-n3cv8p4-m "🔥 6 Awesome CSS Layout Generators") Article Hashnode · 5y 🔥 6 Awesome CSS Layout Generators 6 awesome CSS layout generators/tools that will help you in rapid prototyping and front-end development of CSS layouts for your projects. Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with this interactive CSS Grid Generator. 141 20 2. 2 [](/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu "Skills required to be a full stack developer: a checklist") Article DEV · 5y Skills required to be a full stack developer: a checklist The skills list required to be a full stack developer is long and it can be hard to know exactly what skills you need. The often shared online resource for this kind of thing is roadmap.sh but, while it is extensive, I think the amount covered here is too much to be helpful to new developers. I have my own list, it’s a bare minimum required skills list and it looks like this: 120 9 3. 3 [](/posts/new-in-chrome-93-taqoz3wio "New in Chrome 93") Article Chrome Developers · 5y New in Chrome 93 Chrome 93 will ship on September 21\. New PWA features include CSS Module Scripts and Multi-Screen Window Placement API. Installed PWAs can register as URL handlers, making it possible for users to jump straight into your PWA. The PWA Summit is coming up October 6-7. 95 4 4. 4 [](/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o "You want enabling CSS selectors, not disabling ones") Article CSS-Tricks · 5y You want enabling CSS selectors, not disabling ones An enabling selector is what I call a selector that does a job without disabling the particular rule. Let's say we have list items and we want to add the margin to every one except the last one. First, we add margin-bottom to all elements. Then, we disable the bottom margin on the last element. 93 5 5. 5 [](/posts/from-zero-to-web-developer-hwtqizguv "From zero to Web developer") Article Hashnode · 5y From zero to Web developer Web development is the work involved in developing a website or a web application. There are multiple paths you can take while learning web development. This is the one I would take if I had to do it all over again. These steps are going from the very beginning, so it's suited for beginners. 84 8 6. 6 [](/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q "How to decide CSS units for responsive website?") Article DEV · 5y How to decide CSS units for responsive website? Px unit is fixed in size no matter what screen size you choose. If there's no defined parent then by default body is considered the parent. vw stands for the viewport width which means vw is always relative to the 1% of the width of root, irrespective of parent element's width. vh stands for viewprot height like vw it's also relative to 1% height of root/document. 76 5 7. 7 [](/posts/flexbox-or-grid-key-strategies-for-choosing-the-best-option-suvpz0jst "Flexbox or Grid? Key Strategies for Choosing the Best Option") Article SitePoint · 5y Flexbox or Grid? Key Strategies for Choosing the Best Option Flexible Box Layout, or Flexbox for short, started to appear in browsers around 2012\. In March 2017, CSS Grid Layout started to receive widespread browser support. With Grid, the power to build all kinds of robust layouts on the Web has grown immensely. To master Flexbox, Grid, and many other advanced CSS3 features, check out CSS Master, 3rd Edition. 57 2 8. 8 [](/posts/how-to-create-a-custom-toggle-switch-using-css-xz-ti5lrn "How to create a custom Toggle Switch using CSS") Article DEV · 5y How to create a custom Toggle Switch using CSS I've learned this technique by Marcus Burnette. You can check his Codepen, there are more such interesting pens. Let's create a simple customized toggle switch using CSS. Initially when I was trying to create this, I founded it very confusing because many developers have created this button but none of explain it how is this working. 49 1 9. 9 [](/posts/how-i-built-rozbnb-with-next-js-tailwind-css-styled-components-stripe-and-auth0--ul5jzmua3 "How I built Rozbnb 🛌 with Next.js , Tailwind CSS, Styled Components , Stripe💰 and Auth0 🔒") Article Hashnode · 5y How I built Rozbnb 🛌 with Next.js , Tailwind CSS, Styled Components , Stripe💰 and Auth0 🔒 A few weeks ago a great youtuber called Sonny Sangha hosted a 5day challenge of cloning Airbnb. After strategizing I planned to make that clone into a better website with authentication , animation , better UI and so on. The Motivation: I was exploring Auth0 for my website's Authentication so I came across this amazing Hackathon which was hosted by Auth0 and @Hashnode. 43 4 10. 10 [](/posts/we-had-90-unused-css-because-everybody-was-afraid-to-touch-the-old-stuff--ty-jituya "“We had 90% unused CSS because everybody was afraid to touch the old stuff”") Article CSS-Tricks · 5y “We had 90% unused CSS because everybody was afraid to touch the old stuff” At PayPal, 90% of CSS was unused because people were afraid to touch it. That’s one of the reasons I sometimes like component-based-styling solutions. Because nobody is afraid of the styles anymore — they are tightly coupled to what they are styling. I’m excited that “scoped styles” are making a bit of a comeback in standards discussions. 33 11. 11 [](/posts/css-grid-tooling-in-devtools-hpn9b9yi4 "CSS Grid tooling in DevTools") Article Chrome Developers · 5y CSS Grid tooling in DevTools Chrome DevTools and Edge DevTools are adding CSS Grid tooling. The tooling was a joint effort between Chrome and Edge teams. It will help developers achieve better responsive design without complicated alignment hacks or JavaScript-assisted layout. There are three main features for CSS Grid:Grid-specific, persistent overlay that helps with dimensional and ordering information Badges in the DOM Tree that highlight CSS Grid containers and toggle Grid overlays. 28 12. 12 [](/posts/building-a-cool-front-end-thing-generator-5egh-tu3g "Building a Cool Front End Thing Generator") Article CSS-Tricks · 5y Building a Cool Front End Thing Generator Animated CSS Gradient Generator is a tool for creating animated background gradients in pure CSS. This article is a basic Create Next App project. We are going to create a React component to describe an animated gradient. We want to provide these settings as data throughout our little app using a higher-order component, context/SettingsContext. 26 13. 13 [](/posts/css-accent-color-2enrmb7nh "CSS accent-color") Article web.dev · 5y CSS accent-color CSS accent-color brings your brand color to built-in HTML form inputs with one line of code. Currently, only four elements will tint via the accent- color property: checkbox, radio, range and progress. The spec does not limit the application of accent- Color to the four elements shown in this article. 21 14. 14 [](/posts/6-css-shorthand-properties-to-improve-your-web-application-0qukm7njm "6 CSS Shorthand properties to improve your web application") Article DEV · 5y 6 CSS Shorthand properties to improve your web application CSS is a language used to describe how a web page should look like. With CSS we can set position, colors, fonts, layout of each element in an HTML page. In this blog post I will share some tips to improve your CSS code and the performance of your web app. 20 1 15. 15 [](/posts/html-email-template-for-beginners-tcvc-zt0h "HTML Email Template for beginners") Article Hashnode · 5y HTML Email Template for beginners The knowledge I have gained over the past 6-10 months, to create beautiful and compatible HTML email for my company’s campaigns. You can refer the below link for all the CSS properties which you can use while creating any email template. There is one easiest way to create an email template by using table HTML element. 18 16. 16 [](/posts/learn-css-units-em-rem-vh-and-vw-with-code-examples--we6nd2g3y "Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨") Article freeCodeCamp · 5y Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨ Learn CSS Units – Em, Rem, VH, and VW with Code Examples. Learn CSS Units - Em,rem,VH,VW with code examples. Learn more about how to use CSS Units in your code with the CSSUnit tool. Use the CSS Unit tool to help you learn more about CSS Units. 16 1 17. 17 [](/posts/web-performance-optimization--ii-eacitijh "Web Performance Optimization- II") Article DEV · 5y Web Performance Optimization- II Images are the leading cause of the slow web. We have two conflicting needs here: we want to post high quality images online, but also want our websites and apps to be performant. The more complex the image, the larger the data set necessary to display it. The image format or file type you choose for your images will have a direct impact on performance. 15 18. 18 [](/posts/refactoring-css-optimizing-size-and-performance-part-3-smashing-magazine-j-pfaklfc "Refactoring CSS: Optimizing Size And Performance (Part 3) — Smashing Magazine") Article Smashing Magazine · 5y Refactoring CSS: Optimizing Size And Performance (Part 3) — Smashing Magazine Refactored codebase should result in similar or improved performance and improved codebase health. There are many optimization techniques we can apply to tackle potential file size and performance issues. We’re going to cover CSS optimization strategies that can optimize CSS file size, loading times, and render performance. 14 19. 19 [](/posts/create-an-infinite-scrolling-animation-with-css--0bpvtsmhp "Create an infinite scrolling animation with CSS 💥") Article Hashnode · 5y Create an infinite scrolling animation with CSS 💥 You might have seen an infinite autoscrolling animation on a website with some logos. This scrolling animation looks really good, so let's see how we can do that.Creating a container with 6 divs inside it is as simple as this. Adding simple styles to the container and giving the divs a width, height, and different colors. 14 20. 20 [](/posts/building-a-switch-component-z2cfvomdh "Building a switch component") Article web.dev · 5y Building a switch component A switch functions similar to a checkbox but explicitly represents on and off states. It has the advantage of not needing CSS or JavaScript to be fully functional and accessible. Loading CSS brings support for right-to-left languages, verticality, animation and more. The top-level class, .gui-switch contains custom properties used throughout the component children. 14 1 21. 21 [](/posts/google-chrome-devtool-web-comics-1-css-overview-qabdt9e8h "Google Chrome DevTool: Web Comics #1 CSS-Overview") Article gitconnected · 5y Google Chrome DevTool: Web Comics #1 CSS-Overview You can see the Colors used in the Webpage and even you can click a color to see where it is implemented in the HTML part. The entire report is broken into different segments like Colors, Font info, Unused declarations, and Media queries with a single click. It helps the front-enders and designers to get the information in no time. 14 2 22. 22 [](/posts/react-styling-css-vs-jss-icpxkg8p3 "React Styling: CSS vs. JSS") Article JavaScript in Plain English · 5y React Styling: CSS vs. JSS Nitzan Mousan shares a practical, effective, crystal clear way to style and theme your react components, using Material-UI. He uses makeStyles, a JavaScript object-like syntax, where the keys are class names and the values are css rules in camel case. 12 1 23. 23 [](/posts/the-web-animations-api-vs-css--s87qvvrj "The Web Animations API vs. CSS") Article LogRocket · 5y The Web Animations API vs. CSS Web animations are a popular addition to web design, leading to the growth of many JavaScript animation libraries including Framer Motion and GreenSock. Many developers still choose to create web animations from scratch using either CSS transitions, CSS animations, or the JavaScript Web Animations API (WAAPI) In this tutorial, we’ll cover these three methods in-depth, learning how to use each through a relevant demo. 12 24. 24 [](/posts/building-a-real-time-todo-app-with-drayman-mongodb-and-tailwind-css-ifmypchad "Building a real-time Todo app with Drayman, MongoDB and Tailwind CSS") Article ITNEXT · 5y Building a real-time Todo app with Drayman, MongoDB and Tailwind CSS In this guide we will build a real-time Todo app with Drayman, MongoDB and Tailwind CSS. We will use Change Stream functionality of MongoDB to make our Todo list work in real time. This way if something gets changed in the database, our application will reflect these changes. 10 2 25. 25 [](/posts/what-is-a-full-stack-developer-back-end-front-end-full-stack-engineer-tucj-pmxq "What is a Full Stack Developer? Back End + Front End = Full Stack Engineer") Article freeCodeCamp · 5y What is a Full Stack Developer? Back End + Front End = Full Stack Engineer 10 [See all CSS archives](/tags/css/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/css/best-of/2021/08#page","url":"https://daily.dev/tags/css/best-of/2021/08","name":"Best CSS Posts — August 2021","description":"The most upvoted CSS posts from August 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/css/best-of/2021/08#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/6-awesome-css-layout-generators-n3cv8p4-m","name":"🔥 6 Awesome CSS Layout Generators"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/skills-required-to-be-a-full-stack-developer-a-checklist--djilbesu","name":"Skills required to be a full stack developer: a checklist"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/new-in-chrome-93-taqoz3wio","name":"New in Chrome 93"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/you-want-enabling-css-selectors-not-disabling-ones-5ydaz-l2o","name":"You want enabling CSS selectors, not disabling ones"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/from-zero-to-web-developer-hwtqizguv","name":"From zero to Web developer"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-decide-css-units-for-responsive-website--ck19a-r8q","name":"How to decide CSS units for responsive website?"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/flexbox-or-grid-key-strategies-for-choosing-the-best-option-suvpz0jst","name":"Flexbox or Grid? Key Strategies for Choosing the Best Option"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/how-to-create-a-custom-toggle-switch-using-css-xz-ti5lrn","name":"How to create a custom Toggle Switch using CSS"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/how-i-built-rozbnb-with-next-js-tailwind-css-styled-components-stripe-and-auth0--ul5jzmua3","name":"How I built Rozbnb 🛌 with Next.js , Tailwind CSS, Styled Components , Stripe💰 and Auth0 🔒"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/we-had-90-unused-css-because-everybody-was-afraid-to-touch-the-old-stuff--ty-jituya","name":"“We had 90% unused CSS because everybody was afraid to touch the old stuff”"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/css-grid-tooling-in-devtools-hpn9b9yi4","name":"CSS Grid tooling in DevTools"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/building-a-cool-front-end-thing-generator-5egh-tu3g","name":"Building a Cool Front End Thing Generator"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/css-accent-color-2enrmb7nh","name":"CSS accent-color"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/6-css-shorthand-properties-to-improve-your-web-application-0qukm7njm","name":"6 CSS Shorthand properties to improve your web application"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/html-email-template-for-beginners-tcvc-zt0h","name":"HTML Email Template for beginners"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/learn-css-units-em-rem-vh-and-vw-with-code-examples--we6nd2g3y","name":"Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/web-performance-optimization--ii-eacitijh","name":"Web Performance Optimization- II"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/refactoring-css-optimizing-size-and-performance-part-3-smashing-magazine-j-pfaklfc","name":"Refactoring CSS: Optimizing Size And Performance (Part 3) — Smashing Magazine"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/create-an-infinite-scrolling-animation-with-css--0bpvtsmhp","name":"Create an infinite scrolling animation with CSS 💥"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/building-a-switch-component-z2cfvomdh","name":"Building a switch component"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/google-chrome-devtool-web-comics-1-css-overview-qabdt9e8h","name":"Google Chrome DevTool: Web Comics #1 CSS-Overview"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/react-styling-css-vs-jss-icpxkg8p3","name":"React Styling: CSS vs. JSS"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/the-web-animations-api-vs-css--s87qvvrj","name":"The Web Animations API vs. CSS"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/building-a-real-time-todo-app-with-drayman-mongodb-and-tailwind-css-ifmypchad","name":"Building a real-time Todo app with Drayman, MongoDB and Tailwind CSS"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/what-is-a-full-stack-developer-back-end-front-end-full-stack-engineer-tucj-pmxq","name":"What is a Full Stack Developer? Back End + Front End = Full Stack Engineer"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"CSS","item":"https://daily.dev/tags/css"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/css/best-of"},{"@type":"ListItem","position":5,"name":"August 2021"}]}]} ```