Lots of divs

Community feedback

• 

  Rio Cantre•9,690

  @RioCantrePosted almost 3 years ago

  Hello there! Nice work in completing this project. Viewing at your solution, I would suggest the following for you...

  • Clean the whitespaces in the code
  • Include alt with description in the img tags
  • Wrap the container with specific tag like main and attribution with footer tag for readability. For HTML structures, refer it with this one Semantics
  • Ways to modify this part...

  <div>
        <span class="seperator"></span>
  </div>
  
  into:
  <div class="seperator"> </div>
  
  or
  <hr>
  

  • Add more font weight in importing the font style. In this project, it have only 200, which would not make the main font bold.
  • Add cursor: pointer; in the .overlayFade rule set
  • Increase the font in .item-data into 14px

  Overall, you did well. Hope this help and Keep it going!

  Marked as helpful

  1

  ---

  

  Phoebe•30

  @Lord-NickelbottomsPosted almost 3 years ago

  @RioCantre Thanks for your feedback. The whitespace helps with making things readable for me as having everything all bunched up will make it look incredibly messy. You have no idea how much it means to me when someone provides helpful feedback like this to me so thank you again :)

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted almost 3 years ago

  Hello @Lord-Nickelbottoms,

  I have some suggestions regarding your solution :

  • There should be two landmark components as children of the body element a <main> (which will be the component) and a <footer> (which will be the attribution).

  • Anything with a hover style in a design means it's interactive. you need to add an interactive element around the image and Equilibrium #342 and Jules Wyvern.

  • you need to add an interactive element around the imagesrc="images/image-equilibrium.jpg"( not the eye image as it's a decorative image). the eye image doesn't really need to be in the html, you could do it with css.

  • Images must have alt text. and it differs for informative or decorative image .

  • For any decorative images, eachimgtag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images in (src="images/icon-clock.svg" src="images/icon-ethereum.svg" src="images/icon-view.svg" ) and for the src="images/image-avatar.png"and src="images/image-equilibrium.jpg" should more descriptive.

  • No need for all this

    <div>
       <span class="seperator"></span>/* there is <hr> */
     </div>
  

  You can use border-top to the <div class="creator">.

  • don't use span for meaningful content.

  • You can use an unordered list <ul> for class="item-data" and in each ``<li>```, there would be <img> and <p>(to wrap the text .)

  • It's rarely ever a good practice to set heights on elements . let the content define the height.

  • Never use px for font-size.

  Hopefully this feedback helps.

  1