All solutions

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

I am proud of getting my JavaScript to work properly. I think that was the easiest part of the project for me to complete. I have been busy recently so this was the first project I have worked on in a while, it took me longer than I would have liked to get it done.

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

One challenge I encountered was developing the mobile view for the share menu. Once I had got the desktop view the way I wanted it to be, I had trouble getting the mobile view to appear the way I wanted it to as well; The width was of the menu was bound to the width of the share button. I eventually was able to fix this issue.

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

There are a few things I had trouble with as I worked through this project. Firstly, I was not able to get the svg logos to appear how they were in the given design files - mine are rounded and the given are square. I have not had the time to be consistent with my work on these projects, and so after a break this is the first one I have come back to and my work feels and looks a little more unpolished than projects I have taken on in the past. There are many small improvements that can be made, and if you can point them out to me I will do my best to fix them as I go along.

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

I am proud of the mobile-first approach I took when implementing this solution. If I were to do it differently next time, I would have put more effort into a) keeping my CSS file organized and b) the desktop and tablet styles.

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

One challenge I faced was customizing the markers for ordered and unordered lists. I didn't know that you could modify them using ul li::marker or ol li::marker, I read a few articles when I figured it out.

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

I had trouble adjusting the height of the .recipe-card container for desktop and tablet views. I ended up putting a set margin on the top and bottom of the container. If anyone has a more elegant solution, please let me know.

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

I developed this solution with a mobile-first approach, that is what I am the most proud of with this solution. Once I got the mobile solution down, the rest of it was pretty much done at that point. If I were to do it differently, I probably would have styled the attribution differently or omitted it.

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

One challenge I faced was getting the buttons to be spaced properly. I overcame this by putting them into their own button flex container and styling them from that instead.

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

Nothing in particular. I am open to feedback and ways I can improve my solution though.

PLEASE NOTE: I will probably end up putting my own socials/info into this solution and customizing it to my needs, so if you visit the live site and it does not reflect against the design, that is why :)

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

I am the most proud of how naturally the solution came together as I was developing it. I feel like I made it through this challenge more efficiently than the first one. If I were to do it differently, I would probably put the attribution into a footer tag rather than in main with the rest of the content.

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

One challenge I encountered was getting the margins around the title and the rest of the flex containers to align properly. I overcame this by adjusting the height of the title container to suit the spacing of the card.

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

I definitely need to work on making the responsiveness better. I have media queries, but I feel like it can still behave a little wonky when the viewport shrinks and grows.

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

I am most proud of being able to complete this. It seemed a little daunting at first, but once I got started I realized that it was not nearly as hard as I thought it would be. One thing I would do differently next time is to get the rough design down first before trying to fine tune and get it perfect.

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

The main challenge that I faced while working on this solution was getting the image and the text to stack properly. I overcame this by making the QR "Card" a flex container and setting it to column. Then I put the image and text into their own separate flex child containers, which made them stack vertically the way I wanted them to.

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

My design is not perfect. I had some trouble figuring out the dimensions of both the card and the image and my implementation is not perfectly identical to the provided design. Additionally, I had some trouble having the correct styles applied to a mobile view when I accessed the live site from my cell phone.