Skip to content
Submitted 6 months ago

Blog Preview Card

sparky9043•20
@sparky9043
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

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

  • Nick Kramer•50
    @kramedog3223Posted 5 months ago

    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•20
    @sparky9043Posted 5 months ago

    @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
    Nick Kramer•50
    @kramedog3223Posted 5 months ago

    @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
    @Natercio8Posted 5 months ago

    Does the solution include semantic HTML?

    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