Submitted over 2 years ago
3 column preview card using HTML & CSS with flexbox.
@jhaynes322
Design comparison
SolutionDesign
Solution retrospective
I've been focusing on responsiveness lately, so I would love any feedback on that please.
Community feedback
- @vanzasetiaPosted over 2 years ago
Hi, Jared Haynes! 👋
Congratulations on finishing this challenge! 🎉
Before fixing the CSS, it is a good thing to make the HTML right first.
- Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
- I would recommend swapping the
h1
withh2
. I know that it will generate an accessibility issue. But, since it is just a component (not a complete website), you don't need to worry about it. - I think those "Learn more" buttons should be link elements. Depending on what you think will happen after the users click it, I think it will navigate the users to another webpage. But, if you think it will be an action (e.g. open a modal) then they would be buttons. Regardless of what you choose, you need to always specify the
type
of the button whenever you usebutton
element.
Some suggestions on the responsiveness.
- I recommend setting the
max-width
with eitherpx
orrem
unit. Usingvw
will always make thecontainer
grow. As a result, on very large screens (e.g.1440px
) the cards would get stretched. - You only need on media query to make the site responsive. In this case, one media query to make the three-column layout. So, I recommend removing the
@media only screen and (min-width: 600px)
and setting themax-width
on the initial styling.
That's it! I hope this helps. 😊
0 - @BlakkyWebPosted over 2 years ago
Nice work Jared, love the way you aligned your elements, but your font is not same to that used in the original design. Try to work on that and don't relent in trying to grow your skills, See You at the Top. Thank you.
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