FatimaZaka• 30
@FatimaZaka
Submitted
Divalady87
@Divalady87
All comments
- Divalady87• 50
@Divalady87
Posted
Your picture isn't there, your background isn't the right color, and you're missing the sales price. But besides that, your text and buttons look great. Double-check your live preview and you should be good to go!
0 - Pjasoneczek• 320
@jasoneczek
Submitted
What are you most proud of, and what would you do differently next time?
I challenged myself to build responsive layouts for mobile and desktop screen sizes without using media queries. For this I used a combination of CSS math functions: min(), max(), clamp() to dynamically adjust padding sizes, margins and font sizes to match the Figma files. I was able to very closely match the design using this technique.
What challenges did you encounter, and how did you overcome them?
By far the most challenging part was making the border radii of the main card component and the image responsive: from 0 on mobile screens to their respective sizes on larger screens. I found a great article which really explains how this works and adapted the solution to my needs. There is a link to this article on the README page if you are interested. I had to make some decisions as well in other areas that required some thought. For example, the horizontal lines under the ingredients and instructions lists. It could be an , or could be a border-bottom for those entire sections. I went with the latter. It made sense to me to use last-child, not last-child pseudo selectors here and there for stuff like this. Is this the best way? I'm not sure!
What specific areas of your project would you like help with?
I'm grateful for any feedback on how to improve. One thing in particular I couldn't figure out is how to vertically center the bullet points on the unordered lists. In the design they appear to be center aligned with the text in the list item rather than aligned to the top of their box.
Divalady87• 50@Divalady87
Posted
This looks almost perfect! I love that you challenged yourself to not use media queries. I couldn't see anything wrong with your bullet points, but I am pretty new to coding, so to my eye, they look perfect! Great job and keep up the great work.
0 - muhammad fajar ali muqsith• 100
@muqsith3
Submitted
What are you most proud of, and what would you do differently next time?
a
What challenges did you encounter, and how did you overcome them?
a
What specific areas of your project would you like help with?
a
Divalady87• 50@Divalady87
Posted
Looks good, a little smaller but look great
1 - muhammad fajar ali muqsith• 100
@muqsith3
Submitted
What are you most proud of, and what would you do differently next time?
a
What challenges did you encounter, and how did you overcome them?
a
What specific areas of your project would you like help with?
a
Divalady87• 50@Divalady87
Posted
Your blog card looks good. Great job
0 - Rebeka• 170
@BekiaD
Submitted
What are you most proud of, and what would you do differently next time?
It was minimal HTML, and very little CSS so the skeleton went pretty okay.
What challenges did you encounter, and how did you overcome them?
It should have taken a shorter time than it did, but every time I use flexbox I learn a bit more.
What specific areas of your project would you like help with?
I am glad I was easily able to center the content, though I feel I have way too much margin.
Divalady87• 50@Divalady87
Posted
This looks good, great use of Flexbox. I'm new to coding, so this might not make sense, but I liked how you stacked your CSS. I still do every element separately, but I noticed that you did multiple element styling in one. That is something I need to learn to do. Overall your QR code looks great!
1
