Submitted 6 months ago

QR code component - semantic HTML, CSS

Smasheroonie•30

@Smasheroonie

A solution to the QR code component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Saul Gabriel Aranguren•330
@saularanguren
Posted 6 months 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! 👋

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