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. ✒️
Top comments (3)
I knew one way to level UP my CSS
=>
Le Designer Du Web
🚀🚀🚀!
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.