Submitted 1 day ago

First QR code assignment, positioned with via Flexbox and padding.

Crystalis89•20

@Crystalis89

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

That I did it relatively quickly thanks to prior experience from The Odin Project. A confidence boost I need and a big part why I am taking a break from TOP here to get practice where I am weak.

Not much to do differently or learn for such a simple first project beyond getting used to Figma and the eternal value in getting more practice positioning.

Community feedback

Øystein Håberg•10,710
@Islandstone89Posted 1 day ago
HTML:

<main> holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a <div class="card"> inside of <main>.

The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

Remove role="contentinfo" on the <footer>, as it has that role by default.

Wrap the footer text in a <p>.

You don't need to wrap the image or the text in a <div>. I would have your HTML something like this:

<main> <div class="card"> <img src="images/image-qr-code.png" alt="QR code leading to the Frontend Mentor website." class="qr-image"> <h2 class="toptext">Improve your front-end skills by building projects</h2> <p class="bottomtext">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main> <footer> <p>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Matt</a></p>. </footer>

CSS:

It is best practice to write CSS in a separate file, often called style.css. Create one in the same folder as the index.html, and link to it in the <head>: <link rel="stylesheet" href="style.css">.

Including a CSS Reset at the top is good practice.

Set font-family on the body, and remove it elsewhere. The children will inherit the value. Also, rmember to specify a fallback font: font-family: 'Outfit',sans-serif;

I recommend adding a bit of padding, for example 16px, on the body, to ensure the card doesn't touch the edges on small screens.

On the body, change height to min-height: 100svh - this way, the content will not get cut off if it grows beneath the viewport. Also, add gap: 20px, to create space between the <main> and the <footer>.

Remove the margin on the card.

max-width on the card should be in rem. Around 20rem will work fine.

font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

Since all of the text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

On the image, add display: block, height: auto and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.
Marked as helpful
1
KennethVelazquez•30
@nadielotienePosted 1 day ago
Hello, your design looks really good! A couple of minor things I think you missed is the "role" landmarks in head and main. The layout on all screen sizes it's spot on and the code is well structured. On the design I think you need a little bit more height, maybe some margin under the p? Again, being nitpicky, overall great work, congrats!
Marked as helpful
0

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