QR Code component with HTML and CSS, responsive web page, flexbox chal

Community feedback

• 

  raya•2,870

  @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 helpful

  0

  ---

  

  Rafael Martins Cardoso•60

  @rafacardoso17Posted 11 months ago

  Thank 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

  

  raya•2,870

  @rayaattaPosted 11 months ago

  Cool bro happy coding@rafacardoso17

  0
• 

  Kimo Spark•2,190

  @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 helpful

  0

  ---

  

  Rafael Martins Cardoso•60

  @rafacardoso17Posted 11 months ago

  Thanks @kimodev1990.

  I applied your suggestion; it was great!

  0

  

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  @rafacardoso17 You're always welcome, Anytime....

  Marked as helpful

  0