DEV Community

loading...
Cover image for 5 ways to skyrocket your CSS level

5 ways to skyrocket your CSS level

ziratsu profile image Ustariz Enzo ・2 min read

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)

card ui component

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)

grid

 

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) !
CSS Grid layout

 

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.

sass folders structure

That's all folks !

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

YT : https://www.youtube.com/channel/UCMFbNXUkjSUJ6WC20tGTzJg
Twitter : https://twitter.com/Ledesignerduweb

Take care, and see you next time. ✒️

Discussion

pic
Editor guide
Collapse
duboisdeben profile image
duboisDeben

I knew one way to level UP my CSS
=>

Le Designer Du Web

Collapse
ziratsu profile image
Collapse
goldwomenacademy profile image
Fati Pereira

Hello Enzo,
Congratulations on your first article. I will say that good practices also start with the basics, of which CSS is a part. The booster shot doesn't hurt.