All solutions

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

I am happy with how the page looked in the end, I think I managed to do alright with the responsiveness and it was tricky to make the SVG look decent enough on different screen sizes - Its not perfect but this was my first time working with SVGs that are large and take up a big portion of the screen. So I think I've learnt some stuff to handle them better next time.

I would definitely plan the layout more before jumping into the styling next time because I found I needed to add more divs for different screen sizes to get the different layouts, maybe thats normal to add to it but I think with more experience I can just know how and why certain elements need to be wrapped in a div or not.

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

I encountered trouble with the SVG sizing and getting the styling correct. Overall I dont think it was too difficult and I overcame them by doing some research into SVGs and how they work.

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

I would really like to know how someone else with experience using TailwindCSS, React would approach the responsive design to this, how they would write up the markup and the different sections they would create components for.

This is my second web page using TailwindCSS so I definitely could improve how I use the utility classes.

First project with React, still learning and did not know how to re render the map using leaflet react... anyway I will take some time to learn more React before moving onto the next project immediately.

Tried making this project with Tailwind CSS but had some issues. Was a bit messy and ended up using a bit of a mix of Tailwind and regular CSS. I found grid quite hard to do in tailwind so resorted to using CSS so that was the difficult area for me. I need to practice grid more because I struggled with the layout quite a bit.

I had difficulty trying to center the tablet display in terms of adding margin/padding to the top and bottom without introducing the need to scroll. I wasn't exactly sure how to do it and tried a bunch of different things. Gave up in the end as I thought it wasn't a big deal, and was spending too much time trying to figure it out.

Whats the best way to center the container in the middle of the screen for desktop screens? I used padding but I'm pretty sure thats not the best way.