Member-only story

Mastering these 7 Basics CSS Skills will make you a Frontend Wizard 🧙✨

Tapajyoti Bose
4 min readSep 11, 2022

--

People treat Frontend development like some mythical beast that only a few can tame. But the truth is, it’s not that hard.

As the famous saying goes:

A master is not someone who practiced 10,000 different moves, he is someone who practiced 1 move 10,000 times.

You just need to master a few basic CSS skills and you’ll be a Frontend Wizard in no time.

1. Layout using Flexbox & Grid

Flexbox and Grid are two of the most effective CSS tools that you can use to create layouts, but might be a tad overwhelming at first. But once you get the hang of it, they will be your go-to tools.

2. Target Different Devices with Media Queries

Image Author: Seobility (Media Queries), License: CC BY-SA 4.0

You never know the device your users will be using to access your website. So it’s crucial to make sure that your website looks responsive on devices of all shapes and sizes.

Media Queries solves that exact problem by allowing the developer to specify styles for each and every screen size

3. Utilize Pseudo-classes & Pseudo-elements

Pseudo-classes and Pseudo-elements are CSS selectors that allow you to select elements when certain conditions have been met or specific parts of an element.

They can be utilized to add interactivity (updating a button style when hovered or pressed) and life (add quotes or style the first letter of a paragraph differently) to your website.

4. Create Eye-candy Animations

--

--

Tapajyoti Bose
Tapajyoti Bose

Written by Tapajyoti Bose

Top Rated Freelancer || Blogger || Cross-Platform App Developer || Web Developer || Open Source Contributor || FIRE Enthusiast

Responses (10)

Write a response