Frontend Mentor | QRCode coding challenge solution

Solution retrospective

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

I'm most proud of the fact that my photos didn't spill out of the parent card, I struggled for a long time with that.

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

I had trouble getting the section tag to center horizontally and vertically on the page. I overcame them by:

Positioning the section relative to its nearest positioned ancestor or initial containing block (viewport).
Setting the top position of the section to 50% of the viewport height.
Setting the left position of the section to 50% of the viewport width.
Centering the section horizontally and vertically by shifting it half its width and height in opposite directions.

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

-- Am I using the tags correctly? -- Is my CSS correct to not let the image overflow the parent tag and center the section tag? Is there anything I can improve? -- I linked the google font Open San, but it doesn't recognize this font? Why? What should I do?

Community feedback

Adriano• 36,810

@AdrianoEscarabote

Posted 12 days ago

Hi Tran Thi Yen Nhi, hope you're doing well! I loved how your project turned out, but I’ve got a few suggestions that could be useful:

Instead of using "width" to specify an absolute width, use "max-width" to specify a maximum instead. By doing this, the content will behave much more amiably in smaller resolutions, making it easier to make the project responsive.

Since this project is only based on a single page component, there is no need for a h1 tag. It's always a good idea to prevent accessibility errors, so I believe it would be beneficial for you to add a "h1" in this component. Don't worry if you forget about "h1," though; it's a good practice for when you are developing larger sites.

<h1>Improve your front-end skills by building projects</h1>

The rest is fantastic.

Hopefully, you'll find it helpful. 👍

Marked as helpful

Steven Stroud• 11,810

@Stroudy

Posted 13 days ago

Exceptional work! You’re showing great skill here. I’ve got a couple of minor suggestions that could make this stand out even more…

Using a <main> tag inside the <body> of your HTML is a best practice because it clearly identifies the main content of your page. This helps with accessibility and improves how search engines understand your content.
Using a full modern CSS reset is beneficial because it removes default browser styling, creating a consistent starting point for your design across all browsers. It helps avoid unexpected layout issues and makes your styles more predictable, ensuring a uniform appearance on different devices and platforms, check out this site for a Full modern reset
While px is useful for precise, fixed sizing, such as border-width, border-radius, inline-padding, and <img> sizes, it has limitations. Pixels don't scale well with user settings or adapt to different devices, which can negatively impact accessibility and responsiveness. For example, using px for font sizes can make text harder to read on some screens, Check this article why font-size must NEVER be in pixels. In contrast, relative units like rem and adjust based on the user’s preferences and device settings, making your design more flexible and accessible. Use px where exact sizing is needed, but prefer relative units for scalable layouts. If you want a deeper explanation watch this video by Kevin Powell CSS em and rem explained. Another great resource I found useful is this px to rem converter based on the default font-size of 16 pixel.
Using position: absolute is not always best practice because it removes elements from the normal document flow, making layouts harder to manage and potentially causing overlap or misalignment on different screen sizes. Instead, use flexible layout techniques like CSS Grid or Flexbox for more responsive and maintainable designs.
For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. Place to get .woff2 fonts

I hope you’re finding this guidance useful! Keep refining your skills and tackling new challenges with confidence. You’re making great progress—stay motivated and keep coding with enthusiasm! 💻

Marked as helpful

QRCode

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community