CSS Grid

Community feedback

• 

  Daria Liferova•30

  @dliferovaPosted 8 months ago

  Hello,

  Great job! I would suggest providing more detailed naming for classes. For example, if you have

  h1 class="name"

  try to choose names that reflect the entity. In this case, since you're assigning the class to a heading, using class="heading" would be more appropriate than "name".

  Similarly, for <ul class="links",

  a name like "social-links" would be more fitting (since these links are related in meaning).

  Also, just because text on the page is the largest doesn't mean it should be h1. I recommend checking out this article

  Marked as helpful

  0

  ---

  

  P

  Stefan Holmgren•220

  @stefan-holmgrenPosted 8 months ago

  @dliferova

  Thank you for your helpful comments!

  Regarding the h1, I figured it's not about the size of the heading but rather the "semantic" property of it. A h1 should only exist once on a page, and that one would be what describes the content of the page, like they say in the article:

  While using multiple <h1> elements on one page is allowed by the HTML standard (as long as they are not nested), this is not considered a best practice. A page should generally have a single <h1> element that describes the content of the page (similar to the document's <title> element).

  0

  

  Daria Liferova•30

  @dliferovaPosted 8 months ago

  @stefan-holmgren

  H1 tags are an important part of SEO. Right now, you're kind of telling the browser that your site is "Jessica Randall", but on such a site, there can be anything - a portfolio, a creative blog, videos, etc. So, I would specialize that the site is Jessica Randall's personal page or something similar.

  However, in the card, Jessica Randall it's just stylized text. It can be simple <p>Jessica Randall</p>

  In such cases when h1 doesn't match the layout's largest text, I use a class for visually hiding h1, without breaking the logic and meaning (for SEO) of the headline

  <h1 class="visually-hidden"> Jessica Randall frontend developer portfolio</>

  .visually-hidden { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; }

  I hope I explained it clearly =)

  Marked as helpful

  0

  

  P

  Stefan Holmgren•220

  @stefan-holmgrenPosted 8 months ago

  @dliferova

  Superclear :) - and interesting solution regarding the visually-hidden class.

  Thank you again

  0
• 

  P

  Anton Vasilache•580

  @AntonvasilachePosted 8 months ago

  Hello there!

  Nice work with this one. Really like the way you've used grid to position the elements.

  0