Natthida18• 50
@Natthida18
Submitted
Aneta Kaczmarek
@NullishKoala
All comments
- Aneta Kaczmarek• 90
@NullishKoala
Posted
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 @Saviourjr
Submitted
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
Aneta Kaczmarek• 90@NullishKoala
Posted
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
@Donitron
Submitted
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?
Aneta Kaczmarek• 90@NullishKoala
Posted
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 @LarryIVC
Submitted
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 > 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
Aneta Kaczmarek• 90@NullishKoala
Posted
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- SinaDevCode• 110
@SinaDevCode
Submitted
Aneta Kaczmarek• 90@NullishKoala
Posted
- 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
