Design comparison
Solution retrospective
I found the overall page designs not so difficult, however i had some issues with the cart and i went off design a bit to implement the stripe api for real payement's, this i found quite difficult and it is not currently working as i would like. any feedback appreciated
Community feedback
- @MartinEichingerPosted over 2 years ago
Hi Cooper,
I also think the design is already quite good. I found some smaller topics, which I would like to share with you:
- Viewing the website on bigger screens > 1600px, the website gets a little out of joint. To solve that you could limit the max-width of your body to e.g. 1440px.
- Using the same web font (> manrope) and also the exact same sizing of headings and paras would give the design a bit more perfect look
Bests, Martin
0 - @SkidragonPosted over 2 years ago
Hi @cooper, good job on making it full stack. I do have a couple of suggestions, since it's an e-commerce site, SEO is very important, I would look into Next.js because it helps with dealing with SEO, lazy loading images, and even if the user has javascript disabled, they can still see the web page since javascript can build the page on the server rather than client side. Also for the height of the footer, I would use padding with em units instead of height, it adjusts to the content inside the footer rather than a fixed height. I would watch Kevin Powel's em vs rem on youtube. I would make the stepper field input box as disabled and I think there is a type conversion happening because I'm able to add more items then the max. Here is my solution if you want to take a look:
https://www.frontendmentor.io/solutions/nx-nextjs-typescript-graphcms-nestjs-and-styled-components-cPFj72mX9
I didn't do every section since I would need to upload more images/content to the CMS.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord