Plain HTML and CSS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Zach Kyman! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

  I suggest allowing the height of the card component to grow with the content inside of it (currently, the information at the bottom of the card gets hidden just a little bit between 600px and 400px. 😉

  Keep coding (and happy coding, too)! 😁

  1
• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Great work. I've some suggestions.

  • It would be better if you use background-image or pseudo-elements to draw background circles, rather than real doms.
  • line div is not necessary I think
  • Make your class names more readable (I suggest you BEM naming conventions)
  • Hide scroll on desktop version

  body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  }
  

  Hope it helps. Happy coding~ :)

  1
• 

  Alan•335

  @alanhcrdzPosted almost 4 years ago

  Hi Zach, your solution looks nice, congratulations!

  To let more clean, try to do these things:

  -Change your <div>your text</div> tags for <p></p> tags, like below:

  <div id="likesCount" class="boldText infoBig">803K</div>
   <div id="likesText" class="lightText infoSmall">Likes</div>
  

  Since the paragraph <p> is more appropriate for a good semantic HTML, is a good idea to not use so many divs.

  • You can play with box shadowing in your card, test which looks good for your project.

  -Also fix the accessibility and html issues.

  Keep going.

  1

  ---

  

  Zach Kyman•220

  @zky63Posted almost 4 years ago

  @alanhcrdz Thanks for taking a look. Changed all of the div text elements to p and added alt text to the images. I'll mess around with box shadowing as well

  1

  

  Alan•335

  @alanhcrdzPosted almost 4 years ago

  @zky63 Nicely done! You're welcome

  0