Best of CSS — 2022
- 1
- 2
Changelog·4y
Free Open Source Tailwind CSS Components
HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, ecommerce store and much more. HyperUI is an open source collection of Tailwind components.
- 3
Medium·4y
Fantastic CSS border animation
In this article we will use CSS to create a variety of wonderful border effects. The most commonly used one is solid , dashed which appears in the picture above dashed. CSS border also supports none , hidden , dotted , double , groove , ridge , inset , and outset other styles.
- 4
CSS-Tricks·4y
The 60 Hottest Front-end Tools of 2021 | CSS-Tricks
The Web Tools Weekly newsletter archives have been compiled into a list of the 60 most popular front-end tools of the past year. I’m sure there are at least one or two listed here that you can start using in your projects today. Some of these tools are super-practical, while others probably only made this list due to curiosity.
- 5
Josh W Comeau·3y
An Interactive Guide to Flexbox
Flexbox is a remarkably powerful layout mode. It uses fluid principles to create a layout that flows seamlessly. When we truly understand how it works, we can build dynamic layouts that respond automatically. We'll build an intuition for how the Flexbox algorithm works, by learning about each of these properties.
- 6
- 7
- 8
freeCodeCamp·4y
Harvard CS50 – Free Computer Science University Course
Harvard CS50 is one of the most popular beginner computer science courses in the world. The course teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web programming.
- 9
Community Picks·3y
Super Useful CSS Resources 🌈
A collection of 70 hand-picked, web-based tools which are actually useful. Each will generate pure CSS without the need for JS or any external libraries. Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials) The collection includes Property Generators - Animations - Backgrounds.
- 10
Making a fast website is SUPER EASY
For a website whose goal is to convert customers by selling goods or services, the website should be attractive to look at. Images take up a huge part of the website's total size. As of August 2022, images made up on average 45% on desktop and 44% on mobile of a page’s total weight. Optimizing the images can therefore result in big and easy wins.
- 11
Hacker News·4y
Yes, I can connect to a DB in CSS
A new set of APIs give your browser the power to control CSS via its own Object Model in Javascript. This means that you can make custom CSS styles, add custom properties, and so on. The CSS Paint Worklet5 allows you to 'paint' on an element, and have the browser treat it as an image in CSS.
- 12
- 13
Dev Genius·4y
The CSS Hack You Need To Know!
The Attr() selector allows our CSS style sheet code to communicate with our HTML. The selector allows us to read in attribute values specific to the targeted HTML tag or element. A common practice implementation for this type of feature would be to use an additional span within an element. The span value is updated as required.
- 14
Hashnode·4y
Better scrolling through modern CSS
scrollbars are a very mundane thing that every website and every app has. They don't get much love from developers, but we should be paying a little more attention to them. Let's look at some of the things we can do in 2022 to improve the scrolling experience.
- 15
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.
- 16
- 17
- 18
Product Hunt·3y
uiverse.io - Universe of UI; Hundreds of Open Source UI elements
All elements are open source and free to use. We make it easy to find and customize the perfect element for your project. We also offer hundreds of community-made CSS and HTML UI elements like buttons, inputs, checkboxes and cards.
- 19
Pointer·4y
bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS
50 Projects in 50 Days - HTML/CSS and JavaScript and JavaScript. This is the main repository for all of the projects in the course. We are only accepting pull requests and looking at issues for bug fixes so that the code stays inline. All of these projects are part of the course and are available for download.
- 20
CSS {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.
- 21
- 22
Build 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.
This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build.
- 23
asayer·4y
11 Authentication Mistakes and how to fix them
When authenticating a form on your web application, you must be careful not to display just one error message. Displaying a specific error message is dangerous because it could let an attacker use an automated trial-and-error method to determine a user’s username and password. Injection attacks, memory leaks, and compromised systems can occur if data provided in form input is not properly checked. All of the libraries I recommend for validation.
- 24
How to Center a Div with CSS – 10 Different Ways
In this article, you'll learn 10 different ways to center a div. We will explore how to center divs using the CSS position property, CSS Flexbox, and CSS Grid. After reading this whole article, I am confident that you will start centering divs like a pro.
- 25
Torque·4y
CSS Best Practices: 16 Ways to Improve Your CSS Skills Quickly
By adhering to basic guidelines for writing CSS, you can make sure you produce clean, legible, and easily supportable code. Make your code readable and make it more comfortable to understand, maintain, and work with. If there is an existing style guide, stick with that.
