Submitted 5 months ago

QR Code

Mackenzie• 10

@mackbaird

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

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 am most proud of being able to look at an image of a website and being able to replicate it as closely as possible. I am used to being able to inspect live websites, so building based off a non-interactive image was challenging but fun!

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

I do feel that there are sections I didn't quite nail, such as the paragraph alignment. And I do think there were potentially easier ways to code certain things, because I do have some repetition in CSS for text styling. I tried my best to use the padding and margin to align the text as close to the given image as possible.

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

I think what I'd like help with is making this suitable for mobile. I'm getting the hand of desktop but I would greatly appreciate some feedback and help with how to make sure a project still looks right on mobile.

Community feedback

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted 5 months ago

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

I have a suggestion regarding your code that I believe will be of great interest to you.

QR CODE NEEDS TO BE SCANNED :

Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

The alt attribute should explain the purpose of the image.

E.g. alt="QR code to frontendmentor.io"

<img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

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

Happy coding!

Marked as helpful

Shivian• 40

@Andre-DM

Posted 5 months ago

Hi there! I have a couple of tips that I hope you will find helpful! Let's start:

Always try to use Semantic HTML, such as <header>, <main>, <article>, because it increases the accessibility of your page, for example: Instead of <div id=“root”> you could use <main class=“container”> or <main id=“container”> (I do not recommend using the word “root” for classes or ids, because in CSS it can be confused with the :root selector.) I'll leave you a link if you want to learn more: W3School - Semantic HTML
To avoid repetition in CSS, especially with text styles, you can include rules such as font-family, font-size, or in the case of your specific code, even font-optical-sizing in the body selector.
Regarding feedback on mobile, I can recommend that you can start working on the project directly in mobile mode and then switch to desktop via media queries. CSS properties such as min-width, max-width, or min-height and max-height, will help you manage the various elements on smaller screens, preventing them from getting too tight or too large. Perhaps this link can help you: CSS Tricks for Responsive Design

Anyway, your project is great! I really hope these tips were helpful to you, since I'm still learning too and these concepts were very useful to me!

Keep up the good work!

Marked as helpful

Please log in to post a comment

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