Best of CSS β€” November 2020

  1. 1
    Article
    Avatar of devtoDEVΒ·6y

    10 Inspiring Ideas for Your Next Front-End Project

    CodePen is an outstanding platform that has been co-created by Chris Coyier (founder of css-tricks.com) CodePen is a social development environment where developers and engineers can collaborate on projects, showcase their work, share things with the community, and prototype new ideas. I have chosen 10 great examples that have been published on CodePenio and are publicly accessible.

  2. 2
    Article
    Avatar of hashnodeHashnodeΒ·6y

    7 Websites To Find Front End Projects For Your Portfolio

  3. 3
    Article
    Avatar of gcgitconnectedΒ·6y

    em, rem, and px

    Pixels, EM’S, and REM’s are popular in the CSS world. They are often confused and mistaken with one another. em, rem, and px Ritchie Pulikottil will help you understand these three knights of the internet.

  4. 4
    Article
    Avatar of hashnodeHashnodeΒ·5y

    Web Developer Roadmap for 2021

  5. 5
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Improve your CSS with these 5 principles

    Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We're going to look at the five simple and very effective principles that will take your CSS to the next level. Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?

  6. 6
    Article
    Avatar of hashnodeHashnodeΒ·6y

    4 Games to Level Up Your CSS Skills

  7. 7
    Article
    Avatar of phProduct HuntΒ·6y

    Tailwind CSS v2.0 β€” Rapidly build modern websites without ever leaving your HTML

    A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90. Can be composed to build any design, directly in your markup. Embed this code into your website and use it to create your own designs. Share this post with your friends.

  8. 8
    Article
    Avatar of swlhThe StartupΒ·6y

    Frontend Web Development: A Complete Guide.

    Front-end web development is responsible for the structure, beauty, and brain of the website. It is the part of the site that interacts with the user; ensuring that when the users open the website, the information is visible to them in a format that is easy to read and understand. Front-End Web Development: A Quick Overview.

  9. 9
    Article
    Avatar of devtoDEVΒ·5y

    The Perfect Dark Mode

    The dreaded flicker of light mode is a problem that is not limited to static/hybrid websites but extends to pretty much any website that uses JavaScript to "hydrate" its components. We need to find a way to be able to run some code and apply the appropriate background-color (and by extension, the theme) before the entire page has loaded.

  10. 10
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Next.js Starter With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

    Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily. In this article, I will show you how to use the starter template and deploy it with Vercel. I will also be connecting a Postgres database which I will create on Heroku.

  11. 11
    Article
    Avatar of devtoDEVΒ·6y

    Master CSS Grid by Building 5 Layouts in 17 Minutes

  12. 12
    Article
    Avatar of devtoDEVΒ·6y

    Make Your CSS Dynamic πŸ•Ί With Styled Components

    The point of dynamic styling is saving time and writing less CSS. styled-components helps you write better CSS in React. It does so by allowing you to wrap all your component's styles into a neat, style-only component. Dynamic styling allows us to focus on important stuff like adding borders to buttons and stuff like that.

  13. 13
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Why CSS :focus-within is amazing

    The :focus-within pseudo selector is a pseudo-selector, like :before or :after. This is not a :focus selector, which will highlight when you focus on an element. In our case, we'll be focusing on forms (I see what you did there)

  14. 14
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Responsive Snakes! And what they can teach you about CSS 🐍

    "If a snake was responsive..." is my favorite webdev meme. I love it, it is so silly, but at the same time makes us think a little deeper about responsive design and CSS techniques. Let's talk about four responsive snake implementations and see how they were made. There's a CodeSandbox for you to play with at the end.

  15. 15
    Article
    Avatar of hashnodeHashnodeΒ·6y

    10 Developers You NEED to Follow on Twitter

    I've compiled an unordered list of essential developers I think you should be following on Twitter. Each has their own speciality and topics, but all of them provide content that will benefit you. If you're a seasoned developer or someone just starting your journey, surrounding yourself with a community helps you learn.

  16. 16
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Bootstrap or TailwindCSS: How to decide a framework for your next project?

    There is no right or wrong way here. If you are already using Bootstrap, you know the importance and how much time it can save as a developer. Developers with little or no CSS knowledge is loving TailwindCSS because by just remembering few utility classes, they can do many awesome things without even touching CSS file (which is their worst nightmare)

  17. 17
    Article
    Avatar of hashnodeHashnodeΒ·6y

    How to easily understand Flexbox CSS - (Part 1)

    Flexbox CSS is a one dimensional layout model/method used for laying out items in a row or column fashion. Utilising flexbox allows you to create fully responsive, mobile first layouts. In the next part we'll look at some more specific properties we can use to justify-content to space out flex items inside our flex containers.

  18. 18
    Article
    Avatar of devtoDEVΒ·5y

    What Can You Do with Tailwind 2?

    Tailwind CSS is a productivity-boosting CSS framework used by millions. The new 2.0 version will be released on November 18th, 2020. Tailwind is composed of small single-purpose utility classes which pull from a standard set of values. The breadth of utility classes allows us to write 95-100% of our CSS using just utilities.

  19. 19
    Article
    Avatar of hashnodeHashnodeΒ·5y

    Setting up Tailwind CSS v2.0 with Create React App

  20. 20
    Article
    Avatar of css_tricksCSS-TricksΒ·6y

    Additive Animations in CSS

    The Web Animations API allows us to mix up this behavior through the introduction of the composite option. If we change the second animation to add a composite: 'add' option, we tell it to add the value of this animation to whatever the current state of that property is. Properties that accept any number-based valu (such as lengths, percentages, or raw numbers) will add the numbers together.

  21. 21
    Article
    Avatar of hashnodeHashnodeΒ·6y

    A quick introduction to SASS/SCSS

    Sass stands for Syntantically Awesome Stylesheets. It’s a CSS preprocessor. It allows us to create variables, nested rules, mixins, functions, and do mathematical calculations. Every CSS file is a Sass file so you can take your .css file contents and put it in Sass.

  22. 22
    Article
    Avatar of css_tricksCSS-TricksΒ·6y

    A Complete Guide to CSS Gradients

    There are three types of gradients: linear, radial, and conic. The syntax is is declared on either the background (shorthand) or background-image property. To make the gradient go from left-to-right, we pass an additional parameter at the beginning of the linear- gradient() function.

  23. 23
    Article
    Avatar of phProduct HuntΒ·6y

    Cirrus v0.6 β€” A component centric CSS framework for fast prototyping. πŸ’Ž

    Cirrus is a modular, responsive, and component centric SCSS framework. It is aimed at bringing beautiful, hassle-free styling. Cirrus works right away with minimal styling. From there, add components and tweak using utility classes to make it truly your own.

  24. 24
    Article
    Avatar of phProduct HuntΒ·5y

    CSS Scan Pro 2.0 β€” ✨ A re-imagined Devtools for web design

    Hover over any element, and get its CSS, colors, assets, animations, font, and dimensions, instantly. Copy, export, or refine it with an intuitive CSS editor, without writing code. Embed in your site to get the looks of your favorite websites.

  25. 25
    Article
    Avatar of hashnodeHashnodeΒ·6y

    Become a Full Stack Developer by building these amazing applications

    There are very few job opportunities for Just HTML or Just CSS or Just JavaScript developers. Most of the companies are looking for developers who know how to design front-end, backend, and also HTML and CSS. If you're a React/Angular Developer, that's not enough nowadays. You need to learn Node.js also. In this article, I have listed out some of the articles which will help you to become a full-stack developer.