Submitted 6 days ago

Static webpage using HTML and Basic CSS properties

Satyaki Pal• 20

@Versatile28

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 particularly proud of successfully completing this project and applying my front-end development skills to create a visually appealing and responsive QR Code component. I learned a lot about structuring clean, semantic HTML, and using CSS Flexbox for layout, which greatly improved my understanding of responsive design. The final result is simple yet effective, and I’m happy with the clean, professional look it achieved. Next time, I would focus on making the project more dynamic by integrating JavaScript to allow users to customize the QR code with different URLs. Additionally, I would explore advanced CSS techniques, such as animations, to add subtle interactivity to the component.

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

One challenge I faced during the development of this project was the issue of page section overflow when I initially used 100vh (100% of the viewport height) for the height of the body and container elements. On some devices, especially mobile, the 100vh value caused overflow problems due to dynamic changes in the viewport height caused by UI elements like address bars or scroll bars. This resulted in unexpected layout issues where content would be cut off or excess scrolling would occur.

How I Overcame It To solve this issue, I switched from using height: 100% to min-height: 100vh for the html and body elements. This adjustment allowed the content to take up at least the full height of the viewport but also to expand when necessary, preventing overflow problems.

The use of min-height: 100vh provided flexibility, particularly on mobile devices, by ensuring the layout could adapt as needed without being constrained by a fixed height. This solution helped me maintain a clean and responsive design across different devices.

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

While I’m satisfied with the progress on this project, there are a few areas where I could use further guidance:

Cross-browser Compatibility: Ensuring the project looks and functions consistently across all browsers, especially on older versions of Internet Explorer and mobile browsers, remains a challenge. Any tips on handling browser-specific bugs or testing methodologies would be greatly appreciated.

Responsive Design: Although the layout adapts well to most screen sizes, I’d appreciate feedback on how to further refine the responsiveness, especially on very small or very large devices.

Accessibility: I’m striving to make this project more accessible for users with disabilities. Any recommendations for improving accessibility, would be helpful.

Community feedback

Øystein Håberg• 9,790

@Islandstone89

Posted 6 days ago

Hi, well done for figuring out about the min-height! You have done a decent job here :)

Some tips to improve your solution even further:

HTML:

Remove <section>, it is not needed.
I would change the heading to a <h2> - a page should only have one <h1>, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.

CSS:

Including a CSS Reset at the top is good practice.
You don't need to set anything on html, so I would remove that selector.
Whenever the value is zero, you don't need to include the unit, so margin: 0px is usually written as margin: 0.
I recommend adding 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.
Move background-color and border-radius from <section> to .qr_container.
Remove all widths and heights in px and %. You should never set a fixed height in px, especially not on text elements: if the text grows taller than the set size, it will cause overflow.
Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.
Since you're already using Flexbox on the card, I would add gap: 10px to create consistent spacing between the card elements. This is more efficient than setting padding-top: 10px on both the heading and the paragraph, so remove those.
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.
Paragraphs have a default value of font-weight: 400, so there is no need to declare it.
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.
For the same reason, I would set font-family on the body, and remove it elsewhere.
On the image, add display: block and 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.
Finally, I would increase the padding on the card to around 16px.

Marked as helpful

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