Submitted 24 days ago

QR Code Component - First submission

Arifin• 20

@vynhart

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?

Nothing in particular, I'm a backend engineer that just started my journey learning about front end development.

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

I'm not sure about the HTML semantic that I should use.
For the card weight, I take the value from figma file (320px). Is that correct?
I don't know the correct font-size for the title in the card. I just randomly picking the font-size (1.5em for h1) to try to match the design as close as possible. What's the correct way of doing this?

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

I need to know what HTML semantic that I should use in certain situation.
How to choose the size of the font correctly?

Community feedback

ManoharDevangam07• 10

@ManoharDevangam07

Posted 24 days ago

It’s impressive to see you tackle HTML and CSS with such enthusiasm. Your effort in translating the design into a functional component is a great step forward in your learning journey.

Suggestions for Improvement:

HTML Semantics: Focus on using elements that describe the content accurately (e.g., <article> for individual items, <nav> for navigation links). Font Sizing: Utilize design specifications or tools to align font sizes with the design. Using relative units can help maintain responsiveness and scalability.

Arifin• 20

@vynhart

Posted 24 days ago

@ManoharDevangam07 I see that you're using AI to give feedback into my code hahaha

ManoharDevangam07• 10

@ManoharDevangam07

Posted 24 days ago

@vynhart haha, The output looks great though

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