All solutions

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

Happy to get the final outcome similar to the challenge solution, as the social-icons box was quite a challenge at the beginning. Also proud to understand the very basics of Javascript.

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

Using css position (relative and absolute) in this challenge proved to be a must-have skill for future projects. It was quite difficult at first, but after consulting MDN Developor Docs and read the documentation got to reach the desired outcome. Despite that, still need to keep practising.

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

Curious to know other ways of achieving the style and position of the social-icons box. Felt that my use of CSS position properties wasn't the most effective. Didn't feel 100% happy about it...

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

Proud of successfully using CSS Grid once again as a tool in the mobile-first approach. It definitely helps to render the final outcome on all screen sizes correctly.

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

The main challenge was to place the quote mark image correctly. In the end I was able to place the image on the right top, but couldn't make it appear without having influence on the text color.

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

Placing the quote mark image behind the text. I tried to use the z-index property... but i didn't achieve the result wanted. Any suggestions on how to approach this? Many thanks.

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

Most proud of using a successful mobile-first approach, with the help of Flexbox and Grid, which allowed me to render the webpage correctly on all screen sizes.

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

The main challenge was to go from mobile-size to tablet-size and then desktop-size. Through the use of css grid this became more easy to achieve.

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

Maybe some tips on how to avoid repetition writing the css code. Ended up with the feeling that perhaps my style.css file was a bit too long.

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

Proud to have been able to succeed using a mobile-first approach, as it was the my first challenge of this kind.

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

Placing and styling the image correctly inside the container was one of the main challenges.

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

How would you make the transition of the mobile-image for the desktop-image? I placed both on the HTML structure and then used "display: none" on the media queries in order to hide them... but it didn't feel the best way to do this.

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

Pleased that I managed to make it very similar to the goal, since the HTML structure wasn't the simplest for me. Also the styling of some elements proved challenge at first, in order to rendered them as in the challenge solution. However, I think the outcome is positive.

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

Styling the Preparation Time box and the sections below weren't easy, as I had to make some research in order to style the bullet points of the and elements. But in the end, it actually wasn't that difficult with the use of the pseudo class ::marker

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

How would you do the Nutrition Section of this challenge? When making it, I felt this could be made in many different forms... which makes me think mine isn't the best.

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

Happy to continue to use Flexbox efficiently, together with some css custom properties.

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

Defining the HTML elements was slightly more challenging on this project, since I found myself a bit divided regarding whether or not to use elements, in certain parts of the challenge.

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

Please let me know what you think about the use of the HTML elements. Is the use of the elements semantically correct? Or could it be improved?

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

Felt very happy by beeing able to use the Flexbox properties comfortably in this challenge. After some practice, is really nice to start feeling some progress.

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

The main challenge was to resize/place the head image exactly as in the mobile solution. Unfortunately i was not able to exactly match this aspect of the challenge.

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

In this specific project I would appreciate any tips concerning the ways of displaying and resizing an image inside its container, to better handle this subject.

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

Making the final outcome very similar to the challenge's goal.

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

The most difficult was placing the image inside the container. Overcame it by resizing the image, through the image's width.

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

Making the project responsive, to be suitable for desktop and mobile. Felt it's still quite complicated for me at this initial learning stage.