Skip to content
OverviewSolutions
6
Comments
4
Justin
@aduatgit

All comments

  • Nur Farah Omar•120
    @NF0marSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I am doing more challenges day by day to master frontend, and I am going to do challenges daily after this.

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

    The challenges I have encountered were, there were two picture which I was supposed to use one for Desktop devices and one for Mobile devices, but I figured out it was not that difficult, i just set the display of the image that i didn't needed to none.

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

    I think my responsive is not the way it should be, and also I am confused when to use rem or px. So if you read this and you think your idea is better than mine, don't hesitate to share please.

    Product Preview Card

    2
    Justin•100
    @aduatgitPosted 5 months ago

    Hey!

    I really like your solution for this challenge, I think it looks great!

    Regarding your question when to use rem and when to use px:

    • rem is always in relation to the root element's font size of the browser, which is 16px. This can however be changed by the user, e.g. if someone wants a bigger font size because they can't really read small text.
    • px will always be an absolute pixel value, this may give you more control but also removes any responsiveness for aforementioned users.

    Generally this means that you are fine using rem or em for most measurements. This is especially the case for picking font sizes. If you need more control you can use px, but I don't think there are many cases where you would want to use px over other measurements. Rem and em takes a bit of getting used to, since you have to calculate all the values from base 16, e.g. 10px = 0.625rem.

    Marked as helpful
    1
  • Justin•100
    @aduatgitPosted 6 months ago

    You used a lot of heading in your html, if that is your approach I think you should try to order them, i.e. h1>h2>h3. You can style them individually after. Other than that you could maybe implement the buttons as a list so that you can add others more easily!

    0
  • AB•60
    @rvupmo33Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Learning how to use mouse events in js to change another elements style when you hover on one element.

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

    I had a lot of difficulty figuring out the text spacing, line height, etc.

    To overcome this challenge I started clicking every available button for an element and noting down how to get to it. It took me around 10 minutes to figure out to get line height.

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

    Whatever you think I could improve :)

    If you could help me figure out text spacing that would be nice!

    Blog Preview

    1
    Justin•100
    @aduatgitPosted 6 months ago

    I think your solution looks very good!

    Some suggestions:

    • You don't need to use Javascript to create the hover effect, you can use the :hover tag to do that. Although using Javascipt definitely was good practice! Here is how I did it:
    .card__description_title {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--clr-neutral-900);
    font-weight: var(--fw-800);
}

.card__description_title:is(:hover, :focus) {
    color: var(--clr-primary);
}

    I used variables for the colors, but you get the gist.

    • You can use media queries to implement a mobile version, if you open your dev tools and squish the site you can see that you have some overflow. It could look like this:
    @media (max-width:420px) {
    .card {
        max-width: 320px;
    }
}

    This changes the width of the card to (max) 320px if the screen of the user is smaller than 420px.

    But overall your solution is very, very nice!

    Marked as helpful
    1
  • Victoria Flama•10
    @vickiflamaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Usé css puro, la proxima vez agregaria la herramienta como bootstrap, ya que tiene componentes como card, css grid, etc.

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

    utilizar git me costó, tuve que volver a estudiarlo, pero estuvo bueno volver a repasar como usarlo.

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

    en git

    Solución qr usando flexbox

    1
    Justin•100
    @aduatgitPosted 6 months ago

    On Desktop this looks really good! The padding on the bottom of the card is missing but that should be easily fixable.

    On Mobile the card isn't centered, that is probably because you used absolute px values to center the card. Using margin-inline: auto on an element lets you center it without using absolute values!

    0