DEV Community

Cover image for Mastering these 7 Basics CSS Skills will make you a Frontend Wizard ๐Ÿง™โœจ
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

Mastering these 7 Basics CSS Skills will make you a Frontend Wizard ๐Ÿง™โœจ

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

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


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


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


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
  2. CSS Pseudo-classes
  3. CSS Pseudo-elements
  4. CSS decoded ::before and ::after
  5. Dynamic Loader using CSS
  6. How to become an incredible UI and UX developer
  7. 5 UX Tricks You Must Know in 2022

That's all folks! ๐ŸŽ‰

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

I am a Digital Nomad and occasionally travel. Follow me on Instagram to check out what I am up to.

Follow my blogs for Weekly new Tidbits on Dev


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
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

Top comments (15)

johongirr profile image

I say knowing Box Model as the number 1 contributor to be top knotch developer

miguelpalazzo profile image
Miguel Palazzo

This is the way.

vishwastyagi profile image
Vishwas Tyagi

In the beginning, I thought that I can't design good websites but knowing right tools and with practice it becomes easy.

devangtomar profile image
Devang Tomar

That was a nice read! Liked, bookmarked and followed, keep the good work! ๐Ÿ™Œ

sriramanam profile image
Raman Jha

Thnx for reminding master these css tools in order to be a great css user.

mezieb profile image
Okoro chimezie bright

Thanks for sharing

roshangeorge97 profile image
Roshan George

loved it thankyou for sharing!

troy5890 profile image
Troy Harris

Excellent read and great examples to keep in mind for CSS. Thank you for the Post! I'll be adding this to the resource list

devangtomar profile image
Devang Tomar

Thanks for sharing ๐Ÿ™Œ

aviavinav profile image
Avi Avinav

Awesome one!

albert_madeit profile image

Thank you

stevedev profile image
Stephen Gachoki

Thank you for this

vickysongdev profile image

Thank you for sharing god bless you

johongirr profile image

Here is the article What is Box Model?on Box Model which is forgotten to mention in this article. As it's a must to know for any web developer. You can't effectively use concepts taught in here without knowing Box Model

acode123 profile image

Never really understood CSS flexgrid or CSS grid.