Grid Garden
A game for learning CSS grid layout
css
MUI - Material Design CSS Framework
MUI is a lightweight CSS framework that follows Google's Material Design guidelines. MUI is designed from the ground up to be fast, small and developer-friendly.
Learn to style HTML using CSS - Learn web development | MDN
Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and…
This Ain’t Disney: A practical guide to CSS transitions and animations
Oh, animation… we want to get it right so badly, don’t we? I mean, does anybody really enjoys a stiff, snappy UI? Can anyone admit they’re…
Water.css
A drop-in collection of CSS styles to make simple websites like this just a little bit nicer.
Dynamically Filtering Layouts with Isotope & Bootstrap – Speckyboy
We show you how to use Isotope.js to create dynamic layouts in the Bootstrap framework, and how to dynamically filter the elements.
15 awesome CSS animation libraries you need to know.
Transitions from one CSS style configuration to another can be animated using CSS animations. A style...
5 UX Tricks You Must Know in 2022
Do you have what it takes to be an outstanding UX Developer in 2022? Add these tricks to your arsenal...
CSS Fingerprint
CSS Object Model (CSSOM) - Web APIs | MDN
The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.
Packery
Gapless, draggable grid layouts
BEM Naming Cheat Sheet by 9elements
A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.
Free Masonry Website Templates (2024) - HTML Templates
Free Masonry HTML Website Templates are the best choice to kickstart your next masonry style website or blog on the internet.
Using Rel="preconnect" To Establish Network Connections Early And Increase Performance | CSS-Tricks
Milica Mihajlija:
Modern CSS Explained For Dinosaurs
CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer. It’s certainly easy…
CSS Reference
CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property syntax (e.g., --primary-color…
JS: The Right Way
A quick reference to best practices for writing JavaScript -- links to code patterns and tutorials from around the web
Gulp: A Web Developer's Secret Weapon for Maximizing Site Speed | Toptal®
When dealing with web-based projects that run in the production environment, being able to build and deploy changes quickly is a top priority. However, repetitive processes such as building front-end assets, when not automated, can be prone to critical errors. In this article…
Isotope
Filter & sort magical layouts
Top 6 Best CSS Frameworks for 2019
Learn about the best CSS frameworks for learning how to design a website in 2019. List of Top 5 web UI design frameworks with responsive CSS functionality.
16 Best CSS Frameworks/Libraries for Front-End Developers | Geekflare
I once heard a front-end developer joke, "The NASA has landed robots on Mars, and here we're still struggling to center-align our divs!" And it makes me
CSS Layout cookbook - CSS: Cascading Style Sheets | MDN
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout…
The CSS background-image property as an anti-pattern
The CSS background-image property allowed us to do some amazing things, but in most cases, it's time to leave it behind.
The Stack
A composable CSS layout primitive.
Sticky Footer — Solved by Flexbox — Cleaner, hack-free CSS
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
CSS Flexbox Layout Guide | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns…
https://www.webslake.com/article/customizing-design-of-google-custom-search-box-using-css/
The Complete CSS Tags Reference - CSS Cheatsheet
If you are using CSS for frontend web development, you may be interested in this article. The gist of...
Minification of CSS and JavaScript
Minification is the process of deleting unneeded or redundant data from a resource without altering...
Sticky Definition Lists
I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this
300 Bootstrap UI Components and Blocks
The UI components are the building blocks for user interfaces. They can be anything from navigation...
10 Super easy CSS Shapes for beginners
Hello there, In this post we will be talking about creating basic shapes in HTML & CSS. Many...
HTML Line Spacing: The Fine Line Between Good and Bad UX Design
HTML line spacing matters in UX design. Read all you need to know about line height and how it can help your UX.
HTML Data List element - HTML: HyperText Markup Language | MDN
The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.
Details & Summary tags: HTML's best kept secret
and tags are among of the most useful tags that HTML gives us. I'm...
Improving The Performance Of An Online Store (Case Study)
Getting a good performance score from Google is hard for any website — but doing so for an online store is even harder. We achieved green scores — even several for mobile. Here is how we did it.
15 Advanced CSS Techniques To Master In 2021
CSS is used to describe how HTML elements should be presented on the web page. CSS can not only...
30 ? Awesome CSS Animation Resources
Here is the list of awesome CSS animation resources that will help you to animate components quickly...
CSS Flexbox in 5 Minutes
What is CSS Flexbox CSS Flexbox is a one-dimensional layout module that can be used to mak...
border-radius - CSS: Cascading Style Sheets | MDN
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
Two awesome card hover effects you never seen before.
1 I suggest you to view demo in full new window. Click on top right most button to vi...
Details on - Google Slides
Using for Menus and Dialogs is an Interesting Idea | CSS-Tricks
Using for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "
15 amazing CSS tips and tricks you should know
This article was originally published at: https://www.blog.duomly.com/12-css-tips-and-tricks-which-he...
12 Simple CSS Hover Effects
Here is the list of 12 simple beginner level CSS menu button hover animation, it use simple CSS anim...
My current HTML boilerplate - Manuel Matuzović
Every element I use for the basic structure of a HTML document, with explanations why.
10 Awesome CSS Resources
A list of few CSS resource that help me design the CSS code better. I will give you a brief intro to...
Create Awesome Product Card | UI Design | E-commerce Card | Using Only Html
Please do not forget to subscribe in my channel:
Product Card | Using Only Html5 & CSS3
