I'm back to studying programming and I've started with the good old HTML and CSS. After finishing the course - and learning a bit of Tailwind - I'm tackling some Frontend Mentor challenges to put into practice everything I've learned as I continue my studies.
Frontend Mentor challenges help you improve your coding skills by building realistic projects.
The challenges are pretty straight forward, you have to replicate the page or element as closely as possible as the initial image or Figma layout - when provided.
Use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout for the section depending on their device's screen size
Want some support on the challenge? Join the Frontend Mentor community and ask questions in the #help channel.
I've also decided to build some of the challenges with Tailwind CSS - including this one - since that's new to me. I know it's not the usual way to use Tailwind but it should be a good training.
The most challenging part was the fact that I'm used to think Desktop first and worry about Mobile later but Tailwind is Mobile first, so I had to rewire my brain to think backwards.
All in all, I think it got pretty close to the original design - except the mouse interactions, as I was testing out some Tailwind transitions.
To think I used to hate these HTML and CSS challenges - back then when I first learned programming I just wanted to practice JavasScript - but here I am.
- HTML
- CSS
- Flexbox
- Grid
- Tailwind CSS
This project is licensed under the MIT License - see the LICENSE.md file for details