What are you most proud of, and what would you do differently next time?
This is my version of the "Blog Preview Card" challenge by Frontend Mentor. I feel that I recreated this exactly and used very efficient and accurate HTML/CSS.
I'm proud of finding the solution to an easy drop shadow behind the card using the filter: drop-shadow option in the css file.
What challenges did you encounter, and how did you overcome them?
Lining up the profile icon with the name, still not sure how I managed to do it properly and it still isn't exactly centred.
What specific areas of your project would you like help with?
Help with the best way to line-up the profile icon with the name.
@mkboris
Posted
You can align the icon with name using flexbox like so
html
<div class="profile-icon">
<img src="images/image-avatar.webp" alt="Greg Hooper Profile Icon" style="width: 32px; height: 32px;">
<span class="profile-text">Greg Hooper</span>
</div>
css
.profile-icon{
display: flex;
align-items: center;
gap: 0.75rem;
}
Marked as helpful
@TedJenkler
Posted
Hi @tomblack9452,
Nice project! Here are a couple of suggestions for improvement:
ARIA Labels and Semantic HTML: Consider adding aria-label attributes to <div> elements to enhance accessibility for screen readers. This practice will help with both accessibility and SEO. Alternatively, when appropriate, use semantic HTML elements like <section>, <article>, or <header> to provide more meaningful structure to your content.
CSS Resets and Box-Sizing: To ensure consistent styling across different projects, it's a good idea to reset margins on the <html> and <body> elements. Additionally, using * { box-sizing: border-box; } will help maintain consistent box-sizing across your site, making layout and styling more predictable.
Hope these suggestions help!
Best, Teodor
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
