Skip to content
Submitted 17 days ago

Blog Preview Card using HTML and CSS

Lexi Crotts•20
@Lanncrotts
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Ability to do it quickly compared to when I first started. Also not having to look up how to do things anymore. They're starting to become second-nature as I keep practicing.

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

I realized that I needed to add more into the media query section compared to Project 1 in order for things to look right. Once I figured that out and what to change, I was good to go!

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

I feel pretty confident in most of my code. The main thing I'm trying to work on now is being more organized in my code, so I'll definitely take any organization tips for CSS. While mine may not line up perfectly with the solution web page, I'm happy with it.

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•4,230
    @thisisharsh7

    Great job on your Blog Preview Solution! Your HTML and CSS are well-structured, and it's good to see your confidence growing with practice.

    Some suggestion:

    1. CSS Organization: Group related styles under clear comment sections (e.g., /* Typography */, /* Layout */, /* Media Queries */). This makes your CSS easier to navigate. Consider using a CSS preprocessor like SASS for nesting and modularity in future projects.

    2. Font Size Adjustment: For mobile view, reduce font sizes slightly to enhance readability. In your media query (@media (max-width: 600px)), try setting .preview .title to 1.25rem, .main-content to 0.75rem, and .credit-box .author to 0.5rem.

    3. Consistency: Standardize margins and padding (e.g., use 8px consistently instead of mixing 8px and 10px). This improves visual harmony.

    Keep practicing, and your code organization will become even more intuitive! Excellent work overall!

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