Fylo Data Storage Component - Mobile-First / CSS Grid

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-ElbaldPosted 10 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 use divs where you must use buttons. 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 the aria-hidden attribute.

  Marked as helpful

  2

  ---

  

  Abdulrahman Zaki•330

  @aazs-eduPosted 10 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 El_Bald•1,020

  @Ahmed-ElbaldPosted 10 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 helpful

  1