Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code Component

@kayleerivera

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I've been teaching myself CSS, so just getting through this one was an accomplishment. Next time, I think I'd start by drawing things out a little to get a better sense of the necessary structure.

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

I tried swapping between this solution, flexbox, and grids. I struggled getting things just right, and would like to try more challenges with flexboxes and grids going foward.

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

Tips on how Flex or Grids could have helped with this solution

Community feedback

@saularanguren

Posted

Greetings, your solution is really impressive, however, we can improve it, when you upload a local project from your machine to a repository server like github, it can only be one project

your repository

You are totally free to leave this code block, however, I advise you to delete it to have a cleaner project

<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="#">Kaylee R.</a>.
</div>
  • The css file must be named styles.css or style.css, not index.css
  • You can also delete these CSS code blocks or CSS rules
.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

.attribution {
  position: fixed;
  bottom: 0;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

If you correct these problems that I am telling you about, you will have a more organized, clean and professional project. Remember, these are tips that you can follow, happy coding.

Marked as helpful

1

@kayleerivera

Posted

@saularanguren Ahh, I thought github pages would only let you publish from the one main repo! Thanks to your feedback, and I found how to add from others, which will certainly keep my work more organized. Thanks!

1

@suraj-pradhan

Posted

Try to fix the width and height of the card

0

Please log in to post a comment

Log in with GitHub
Discord logo

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