Blog Preview Card using HTML & Custom CSS Properties
Design comparison
Solution retrospective
Hi all! Been learning front-end web development for a couple months, and I just have a couple questions regarding this challenge:
-I had trouble getting my card to be centered vertically. When I used margin: auto;
it would still stay on the top of the page, and I don't want to hard code a top margin, how would I go about that?
-I was unsure of using @media screen and (min/max-width)
in my CSS, I'm still familiarizing myself with responsive mobile-first design. What would be best practice for that?
Thanks for the help!
Community feedback
- @MelvinAguilarPosted 11 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "HTML & CSS foundations" text in an
<a href="#">
tag. This way, users can click on it, expecting some action, like navigating to a page with more information about the fundamentals
- The
alt
attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
- For a photo of a person, use their name as the alt text.
- Use an empty alt attribute (alt="") for decorative images to signal that they are only used as decoration for assistive technology and ignore it, reducing unnecessary noise when navigating the page.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful1@rafaelgonzales612Posted 11 months agoHi Melvin,
Makes sense! I've updated my code to better enhance user experience and make it a little less cluttered for assistive tech.
Thank you for the suggestions! ๐
0 - When you use the hover effect and cursor: pointer on an element, it usually implies interactivity. To enhance user experience, consider wrapping the name of the "HTML & CSS foundations" text in an
- @danielmrz-devPosted 11 months ago
Hello Rafael!
Your project looks really good!
I noticed that you used
margin
to place the card in the middle of the page. Here's a very efficient way to center the card (vertically and horizontally):- Apply this to the body (in order to work properly, you can't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
Marked as helpful1@rafaelgonzales612Posted 11 months ago@danielmrz-dev
Just applied it and it works great, thanks for the tip! :)
1@danielmrz-devPosted 11 months ago@rafaelgonzales612
I'm glad I could help ๐
0 - @nirmalaaccountPosted 11 months ago
Hi Rafael! i'm good to to see your's blog page.it's a amazing alignment and designing. for the card centering you can use (margin: 50px auto).still i'm also learning responsive mobile-first design so practicing lot! we will gain better experience.
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