Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

@sparky9043

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

After working on my CSS for a bit, this project felt much easier than before. Though I'm not sure if my code organization is as neat as it could be, I think I was able to understand the big picture and work my way down to the project. I also was able to start with "mobile-first" design by starting my project at 375px, even though there isn't much difference between mobile-first and desktop for this project.

What challenges did you encounter, and how did you overcome them?

For this project, I had slight trouble with inserting the profile image by the name in the footer. However, I resolved the issue using inline-block display and then using flexbox around the container to align the items toward the center.

What specific areas of your project would you like help with?

I want to get professional opinions on how I can organize my code better including how to name the containers. Any kind of naming convention advice would be much appreciated.

Community feedback

P

@kramedog3223

Posted

Overall, you did great. To help with the naming, you can go much more straightforward in my option. I like to make it simple and easy for others to read where it is coming from. For the next project, try to use the main one, like the container and card, as you have, but the text can be img-text or main-title. One helps you type a little less, which is always great, and two, just to keep things as simple as possible. Great job again, and hopefully, the next project you do will get even easier for you!

0

@sparky9043

Posted

@kramedog3223 Thank you for your reply. As for the names of the classes, I assume you're referring to the double underscore and the kebab case. I'm merely following a CSS naming convention: https://www.linkedin.com/pulse/bem-naming-convention-complete-guide-writing-scalable-himel-hasan/

0
P

@kramedog3223

Posted

@sparky9043, thank you for letting me know and teaching me something new. This makes much more sense to me know. I appreciate it.

0
Natércio 30

@Natercio8

Posted

Does the solution include semantic HTML?

0

Please log in to post a comment

Log in with GitHub
Discord logo

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