@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great though the site is not responsive at the moment. Before submitting or just coding in general, first, as I would prefer start from mobile first approach and after coding the mobile of a section, change the screen-width and work your way up to desktop layout. That way, you will be able to see on how your site looks when the screen-size changes. Mobile layout breakpoint is too late, you are using 375px which is too small for other phones, using mobile first approach you will fix issues like this.
Other suggestions would be:
- Always have a
main
element to wrap the main content of your page. On this one, the.entire-component
should be using themain
instead ofdiv
. - The bold text on the left side should be using
h1
. Remember that a page must have a singleh1
. - Don't use
figure
on the stars since they are just purely decoration and doesn't really have afigcaption
. What I would do is that, use them asbackground-image
remember that you can put any amount of images on thebackground
prop, this way , you avoided using extra html tags. - Also
figcaption
must be insidefigure
. - Person's
img
should be using the person's name as thealt
likealt=" Colton Smith"
. A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image. - Since you are using
figure
on the testimonial, the person's name could usefigcaption
. - The person's name as well should be a heading tag since they are the main point for each testimonial. You can use
blockquote
as well. - Lastly, making the site more responsive and the mobile breakpoint to be adjusted.
Aside from those, great work again on this one.
Marked as helpful