Design comparison
Solution retrospective
Really nice and funny challenge!
I tried to make this landing page super responsive on almost the most (common) screen. But I'm not sure of what I've done. SO!
-
I did maybe too many '@media screen', but I'm sure there is another (and right) way to make it responsive as well, without using tons of lines code.
-
Had some problem with the orange square (in my code '.info'). I was undecided if I should use 'position: absolute;' or 'position: relative;'. By the way, I think that was not the better choice.
That's all, people! I would be glad if anyone would leave some feedback (or suggestion), specially on the first point.
Community feedback
- @mattstuddertPosted over 2 years ago
Hey Angelo! Excellent work on this challenge! It's great that you've made such an effort on the responsive side. You have quite a few instances where you're setting specific heights, widths, margins, and other values to position elements. This seems to be what's contributing to most of your repetitive code.
I'd recommend checking out Every Layout, which is an excellent resource to help shift layout decisions onto the browser instead of manually overriding your own code and fixing positions.
If you find yourself writing code like
margin-left: 13%;
andtop: -410px;
, it's usually a sign that there's a better way to do it. These are what developers call "magic numbers" as they're pretty arbitrary and are essentially plucked from thin air.You'll find yourself using them less and less as you continue to gain experience building projects. So, for now, it's mostly a case of being aware of it and then trying to find more reusable solutions whenever it happens again.
I hope this helps! 🙂
P.S. Please try to avoid swearing in your messages as it goes against our community guidelines. You can edit your message by going to "Visit challenge hub" at the top of this page and updating your solution. Thanks! 👍
Marked as helpful3@JorahhhPosted over 2 years ago@mattstuddert
Ow, thanks Matt, that's really a LOT! You took away all the doubts I had about my code.
And yes, I'm trying to improve and improve day by day on how to make cleaner and thiner code. As you can see, I'm already a bit better compared to the other challenges I've done.
...and sorry about the "swearing". Edited it 🤐
0@mattstuddertPosted over 2 years ago@Jorahhh, no problem at all! Thanks for editing 🙂 Yeah, you're improving a lot. Keep up the great work! 🚀
0 - @vanzasetiaPosted over 2 years ago
Hello, Angelo! 👋
Thank you for taking the time to see my solution! I appreciate it! 🙌
Anyway, good effort on this challenge! 👍 It's great that you used the mobile-first approach when writing the styling! Well done! 👏
Regarding your questions.
- About the responsiveness of this project, I would rather set a
.container
that limits the layout to1440px
and then have amargin: 0 auto
to make the content in the middle of the page on a larger screen. That way, you don't need to worry about bigger screen sizes. Also, it's worth knowing that usually, people that have a large screen will have zoom level around 150% to see the website. - I used relative positioning on mobile layout and for the rest of the layout, I used absolute positioning for the card element or in this case, the
.info
element. I would not recommend setting aheight
and awidth
on the card element. Most of the time you want to let the element inside it dictate theheight
of the parent element and usemax-width
instead. It's worth doing because in reality, the content of the page might change so it might be harder to maintain if the content change often (keep adjusting theheight
).
Some more suggestions.
- Reduce the amount of whitespace at the bottom of the page. Currently, there's so much whitespace in the
footer
. - Use either
rem
orem
for themargin
instead of using%
. By using%
, themargin
might result in unexpected behavior on some screen sizes since it always depends on something. Also, unlikewidth
where you can set amax-width
to limit the amount of width,margin
on the other hand doesn't have it. - The download buttons should be link elements with
download
attribute.button
elements.
I hope this helps! Keep up the good work! 👍
Marked as helpful1 - About the responsiveness of this project, I would rather set a
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