Blog preview card component using HTML and CSS
Design comparison
Solution retrospective
I like that I was able to recreate the hovering effects on the card that are shown in the Figma design. Although the box-shadow transition is not exactly the same I think it still looks good. Also, I used a media query to change the width of the card when the screen size is less than 480px, which works for most mobile devices. Next time I would like to apply CSS reset before starting so that there are no problems with different browsers.
What challenges did you encounter, and how did you overcome them?The biggest challenge was making the different hovering effects to apply to both the card title and the card itself, since the title had one effect and the card had a different one. I was able to solve this problem by reading some of the online documentation on transitions and pseudo-class selectors.
What specific areas of your project would you like help with?Is my project responsive on different devices and browsers? I didn't use pixel units in any part of the CSS style, but I'm not sure whether that's the right way to do it? Any feedback on improvements or changes I should make would be appreciated.
Community feedback
- @mkborisPosted 3 months ago
Great work gustavo2023
- Not using px values is the right approach to go about building responsive layouts.
- To properly center the center the container, I would suggest using flexbox on the body rather than using margins on the container. Also add a
min-height: 100vhon the body. - It's best practice linking Google fonts directly in the HTML
headsection rather than directly in your CSS file as it enables asynchronous downloading, improving page load times. - Media queries should be defined in
remnot px. - Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
Marked as helpful0@gustavo2023Posted 3 months ago@mkboris Thank you for taking the time to review my solution. I implemented the changes you suggested.
I used flexbox on the body like you suggested and and applied a few other changes and the improvement is noticeable. I had some trouble getting the the
.author-nameto be aligned with the avatar picture but I managed to placed where I wanted, though I don't know if the approach I took was the best.I also added the CSS reset you gave me as an example and applied the other best practices you mentioned, which I didn't know about. After doing that I was confused because suddenly everything moved out of placed, but it was actually quite easy to adapt everything and in the end, I think the solution looks better now than before in my opinion.
Thank you for your feedback!
0@mkborisPosted 3 months ago@gustavo2023 The reason the .author-name wasn't aligning is because of the default margin on the
pelement. Give it amargin: 0and remove thetransformproperty and it should align. One thing the CSS reset is missing is resetting the default margin of all elements,* { margin: 0; }you might want to include that in your next projects. Understandably, everything shifted out of place because the reset was applied after the styling was already done. Typically, the reset should be included first before adding any styles.Marked as helpful0@gustavo2023Posted 3 months agoHi @mkboris, I made the modification of the margin as you suggested and it worked perfectly. Also, I'll be sure to include the resetting of the margin of all elements next time and include the CSS reset before starting the project. Once again thanks for the feedback.
0
Please log in to post a comment
Log in with GitHub
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