Design comparison
Solution retrospective
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.
Community feedback
- @mkborisPosted 3 months ago
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 helpful1 - @TedJenklerPosted 3 months ago
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
1
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