Looking to hire developers?
Submitted
@Peteonthebeat
My solution for the 3 Column Preview Card Component challenge.
I am unsure of the slight expansion the button border causes on larger screens, I'd be happy to learn about a practice that avoids that.
Regards!
@PhoenixDev22
Posted
Hi POTB,
You're welcome and glad to help.
/* In the markdown, you can type */
- First item
- Second item
- Third item
Happy coding!
Marked as helpful
@Peteonthebeat
Posted
@PhoenixDev22 Thanks!
@PhoenixDev22
Posted
Hi POTB,
First of all, awesome work again.
I see you have finished another challenge. I have some suggestions, if you don't mind:
<h1>visually hidden with sr-only.<a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs.alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. For future use , the alternate text should not be hyphenated , it should be human readable.Hopefully this feedback helps
Marked as helpful
@Peteonthebeat
Posted
Hi @PhoenixDev22, Thanks for the thorough feedback. I appreciate your suggestions!
"Page should contain a level-one heading. In this challenge , as it’s not a whole page, you can have<h1>visually hidden with sr-only..."
— I am learning it right now because of you! Thanks!
"What would happen when the user click those learn more? In my opinion, clicking those "learn more" would likely trigger navigation not do an action so button elements would not be right. So you should use the <a>. For future use , it's a good habit of specifying the type of the button to avoid any unpredictable bugs."
— Actually, initially I wrapped the text of my buttons with an <a> tag, but then I find that messed up the hover effect, so I deleted them, and stuck to the plain text, although what you point out is exactly what I had in my mind...
"In this challenge, the images are much likely to be decorative. For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. For future use , the alternate text should not be hyphenated , it should be human readable."
— This is another I am learning because of you, so once more thanks!
Lastly... Would you please let me know how to use those nice bullet points and code text in my posts. That would be awesome...
Regards! POTB
@Peteonthebeat
Posted
Hey @correlucas, Thanks for commenting and taking the time to check this solution. I agree with what you say, but I thought that would make the container look odd at 700-800px width. I added the media queries to prevent that, but I'll definitely consider what you say to get things done with fewer lines of code.
Regards!
@correlucas
Posted
👾Hello Peter, congratulations for your new solution!
I saw your solution and is just perfect. I have only one advice regarding the number of media queries you've add. In this challenge you need only one a media query to change the design mobile. You can let the container desktop contract since its flex until 700px and then change the flow without active 2 or 3 medias.
For the mobile version since the media query gets active you can set max-width: 100% to let the container grow the maximum minus the margin/padding.
👋 I hope this helps you and happy coding!
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
