Skip to content
Submitted 25 days ago

QR-code card using css flexbox

#pure-css
bochranaamane•40
@bochranaamane
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Have the ability to not follow a tutoriel but find the solution by yourself is a huge thing for me

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

it was the widths and heights and units

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

minimize the code and
how to use widths and height properties properly. if there's some issues on css or html let me know

Community feedback

  • Chamu•13,340
    @ChamuMutezvaPosted 25 days ago

    Hi bochranaamane

    Congratulations for taking your first challenge. Here are a few suggestions:

    HTML

    • In this project you will need the main landmark element as the main container. Make the div with class box-card the main element. Find out more about Landmark elements and their importance on MDN. The other landmark elements includes the header and footer elements
    • make use of semantic elements always. In a site , you would expect the site/component to have a title/heading. This component should have a heading element. I would use an h2 heading element

    CSS

    • the best practice is to have a separate CSS file that should be linked in the head of the HTML file
    • a reset stylesheet should be used before making your changes, find out more about Modern reset stylesheets
    • font sizes should be written as rem, px values are not good for responsive design
    Marked as helpful
    0
    bochranaamane•40
    @bochranaamanePosted 22 days ago

    @ChamuMutezva Thank you so much for your time That's very helpful, I'll make sure to correct all those mistakes.

    0

Please log in to post a comment

Log in with GitHub

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