Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-first solution using CSS Flexbox

@khalifa-ltaief

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

i used flex for the first time

What challenges did you encounter, and how did you overcome them?

i didn't know how flex work exactly but i started to know it

What specific areas of your project would you like help with?

nothing

Community feedback

Myk Escala 600

@Mikoyzskie

Posted

  • Nice work!
  • Try using figma next time to analyze the design. It helps me try to process all the elements one by one
  • Maybe use libraries or frameworks to familiarize with modern techs out there
  • Hope this helps
1
perterHUAN 250

@perterHUAN

Posted

  1. There is a significant discrepancy between the solution and design specifications:

    • The content is not horizontally and vertically centered within the viewport.
    • The radius of the photos is excessively large, and there is too much space around them.
    • The font sizes are incorrect; the titles should be larger.
    • The style of the box-shadow is inappropriate.
  2. The HTML lacks semantic structure:

    • An abundance of div and span elements are used without clear semantic meaning.
    • Alt attributes are missing from the images.
    • Titles should be represented with h2 tags rather than spans.
    • Line breaks should be achieved naturally through text wrapping instead of using <br> tags.
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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