Submitted 3 months ago

QR Code Component Solution

Sunil• 130

@SunilParbhoo

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 completing my first FrontEnd Mentor challenge, which gave me experience utilizing Figma designs as a blueprint to develop the web page using semantic HTML and CSS3. Practice with Git and Github while developing the page was incredibly helpful as well.

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

Some challenges I faced regarding how to view exact details in the Figma design. However, this was simply due to it being my first time using Figma. I googled some resources to help me understand the lay of the land in Figma and was soon able to figure out how to view specific information needed to get dimensions and other information required to complete this task as accurate to the mock up as possible. Example of an issue would be trying to find the precise information for the subtle box-shadow in the Figma design.

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

Thank you for taking a look at my project! I welcome and appreciate any feedback regarding the organization of my code, along with any pointers or tips on how to improve my use of HTML syntax, CSS organization, or anything else that may come to mind.

Community feedback

Kalin Angelov• 360

@kalin-angelov

Posted 3 months ago

Hi there, if you want to improve your Html next time you can use section or article as container instead of div that way your Html will be more semantic but only if there is h tag like in your case the class ="card-bottom" can be structured like this:

<section class="card-bottom">
 <h1>Improve your front-end skills by building 
 projects</h1>
 <p>Scan the QR code to visit Frontend Mentor and take your 
 coding skills to the next level</p>
</section>

It's a little tip and I hope it will be useful, anyway congratulations on completing your first challenge and keep up the good work.

Marked as helpful

Sunil• 130

@SunilParbhoo

Posted 3 months ago

Hi Kalin, thank you so much for the constructive feedback! It is greatly appreciated. I will work to be more cognizant of using more semantic HTML markup on my next project. Cheers!

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