Skip to content
OverviewSolutions
8
Comments
10
nilikopo
@nilikopo

All comments

  • nilikopo•110
    @nilikopo

    nice

  • AilaFelixx•80
    @AilaFelixx
    What challenges did you encounter, and how did you overcome them?

    I had a lot of trouble with the height of the main element. I had to set a fixed value to make the page look nice because otherwise, the background would only go as far as before the first section started.

    Besides that, there were small details I couldn't figure out, like increasing the distance between list bullets and the start of the sentences, changing the color of the bullets, and aligning the text inside lists so that the second line starts at the same point as the first. I think this last part might be confusing. For example:

    I couldn't get it to look like this:

    • XXXXXX
      XXXXXX

    Instead, it turned out like this:(ignore the "_", it's just a space)

    • __XXXXXX
      XXXXXX

    Anyway, I struggled, but I managed to make it work.

    I’d love any advice—it's very welcome! 😊

    Recipe page with mobile-first(media-query)

    2
    nilikopo•110
    @nilikopo

    Hi,

    Distance between <li> and marker: list-style-position: inside; and text-indent: -2rem; are blocking the way to put distance between list bullets and start of the sentence with using padding-left: 2rem; or padding-inline-start: 2rem;.

    It will also fix text aligning inside list.

    u can use pseudo-element ::marker to change the color of markers

    code i used

    .instructions-item::marker {
    color: var(--color-brown800);
    font-weight: 600;
}

    Height of main element: i removed every fixed height in media queries and in main block: height: XXXrem in @media, height: 206.9rem; in main. Then i removed fixed height in html, body and set it to height: auto; and added additional padding-bottom: 4rem; to main element.

    Marked as helpful
  • nilikopo•110
    @nilikopo

    looks cool

  • Mohamed Hamdan•80
    @Muhammed-Hamdan
    What are you most proud of, and what would you do differently next time?

    Used only flex box, can try recreating with grid

    What challenges did you encounter, and how did you overcome them?
    1. Child elements of flex box are not pinned to parent, used overflow: hidden to solve it
    2. Used negative margin to align cart icon with text in button
    What specific areas of your project would you like help with?

    Please give suggestions to better organize the CSS and make it more readable

    Flex box product card

    2
    nilikopo•110
    @nilikopo

    u can use :root to store some known variables

    :root{
    /* given variables from style-guide.md */
    --color-dark-cyan: hsl(158, 36%, 37%);
    --color-cream: hsl(30, 38%, 92%);
    --color-very-dark-blue: hsl(212, 21%, 14%);
    --color-dark-grayish-blue: hsl(228, 12%, 48%);
    --color-white: hsl(0, 0%, 100%);

    /* my own variables */
    --border-radius: 10px;
    --padding-description: 2em;
    --padding-description-vertical: 1.5em;
    --padding-price-inline: 1.5em;
    --padding-button: 1em;
}
  • nilikopo•110
    @nilikopo

    nice

  • nilikopo•110
    @nilikopo

    pretty cool

  • nilikopo•110
    @nilikopo

    nice

  • nilikopo•110
    @nilikopo

    cool

  • P
    Oryan Hachamoff•440
    @oryanhach
    What are you most proud of, and what would you do differently next time?

    I am proud of myself for completing this challenge on my own. Last challenge it was the first challenge after about 1.5 years and I wasn't able to write any code without ChatGPT, I had no flow and understanding of why I do things. This time I had much better work flow, and I felt that I actually got better and learnt new things working on this challenge. Next time I want to put more thought into creating the html and class names better.

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

    The biggest challenge for me was creating the HTML in a semantic way, and choosing good class names. I tried to think about making it the most logical way and a very readable code. Not sure I was successful, but It is a start!

    Blog Product Card Solution

    1
    nilikopo•110
    @nilikopo

    u did very good job, but i found some problems vertical margin between learning and main img is 24px mobile version is a bit different line-height is missing card-header-title wrong font-size card-header-secondary-title wrong font-size card-footer gap is 12px not 15px card-footer-creator font-weight 800

  • Pedro Carnevale•30
    @phr-krn
    What are you most proud of, and what would you do differently next time?

    Separating everything is always the best part, as it is always much easier to understand if an error happens.

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

    Separating everything so that it is easier to leave is very difficult for me, maybe I lack creativity, but something simpler was nice to do

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

    Probably when allocating sets and adding qrcodes or other things on websites

    I separated the image and texts into a tag called "card", Soon after,

    1
    nilikopo•110
    @nilikopo

    quite cool