Profile card using Flexbox and BEM

Community feedback

• 

  Muhammad Ahmad Hassan•340

  @hassanahmadpPosted almost 4 years ago

  Weldone Agata!

  You have done a great job! Let me try to answer your Questions:

  • Firstly, the is no need to have multiple HTML files for such a small project. One HTML file is more than enough. As far as CSS is concerned, I have you writing margin: 0; and padding: 0; and there are some other repetitions as well. What I do for that is I write the following piece of code at the start of my CSS * { margin: 0; padding: 0; box-sizing: border-box; } This makes you skip many errors in the long run.
  • As covered in the previous answer, you should use universal selector (*), also SASS is a great tool to structure and organize code. I will recommend you watching this short introductory video about SASS.
  • My personal opinion for you is to learn SASS.

  Tell me which code editor you use so that I may suggest more things...

  3

  ---

  

  Agata Sokołowska•50

  @agatablazejewskaPosted almost 4 years ago

  Thank you for your suggestions! I'll try to find all of these repetitions and get rid of them with * selector.

  As to SASS - I plan to use it in the closest future and this little project will have its version written in SASS as well.

  I use WebStorm editor for my projects.

  Thank you very much, your advice was extremely helpful :)

  1
• 

  ValouZ•245

  @ValouZPosted almost 4 years ago

  Hey Agata!

  • I just finished the same project yesterday and i think your version very nice but there is some issue about your site.

  1. The card is way too big on my desktop. It is loading like if it were zoomed, i only see the top of the card. I think there is a problem with your media query because under 1400px it is working very well.

  2. The way you structured your HTML is close to mine and i think its the good solution but you used some tags the wrong way imo. Header, main and footer should be the header, the main and the footer of the whole page and not of an element. Imagine you want to multiply your card. You should not have 2,3,.. header, main and footer. They should be unique. Replace them by simple div

  But if we forget that little structural problem, your HTML is very good.

  2

  ---

  

  Agata Sokołowska•50

  @agatablazejewskaPosted almost 4 years ago

  Hey, I've done the above 1440px version as something additional and I didn't pay too much attention to it. But I'll definitely improve it now.

  You're right with the tags - I probably shouldn't have used them the way I did. I'll change them.

  Thank you very much, I really appreciate the effort! :)

  1
• 

  Web Frog•1,840

  @MasterDev333Posted almost 4 years ago

  Great solution @Agata. One suggestion, please remove breakpoint max-width:1440px. On wide screens, it doesn't look good. Happy coding~ :)

  0

  ---

  

  Agata Sokołowska•50

  @agatablazejewskaPosted almost 4 years ago

  I suppose you meant min-width:1441px, cause the max-width:1440px was part of the assignment :)

  I'll improve the one for wider screens, thank you!

  0