Tag: Css
-
CSS masonry & CSS grid
Posted on October 22, 2024, Level intermediate Resource Length long
An approach for creating masonry layouts in vanilla CSS is one of those "holy grail" aspirations. I actually tend to plop masonry and the classic "Holy Grail" layout in the same general era of web design. They're different types of layouts, of course, but the Holy Grail was a done deal when we got CSS Grid. By Geoff Graham.
Tags web-development learning css frontend
-
CSS length units
Posted on June 28, 2024, Level intermediate Resource Length medium
A comprehensive guide covering nine types of lengths that CSS uses to size elements in terms of dimensions, space, time, and even sound. By Geoff Graham.
Tags app-development css web-development frontend
-
CSS Media Queries for accessibility: Optimizing digital product design for every user
Posted on March 16, 2024, Level beginner Resource Length medium
There's plenty to consider when it comes to web accessibility. And while we should strive for universal design that is inclusive for as many users as possible from the start, there are often cases where one size doesn't fit all. By Li Zilles.
Tags ux css frontend web-development miscellaneous app-development
-
Building components for consumption, not complexity
Posted on December 16, 2023, Level beginner Resource Length long
Design systems are on the tip of every designer's tongue, but the narrative in the industry mainly focuses on why you need a design system and its importance rather than the reality of endless maintenance and internal politics. By Luis Ouriach.
Tags ux css learning web-development frontend
-
Build a blog with Next.js, Tailwind CSS, and Contentful
Posted on October 12, 2023, Level beginner Resource Length medium
One of the powerful features provided by Next.js is that we can write server components. This allows us to use static rendering, which means that all the HTML pages will be pre-rendered at build time. The front-facing site will not send any requests to the backend (in this case, Contentful). The content API will be queried only when we run the next build command and generate the static files. By Antonio Cosentino.
Tags css learning web-development app-development react
-
Site-speed topography remapped
Posted on August 20, 2023, Level beginner Resource Length short
Updated version of Site-Speed Topography technique for getting broad view of an entire site's performance from just a handful of key URLs and some readily available metrics. By Harry Roberts.
Tags css frontend web-development ux app-development
-
Frontend performance checklist
Posted on April 5, 2023, Level beginner Resource Length long
In the speed-obsessed world of today, better performance comes with serious business gains. This frontend performance checklist is a cumulative list of items that we at Crystallize found important when creating a Superfast web application that is Superfast. By Dhairya Dwivedi, Håkon Gullord Krogh.
Tags performance css frontend analytics web-development javascript browsers
-
Design and implement Jira board with drag and drop feature using React and Tailwind CSS
Posted on March 30, 2023, Level intermediate Resource Length medium
In this article, we are going to learn how to design Jira Board like UI using React with Tailwind CSS and how to manage its state using Context API. Also we are going to implement our own custom Drag and Drop feature by implementing reusable custom hooks. By Altamash Ali.
Tags css ux web-development app-development frontend react
-
From Zero to Hero: Learning CSS Grid made easy
Posted on March 28, 2023, Level beginner Resource Length short
In the world of web design, CSS Grid has emerged as a powerful tool for creating complex layouts with ease. This layout system enables designers to create a grid of rows and columns and place elements anywhere on the grid. By Code Home.
Tags css web-development learning frontend
-
How to build interactive pie charts using only CSS and HTML
Posted on January 15, 2023, Level beginner Resource Length medium
Looking for an easy guide on how to make a pie chart with CSS and HTML? Then you've come to the right place! By Hafsah Emekoma.
Tags css web-development frameworks frontend
-
CSS-in-JS for React: Linaria vs. Styled components
Posted on October 12, 2022, Level intermediate Resource Length medium
When building a web application with React, one of the challenges apart from implementing the main logic of the application is styling and choosing the appropriate styling solutions for your application. By Osah Peter.
Tags frontend app-development css react javascript web-development
-
A guide to CSS modules with React
Posted on August 20, 2022, Level beginner Resource Length long
There are many different ways to provide styling for React components, such as importing plain CSS, using styled components, JS-in-CSS or CSS Modules. These all have various advantages and disadvantages. In this article I go through some considerations when using CSS Modules. Specifically I am interested in looking at this in a framework agnostic way. By Max Rohde.
Tags web-development css frontend