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

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.

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

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.

Create Eye-catching 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.

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.

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.

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.