@elaineleung
Posted
Hi Warren, well done on your first challenge, and welcome also to Frontend Mentor 🙂
This is excellent work, and your solution looks really good; I like how everything is structured and written, just very clean in general, and so it was hard to find something to suggest. The only comment I have is, if you hover over the <picture> node element in your browser's inspector, you may see a bit of a spacing under the image, and I believe because picture may also be an inline element like img, which means it will need a display:block to get rid of the space. I see that you have some reset/base CSS rules for img and other media sources; you may want to add picture in there as well.
Great job Warren!
Marked as helpful
@warrenlee
Posted
Hi @elaineleung thanks for the feedback!
And thanks for the tip on the picture tag will check that out on my side.
I also did a bit of snooping on your solution and was interested to see your approach. I saw you sometimes separate your classes with a / is that something from Cube CSS you mentioned in your solution?
@elaineleung
Posted
@warrenlee Hey Warren, yes, the slash is just what I use for separating classes, which comes from Andy Bell's CUBE CSS approach, although he uses square brackets. Kevin Powell has a video series recently where he coded up a FEM challenge using CUBE CSS also, and he uses the upright slash. I'm still a noob in using it though 😅
I haven't gotten around to learning Tailwind yet since I'm still very much into writing everything out with CSS, but just looking at your code and end product I felt you probably have a good level of proficiency in it!
@warrenlee
Posted
@elaineleung I see! The class notation is readable and clean! Will try this out sometime.
Yes I have been using Tailwind for over 3 years! I use to use Twitter Bootstrap, but Tailwind is a game changer because you can customize on the fly and treeshakes the CSS file to only leave in the styles that you actually use.
