Sign in

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

A simple technique for making eye-catching websites

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

What this article is about

  • 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

Gradients are Images in CSS

Replace 8 properties and 8 lines of CSS with just 1

Quick, but Complete Introduction to CSS Background Properties

🎨 Color

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

What does it do?

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family
  • font-stretch — this one is not used as often, and won’t be discussed in this article

Required properties

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

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

Built-In Styles

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

Element type selector

Class selector

ID selector

Universal selector

Attribute selector

Make your life easier and enjoy programming, with these extensions

Prettier — Code formatter

Find your new favorite programming font

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

🔥 Emoji ☠️

Mateusz Hadryś

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