All solutions

I have only completed the css side of this but wanted some advice.

So as it stands I submit my work then see the screen shot to find to find it is not "pixel perfect" So I go back do some adjustments and try again. Which isn't ideal, As there will be times in the future i wont have a tool like this.

So my question what is the correct approach? Should you be manually checking the padding of everything and changing accordingly? Should be limit everything with width and height? I want to use flex box or grid and have this flowing on all devices. Fore example I have centered this with flex box for the desktop view but its not aligned, instead of going back and "margin-top -2rem" Should I have done this a different way?

Can Someone explain to me how this is well off pixel perfect? I have gone through the figma file and have done all padding the same ( I think)

But the design/solution shows its well off! Also the gap between the text and the boxes at the bottom "10k, 314 12m" On figma the gap is a lot bigger than the "solution" here. I have checked this on 1440px screen, It looks perfect to me, then I Submit it nd its well off? Am I doing something wrong?

So my two struggles when creating a page, is getting out of trouble when i've not planned my approach, and using background images instead of images.

So.. For this challenge I decided not plan and use background images. Any recommendations on the backgrounds, or my code please let me know

Please could someone advise best practice for submitting the form and obtaining the value. I was able to get the email value and add this to the text, however I couldnt add the error message. putting required on input and onsubmit, my js didn;t work.

Any other advise/tips please let me know.

I found I got myself in some unexpected problems. Ideally I wanted to have all the filter options on top of the page once selected, and removing the tab the filter would refresh. How would I do that? You can click on the tab and they all work accordingly.

Should I have approached this a different way? As this was practice there may be some ambiguous variables eg let x = .....! The only way I will get better is if someone could look at my code and advise me, what am I doing wrong? where should i approve? All advice would be appreciated.

Thanks

I've not done many React Apps. Any bad Habbits/ better ways please add your feedback.

Thanks Lee

determine the winner,too many "ifs" I feel a "switch" would've been the same. Obviously there is a lot to compare but is there a cleaner way? Also I see the box shadow is different, I couldn't get the correct colors! Overall great practice. feedback on how I can improve is appreciated.Thanks