Three Column design using Mobile first approach, HTML, CSS & Emmet

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Muaaz08 👋🏻

  I have some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main>. This will fix the accessibility issues. Just, don't forget to generate a new repot once you fix the issues.
  • Next, instead of separately giving border-radius to each card, you can do the following:

  .container {
      border-radius: 10px;
      overflow: hidden;
  }
  

  • Also, for the car icons, add aria-hidden="true”, because they are for decoration only. You can read more about aria-hidden here.
  • I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.
  • Lastly, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 you did a great job for the second project, nicely done. Cheers 👾

  Marked as helpful

  0

  ---

  

  Muaaz08•20

  @Muaaz08Posted about 3 years ago

  @kens-visuals Thank you for the detailed review. Regenerated the report and accessibility issues have been fixed.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @Muaaz08 you're welcome 😇

  0
• 

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  hello my dear friend ♥ you did good and clean here an answer for your question :

  • https://dev.to/manarabdelkarim/why-do-developers-choose-mobile-first-approach-4ckn

  0

  ---

  

  Muaaz08•20

  @Muaaz08Posted about 3 years ago

  @CyrusKabir Thank you

  0