QR Code component with HTML and CSS, responsive web page, flexbox chal
Design comparison
Community feedback
- @rayaattaPosted 11 months ago
Congrats on completing your project. My advice is that you should always enclose everything in the `
<main></main>
Apart the header and the footer. Second I liked your use of comments but I think you should not use a comment on every single thing in your document as that would make the file larger which often makes bigger projects load slower Lastly in order to use The font-family used in the design files Paste the following in your css code
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); * { font-family: 'Outfit', sans-serif; }
That aside your solution is awesome you gave it time. Thanks
Marked as helpful0@rafacardoso17Posted 11 months agoThank you @rayaatta for the comment, and I will certainly follow it. Since I'm still a beginner, I comment on each line to reinforce the concept further. It helps in my learning.
0 - @kimodev1990Posted 11 months ago
Great work in completing the challenge, Just a few feedback :
- To center your section in the middle of your website, you could add in body :
display: flex ; justify-content: center ; align-items: center ; min-height: 100vh ;
then the section will be centered, no need to use
margin: 5% auto 1% auto ;
- Wrap your design in main tag.
- Instead of assigning definite values to div image , div class .intro-content & div class .desc-content, It's better in future designs to assign percentage values for flexible & responsive design. For example: you could assign for div class .intro-content
width: 90% ;
so that it would be in relative to size of section. - You could use clamp ( ) method in your coding for font-size, width, margins, padding, etc., So the designed sizes will change according to the viewport dimensions having a responsive design and will be suitable for any device layout.
Hope you find this Helpful.
Other than that, Really Nice work & keep Going on
Marked as helpful0@rafacardoso17Posted 11 months agoThanks @kimodev1990.
I applied your suggestion; it was great!
0@kimodev1990Posted 11 months ago@rafacardoso17 You're always welcome, Anytime....
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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