Sign in

Mateusz Hadryś
I write about web development tips & news. Follow me on twitter for more: twitter.com/HadrysMateusz

A simple technique for making eye-catching websites

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 won’t work.

But gradient text can be achieved in CSS, it just requires a few extra…


Gradients are making a comeback, make sure you know how to use them

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.

What this article is about

This article aims to explain both the syntax and concepts behind CSS gradients. Topics covered include:

  • Linear & Radial gradient syntax
  • What are color stops
  • Setting the direction of linear gradients
  • How CSS angles work
  • Changing the size, shape & position of radial gradients

But first, let’s get one thing out of the way…

Gradients are Images in CSS

For this reason, we…


Replace 8 properties and 8 lines of CSS with just 1

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 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:

Neat, huh?

In this article I want to show you how this shorthand works, and the rules you need to follow for it to work.

If you’re not familiar with all of the properties above, please take a…


Quick, but Complete Introduction to CSS Background Properties

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 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.

🎨 Color

Property:
Default Value:

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.

You…


How to get over your fear of the font shorthand to replace 6 lines of CSS with 1

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.

What does it do?

The font shorthand allows you to set almost all font-related properties with a single line of CSS.

Including:

  • — this one is not used as often, and won’t be discussed in this article

Required properties

Out of these, only and


Learn to style list markers using the new ::marker pseudo-element

Lists don’t have to be boring.

And with the new 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:

  • Built-in list styles
  • Changing the color of list markers
  • Emoji list bullets
  • CSS counters
  • Custom image bullets
  • Fully custom list markers using

Built-In Styles

Let’s begin by changing the look of list markers using the built-in styles. We do so, by using the…


Out of all 90+ selectors, you only need to remember these 20

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 type selector

— Selects all elements of a given node type.

Class selector

— Selects all elements with a specific .

ID selector

— Selects an element with a specific .

Universal selector

— Selects all elements. Its power comes from combining it with other selectors.

Attribute selector

Selects elements…


Make your life easier and enjoy programming, with these extensions

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.

Prettier — Code formatter

by Prettier7.9 million installs


Find your new favorite programming font

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: and and can include special coding-related ligatures to for example make operators stand out.


Stop using string.split(‘’) — It’s dangerous 💀

How to get all characters in a string?

This question might sound simple at first, but in JavaScript nothing is ever what it seems. If you google “How to get all characters in a string” or “How to get an array of characters from string”, you will most likely find something like:

…and people arguing if you should use or the bracket notation.

However, these answers are usually pretty old and don’t take into account one important issue with these solutions…

🔥 Emoji ☠️

Or more generally: surrogate pairs. Most characters in javascript are encoded using 2 bytes, but that’s not…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store