Skip to content
Submitted about 1 month ago

QR code component - semantic HTML, CSS

Smasheroonie•30
@Smasheroonie
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?

This was a great opportunity to recap the basics of HTML and CSS. I had a lovely time using the vanilla layouts and rules, and I'm proud of the result! It's so interesting figuring out all the ways elements can be aligned and positioned. I'm particularly interested in learning as much as I can about Flexbox.

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

Starting a new project can be intimidating, but I impressed myself with how well it came together.

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

CSS is something that I would like to become a lot more comfortable with.

Community feedback

  • Saul Gabriel Aranguren•330
    @saularangurenPosted about 1 month ago

    Hello @Smasheroonie, your solution is really impressive. However, I am going to help you make it even more perfect. Firstly, you should remove that line of HTML that prints the information at the bottom. This is to make your solution as close as possible to the design.

    delete:

        <footer>
      <div id="attribution">
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
          >Frontend Mentor</a
        >. Coded by
        <a href="https://github.com/Smasheroonie">Luke Goncalves</a>.
      </div>
    </footer>

    Lastly, I recommend adding a box-shadow effect to the component. If you can see in the design, there is a shadow that creates the card. Try to replicate this in your code.

    Happy coding 😁, and I look forward to your next project! 👋

    2

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