Best of CSSAugust 2021

  1. 1
    Article
    Avatar of hashnodeHashnode·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.

  2. 2
    Article
    Avatar of devtoDEV·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:

  3. 3
    Article
    Avatar of chromeChrome 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.

  4. 4
    Article
    Avatar of css_tricksCSS-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.

  5. 5
    Article
    Avatar of hashnodeHashnode·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.

  6. 6
    Article
    Avatar of devtoDEV·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.

  7. 7
    Article
    Avatar of sitepointSitePoint·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.

  8. 8
    Article
    Avatar of devtoDEV·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.

  9. 9
    Article
    Avatar of hashnodeHashnode·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.

  10. 10
    Article
    Avatar of css_tricksCSS-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.

  11. 11
    Article
    Avatar of chromeChrome 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.

  12. 12
    Article
    Avatar of css_tricksCSS-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.

  13. 13
    Article
    Avatar of webweb.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.

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

  15. 15
    Article
    Avatar of hashnodeHashnode·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.

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

  17. 17
    Article
    Avatar of devtoDEV·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.

  18. 18
    Article
    Avatar of smashingSmashing 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.

  19. 19
    Article
    Avatar of hashnodeHashnode·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.

  20. 20
    Article
    Avatar of webweb.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.

  21. 21
    Article
    Avatar of gcgitconnected·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.

  22. 22
    Article
    Avatar of jsPlainEnglishJavaScript 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.

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

  24. 24
    Article
    Avatar of itnextITNEXT·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.

  25. 25
    Article
    Avatar of freecodecampfreeCodeCamp·5y

    What is a Full Stack Developer? Back End + Front End = Full Stack Engineer