Responsive design using HTML & CSS

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted 12 months ago

  Your site looks pretty good. A couple things I think you could add/modify is:

  • a main tag to wrap around your page contents (for accessbility purposes)
  • making the background of each result (Memory, Reaction, Verbal, Visual) match their assigned colour. This can be done by making the background of each one equal to the font-colour and then reducing the opacity using the opacity css property.

  Aside from that your code looks pretty organized. Nice work!!

  Marked as helpful

  1

  ---

  

  Kimo Spark•2,190

  @kimodev1990Posted 12 months ago

  @Zy871 Thanks for your feedback and really appreciate your encouragement words.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 12 months ago

  Hello there 👋. Good job on completing the challenge !

  • Your implementation of mobile-first design is great! However, to improve your code, it's recommended to avoid duplicating styles between the code outside and inside the media query. Utilize the media query to override and modify existing values without repeating the entire block.

    For example:

    .boxes {
      display: flex;
      justify-content: space-between;
      background-color: rgb(240, 234, 228);
      padding: 0 15px;
      border-radius: 10px;
      width: clamp(110px, 90vw, 300px);
    }
    
    @media (min-width: 376px) {
      .boxes {
        width: clamp(50px, 35vw, 250px);
      }
    }
    

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  Kimo Spark•2,190

  @kimodev1990Posted 12 months ago

  @MelvinAguilar Thanks for your remarks, Really appreciated man !

  0