Design comparison
SolutionDesign
Solution retrospective
It was my first project alone, I'm studying for around a week, all feedbacks on how it could've been better, and other tips will be very apreciatted.
Community feedback
- @asbhogalPosted over 1 year ago
Hi there,
This is a really good first solution! The design matches the mockup nicely - well done! It's also great to see you've locally hosted your fonts too (and in the correct format.) I've listed a few points below worth considering when refactoring this
- To make this responsive, you can use either
flex
orgrid
. I can see you've usedflex
on the child elements, so it's best in this case to also add this property onto the parentcontainer
and adding aflex-direction: column
on a width of, for e.g.640px
(using@media
queries.) By default, theflex-direction
isrow
, so this doesn't need to be explicitly set. - It's also best to avoid setting explicit
height
andwidth
properties on your parent containers, as this can cause overflow issues as the viewport width changes. Instead, use an explicitmax-width
value, and awidth: 100%
, so at any viewport width below themax-width
, the content takes up the full amount and at any viewport width above themax-width
, the content remains fixed within it.Flex
will then take care of adjusting the elements within the space provided - For semantic purposes, wrap your parent
container
in amain
element for accessibility purposes - it helps screen readers and assistive technologies identify where the primary content of the documentbody
is located - Make sure to have your font-size in
rem
for accessibility purposes. Here's a good link explaining this in further detail Link
Hope this helps!
1 - To make this responsive, you can use either
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