@PhoenixDev22
Posted
Congratulation on completing anther frontend mentor challenge.
Well done! I have some suggestions regarding your solution if you don't mind:
- You should use <main> to wrap the component and <footer> for the attribution as HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- In my opinion,
Add to cartis much likely to be a<button>withtype="submit"instead of<a>, in a<form>. To know when to use one or the other in a specific situation, you must understand that every action on site falls under two different categories:
1. Actions where users affect the websiteās back-end or front-end.
2. Actions where users wonāt affect the website at all.
Action where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the websiteās back-end. Creating new posts or making comments are actions that change a websiteās content and what the user sees.
Actions where users wonāt affect the website are where you use a link. These actions that take users from one page to another without changing anything on the websiteās back or front-end.
- I recommend to use
<picture>tag in HTML to specify image resources. The<picture>tag contains<source>and<img>tags. This way the browser can choose the image that best fits the current view and/or device. If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first<source>element with matching attribute values, and ignore any of the following elements.
- It's not recommended to capitalize in html, let css text transform take care of that. Remember screen readers won't be able to Read capitalized text as they will often read them letter by letter thinking they are acronyms.
- In HTML, the
<del>tag is used to identify text that has been deleted from a document but retained to show the history of modifications made to the document. Strike through is a CSS property and does not carry any semantic meaning as inserted or deleted for screen readers. For screen reader:<del>deleted indicates text removed. In this instance, the two prices are read out which can be confusing.
- The cart image in the button is a decorative image. For decorative images, you set an empty alt to it with an aria-hidden=ātrueā to remove that element from the accessibility tree. This can improve the experience for assistive technology users by hiding purely decorative images.
- Remember a modern css reset on every project that make all browsers display elements the same.
- Adding
rel="noopener"orrel="noreferrer"totarget="_blank"links. When you link to a page on another site usingtarget=ā_blankāattribute, you can expose your site to performance and security issues.
- In order to center the card on the middle of the page , you can use the flexbox properties and
min-height: 100vhfor the<body>add a little padding to the body that way it stops the card from hitting the edges of the browser.
- You should adjust the max-width of the component as 90rem is too large.
- To set letter spacing with CSS, use the em measurement unit.
Overall, great work! hopefully this feedback helps.
Marked as helpful
@SimonMartorano
Posted
@PhoenixDev22 Wow, thank you for your feedback! So many things I didnt knew about, it was really helpful. Im going to update the design with the tips you mention. Have a good day! :)
@PhoenixDev22
Posted
@SimonTUDAI Glad to help. Happy coding!
