QR Code Challenge HTML-CSS

Community feedback

• 

  yuri-polessky•30

  @yuri-polesskyPosted 3 months ago

  Hi there. Good job on completing the challenge! You have some problems in your code that you can solve with these fixes:

  • On line 1 in styles.css right way to import font is @import url("https://fonts.googleapis.com/css2?family=Outfit:[email protected]&display=swap"); After that imported font will be available and you can apply it to you elements. If you apply font to body or html then all elements inherit this font: body {font-family: "Outfit", sans-serif;}
  • Your solution missing right background color. You can fix it with this line: body { background-color: hsl(212, 45%, 89%); By the way on line 7 in styles.css in color rule you assign three color values to color property, but you may assign only one color value.
  • You wrote that you need help with paragraph. Your font size for paragraph is right, but your h1 and QR-code are too big. For h1 you can try font-size: 22px; You can place these elements inside div with fixed width. This solution as well will fix missing border around image and .box. Style for this div: { width: 320px; border-radius: 15px; padding: 15px; background-color: white; }. To prevent image to overflow container you can add width: 100%; to img.
  • To center wrapper div (added above) which contains QR-code and .box you can apply this code to body: { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; If you need help with flexbox, you can read article on CSS Tricks CSS flexbox Layout guide.

  Also you styles.css contains extra rules that do nothing:

  • • line 20 background-color: hsl(0%, 0%, 100%); on img element. You don't need background-color on image.
  • • line 22 border-style: none; changes nothing, because default value for border-style is none.
  • • line 30 border: 1px;. You forgot to assign a border-style, which means that the default value of none will be used, and thus .box will not have border at all.
  • • line 31 display: block changes nothing, because default value for display for div is already block.
  • • line 37 text-align: center; is unnecessary because in h1 ruleset and .paragraph ruleset you define same rule. Other elements don't need this rule.

  I hope you find it useful! Overall you did a great job though. Happy coding!

  Marked as helpful

  0

  ---

  

  NeonCodes•30

  @NeonCodesPosted 2 months ago

  @yuri-polessky Hello,

  Thank you for the detailed feedback!

  I took notes to try those. That CSS article sounds interesting too. CSS has been a bit tricky to learn.

  Happy coding!

  0
• 

  py-code314•340

  @py-code314Posted 3 months ago

  Hello,

  That's a nice job for your first project🎉. Though I noticed a few issues in the code which I think can help you with.

  HTML

  1. Put everything in the 'body' in a container and give it a max-width so that you can limit the width of whole content. Your card is too big in comparison to the design file
  2. You won't need <br> in <h1> if you do that. It's unnecessary!
  3. Same goes for <br>s in <p>
  4. Describe about the image in alt attribute

  CSS

  1. Why do you have three 'hsl' in h1{color}?
  2. 'h1' font-size is too large. You can check the design file for correct size
  3. Paragraph font-size is OK but the color is wrong. Check design file for the color
  4. Use rem instead of px for font-size as it makes the text responsive
  5. There's no need for background-color in img
  6. Use Global Reset at the beginning of code so that you won't have to repeat the properties
  7. Use display: flex in 'body' to place card in the center

  Hope these will help you to make your project better. Let me know if you need any further help. All the best!!

  Marked as helpful

  0

  ---

  

  NeonCodes•30

  @NeonCodesPosted 2 months ago

  @py-code314 Hello,

  Thank you for the detailed feedback!

  HTML 1-2-3- 4 Great I will try that

  CSS 1- I used color:black; at first but then having the 3 hsl confused me. I thought they were a color combination.

  2-3-4-5 Yes noted

  6- The CSS reset right?

  7-Noted

  Best as well!

  0

  

  py-code314•340

  @py-code314Posted 2 months ago

  Yes. CSS Reset by Josh Comeau or Andy Bell are recommended

  Happy coding 🎉

  0
• 

  Ahmed_Hazem•70

  @Ahmed-El-bazPosted 3 months ago

  1- You had to put what you call the box in the center of the screen. you could have used the code .box{ position: absolute; left: 50%; top: 50%; transform: translate( -50% , -50% );} which would have put the box at the center of any screen. 2- you had to make the box visible by giving the body a different color which was written in the Style-guide.md file, so you could have written body{background-color: hsl(212, 45%, 89%); 3- you should have made the box a little bit smaller. and lastly i don't see any problem in the pragraph hope that i helped you

  Marked as helpful

  0

  ---

  

  NeonCodes•30

  @NeonCodesPosted 2 months ago

  @Ahmed-El-baz Thank you for the feedback, I'll try with those !

  0