Submitted 10 months ago

Exact copy of the design using HTML/CSS

tomblack9452•60

@tomblack9452

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

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.

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Boris•4,110

@makogeboris

Posted 10 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 helpful

Teodor Jenkler•4,040
@TedJenkler
Posted 10 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

Join 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