Profile card component main - HTML & CSS Flexbox, Grid & No JS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Pop Andrei!

  Thanks for leaving your kind words on my solution 😊.

  Some feedback on this solution:

  • I would not recommend to limit the height of the card. Let the content inside it control the height of it.
  • I notice that you often use % percentage units. I would recommend to use rem or em instead to make the size consistent among devices.
  • I would highly recommend to use details and summary tag instead of input tags.
  • You don't need to specify the height: 100%; of the body and html elements, it's unnecessary.
  • For the card images, what I did, I used img element for overflowing images and use CSS background-image for the rest of it. To position it, in my opinion there's no the exact way to do it, since it all depends on your HTML markup and the way you position it. So, try hacking around until you think that the position similar to the design.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1
• 

  Harsh Jain•475

  @thisisharshjainPosted about 3 years ago

  Heyyy pccipru, Nice work man! Making this in vanilla HTML CSS is another challenge and you did great. I found a few small issues:

  1. If i click all accordions then top and bottom one's are cut (You can either increase height of container accordingly or maybe wrap all accordions inside a div and set overflow-y to auto)
  2. Below 1200px width the image on left doesn't stays in center
  3. On mobile screens, give .text-container a little padding. That will look little better Everything else looks good to me 😄 Keep grinding 💪🏻

  Marked as helpful

  1

  ---

  

  Pop Andrei•120

  @pccipriPosted about 3 years ago

  Thanks a lot for the review and thanks for taking time to look over my solution @thisisharshjain. I will sort those little bugs out and i'm thinking of trying to do this with JS too or try a framework. If u have any advice regarding what to learn next let me know, and yeah I will keep grinding😄.

  0

  

  Harsh Jain•475

  @thisisharshjainPosted about 3 years ago

  @pccipru Yeah definitely try this using JS. Learn JS and then practice by completing challenges here, that will help a lot! After you're confident enough with vanilla JS then try learning a framework. Good luck 😄👍🏻

  Marked as helpful

  0