Mobile-first solution using Flexbox

Community feedback

• 

  kccodes•125

  @kamilcodesPosted almost 4 years ago

  Hey Alphonzo! Really good work! Only one small hint: you should only use one h1 element inside the header element. Maybe just add a line break "br /" to have the text on two seperate lines. Otherwise good job!

  Greets

  2

  ---

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @kamilcodes

  Exactly with the h1. I think the br tag it is not necessary here (you can use it really when you don't know or when it is hard to fix a "problem" by using only CSS but here we can easily solve it with css styles) => lots of people use the br, hr tags and honestly in many cases it is unnecessary;

  Have a nice time :D

  0

  

  kccodes•125

  @kamilcodesPosted almost 4 years ago

  True. Maybe its better practice to use two div or span elements in this case. I guess a span element with display set to block

  0
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi @phonzdev,

  Well done :D

  I have checked your HTML structure, a few tips from me:

  • As @kamilcodes mentioned already this is a single page component so good that you have added the h1 tag, but is should be only once => in this case you can create h1 with two spans inside (main-heading and sub-heading);
  • below the header you can use the main tag (because this is the main part of your component);
  • well done with the alt=" " because icons are only decorative so they can be ignored by assistive technologies, such as screen readers;
  • I'd recommend reading about BEM naming convention (it is very useful);
  • try to do not style on tags => that's a reason why we have got classes so in this case it is useful to write descriptive and readable classes;
  • width and height => you gave explicit width and height, that's not a good practice especially that you 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. You shouldn’t need 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;
  • check your project by the inspector in your browser after 1920px (approximately).

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

  Greetings :D

  1

  ---

  

  Alphonzo Escolar•120

  @phonzdevPosted almost 4 years ago

  @SzymonRojek thank you so much! I took notes! :D

  0