@vanzasetia
Posted
Hi, Josh! 👋
Congratulations on finishing this challenge! 🎉
Yeah, this challenge is hard for me too. I did even do a git revert
because of the messy CSS code that I wrote on my first attempt. 😅 Fortunately, I was able to finish the challenge.
First, you need to improve the HTML.
- The
header
should only contain the logo. Theh1
and the paragraph should live inside themain
element. - Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
- I strongly recommend using pseudo-elements for the phone illustration and
bg-pattern
. This way, you can remove all the emptydiv
. As a result the HTML can be more simple and cleaner. - There should not be text in
span
anddiv
alone whenever possible; instead wrap the text with a meaningful element like paragraph element. In this case, $4/month should be wrapped by onep
element and then you can wrap each text withspan
for styling purposes. - The download buttons should be link elements with
download
attribute, not a button element. Regardless, if you ever want to use thebutton
element, always specify thetype
of thebutton
. It's going to prevent the button from behaving unexpectedly - Those Android and iOS icons are decorative so I suggest leaving the
alt
empty. - For the email address, I recommend wrapping it with an anchor tag instead of
strong
tag. You can usemailto:[email protected]
as the value of thehref
attribute. - Social media icons should be wrapped by anchor tags. They are the social media links for the company (if this is a real website).
Then, you can improve the CSS.
16px
is the default font size so you don't need to specify it.- I recommend simplifying the media queries. I recommend only using the
min-width
media query (only one condition) because I had done this challenge only usingmin-width
media query (mobile-first approach) and I think the media queries don't need to be this complex. - Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍
- I recommend adding
max-width
to thecontainer
(and making it horizontally center) to prevent the layout looks broken on wide screen.
I hope this helps! Keep up the good work! 👍
Marked as helpful