Blog preview card

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  And now the styles

  A) it can be poor for performance to use css imports.

  B) Get into the habit now of always including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.

  C) The content being cut off for me is caused by the height limit on the body of 100vh. Change that to min-height so the body can extend beyond the height of the viewport when it needs to. This is an important principle —never limit the height of elements that contain text, including the body.

  D) Instead of setting width on the component, use max width. It's a similar principle but in reverse —this lets the component shrink narrower on smaller screens or when it needs to. It's also much better to use rem for this max width instead of px so the layout scales correctly for all users, including those with a different default text size.

  E) Font size must never be in px.

  F) Try to avoid using complex css selectors as you're doing now. It's overly complicated, difficult to read, and drastically increases CSS specificity, which can make it extremely difficult to manage/maintain on latlrger projects. Try to use single class selectors as much as possible. Place classes directly on what you want to style and use those classes as selectors in CSS.

  G) try not to use cursor pointer on non-interactive elements. It's expected that something is clickable if it has a pointer cursor.

  H) You shouldn't need any media query in this. But when you do need them in future challenges, the mobile styles should be the default and the larger screen layout changes go in a min width media query. Make sure those media queries are defined in rem or em not px. more about media queries

  1

  ---

  

  Zehn77•60

  @Zehn77Posted 6 months ago

  @grace-snow Thanks for your useful feedback!

  0
• 

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  This is being cut off at the top on my phone screen, but before looking at styles you need to improve the html.

  1. Every page should have a main landmark. This is only a single component challenge so isn't quite as relevant but it's still a good habit to get into straight away. Wrap the component in a main, and the attribution in a footer (so all content is contained within landmarks).
  2. Look up how and when to write alt text on images. There is a great post in the resources channel on discord about this.
  3. Learning is just a topic for the blog. I don't think it would be an anchor, just a paragraph.
  4. The link to the blog needs to go inside the heading on this. Then you can make the whole card clickable with an absolutely positioned pseudo element off that link which is sized to cover the whole card.
  5. The author name is not a heading for any content on the page, so you know it must not be a heading element.

  1

  ---

  

  Zehn77•60

  @Zehn77Posted 6 months ago

  @grace-snow Thanks again, I try to follow your instructions!

  0