Built with:
- Semantic HTML5 markup ✨
- Flexbox 🤸♂️
- CSS Grid 🌐
Built with:
Aligning the cards on the desktop resolution...
Well done, I did this challenge not pixel perfect, and make some mistakes; ur overlay is too good.
First time using srcset
on images and it took some back and forth to get it working, on the mobile design the image also seems to behave a little differently on chrome and firefox, i didn't manage to figure out why.
I suppose the only thing i'm wondering about is the srcset
, should i have nested the img
in a picture
element instead, or am i going at it completely wrong?
I'm quite proud of the final result. I think it adapts very well to small, intermediate and large devices. Code decently structured and trying to fulfill all the requirements of the challenge.
What challenges did you encounter, and how did you overcome them?The most difficult thing was reusing CSS classes (mainly for lists) and structuring the code well. I also had a bit of trouble making it responsive for large devices.
What specific areas of your project would you like help with?Mainly I would like to receive advice on how to better structure the code and implement good practices regarding layout with HTML and the reuse of CSS code with classes.
I improved my use of flexbox for responsive design and feel more confident creating layouts faster. I'm also improving at using working from the Figma design files and trying to get the final design as close to the brief as possible.
Next time I would try to get the design 100% the same as the figma file, and also use semantic HTML for completely.
What challenges did you encounter, and how did you overcome them?I had trouble with the yellow background on the tag, and getting it's exact sizing correct, in the end I just went with adding more padding.
I don't really know to be honest.
What challenges did you encounter, and how did you overcome them?Initially the QR code image wasn't visible due to a small typo in the source path.