Design comparison
Solution retrospective
Made with React, and some CSS animations with theme changes. Click on my avatar to open a modal.
Community feedback
- @asbhogalPosted over 1 year ago
Hi Rodrigo,
This is a really interesting approach and it's great to see some out-of-the-box approaches, with rem units for
font-size
also used.I'd say in terms of typography, keep these consistent as the Elegant version has multiple versions across different cards. The font is also hard to make out on some of these cards across the themes because the background/foreground contrast ratio is very low, making it difficult in particular for screen readers and those with assistive technologies to read.
Also, if you're using React I'd suggest deploying to a more robust platform like Vercel or Netlify which handles caching, performance and stability much better. They have CI/CD and debugging to identify errors during build and if you use Vite (more on this below) it will automatically build your application with each Git push, without needing to run an npm script.
Following on from this, avoid using CRA as Meta have stopped supporting this. For client-side applications like this, use Vite, which supports vanilla, React, Angular etc.
Locally host your Google Fonts for privacy and performance reasons. Since you're using an npm environment, you can install the Noto Sans typeface using Fontsource, import the weights you need and declare the properties in your elements. Here's a link to documentation Link
With your directories, I'd suggest splitting your styles from your logic files by using separate folders (ie. a
css
folder with your component stylesheets, since you already have separation of concerns)Hope this helps!
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