Responsive QR Code Component using HTML5 and CSS Flexbox
Solution retrospective
I’m proud that I completed the layout using only HTML and CSS, and that I was able to make the component look clean and centered using Flexbox. I also managed to deploy the project successfully on Vercel. Next time, I would add more responsiveness to make the component adapt better on mobile screens, and focus on using semantic tags more consistently.
What challenges did you encounter, and how did you overcome them?The biggest challenge was aligning the component in the center of the screen and setting the proper margins and padding for the card layout. I solved it by practicing more with Flexbox properties and inspecting the layout using browser dev tools. Another challenge was deploying with GitHub and Vercel for the first time, but after understanding the correct steps and fixing file paths, it worked.
What specific areas of your project would you like help with?I would appreciate feedback on:
Whether my HTML structure is semantic and accessible
Best practices for writing clean and scalable CSS
How to make the design more responsive on small screens
Any improvements I can make to the visual design or spacing
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Prateek1789
Your HTML structure is semantic but you should not use a section tag for creating a card component since it is generaly used to define different sections on the page. You should instead stick to using a div and you can add an aria-label on it if you want to. In order to write clean and scalable CSS you should use root variables and define colours and font sizes in that. To make design more responsive on smaller or any screen sizes you should use relative units such as em, rem, vh, vw, additionally you can use minmax() and clamp() function to define a range for anything basically.
- @Igorbarr3to
Very well, Mohammed.
Some points that i could observe is:
- The css was not reseted, so the <main> container is getting a padding of body container;
- You did not use the font specified in the design guide;
- <h2> tag is not centered;
Furthermore, the rest of the design was quite similar to what was proposed, congratulations!
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