Skip to content
Submitted 7 months ago

Blog Preview Card using HTML and CSS

Miriam Kilangi•70
@Miriam2245
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?

Everything feels different when doing one project to another so it was great doing this again.

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

The challenges i faced were centering a div within another div which I didn't overcome so I look forward to get help from you guys as you always do. Another is how align texting can affect the word-spacing in a paragraph but am glad i overcome it.

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

I need help on how to make responsive websites, I tried but still I get confused a bit, I'll be more than grateful for a person who'll help but anything a link to the best tutorial or some explanations, am looking forward for that😊. Another thing is naming the divs, its kinda weird but naming the div so they can be easily understood by a person reading my code is a challenge since my first project, i'll appreciate help on that matter too. Lastly am looking forward on the things that you think I should work on to become better also recommend things that I should learn for now. I cant wait to hear from y'all😁

Community feedback

  • yas-avocad•380
    @yas-avocadPosted 7 months ago

    Hey!

    I'm still trying to learn about responsive layouts, but I think for this one, you don't need to worry about it, since the design doesn't change structure as you go from the desktop design to the mobile design. For responsiveness here, you can probably use rem units over pixels, because rem units adjust the size of the text based on the size of the screen (as well as for the default browser text size). Pixels are absolute and don't change in size.

    I agree, naming div's is weird in the beginning, but it gets easier. You can change names like p1 to publish-date, p2 to subtitle or card-description. Having more descriptive names helps you to stay organized when you start working on bigger projects.

    Also, for your box-shadow, you don't need any blur. (The third value for blur can be set to 0.)

    box-shadow: 10px 10px 0px rgba(0, 0, 0, 1);

    :)

    0
    Miriam Kilangi•70
    @Miriam2245Posted 7 months ago

    thank you so much, this will help me on the next project@yas-avocad

    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