@pikapikamart
Posted
Hey, awesome work on this one. Great that I saw your solution on this:>
Layout in general looks good.
For modifiers, you usually look on the layout if there are certain components that are somehow similar which can be just altered by a modifier. If you look at it, the proceed to payment
and cancel order
is just the same a
tag that is customized to look like a button
.
For example, both on those a
tag, you can have card__button
. Then on the blue button, you can add a card__button--filled
as an extra class. This way you can reuse that selector:
.card {
&__button {}
&__button--filled {}
}
Also, since this is just one component, you can just replace the plan
to use the parent selector card
, so that it could be card__plan
. Since even if this were a real site, there won't be another instance of plan
therefore it can't be reuse, where the .card
occupies the whole component as one.
Other suggestions would be that:
- Do not use the
height: 100vh
on a large container, remove that from themain
and instead usemin-height: 100vh
as this is much flexible than using a fixedheight
. - The wavy background-image should be hidden by using
alt="'
and extraaria-hidden="true"
attribute on theimg
. If you are using an image, if the image is just for decoration, you must hide it all times. Only use meaningfulalt
if and only if the image adds content to the site. - The vector image should be hidden as well since it is just a decorative image. Usually, vector images like those are hidden because they are just vector images. If you have for example a gallery on site, you could make use of descriptive
alt
values for those because you are showcasing them, but cases like these, images are just decorative. - Music icon should be hidden as well.
- The
annual plan
should use a heading tag, since it describes what is the section is all about, hence the pricing plan of the user. - Also, do not use just use
strong
tag to wrap a text, usep
tag on them. Always usep
tag or any other text-content html elements for text,strong
span
if you use them, make sure that they are inside a meaningful element likep
tag. - When you use
section
element, it always expect a heading tag inside it. Your.card__footer
could just be adiv
. - Lastly, the
.attribution
should be inside afooter
tag. As you can see in your issues, all contents must be inside landmark elements.header, main, footer, aside, nav
those are landmark elements and contents needs to be inside a landmark elements to be properly navigated by users.
Aside from those, great work again on this one.
Marked as helpful