Submitted 23 days ago

QR Code Component using HTML and CSS only.

Max Sakuma• 20

@msakuma-dev

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'm glad I was able to learn how to reproduce the design in a properly time manner. It's probably not the best semantic, but I'll improve on this and also I would like to add more ARIA on it.

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

The major challenge was to find the right border radius for the image.

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

It would be great to have some feedback on how to improve the BEM methodology, clean up the CSS to avoid redundancy and also how to send the .attribute text all the way to the bottom of the page.

Community feedback

Boris• 2,870

@mkboris

Posted 22 days ago

Great work @msakuma-dev, here are a few things to review

Here's how you could improve the BEM naming The .content class could be more descriptive, you could name it .qr-card, qr-card__image instead of just img, qr-card__title instead of just h1, qr-card__description instead of just p

To properly center the card, add min-height: 100vh; and justify-content: center; on the body.
Avoid setting fixed widths and height on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Update the .content width to use max-width and should be defined in rem. Also, remove the height completely
Use a separate file for your CSS as it improves maintainability.
Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

Hope this helps, Good luck

Marked as helpful

Max Sakuma• 20

@msakuma-dev

Posted 22 days ago

@mkboris , thank you so much for your insightful review! I'll try to improve the code with your suggestions after reading the articles you shared.

Max Sakuma• 20

@msakuma-dev

Posted 18 days ago

@mkboris , how do you treat the border-radius units? rem as well?

Teodor Jenkler• 3,720

@TedJenkler

Posted 20 days ago

Hi @msakuma-dev,

Nice project! Here are a few additional recommendations:

HTML and Body Styling: Consider setting height: 100vh; width: 100vw; on your <html> and <body> elements and applying margin: 0; to remove default spacing. Also, use * { box-sizing: border-box; } for consistency in styling across your project.

OG Meta Tags: I strongly recommend using OG (Open Graph) meta tags to improve SEO and the shareability of your site. Proper OG tags can significantly impact how your site appears when shared on social media and can make a difference in search engine ranking, potentially even affecting whether your site appears in search results.

ARIA Labels: When semantic HTML elements aren't applicable, make sure to add aria-label attributes to your <div> elements. This practice enhances accessibility and contributes positively to SEO by helping screen readers understand the content and purpose of these elements.

Footer Positioning and Text Size: Consider positioning your footer absolutely at the bottom of the page using position: absolute; bottom: 0;. This will ensure it stays at the bottom regardless of the page content length. Additionally, increasing the text size in the footer can improve readability, especially on desktop screens.

Centering the Card: For centering your card, you can use Flexbox. Apply display: flex; justify-content: center; align-items: center; to the parent container (such as <body>) to easily center the card both horizontally and vertically. (In ur case this should be solved when fixing the height and width on body)

Keep up the great work!

Best, Teodor

Marked as helpful

Max Sakuma• 20

@msakuma-dev

Posted 19 days ago

@TedJenkler , thanks for reviewing my code! I really appreciate your comments and suggestions.

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