Skip to content
OverviewSolutions
18
Comments
6

Shubham Das

@ShubhamDRaj270 points

Building websites.🧑‍💻

Latest solutions

View more solutions

Latest comments

  • Jennifer Phan•50
    @jenphan
    What are you most proud of, and what would you do differently next time?

    I am most proud of getting the solution design as close as I could to the original design. I utilized clamp in order to get the font sizes to reduce based on the screen size.

    Next time, I would consider spending more time with various CSS properties in order to make the solution even more accurate to the original design.

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

    My main challenge was getting the margin/padding and font size to match up with the original design as well as to be consistent across the solution.

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

    I did not manage to get the proper "image cropping" for the mobile view. The container and font sizes were also not entirely accurate according to the original design. Is there an easier and more clean way to do this?

    Responsive Blog Preview Card using Clamp, Flexbox, and Pure CSS

    #pure-css
    1
    Shubham Das•270
    @ShubhamDRaj

    Use transform: scale(1.2); on the img to get the desired cropping.

    Also set the width to 20.5rem instead of 18rem (the 1st value inside clamp).

    And finally set font-sizes of p tags: the date gets 12px and description p tag gets 14px(Mobile design).

    Have a great day/night!

  • Shubham Das•270
    @ShubhamDRaj

    Just a thing try setting the witdth of the container to 634px instead of 800px, it'll look perfect.

    Also add shadow around container as well as button.

    Marked as helpful
  • Marvin•80
    @elMarMar
    What are you most proud of, and what would you do differently next time?

    What I would do differently is organize my screen-sizes better. I should have prioritized mobile-first or desktop-first designs so that I could better understand how changing certain properties would interact with the media queries.

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

    Apart from the media queries, this project was not too difficult. Through mostly trial and error, I feel that I learned a lot during this process of building this site.

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

    My code is messy. I'm hoping that someone could point me to resources that teach you how to organize your code. I'd also like to see the thought process of someone building a website so I could compare it to my own.

    Simple Recipe Page Solution

    1
    Shubham Das•270
    @ShubhamDRaj

    Looks good.

    The borders in sections should be less thick.

  • Shubham Das•270
    @ShubhamDRaj

    The link texts should be in bold.

    And the max-width of the card should be less.

  • Juanka•80
    @icyjkk
    What are you most proud of, and what would you do differently next time?

    The ease that I have had when creating HTML, I have also been quite good with CSS, since it was something that cost me a lot in the previous challenge.

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

    Problem with the Black Shadow:

    One of the problems I have had has been with the black shadow that the card has. It made a shadow, but it came out like a normal shadow. To fix this, I had to look at another colleague's solution. Finally, I used:

    filter: drop-shadow(8px 8px 0px rgba(0, 0, 0, 1));

    Problem with author picture and text:

    I had trouble trying to align the author's image with the text. Finally I tried to make a fix with margin-top

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

    How could I align the text with the author's image?

    How could I align the text with the author's image without having to resort to margin-top:-25px?

    .card-author {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 14px; /* Espaciado uniforme entre la imagen y el texto */
    margin-top: 25px;
    margin-bottom: -20px;
}

.card-author img {
    width: 35px;
    height: 35px; 
}

.card-author span{
    font-size: 15px; /* Tamaño del texto */
    font-weight: 800; /* Peso del texto */
    margin-top: -25px; /* Elimina márgenes predeterminados del texto */  
}
```css

# & design
I don't know why '&' it's cut

    Blog preview card using HTML & CSS

    2
    Shubham Das•270
    @ShubhamDRaj

    To answer your question "How could I align the text with the author's image without having to resort to margin-top:-25px?"

    First as you set margin-bottom: 27px to every img {}, that's causing the abnormal behavior of the .card-author. For the main card image, use different class name or id and then set margin-bottom to only that image. For example: .card-main-img {margin-bottom: 27px}

    Second remove margin-top: -25px from .card-author-span.

    Now remove both margin-top: 25px and margin-bottom: -20px from .card-author.

    Your problem would be solved then.

    Happy Coding!

    Marked as helpful
  • Shubham Das•270
    @ShubhamDRaj

    Looks good.