Submitted over 1 year ago

Blog preview card made using HTML and CSS only

@Webdevsonu

A solution to the Blog preview card challenge

Solution retrospective

It was easy to build. Here, I tried to warm up my memory after coming from a long vacation. I know there has something to improve, like I used to write clean codes which was easier to read but here it becomes a little more of a divs than actual content. It will be very helpful if you have any suggestions to make it easy way because I have just started to code.

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,790
@danielmrz-dev
Posted over 1 year ago
Hello @Webdevsonu!

Your project looks great!

I noticed that your card isn't centered even though you did everything right. DevTools is saying that your body has a flex-wrap: nowrap; setting... but it does not have🤔

So here's another way for you to center it, just in case:
- You can apply this to the element (works well with projects with only one centered element, like this one):
```
.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
```
- Also for semantic reasons, you can replace your div.container with main.container. This tag change have no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.
I hope it helps!

Other than that, great job!
Marked as helpful

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