5 ways to skyrocket your CSS level

Hi everyone, Enzo here !

There is not much articles talking about getting better at CSS.

Meanwhile this is a crucial pillar of the Front-End, and you need to be good at CSS, there is no way around...

So let's solve this problem by showing you 5 ways to drastically improve your CSS skills !

1. Create components

Components are reusable pieces of code.
Here are some well known components that you can reproduce :

• Cards
• Inputs (date-picker, drag&drop, radio, textarea ...)
• Button (indeed, this is the most common component !)
• Breadcrumbs
• Menu (navbar, vertical, horizontal, animated, etc ...)
• Tooltips
• Pagination
• Sliders (you can do pure-CSS sliders, or just use a bit of JS to make it work)

Ok, I won't write down every types of component, but you can easyly find a list of the most common ones by googling : "list of ui components" for example.
Then try to replicate them using CSS ! 🔥

2. Try harder with Flexbox / CSS Grid

These two tools are really, really handy when it comes to place elements, you need to know them by heart, and especially the little rules that applies to them.

To train your Flex/Grid skills, you can build :

• A gallery, simple or destructured(or both!)
• A navbar
• A blog layout few lines of code
• Create amazing sections, like the flexbox animated panel.
• Everything needs to be responsive(indeed)

3. Build a one-page responsive website

Simply put :

• A navbar
• A home page
• some sections (services, contact, pricing, about us...)
• It needs to be perfectly responsive

4. Build a website with CSS Grid as its architecture

Here you need to build the entire structure of a website with CSS Grid, it can be a one-page or multi-pages, whatever.
You can surely use Flexbox inside of the(se) grid(s) !

5. Build a multi-pages website with SASS

All right, final boss, the goals here are to :

• Build a good folders structure with SASS.
• Use extend/placeholders.
• Use mixins smartly (with parameters).
• Create and use variables.

That's all folks !

You can find me on YouTube, talking about front development(warning, it's in French!).

YT : https://www.youtube.com/c/TheWebSchool

Take care, and see you next time. ✒️