Fylo Data Storage Component - Mobile-First / CSS Grid
Design comparison
Solution retrospective
- Feedback would be appreciated, I will mark it as helpful. 🙏
Community feedback
- @Ahmed-ElbaldPosted 11 months ago
Alright,
I just want you to know one thing: Before you try to implement the design, consider the markup. Before you write your HTML, think about what each element represents.
In my opinion, the whole design consists of two things: Information about my storage and some buttons to import and export this data. Thus you should consider the following when writing your markup:
-
In your
.controls-box
, you can't usediv
s where you must usebutton
s. Why? because they are controls, they have functionality:// THIS IS WRONG <div class="document"> <img src="images/icon-document.svg" alt="" aria-hidden="true"> </div> // DO THIS <button type="button"> <img src="images/icon-document.svg" alt="Save your data"> </button>
-
It would be great if you could present storage information using a description list (
dl
). I know It would be hard to match that with the design. But I would do that under any cost using the.visually-hidden
class and thearia-hidden
attribute.
Marked as helpful2@aazs-eduPosted 11 months ago@Ahmed-Elbald, Hello again, my friend Ahmed.
Firstly, I want to congratulate you on reaching 1000 points!
You are right. Actually, it's 2:40 am now, and what woke me up at this time is that I realized I had to change it to a button 😁.
Then, I noticed that your comment also supports the same idea.
Thank you again.
0@Ahmed-ElbaldPosted 11 months ago@aazs-edu
Thank you very much. I hope you reach your first 1000 very soon. I really like your passion and believe in what you are doing.
Good luck 🥰
Marked as helpful1 -
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