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 !
Components are reusable pieces of code.
Here are some well known components that you can reproduce :
- Inputs (date-picker, drag&drop, radio, textarea ...)
- Button (indeed, this is the most common component !)
- Menu (navbar, vertical, horizontal, animated, etc ...)
- 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 ! 🔥
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)
Simply put :
- A navbar
- A home page
- some sections (services, contact, pricing, about us...)
- It needs to be perfectly responsive
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!).
Take care, and see you next time. ✒️