profile-card-using-sass

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Liampc,

  Well done :D

  I have checked mainly your HTML, a few tips below:

  • remove styles CSS (footer) and transfer them to the CSS file;
  • instead of using div class="main" you can take the main tag;
  • instead of div class="card-header" => the header and instead of div class="card-stats" => ul > li;
  • in my opinion you don't have to use div class="avatar", just put img inline in the HTML structure;
  • this is a single page component so you can add the h1 tag => Victor;
  • circles: also these two divs are unnecessary => the circles are a bit tricky in this challenge: I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media;
  • I'd recommend learning BEM naming convention;
  • check a project in your browser on different devices (mobiles, tablets) by using the inspector => circles;
  • a few days ago I have received information that giving an explicit height and width to the container / card it is not a good practice especially that we want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. In this case, we don't have to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink.

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  2

  ---

  

  Cường•885

  @docuong0912Posted almost 4 years ago

  @SzymonRojek Sir, can i have some quick question

  -When should i use min/max-width/height?

  -The circle part in my solution,I used position absolute and border-radius, is that ok sir?

  -I'm getting used to make responsive web page but my result does not as i expected, any advice sir?

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @docuong0912

  Mostly I am using max-width, min-height, I don't have to do explicit height and width because I am using flex-box so paddings, margin are useful and it works well - also, everything depends on the context, project. Circles => I have used position absolute and relative with pseudo-elements.

  I think, one of the best solution is done by @ApplePieGiraffe check it out here

  Have a nice coding time :D

  1

  

  Lia•75

  @liampcPosted almost 4 years ago

  @SzymonRojek Thank you very much for giving very detailed feedback! Especially for pointing out the bad practices :)

  0

  

  Cường•885

  @docuong0912Posted almost 4 years ago

  @SzymonRojek thank you,sir

  0
• 

  Cường•885

  @docuong0912Posted almost 4 years ago

  amazing, i've learned more about sass thanks to your code, i can use it more efficiency in my next project, keep it up.Btw, i'm newbie. Please do some more, i'm looking forward to learning more from you

  0

  ---

  

  Lia•75

  @liampcPosted almost 4 years ago

  @docuong0912 Hi! I'm glad you found my code useful. I learned a lot from this video, check it out if you're interested. She's awesome. Happy coding!

  https://www.youtube.com/watch?v=aoQ6S1a32j8&list=PL30agP6ag9IzzlxxTnIYD090b6KufKPAW&index=7&t=4880s

  1

  

  Cường•885

  @docuong0912Posted almost 4 years ago

  thank you so much, still waiting for more project from you :)

  0