DEV Community

Cover image for 5 ways to skyrocket your CSS level
Ustariz Enzo
Ustariz Enzo

Posted on β€’ Edited on

36 10

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)

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/c/TheWebSchool

Take care, and see you next time. βœ’οΈ

πŸ‘‹ While you are here

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (3)

Collapse
 
duboisdeben profile image
duboisDeben β€’

I knew one way to level UP my CSS
=>

Le Designer Du Web

Collapse
 
ziratsu profile image
Ustariz Enzo β€’ β€’ Edited

πŸš€πŸš€πŸš€!

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay