Html and CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks fine but the component are smaller especially the font-size, adjust those so that they could be easier to read. The site as of now is not responsive and the mobile state is missing.

  Suggestions for the markup will be:

  • First, it would be great for you to use :

  html {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  As a base style, this will make the element's dimension be easier to handle.

  • Those background-images, instead of using svg you could use them inside the body tag as a background. Search up that selector and see how that works, you can include as many as images as you want on that and it is much better than using a html tag on them.
  • Right now, there are too much usage of position: absolute. When using this property, this makes the element out of the flow, meaning a possible parent of this element will now "logically" capture it. Try building this site again without using position: absolute, you can see other people solution on this one by going on your solution, visit challenge hub and in there, click for solutions tab, you will a lot of submission for this challenge. Inspect their site and see how they approach this one. Inspecting other people's site will really give you idea on how to approach different components and it will be beneficial to you.
  • Each of the star icons could be inside background as well, but since you are using them by svg, each svg should have aria-hidden="true" attribute on it. You do this to hide an svg, because decorative images should always be hidden at all times.
  • The alt for each person should only use their name as the value like alt="Colton Smith". When using alt, avoid adding words that relates to "graphic" such as "image, icon, photo..." since img is already an image, no need to describe it as one.
  • Great that you use heading tag on the person's name but the level is wrong. When using heading tag, make sure you aren't skipping any level. If you use h5, make sure that h1, h2, h3, h4 are all present "before" it.
  • The text after the person, the verified buyer could be inside the same heading tag of the person or just a p tag but not a separate heading tag.

  Right now, those only, but as I said, look out for more submission on this one and try rebuilding this and if you built it again, you can tag me so that I could review it again.

  Aside from those, great work still on this one.

  0

  ---

  

  Ayaz Ahmed•100

  @AyazAhmed5Posted about 3 years ago

  @pikamart Thank you so much for reviewing. I really appreciate your response.

  Actually, I found out about this site and these challenges a while ago when I was starting out as a web developer. I completed this challenge right away when I finished learning Html and CSS. I didn't know at that time that I had to submit my solution and I completely forgot about this. But as you said I will rebuild it and will make sure to focus on the points you mentioned. Thanks Again.

  0