Skip to content
OverviewSolutions
8
Comments
4
BasemAmr
@BasemAmr

All comments

  • BasemAmr•120
    @BasemAmrPosted almost 3 years ago

    Greetings @SAAJEVES,

    congratulations on finishing the challenge, great work 👏

    I have some tips to help you create a better responsive card:

    • First, it's preferable to use "classes" instead of "id"s to use in the stylesheet, that's because of several reasons mentioned in this article.
    • also, the > CSS selector has it's use cases, you can read on them in MDN here.
    • the most annoying problem for me when I first tried to make a responsive website was that I set the width an height of an element in "pixels", and this is not correct because maybe my friend's screen size is bigger or smaller than mine, so the website will be different from what I coded for him

    solution ?? I would suggest that you read this article, and this also, they are relative so if you understand the frist, it won't take much time to understand the second.

    • finall, try to use meaningful class names in addition to wirting comments so you can navigate through and read your code easily.

    and that's it, I hope my tips will be useful to you, keep up awesome work, practice more and happy coding 😀

    0
  • BasemAmr•120
    @BasemAmrPosted almost 3 years ago

    Greetings, @stevandrej

    You have done a great work, but try to make the card responsive to mobile screens

    Also, replace "h2" tag with an "h1" to fix the accessibility issue.

    Keep up awesome work, happy coding 😀

    0
  • BasemAmr•120
    @BasemAmrPosted almost 3 years ago

    Greetings Aidan, congratulations on finishing the first challenge 👏

    I have some small notes that may be useful,

    • you can replace "article" elements with divs, as they aren't articles, they are, like, small containers to layout the card.

    • the container "div" can be a "main" element to solve the accessibility issue

    • the equilibrium big image 'alt' text should be assigned to sometext describes it

    • finally, set a width for the card and center it, at the end, it's a card, a part from a landing page, for example, that takes some width of the page, but not all width.

    and that's it, I hope that these notes can be helpful

    Best of luck, happy coding 😀

    Marked as helpful
    0
  • BasemAmr•120
    @BasemAmrPosted almost 3 years ago

    Greetings, Oscar Your work is really great, there are only small notes to come over the accessibility problems. I think that it means by "missing landmarks" is to use semantic HTML, your card "div" should be created as a "main" element. attribution div should be created as a "footer" element. Also, the hero illustration "alt" text should be assigned to a value not an empty string, you can call it, for example, Hero. Best of luck, and keep up awesome work

    Marked as helpful
    0