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

Mobile-first solution using Flexbox QR CODE component

#accessibility

@Kolade1024

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


Please kindly take a look at my solution and give some feedbacks, advice or tips. I encountered some difficulties trying to make it responsive on different screen sizes but I'm not sure if I did a great job. Also any tips on best practices would be appreciated. Please feel free to share your thoughts and opinions as it will help improve my skills. Thanks

Community feedback

@0xabdulkhalid

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

  • Looks like the <footer"> element has been placed bottom using margin. So let me explain, How you can place the component at bottom with using fixed positioning for footer
  • Luckily you already used Flex layout of css to center the component, So you just want to add fixed position for <footer> element to place it in bottom of the page
.attribution {
   position: fixed;
   bottom: 1em;
}
  • Now remove these styles, after removing you can able to see the changes
.attribution {
  margin-top: 15px;
}
  • Now your component has been properly at bottom

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

1

@Kolade1024

Posted

This is awesome..Thanks for this@0xAbdulKhalid

0

@0xabdulkhalid

Posted

@Kolade1024 Glad you found it helpful ! 🤠

1
gianella 40

@gianellin

Posted

I like your solution for this challenge. Clean HTML too! It is good practice for SEO to have one H1 tag per page (which you do have!). And since there is one, you do not really need to create a class or id in this instance . For style purposes, you can do : h1{...}.

Great job!

1

@Kolade1024

Posted

Thanks a lot for your feedback @gianellin. Since it's just one h1 tag, no need for class or I'd. Noted

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