Mastering these 7 Basics CSS Skills will make you a Frontend Wizard 🧙✨
Tags: webdev, programming, css, beginners
Published: 2022-09-11 06:25:06

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

![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/empdakyr9y1ric1m72mv.jpg)

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

![media-queries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp4b23qn41qo5iixm48m.png)

> Image Author: Seobility ([Media Queries](https://www.seobility.net/en/wiki/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-elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ux4whfwzszl5fznvfme.jpg)

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

{% codepen https://codepen.io/ruppysuppy/pen/YzpBLBM %}

Want to make your site stand out? **Animations** is a great tool to achieve just that!

It can be as simple as adding the `transition` property to an **element** used in combination with **pseudo-classes** or something more complex like creating a **custom animation** using `keyframes`.

## 5. Join the Dark Side by adding Shadows

![dark-side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebaq9mdgtk0srb1huuh7.jpg)

**Shadow** is a great way to add **depth** to your website. **CSS** allows you to add various types of shadows, namely **box-shadow**, **text-shadow**, and **drop-shadow**. Knowing when to use it will get you a long way.

**NOTE**: **Shadows** don't necessarily have to be **dark**.

## 6. Position Elements

![position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/indwshxa7q4f3pnxdg32.jpg)

How to **position** elements is crucial for **frontend development** after you get over the beginner stage. By not knowing how **static**, **relative**, **absolute**, **fixed**, and **sticky** elements are positioned, you would end up limiting yourself drastically.

## 7. Smooth out the Jagged Edges

[![border-radius](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w4rue25ot1c45a4uits.png)](https://dribbble.com/shots/19243436-BORDER-RADIUS-UI-Components)

The `border-radius` property allows the developer to create a **polished UI**. It's a great tool to pocket in your arsenal if you aim to develop highly **professional UX**.

## Further Reads

1. [Flex vs Grid](https://dev.to/ruppysuppy/grid-vs-flex-where-to-use-which-3g0p)
2. [CSS Pseudo-classes](https://dev.to/ruppysuppy/master-useful-css-pseudo-classes-lh2)
3. [CSS Pseudo-elements](https://dev.to/ruppysuppy/css-decoded-some-useful-pseudo-elements-1ah5)
4. [CSS decoded ::before and ::after](https://dev.to/ruppysuppy/css-decoded-before-and-after-1o56)
5. [Dynamic Loader using CSS](https://dev.to/ruppysuppy/create-dynamic-spinners-only-using-css-34dh)
6. How to become an incredible [UI](https://dev.to/ruppysuppy/5-ui-tips-to-become-a-better-front-end-developer-1ae1) and [UX](https://dev.to/ruppysuppy/5-ux-tips-to-become-a-better-front-end-developer-46if) developer
7. [5 UX Tricks You Must Know in 2022](https://dev.to/ruppysuppy/5-ux-tricks-you-must-know-in-2022-5b2l)

**That's all folks! 🎉**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am  a Digital Nomad and occasionally travel. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.