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
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
- Flex vs Grid
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS decoded ::before and ::after
- Dynamic Loader using CSS
- How to become an incredible UI and UX developer
- 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
Follow me for weekly new tidbits on the domain of tech!
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.