@SAAJEVES
Submitted
Rate the responsiveness to different screen sizea
BasemAmr
@BasemAmr
All comments
- BasemAmr• 120
@BasemAmr
Posted
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 - Andrej Stevkovski• 170
@stevandrej
Submitted
BasemAmr• 120@BasemAmr
Posted
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 - Aidan• 100
@aidan57
Submitted
BasemAmr• 120@BasemAmr
Posted
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 -
- Oscar Carvajal• 120
@oscarvajalmora
Submitted
BasemAmr• 120@BasemAmr
Posted
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
