Loopstudios landing page (HTML+CSS)

Community feedback

• 

  BrunoMoleta•700

  @brunomoletaPosted 5 months ago

  At the ul id=previews alignment with the elements above "our creations" and below "loop studios" is more important than a specific distance between cards. So instead of hard coding the column-gap, you can set a justify-content: space-between.

  The same issue happens using the mobile visualization of this list. There's no need to inline-size because the cards will take as much space as necessary horizontally. At this screen size, no need for flex-wrap.

  Also, font sizes are better off with "em" or "rem" instead of "px". I always use "rem".

  Don't set your styles directly at the HTML tags. Always use them at the class or the id. See the Code review at Git Hub. I changed a few HTML tags, and the layout crashed.

  Please document the "making of" your project with a README.md so it's easier for a reviewer to understand.

  Also, check the index.html at the Pull request on GitHub because you used a lot of role. It's better to use the native HTML tags. Such as when you did

  <li role="button">
  	<div class="clickable-image" id="deep-earth"></div>
  	<span>DEEP EARTH</span>
  	</li>
  

  It's preferable to write:

  <li>
                  <button class="clickable-image" id="deep-earth">
                      <span>DEEP EARTH</span>
                  </button>
              </li>
  

  And I suggest you start using the Git bash instead of uploading the project. It might feel weird at first, but over time, you will sense how much better it is because you will be able to see the evolution of the project.

  Best regards from Brazil, Bruno

  Marked as helpful

  1