All solutions

During the course of development, I ended up using 1000 free credit points for ipify, so I had to switch to ipapi.co for my geolocation API. I only added a custom arrow to the map. Any helpful feedback is welcome.

It was quite a struggle to get the background images to align properly, even with the background said to no-repeat, there were still some grey areas of repeating images. I tried to keep the code DRY by using props and hooks to create reusable components. The height of the side navigation also looks weird in some places. I think it comes from the fact that all the main navigation pages received a page layout component which contained preset styles for navigation. With each of the pages having different heights, 100% no longer worked. I tried using the height: calc(100vh + extra pixels from the navbar), 100vh, 100%. None produced a uniform height for the side nav. In future projects, I would definitely try another approach. Any advice on best practices?.

I tried using Reactjs this time around. Styling was done with sass. For the lightbox feature, I imported an open source lightbox from reactjsexample site. I look forward to customizing this further. The cart was nested in my navigation component, but had to be away of the cartNumber state. In order to avoid prop drilling, I used the useContext hook. Suggestions on how to improve, would be much appreciated.

I made this project over a week ago. It was my first step toward learning/writing sass. It was a new experience. I might re-work on the navigation changing from a hamburger menu at larger screen widths later on.

I really enjoyed working on this project. Any feedback is welcome. Github pages seem to be having some issues, so I opted to deploy on netlify.

I struggled a bit with adding the waveform, but the background image property came through for me. This was a really rewarding experience. I initially deployed using github pages but the waveform was not loaded by github so I used netlify. I tried installing bootstrap globally to write custom sass files. I am still not sure of what went wrong with the setup(the css bootstrap import section) but I ended up loading the bootstrap CDN and still writing sass separately. Therefore, I used features like bootstrap containers and grids in addition to my custom styles. Any feedback is welcome.

It was quite challenging to get the right code for making a responsive off-canvas navbar using bootstrap. After a lot of trial and error, I was able to make it work. The navigation was meant to be a flex with a justify-content-space-between, However, due to the many customizations I had already done with bootstrap, a few mal-alignments occurred, so I decided to settle for having just the nav-brand to the left of the screen and the rest of the navigation to the right of the screen. For such a small file, I decided to use plain css instead of sass. Does industry standards have to always be sass regardless of the file size?

I made two html files, one was styled using plain css and another using bootstrap. I chose to deploy the bootstrap file on github pages. I tinkered quite a lot with different grid methods. I was able to get the main and footer section to align using plain css via grid-template-areas/ grid-columns etc. I was unable to align them using bootstrap. In order to achieve a perfect alignment for the last footer element, I had to remove its padding. This looked good on larger screen sizes but became mis-aligned once more on mobile sizes. Can you please share best practices on multiple grids alignment.