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


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 ☠️

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