Design comparison
Solution retrospective
I had difficulties in moving the paragraph into the center
Community feedback
- @Islandstone89Posted 12 months ago
Hi, you have done a decent job on this challenge. Here is my feedback:
HTML:
-
Change
.container
from a<div>
to a<main>
. Main elements are important for accessibility. -
Alt text also needs to tell where it leads (frontendmentor.io).
-
Remove the
.attribution
div, and apply.attribution
to the<footer>
. -
Footer text must be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top. The first thing it does is to remove the margin and padding, and add
box-sizing: border-box;
, just like you have. Note, it should be0
, not0%
. -
Font-size should never be in px! Use rem instead.
-
max-width
on.container
should also be in rem. -
`Change
width: 100%
tomax-width: 100%
onimg
. It should also have adisplay: block
. -
Remove
align-items: center
on<h1>
. It doesn't do anything withoutdisplay: flex
. And you wouldn't putdisplay: flex
on a<h1>
anyway, because it doesn't have any children. -
Paragraphs are full-width by default, so you don't need the
width: 100%
. -
It's more efficient to set
text-align: center
on the body. The result will be the same, it's just a bit more elegant.
Good luck :)
0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord