All solutions

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

This one took forever but I finally did it! Next time though I think i could definitely make some of my solutions a bit cleaner/more efficient (some of the ways i fetched data were kind of "hacky")

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

The hardest part was definitely getting the buttons for bordering countries in the detail view (ended up taking the "borders" attribute of the main country and fetching each country using those values).

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

I learned a TON doing this one as previously I had only done level 1s and 2s. Next time though I do want to see if I can finally figure out the drag-and-drop functionality!

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

This was the first project where I had to utilize useState, useEffect, and plenty of other functionalities. Getting the list filtering down was probably the most time-consuming part.

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

Centering the button using absolute positioning took some thinking, but with a little math and using "calc(100% - [half the button width])" on a couple axes I got it to work!

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

None of the layout of this project was anything I hadn't seen before, but I did have to learn how to interact with an API using "fetch()". Once I watched a couple YouTube videos and got that down it was pretty simple styling everything.

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

I'm proud of the way I got the content to work both in flex container on small screens and a grid on larger screens. Next time though I want to figure out a less "hacky" way to get the overlapping content to fit the grid containers properly

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

The hardest part was getting the state to change via the buttons. Had to do a refresher on "useState" and how to selectively render page content, but after that it was smooth-sailing!

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

I think this is the first project where I started with a mobile design and then adapted it for larger screens and it was much simpler than doing it the other way around.

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

I think the hardest/most unfamiliar part of this one was choosing a different image to serve to each device size.

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

I finally figured out how to use media queries! Got the resizing to work as planned after a few attempts.

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

Making the page responsive was definitely the hardest part and I watched a few YouTube videos as resources. Styling the markers was another thing I had to figure out to match the original design.

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

I managed to figure out how to add an animating shadow upon hovering on a link! Next time though I'll be more intentional about using "em" and "rem" for sizing more so I don't have to redo as much when making changes.

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

The hardest parts of this one were figuring out how to crop the non-square image (ended up using clip-path with a circle) and centering each of the elements. "margin: 0 auto" didn't work for everything so I ended up using flex for some elements.

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

I'm happy with how I got the borders and shadow on the main card to look, but next time I might try to make the image cropping scale better and stay centered within the card better at extremely small sizes.

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

The toughest parts of this one were the text sizing (discovered the existence of and how to use clamp()) and figuring out how to link the font in the CSS via @font-face. Google was my best friend.

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

Help with how to make the preview image crop and how to keep it centered within the card horizontally would be great!