Skip to content
Submitted 12 months ago

Blog-preview-card-main using HTML and CSS

P
Hector Ramirez•450
@hectorlil48
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?

I'm proud that I was able to make it responsive. And finally getting to use the calc() function, makes me understand it better.

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

I don't have much experience making a website responsive. I got to work with media queries and use the CSS calc() function to make my fonts responsive.

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

All feedback is welcomed!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • P
    Jeff Guleserian•500
    @jguleserian

    Greetings, Hector!

    Congratulations on a job well done! I enjoyed seeing how you solved some of the same issues I had when doing this project. I enjoyed going through your solution and seeing your strategy.

    I did have a couple of questions, however. These have to do with your use of calc(). You wrote, for example:

    .content h1 {
  font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1280 - 320)));
  font-weight: 800;
}

    First, I wondered why you didn't go ahead and put the number 4 instead of (24 - 20) since these would always come out to be the same and parentheses have precedence over operands. The same goes for (1280 - 320). The second question was where you got the number 1280. I can see the relevance of the other numbers, but that one lost me.

    ##Observations##

    One observation I had was that your box shadow seemed larger than the model's. As I looked into your code, I saw this:

      -webkit-box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);
  -moz-box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);
  box-shadow: 12px 12px 0px 0px rgba(0, 0, 0, 1);

    I think all you needed was the box-shadow, and not the additional "webkit" and "moz" versions. Did you have a specific purpose in using those? If not, the redundancy may have thrown things off.

    Another thing I noticed was that the height of the mobile version (at 375px) was not the same as the model. As I looked closer, I could see that it was the size of the image that was the problem. The picture dimensions should be smaller, but the image should crop a little on the right and bottom. This has thrown off what would otherwise be a perfect alignment.

    Finally, I noticed that to center your blog card, you made the <body> a flex container. While this works, and solves the issue with how to center the pesky attribution element at the end, it made your design just slightly on the Frontend Mentor comparison "solution vs. design." This is, of course, non-consequential and means nothing except that at superficial glance it looks like the proportions are off, which they are not. It's just that your design set a tad higher in the preview.

    Anyway, cudos to you, for creating such awesome proportions and spacing and the use of calc(). I started to use calc(), but was too lazy to think through all the math like you did. I used clamp() instead. nevertheless, you really thought through this one and it looks great.

    I hope my comments are helpful. Take them or leave them. I am learning just like you.

    Best regards and happy coding!

    Jeff

    Marked as helpful
  • P
    Hector Ramirez•450
    @hectorlil48

    Thank you for the comment. When I was doing the project, I looked up how to make my font sizes more responsive and that's what I found. But from doing more projects I discovered that just using media queries to change the font will be easier and confusing. For the box shadow, I use this generator online and try to make it look as close as possible, they provide it with the -webkit and the -moz. I will look into my project's height but have begun using clamp and media queries to make my projects more responsive.

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