It can be hard to make a website stand out.
So here’s a little trick that will improve any landing page or header: Use gradient text.
Just make sure to not overuse it. Gradients should never be used for longer text. Instead, use them to make headings or specific words more eye-catching.
What might surprise you — especially if you have prior experience with design tools — is that you can’t set a gradient as the text color directly. For example
color: linear-gradient(yellow, red) won’t work.
But gradient text can be achieved in CSS, it just requires a few extra…
Gradients are back.
They are bold, eye-catching, and playful. When used correctly they can breathe life into a drab and lifeless design.
In this article, I’ll show you how to create gradients in CSS, so you can make your websites stand out.
This article aims to explain both the syntax and concepts behind CSS gradients. Topics covered include:
But first, let’s get one thing out of the way…
For this reason, we…
Speed is essential in web development. Especially when prototyping.
If you’re not a 150WPM typing ninja, adding a background can be time consuming. And let’s be honest…
Who wants to type
background-*: value; 8 times?
That’s a lot of typing, and a lot of space. We can use the background shorthand to turn all of that into a single line:
In this article I want to show you how this shorthand works, and the rules you need to follow for it to work.
I remember when I first tried setting an image background in CSS.
What I thought would be a simple task took me down a rabbit hole of learning 8 different
background-* properties. It took me hours to figure out what they all did and how they interacted.
Now, I want to teach you everything you need to know about CSS background. In minutes instead of hours.
The most commonly used background property. It lets us change the color of an element’s background.
The color can be specified using rgb, hsl or hex notation.
Am I the only one who always thought the font shorthand was too confusing to use?
Well, I finally decided to start using it.
Now I want to share with you what I’ve learned. All the quirks, gotchas and use-cases.
It’s a very useful tool, if you’re willing to play by its rules.
The font shorthand allows you to set almost all font-related properties with a single line of CSS.
font-stretch— this one is not used as often, and won’t be discussed in this article
Out of these, only
Lists don’t have to be boring.
And with the new
::marker pseudo-element, making them interesting doesn't have to be painful either. The browser support for this pseudo-element used to be spotty, but with its addition in Chrome 86, it'll soon be universal.
I’m going to show you how to make your lists stand out.
We’re going to cover:
Let’s begin by changing the look of list markers using the built-in styles. We do so, by using the…
Don’t memorize all CSS Selectors.
Instead, learn just the ones you’ll actually use.
When I was first learning CSS, I tried memorizing all selectors and it was a huge waste of time. I don’t want you to make the same mistake, so I compiled a cheat sheet of the CSS selectors & pseudo-classes you’ll actually use.
element — Selects all elements of a given node type.
.classname — Selects all elements with a specific
#someid — Selects an element with a specific
* — Selects all elements. Its power comes from combining it with other selectors.
VS Code is not perfect.
It’s great, but not perfect. There are still many important things missing.
Luckily, one of VS Code’s biggest strengths is it’s community, that works tirelessly to contribute the missing bits of functionality themselves.
From better git integration, through spell checkers, to integrated SVG editors. Here is a list of some of the best, the community has to offer.
by Prettier • 7.9 million installs
You stare at your code a lot. You should like what you see.
If you’re using the default font in your code editor, you’re missing out.
Programming fonts make it easy to distinguish between similiar characters like:
iIlL1 and can include special coding-related ligatures to for example make operators stand out.
How to get all characters in a string?
…and people arguing if you should use
str.charAt() or the bracket notation.
However, these answers are usually pretty old and don’t take into account one important issue with these solutions…