All solutions

What are you most proud of, and what would you do differently next time?

Got a chance to learn some Sass basics

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

Struggled with desktop design which requires placing two equal width containers side by side. I tried using Flexbox but it was too cumbersome. Switched to CSS Grid which made it easy.

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

1. First time made a project using Sass. So any feedback is welcome
2. Used width: 100%; height: 100% on to fully cover the container with image. Please let me know if there's a better way to do it
3. I created mixins for strikethrough text so that screen readers can read it. Please go through the code and let me know if I've made any mistakes there

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

Had some difficulty in styling the nutrition table.I took some research and lot of trial & error to achieve the intended styling as it's my first time styling a table. Glad learned something new here 😊

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

This project is mostly about semantic HTML. Please go through my html code and let me know if I made any improper use of html tags

What are you most proud of, and what would you do differently next time?

I was able to load local static fonts using @font-face property

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

1. Had difficulty in measuring the spacing in design files without Figma files. Used Chrome extensions 'Dimensions' and 'PerfectPixel' to get the measurements, still it took a lot of trial and error to get the look as close as possible
2. Found another resource to compute clamp() function values

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

1. I changed background & text colors as I didn't like the colors in design file. I hope the color contrast is acceptable
2. I'm still not sure that I'm naming the classes and custom properties right way. I appreciate if anybody could help me with that
3. I used clamp() for changing padding. Is this function can also be used for spacing in addition to change font-size?

What are you most proud of, and what would you do differently next time?

I learned how to load variable fonts into CSS and I wanna learn more about how to make @font-face rules

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

1. I'm still learning how to write class names using BEM convention. I had to refer a few articles to get the names right (hopefully :-))
2. I struggled to get the local Static fonts loading into CSS. Tried different methods without success. Then I switched to Variable fonts and was able to load them into CSS
3. It took a long time to decide on how to name custom properties. It looks like there's no standard naming convention about how to go about it. I finally settled on somewhat functional nomenclature rather than size/color etc.

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

1. If you are familiar with BEM naming convention please go through my HTML class names and let me know if I made any mistakes there!
2. In my CSS, did I omit to include any required properties in @font-face?
3. I'm very confused about how to name custom properties in :root. How should I name them(by color names/font size or position or functional)? Please point me in the right direction if you can

What are you most proud of, and what would you do differently next time?

I was able to make good use of Flexbox to center the card and make it responsive

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

1. I wrapped card image, title and text in individual divs. Is it advisable to do it this way or is there a better way to do it?
2. Tried to use BEM nomenclature for class names. Please let me know if I made any mistakes!
3. Little confused about the use cases of margins and padding. Is there any good resource out there which explains their proper use?
4. Any alternatives to media queries so that I don't have to write them for every screen size?