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

layout

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

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

dark-side

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

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

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

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

Collapse
 
johongirr profile image
Jaxongir

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

Collapse
 
miguelpalazzo profile image
Miguel Palazzo

This is the way.

Collapse
 
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.

Collapse
 
devangtomar profile image
Devang Tomar

That was a nice read! Liked, bookmarked and followed, keep the good work! 🙌

Collapse
 
sriramanam profile image
Raman Jha

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

Collapse
 
mezieb profile image
Okoro chimezie bright

Thanks for sharing

Collapse
 
roshangeorge97 profile image
Roshan George

loved it thankyou for sharing!

Collapse
 
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

Collapse
 
devangtomar profile image
Devang Tomar

Thanks for sharing 🙌

Collapse
 
aviavinav profile image
Avi Avinav

Awesome one!

Collapse
 
albert_madeit profile image
Albert⚔️⛓️👨‍💻

Thank you

Collapse
 
stevedev profile image
Stephen Gachoki

Thank you for this

Collapse
 
vickysongdev profile image
Victor

Thank you for sharing god bless you

Collapse
 
johongirr profile image
Jaxongir

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

Collapse
 
acode123 profile image
acode123

Never really understood CSS flexgrid or CSS grid.