Skip to content
OverviewSolutions
4
Comments
4
P
DougHungerford
@DougHungerford

All comments

  • DougHungerford•100
    @DougHungerfordPosted 4 months ago

    Looks good! I like how you made it your own content. When uploading to github, if you delete the original README and change the README-template to your own (rename it to README), it will provide a nicer landing page when people visit.

    If you put your css transition on the element instead of on the element:hover, it allows for the transition to continue even when not hovered anymore (in other words, allows it to transition out). From what I've read, this is considered good practice (and is less aggressive to my own eyes, at least)... however, if the result you got is the style you prefer, take this with a grain of salt!

    Marked as helpful
    0
  • defPhisy•140
    @defPhisySubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    So much but in terms of this project i would choose my separate css-reset.css file that i can use for all my new projects.

    What challenges did you encounter, and how did you overcome them?

    Had a problem with a mysterious margin-bottom on my avatar img. After some inspection i found that this was a problem to the selectors i used.

    Line 64-67 on style.css:

    .blog-card img {
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

    Line 109-113:

    .blog-card-author img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

    The problem was that.blog-card-author is inside .blog-card. So it took margin-bottom form there.

    My solution to this was adding a new class for the avatar img, because i did not find a good solution to do it with selectors without loosing readability.

    What specific areas of your project would you like help with?

    Everything what i can improve.

    But for now i think you can help me with the avatar img, that does not load on the github page. locally everything works.

    Due to the missing avatar image i found out that the alt text cannot be shown because the avatar is so small. Is that effecting screenreaders? I guess not but maybe there is a workaround.

    Blog preview card

    3
    DougHungerford•100
    @DougHungerfordPosted 4 months ago

    Try adding a . before /assets/images/image-avatar.webp just like you did for the illustration!

    Marked as helpful
    0
  • DougHungerford•100
    @DougHungerfordPosted 4 months ago

    Looks good - if you use the figma file you'll be able to dial in some of the measurements a bit closer. When entering alt text for images, don't simply use the word "image", as this provides no actual information about its importance to the user (screen readers already make it clear that it's an image, so you really don't need to put "image" at all... Most screen readers will read this as "Image image" or "image of image".). Even something as simple as "decorative illustration", while still not optimal, can help make it clear to the user that it's not an important element.

    On smaller screen sizes (<550ish px), content in the box isn't quite centered anymore.

    Marked as helpful
    0
  • DougHungerford•100
    @DougHungerfordPosted 4 months ago

    I would recommend using the exact text that they provide so you can practice making sure the padding, etc is correct. I believe the top portion of text is better served by a heading tag as opposed to a paragraph tag, since it is meant to stand out.

    0