Design comparison
Solution retrospective
I open the design files on Figma to get accurate measurements this time.
Then I used https://tachyons.io/ for the css classes and then I used the minimum amunt of custom css classes that I created in my style.css stylesheet. I will continue using Tachyons since this leads to much cleaner code and it is also easy to use.
What challenges did you encounter, and how did you overcome them?Started using Tachyons css classes.
What specific areas of your project would you like help with?I would like feedback about semantic html use and acessibility.
Community feedback
- @huyphan2210Posted about 1 month ago
Hi, @yiorgosbagakis
I reviewed your solution and have a few thoughts to share:
- I recently addressed a similar issue in the same challenge for @Shankarganesh-B. You can check out my response there, but I’d like to dive deeper into your specific case.
- I believe Frontend Mentor provides feedback on certain aspects of your HTML when you submit your solution. It may be flagging that the
body
should include elements likeheader
,main
, orfooter
. In your case, yourarticle
could serve as themain
element, and the.attribution
could be better suited as afooter
. - I noticed the image is wrapped in a
div
without a class. You might consider using a<picture>
element instead for more semantic flexibility. - For wrapping the word "Learning," it could be more appropriate to use a
span
rather than adiv
since it’s likely an inline element. - Nice work using the
time
tag! I hadn’t thought of that before. However, since it seems to be alabel
for theh1
heading, it might make sense to wrap thetime
element in alabel
. I encourage you to look into the relationship betweenlabel
and heading elements likeh1
andh2
. - Lastly, I recommend focusing on mastering pure CSS before diving into any CSS libraries (like Tachyons). This will give you a solid foundation and help you understand how libraries build on CSS concepts.
Remember, these are just suggestions and not absolute rules. There might be other approaches that work just as well or even better.
Hope this helps!
0@yiorgosbagakisPosted about 1 month agoThanks a lot @huyphan2210 your comments are very useful and appreciated!
1 - @Shankarganesh-BPosted about 1 month ago
Would appreciate if someone could help me with optimizing my codes for better readability.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord