All solutions

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

The first challenge was the background images. Trying to get the circles in the right position was a bit of trial and error, but after playing with the numbers a lot, I got it to look pretty similar to the design. The second challenge was trying to get the profile picture centered between the top image and the bottom section of the profile card. I used a negative margin to complete that.

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

I'm proud of using grid to make the design work. It was being able to place the boxes pretty much anywhere with the use of grid.

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

The biggest challenge with this and usually every other project is responsiveness. I always want to make sure my website works correctly for all viewports. I am starting to get the hang of it now, and I can't wait to practice more.

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

The biggest challenge I faced was trying to make the website responsive. As I shrank the viewport's width, the buttons on the button kept misaligning. I initially used margins below each content but as I shrank the viewport, the paragraph gets longer, thus furthering the margin which pushes the button, causing misalignment. I fixed this using flexbox instead of margins and setting each flex item to a specific height. Now the buttons stay aligned when adjusting viewports.

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

It was my first time creating the eye icon and cyan hue overlay above the image, and I am proud to make it work.

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

Creating that overlay was a challenge. I used ChatGPT to help me out in the process. ChatGPT is such a powerful tool to use.

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

I am most proud of correcting a mistake that I made in my code.

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

I made a mistake in my code that took me so long to figure out. I set a container to have a max width. While doing the media queries, I was confused as to why I wasn't able to let that container fill its space. I forgot that it was because a max width was set.

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

I found that making the page responsive is quite challenging. It is tempting to code out the layout but as soon as you change the viewport's size, everything goes off. Definitely need more practice in that aspect.

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

Since I'm a free user, I wasn't able to download the Figma design file. Instead, I made my own Figma design and copied it to the best I could.

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

I am most proud of utilizing media queries on CSS, and was satisfied with how similar it looked to the mobile design example.

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

The biggest challenge I had was making the page match that of the mobile page example. It looked fine to me on a desktop, but when I shrunk the browser to a phone's size, it looked off and incorrect. I fixed this problem by doing research and learning about media queries which was very cool and much needed.

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

I felt like I had lots of unnecessary code, so maybe some advice on if I wrote some lines down that weren't needed, or if I could shorten my code. I also would like some criticism of how I did the semantics. I found it a bit difficult to implement semantics to a simple recipe page.

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

I was struggling to center the container in the middle of the webpage. I used flexbox and justified the content to the center, but upon using the align-items attribute, my container remained at the top of the page. Using my browser's inspect element, I noticed that my body was not taking up the height of the whole webpage, but only the height of my container. I added the height:100vh to the body, which made it take the entire height space of the webpage. This enabled the align-items:center to work correctly, thus placing my container at the very center of the webpage.