@danielemanca1983
Posted
Hi Yusuf, Here is some feedback:
-
Your solution's mark-up code could greatly improve by using semantic mark-up tags, as someone else already mentioned, you could wrap the content in a <main> tag. It is preferable to use semantic html tags instead of aria roles.
-
I would have enclosed the actual component inside a <article> tag instead, by perhaps assigning a class to it such as card and then all the inner children elements such as the image and text could use BEM methodology for their class names. You can take a look at what BEM is on this link about [BEM] (https://getbem.com/introduction)
-
The image could be enclosed inside a <picture> tag for semantics.
-
Typography: the font-family in your solution does not seem to match the ones in the original design.
-
For the button you have actually used a <p> tag, you must used either an anchor or a <button> for that purpose as the element on the design is a call to action. It also does not have a drop-shadow as per the design.
-
Cancel the order should also be using an anchor tag instead, as it also is a call to action. In general we would use a <p> tag only for regular text elements.
-
I would suggest the use of classes instead of IDs, unless we need an ID to bind the html element to a piece of javascript code in order to add some interactive functionality to it.
It may seem like a lot, but believe me, as I am a front-end developer, I would get this sort of feedback whenever demoing a completed project to the visual designers, if there were mismatching elements.
Marked as helpful
@owocoded
Posted
@danielemanca1983 thank you very much, will surely work on it