All solutions

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

👍 Hi, if you have any ideas on how I can improve the background on the image to match the design, please let me know.

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

👍 Any suggestions on how I can improve are welcome!

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

👍 Any suggestions on how I can improve are welcome!

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

The background image of this solution does not match the design of the desktop device. So if you have any suggestions on how I can improve it, please let me know.

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

👍 Any suggestions on how I can improve are welcome!

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

• I'm very proud because I was able to solve this challenge just using CSS Grid, and not CSS Flexbox, which I already understood.

• Next time, I would like to work on any suggestions that might improve my CSS Grid code or the animation.

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

Working with CSS Grid was difficult because I was just used to working with CSS Flexbox. But the amazing guide, A Complete Guide to CSS Grid from Chris House, helped me face it.

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

👍 Any feeback on how I can improve my CSS Grid or the animation are welcome.

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

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

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

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

I could learn how to use the CSS counter-reset and counter-increment properties and the CSS counter() function to customize the style of an ol element.

Next time I'd like to:

• Implement the design of this challenge without using CSS Media Query.
• Animate each recipe section when the user is scrolling on the page.

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

None

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

It would be nice if I could:

• Implement the design of this challenge without using CSS Media Query.

• Animate each recipe section when the user is scrolling on the page, just using Vanilla JavaScript.

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

I got contrast errors between the background and foreground colors of the links, which were resolved using the Accessibility Insights for Web extension.

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

👍 Any great feedback is appreciated!

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

.

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

.

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

.

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

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

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

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

I got a perfect score, using Lighthouse:

• Performance: 100
• Accessibility: 100
• Best Practices: 100
• SEO: 100

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

Initially I didn't know how to implement the calculation of age in days, months and years, through programming. So, I tried to figure out more about it and found the tool, College Vidya Tool - Age calculator app, which helped me understand how to do this in a simple way.

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

Even though I had a perfect score with Lighthouse, I still believe that there is always something that can be improved in my solution.

So if you have any suggestions on how I can improve it, please let me know because learning from others is always a pleasure for me.