Design comparison
Solution retrospective
Hello! I'm a newbie in coding. I just took some time off, but I've done some challenges here on Frontend before so I hope I don't forget everything! When doing this challenge, I realize that building the desktop version first is more natural for me, maybe because it's usually more complex and I like to finish that first. I know that mobile-first approach is more common these days, so please give me some tips on how I can be more comfortable in doing that.. Thank you so much!!
Community feedback
- @correlucasPosted about 2 years ago
🔥 Hello Charmonder!
I've some tips to improve your solution:
1.The background is applied correctly but in the wrong place, to make it display 100% of the screen background add it to the
body
instead of the container and make the alignment withmin-height: 100vh
andflexbox
.body { display: flex; min-height: 100vh; background-image: url(images/bg-pattern-top-desktop.svg), url(images/bg-pattern-bottom-desktop.svg); background-position: left 1px top -16px, right 10px bottom -300px; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; align-items: center; justify-content: center; }
2.Improve the markup thats built entirely with
<div>
and you can improve it using semantics tags to describe what its inside each block of content. You can replace the<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that<div>
is only a block element without meaning.I hope this helps you, happy coding!
Marked as helpful1@charmonderPosted about 2 years ago@correlucas Hi Lucas! Thank you so much for the tips, they're very helpful! So, in general, is it better to add background to the body instead of the container whenever we need to apply an image? What if it's just background color? Thank you!
1@correlucasPosted about 2 years ago@charmonder If is the main background of the page yes, because this makes sure the image will have the full size and will under everything, note that when the image was in the container it was not displaying the size full width/height
1
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