Skip to content
Submitted 7 months ago

VS Code

P
Destiny•130
@DetDet91
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm proud to have completed this project without quitting. Since I'm new to HTML and CSS, it can be frustrating not to be able to code immediately. I would take my time, set up the main things in HTML, and then move on to CSS to polish it up.

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

I couldn't get my live URL to work in GitHub. After two hours of research, I needed to delete some subfiles and move my files to the main.

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

When it comes to HTML, it is essential to determine when to use classes. I know i need to do more reading and handon experience.

Code

Please log in to post a comment

Log in

Community feedback

  • Luthfi•110
    @kankaGate

    Hi DetDet91, good job on finishing the challenge. Allow me to give you my feedback as follows:

    1. you can add flex-direction: column on body selector, so the attribution class content will go down

    2. you set max-width on the container(.card), but also set the max-width on the content, which is making unnecessary white space on the left and right side, just set the width on the container, and set the content width to 100% will do, no need to set max-width on the content

    3. i'd advice on using semantic html more, it'll make your day easier later on, start with one main and put your card class there. read here for more reading about semantic HTML it would be wise to minimize on using <div> and <span> tags as they don’t directly convey meaning

    4. it is best practice to use class selector than using element name or id, when your code grow bigger it would be easier to maintain the code, unless you really need to use id selector

    5. for consistancy, use the same measurement unit througout the code, in your code, there are some using px and percentage, better use rem or em for the sake of responsiveness for example use this preset to easily convert px to rem

    html {
    /* font-size: 10px; */
    /* 10px / 16px = 0.625 = 62.5% */
    /* Percentage of user's browser font-size setting */
    font-size: 62.5%;
}

    from the above we can convert px to rem easily:

    100px = 10rem

    75px = 7.5rem

    and so on

    cheers!

    Marked as helpful

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