All solutions

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

I am most proud of creating the grid layout since I don't use grid very often.

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

I had some trouble getting the svg import to show up. I found that for styled-components I needed to interpolate the svg import to get it to work. Then the svg wasn't working on my live site and I found that I needed the svg to be in the public folder for it to work.

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

I am most proud of learning and using grid to create the desktop layout.

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

CSS grid is confusing to me, but I was able to overcome the layout issue I was facing by playing with code that was similar to what I was trying to achieve.

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

I am most proud of using the picture and source tags to make the image responsive and change based on the size of the screen. I have never used those tags before, so it was cool learning about and using them. I normally would have used React state to control which image shows, but I wanted to try something different and am happy with the outcome.

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

I am still learning how to use styled-components, so before this I did not know how to create default styles and global styles. I was able to learn how to create them by reviewing another user's code and implementing their technique in my own code. I made sure to take my time and try to understand each part, so I will be able to fully understand in future projects.

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

I am most proud of my continued use of styled components. I felt like I could have made the code better by making the component reusable (i.e. passing data as props so the component could be used with other recipes) and would do that differently next time.

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

I'm still not sure if I should be using styled-components for all of my components. I think it looks cleaner on the component page side, but feels strange having some styled-components without styles. I would like advice from a more experienced styled-component user.

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

I am most proud of learning how to use styled components with React. I've used styled components once before, but I feel that I was able to better grasp how to use it with this project.

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

I had some trouble getting started using styled components. I was able to overcome this blocker by reading articles on styled components and seeing how it was used and the benefits of using the library.

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

I am most proud of creating re-usable components. Next time I would like to try using the styled components library.

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

At one point I was having trouble getting the article image to stay within the parent container div without overlapping. I was able to overcome this issue by googling a solution and found that I should use the object-fit property with max-height and max-width set to 100% to keep the image contained within its parent container.

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

I'm most proud of building my first Vite project and creating a live site using GitHub Pages.

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

My main.jsx file was not showing up on the live site. I googled my problem ("github pages vite jsx script src/main.jsx 404 not found") and was able to find a solution on a github community page.

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

This project was pretty simply, so I did not see myself needing help with anything.