Skip to content
OverviewSolutions
5
Comments
5
Aneta Kaczmarek
@NullishKoala

All comments

  • Aneta Kaczmarek•90
    @NullishKoalaPosted 5 months ago

    Hi, great job with your solution <3

    I have noticed some differences between the design and your solution that you may want to consider working on:

    • in both desktop and mobile screen sizes you've used the desktop image, which in mobile view gets trimmed on the top;
    • the discounted price should be crossed out;
    • I think there are no states added on the button like acitve, hover or focus,
    • the cart icon needs to be a bit lower.

    The HTML and CSS files look consistent. If I may add a small tip: instead of setting border-radius both times on the images you can set border-radius and overflow: hidden on the parent to hide those corners ;)

    0
  • Joshua Olanrewaju Ikulayo•220
    @SaviourjrSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Counting the numbers of tasks i was able to archieve,I will be solving more tasks and challenges....

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

    I'm still not able to use the fonts given to use in the folder... like i don't know how to

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

    be needing help on how to use the fonts.{the Static Fonts.., Outfit Fonts.. i just had to search and use some initiative

    Omelette-Recipe-Challenge

    1
    Aneta Kaczmarek•90
    @NullishKoalaPosted 6 months ago

    Great work! I don't know myself how to use the provided static fonts, I'm always using the links from Google fonts ;)

    As for HTML:

    • the first paragraph misses a closing tag
    • instead of div to bold some parts of text content, I would go for span https://www.w3schools.com/tags/tag_span.asp
    • in the bottom Nutrition part I would go for a table instead of using divs
    • to change the color of just the bullet points of lists you can use li::marker selector

    Hope that helps a bit ;)

    Marked as helpful
    1
  • Donny•120
    @DonitronSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of the amount of time it took to build this. Seems like I am getting comfortable with the basics and fundamentals of HTML & CSS.

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

    When shrinking the screen I couldn't keep some space between the card and the border of the screen. I fixed this by giving it a width of 89% but I am not entirely happy with that.

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

    Another way of solving the challenge explained above?

    Social links profile

    1
    Aneta Kaczmarek•90
    @NullishKoalaPosted 6 months ago

    Hi! Great work with your solution! It looks very much like the desired design. The layout looks good on both desktop and mobile. You have used just one h1 and added alt to the image for accessibility. The file and the code is well-structured.

    Wishing you happy coding in your next challenges!

    2
  • Larry Ivan Villegas Costas•100
    @LarryIVCSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The next code:

    article:hover {
  -webkit-box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 0.75);
}

footer h2 {
  font-size: 0.8rem;
  color: #1b1b1b;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
}

footer a:hover &gt; h2 {
  color: #f6d050;
}
    What challenges did you encounter, and how did you overcome them?

    None

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

    None

    Blog preview card, using html and css

    1
    Aneta Kaczmarek•90
    @NullishKoalaPosted 6 months ago

    The solution code looks very good, the html is well structured. For accessibility it has 1 h1 and well divided sections, images have alt atributes. The desktop layout could be a bit bigger, there are some differences between the project and the original design: in spacing between text elements, card's border colour, image padding and card's padding.

    Marked as helpful
    0
  • Aneta Kaczmarek•90
    @NullishKoalaPosted 6 months ago
    • Does the solution include semantic HTML? Yes, the solution includes semantic HTML, the structrure is clear, the styling is contained in a separate file.
    • Is it accessible, and what improvements could be made? The img includes an alt attribute, there's only one h1 on the page.
    • Does the layout look good on a range of screen sizes? The layout looks as expected on a range of screen sizes.
    • Is the code well-structured, readable, and reusable? The code is well-structured and readable; the css file is very clear thanks to comments and colours declarations.
    • Does the solution differ considerably from the design? No, it matches the design.
    1