Design comparison
Solution retrospective
Think I got close.
What challenges did you encounter, and how did you overcome them?Was trying to align image to the center without all the text being centered, fixed by using div wrapper.
What specific areas of your project would you like help with?Anything that needs improvement.
Community feedback
- Account deleted
Excellent work! 👏
Here are some suggestions:
- Use semantic tags. The ´card´ can be an
article
orsection
. - In
published ...
for the date you can use thetime
tag. - The
avatar
class makes sense as adiv
. - When you use
article
orsection
it is mandatory that it has ah?
tag inside. You must remember that headings are consecutive. - Your CSS variables should be more declarative; for example,
w1
is just 2 letters that don't tell me anything; howeverfw-500
, makes some sense:font-weight: 500
. - The width of the card you are declaring with
vh
, you should tryvw
. I recommend you to checkclamp
, it can help you with the size of the card as well as the ‘font-sizes’.
I invite you to check my solution, you may find some ideas.
Happy coding! 😎
Marked as helpful0 - Use semantic tags. The ´card´ can be an
- @DeivissonLisboaPosted 6 months ago
Hey, nice project. Well done.
I suggest that you be more general with your CSS, so it becomes more scalable. Imagine this component as part of a larger site, where other CSS styles are affecting it. You should set the stage on the body or a higher-level parent to fully leverage the cascading nature of CSS.
Also, Images don't behave well as flex elements. When dealing with this situation, you should wrap them in a div. This will make it easier to center them and set the width of the image.
One feature that you didn't include in your project was the hover state. Note that this component is intended to lead the user to another blog page, so the
<h1>
should have an<a>
tag. This will change the cursor to a pointer and allow you to redirect the user to the other page. Styling the hover state is as simple as:h1 a:hover { color: var(--yellow); }
I hope you find value in theses tip.
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