Josh W Comeau·4yUnderstanding 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.
CSS {IRL}·4yNew 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.
Web Tools Weekly·4yCSS Tools, Databases, JSON, SVG
There are a number of different ways to remove empty items from an array in JavaScript. To remove blank values alone is something more specific, but there are a few ways to do it. You can find all the above examples in this CodePen. Now on to this week's tools!
Hashnode·4yCSS Tricks to Create that Dark Futuristic Web3 Look
The Graph, ARCx Money, Buildspace, Rabbithole, Sushi Swap, and Rare Blocks all have some common designs that achieve this look. Here are some simple styles you can add to your app:Gradient Glowing effect Bright and white text over a dark background Semi transparent backgrounds A quick and easy transition on hover.
Hashnode·4yWriting Cleaner CSS using BEM Methodology
The Block Element Modifier methodology (abbreviated BEM) is a popular naming convention for HTML and CSS classes. It helps to keep your code organized and maintainable. BEM is mostly used when you have a project that has multiple pages, HTML selectors and a large code structure.
freeCodeCamp·4yCreate a Portfolio with React featuring Cool Animations
We just published a React tutorial that will teach you how to build a frontend portfolio with neat animations. Creating a portfolio website is a great way to improve your frontend development skills. Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5 hour watch).
LogRocket·4yThe best styling options for Next.js
Next.js is a JavaScript framework based on React. With its ability to offer static and server rendering, its popularity quickly shot up amongst developers. Next.js offers many ways to support CSS in your application. In this tutorial, you will discover a few ways to implement styling in your next.js application.
Lee Robinson·4yBuilding an Image Gallery with Next.js, Supabase, and Tailwind CSS – Lee Robinson
This tutorial shows you how to create a Next.js application that fetches content from a Postgres database. It also serves optimized, blur-up images with next/image and styles components with Tailwind CSS. I used this to create swag.vercel.app, which is a collection of tweets.
LogRocket·4yCreating animations with p5.js
P5.js is a JavaScript library used for creative coding. It is free and open-source because they believe software, and the tools to learn it, should be accessible to everyone. The advantage of using the JavaScript programming language is its widespread availability and support everywhere. There are many more benefits, including the following:
Beyond Code·4yCSS to Tailwind converter – Windy
Windy is a browser extension for Google Chrome and Firefox. It automatically converts any existing HTML elements into Tailwind CSS components. The process directly allows you to create new components and make adjustments where needed. As Windy does the heavy lifting, this reduces the time for the conversion by an order of magnitude.
Hashnode·4yCSS Logos: Netflix logo
The Netflix logo is built up by three sticks of the same size; however, the middle one casts a shadow and is skewed. We'll leverage borders for the two side pillars and pseudo-elements to make the skew stick + the rounded bottom section. The result is the following CodePen.
Hashnode·4y10 amazing games to learn CSS
There are some fun ways to learn this monster called CSS. Learning CSS can be quite a challenge, and you will have to get your hands dirty. This article will highlight ten amazing games you can play to learn CSS. Once you've mastered these games, you can enter some CSS challenges and battles.
This is Learning·4yTailwind vs Sass/SCSS: Structure and Consistency over Style and Comfort
Sass is an extension of CSS that provides features that seem to have been left out of CSS itself. Tailwind proposes a utility-first approach to CSS where styles pre-exist with classes. Both aim to increase the quality of life around writing CSS but their approach however differs.
Chrome Developers·4yNew in Chrome 99
Chrome 100 ships in late March (2022), and Firefox 100 ships shortly after in early May. The showPicker() method allows you to programmatically show a browser picker for elements like date, color, and datalist. CSS cascade layers gives you more control over your CSS, and helps to prevent style-specificity conflicts.
freeCodeCamp·4yCreate a Portfolio Website Using HTML, CSS, & JavaScript
In this course, you will improve your HTML, CSS and JavaScript skills by building a portfolio website. You can use what you learn in this course to show off your work history and design skills. Watch the full course below or on the freeCodeCamp.org YouTube channel (3-hour watch)
Hashnode·4yHow to create a custom scrollbar with CSS in 5 mins
Using CSS we can add personality to our site’s design with custom scrollbars. The code below will work with most modern browsers and operating systems. To create a custom scrollbar, we must first define the size of the scrollbar. We can style it by adding background colors, shadows, border radius, and borders.
CSS-Tricks·4yCSS-Tricks is joining DigitalOcean! | CSS-Tricks
DigitalOcean has acquired CSS-Tricks. The site and content is staying right here. DigitalOcean is committed to continuing to produce high-quality content on front-end development and tending to the trove of content that exists here already. You can build anything on DigitalOcean infrastructure.
DevDojo·4y19 Valuable GitHub Repositories for Beginner Developers 📚✨
GitHub is a great place to start your web development career. I've compiled a list of some of the best repositories I know. Categories include basics, courses, handbooks, best practices, projects, interviews, and resources. I wish I knew them when I started myself, so treat them as a valuable shortcut.
David Walsh·4yCSS :has
The :has pseudo-class allows styling a parent based on a relative CSS selector. Apple's Safari is the first browser to support :has , though we should see others quickly follow suit as it's part of the official CSS spec. Now that we have this new pseudo- class, do you think you'll use it much? Or will you stick to your current workarounds?
Codrops·4yCreating Native Web Components
Native web components have been here for a while, but they still seem like the new kid on the block. Today we will build some native web components with Minze, a simple JavaScript framework. We will be building several web components for a fictive Smart Home dashboard application.
Smashing Magazine·4yNew CSS Features In 2022 — Smashing Magazine
Container queries enable us to style an element depending on the size of its parent. This is a crucial difference from media queries, which only query the viewport. This has long been a problem for responsive design, as often we want a component to adapt to its context. Some are already starting to land in browsers, others are likely to gain widespread browser support in 2022.
Hashnode·4yCSS Logos: Hashnode logo
I wanted to start this CSS challenge a while ago by recreating some fantastic logos in CSS only. I'll be starting with Hashnode, as I re-created this recently for the CSS Hashnode challenge. The mask option is a powerful tool to mask out parts of your elements. The background shows through the logo, excellent!
Hashnode·4yHow I made Postman Clone using HTML, CSS & JavaScript
Postman is a popular application programming interface that makes it easy for developers to create, share, test and document APIs. In this tutorial, we are going to build a website using Postman and Bootstrap. For this project, we will use the Visual Studio Code.
Hashnode·4yCSS Interview Questions
Cascading Stylesheet Sheet is a stylesheet language that determines how the elements and content should look on the page. CSS is used to develop a consistent look and feel to the webpage. In today's world of tech, it's not easy to land a job while it's impossible to know answers to all questions that an interviewer may ask you.
Hashnode·4yCSS Vs CSS Modules
React allows you to create different components for your application. Since each component has its own stylesheet, you wouldn't want those stylesheets to override one another. The goal of CSS Modules is to protect overlapping class names. The best part is, it is actually simple and straightforward.