Amazing CSS Tips & Tricks

#css #webdev #beginners

Wanna know how to use modern CSS features to write clean code by using some stunning CSS tricks? You have just landed at the right place!

A Tip For Beginners

Here's a quick tip for those who have just started to learn CSS - DON'T use Bootstrap or Tailwind! No doubt they are great tools to get a nice-looking UI quickly but using these will mean that you'll be missing on CSS fundamentals. I have personally done this mistake & oh boy did I regret it.

Grid is Great

Unlike flexbox which only deals with individual columns & rows, Grid allows you to think about the big picture. When you set an element to display: grid; you can then define its children as a bunch of columns & rows. Have a look at the amount of code we have eliminated by using grid instead of flexbox in the image below.
Click here to read more about CSS Grid Layout

CSS Debugging

We often use Chrome developer tools for debugging our code (including CSS) but you'll be surprised to know that Firefox developer tools are much superior especially when it comes to CSS. On inspecting an element in Firefox, you'll have a break-down of the box-model like you have in Chrome but you can also edit properties on it directly, for instance changing the padding or margin and it will also give you a breakdown of all the properties that are influencing the box-model. Not only this, Firefox also provides really nice graphics for flex & grid layouts.

Image Filters

It's fun to play around with images in CSS, but did you know that we can apply amazing effects to those images. In fact CSS allows using lots of filters on the images to help developers play with the graphics without changing it in Photoshop. Let’s have a look at some of the filters:

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

I have much more to write and share with you guys but it's getting a little long, so comment below if you want part 2 of Amazing CSS Tips & Tricks.

You can follow me on Twitter and LinkedIn.