riverCodes• 300
@riverCodes
Posted
Hi, good job so far on this challenge, the layout of your elements within the card looks great.
However, there are a few things that can be improved. I'm mostly going to comment on what you should do to fix the issues detected in your HTML and Accessibility, as per the website.
- Try not to use id selectors to style elements, use class selectors instead. ID's are more often used to target elements in JavaScript, not CSS.
- You should always wrap the main content of your page in a <main> element. It is rendered the same way as a <div> but adds semantic meaning to your HTML, and helps screen readers access the main page of your content easily. In your case, this would be the <div id="card">
- Also wrap the 'attributions' part of your content within a <footer> tag. Again, this helps screen-readers access it easily.
- Always add
altattributes to your images. When the image is purely decorative, use an alt tag but keep it blank (alt=" "). Otherwise, alt tags should describe the image and are used by visually-impaired users. - You are using back-slashes "" in your image locators, switch those to forward-slashes "/" instead.
- You can simply use
background-imageproperty on your <body> element. You don't need a div just for that.
There are a few more problems as well. Your main content is not centered to your page, and your design is not responsive. It looks too small on large screens and also starts to break on smaller screens.
I recently finished this challenge as well and I faced the same issues as well. This comment is already too long so I won't talk about that now. I can make a separate comment on how to tackle those, let me know if you would want that.
Marked as helpful
1
