Skip to content
Submitted over 2 years ago

QR Code page with just HTML and CSS

Daniel•30
@Aflora22
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

There many things that I forgot just by doing this project like how to center a div, It's okay to forgot somethings like that when I still begginer?

I learned a lot with this too, like flexbox that's a bit new for me and box-shadow... I think that my shadow version is not perfect like the default version.

The last question is... Yea I can remember somethings about CSS or HTML but sometimes my mind went blank. My English is not that good but I hope you can understand a bit. :)

Community feedback

  • Abdul•8,540
    @SamadeenPosted over 2 years ago

    Hey!! Cheers 🥂 on completing this challenge.. .

    Here are my suggestions..

    • You should use <main class="container"> instead of <div class="container">.

    This should fix most of your accessibility issues

    . Regardless you did amazing... hope you find this useful... Happy coding!!!

    Marked as helpful
    1
    Daniel•30
    @Aflora22Posted over 2 years ago

    @Samadeen that's new for me, I'll try that, thanks. <3

    0
  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Hehehehe I use a translator for people, it's hard for me to speak English, but there we are.

    Personally you have a very nice design, it is very normal to forget the CSS rules when you start, it happened to me and I didn't even learn GRID until I went through several projects. Experience makes it faster, you have more knowledge retention and at the end you can give accurate feedback so don't worry we all go through that, but you realize that you improve comparing your current performance when you have seen all the way through.

    By the way I recommend you to use rgba() and hlsa() to place shadow, they are functions for the colors, the last value 'a' defines the opacity and for example you will see that if you put this value to the shadow it looks nicer: box-shadow: 0 2px 15px -5px rgba(0,0,0,0,0.2).

    In case you can update your solution with the changes that you were given above and you can take advantage to update the screenshot and also the report so that you don't get errors.

    Good luck :D!

    Marked as helpful
    0
    Daniel•30
    @Aflora22Posted over 2 years ago

    @Sdann26 I didn't use rgba and hlsa because I don't know much about, I still studying 😞 but thanks for giving me a tip and I don't speak English too so no problem here ❤️ you write quite well

    1
    Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    @Aflora22 Don't worry, that's what the frontend mentor community is here for, to support us and give us ideas. You will learn a lot just keep practicing and studying.

    1
    Daniel•30
    @Aflora22Posted over 2 years ago

    @Sdann26 thanks a lot 🥰 I'll keep practicing

    0
  • Milos Djordjevic•990
    @milosshomyPosted over 2 years ago

    Hey, congratulations on completing this challenge.

    Try to use min-height instead of height, that way it will be responsive.

    Happy coding.

    1
    Daniel•30
    @Aflora22Posted over 2 years ago

    @milosshomy Thanks! More things to study, css looks infinite

    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