Design comparison
Solution retrospective
I have learned how to use flex, and how to use @media with mobile first workflow.
Tips for improve will be much appreciated.
Thank you all! Miguel Silva
Community feedback
- @vanzasetiaPosted almost 3 years ago
Hi There! 👋
Congratulations on finishing this challenge! 👏
I have some feedback on this solution:
- Accessibility
- All the page content should live inside landmark elements (
header
,main
, andfooter
). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it withmain
tag.
- All the page content should live inside landmark elements (
<body> <main> page content goes here... </main> </body>
- The learn more buttons should be links instead of button elements. If this is a real website, the Learn More buttons would navigate the users to a different webpage.
- Next time, if you are going to use
button
element, always specify thetype
of thebutton
. In this case, set the type of them astype="button"
. It's going to prevent the button from behaving unexpectedly. - Create a custom
:focus-visible
styling to any interactive elements (button
, links,input
,textarea
). This will make the users can navigate this website using keyboard (by usingTab
key) easily. - Headings must be in a logical order. Heading tags can be used by users of assistive technology to navigate the website. If headings are not in a logical order, those users might get confused. In this case, replace all the
h3
withh2
and if you want to remove the Accessibility Issues, you can have asr-only
h1
.
<main> <h1 class="sr-only">3 column card component</h1> ...the card content goes below the h1 </main>
- For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only. - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the users to control the size of the page based on their needs. - Styling
- To make the card perfectly in the middle of the page, you can make the
body
element as a flexbox container.
- To make the card perfectly in the middle of the page, you can make the
/** * 1. Make the card vertically center and * allow the body element to grow if needed */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /* 1 */ }
- Add the
border
to the initial state of the Learn More buttons to prevent jumping layout. Also, just make thebackground: transparent;
to create the:hover
effect.
That's it! Hope you find this useful! 😁
Marked as helpful1@migsilva89Posted almost 3 years ago@vanzasetia Thank you for all the tips, I have made some changes and updated the version.
Still cant figure it out how to make the h1 the same as the requested design.
Any tips?
regards, Miguel Silva
0@vanzasetiaPosted over 2 years ago@migsilva89 It looks like you haven't imported the font families. I don't see any
link
in the HTML or@import
in the CSS file.Marked as helpful0@migsilva89Posted over 2 years ago@vanzasetia Ops, noob mistake lol.
Thanks for the help!! :)
0 - Accessibility
- @EmmanuelHexerPosted almost 3 years ago
Hi Miguel, congratulations on finishing this challenge.
I have some tips on how you can improve your code.
- Wrap your card in a
main
element to fix accessibility issues by placing it just after thebody
element and draging your content inside.
I hope this helps.
Marked as helpful0@vanzasetiaPosted almost 3 years ago@Phalcin Adding a
height: 100vh
to.box-container
doesn't make the cards in the center of the page. Instead, it makes the cards have a full height which is an unwanted thing to happen.Marked as helpful1@migsilva89Posted almost 3 years ago@Phalcin Thank you for the tip :) I have fixed only adding a padding to the top.
Regards, Miguel
0@migsilva89Posted almost 3 years ago@vanzasetia Thank you for the tip :) I have fixed only adding a padding to the top.
Regards, Miguel
0@EmmanuelHexerPosted almost 3 years ago@vanzasetia Yeah i see, Thanks for clarifying.
Marked as helpful0 - Wrap your card in 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