Today's challenge was building this 3 Columns Preview Card Component.
- HTML5
- SCSS
- Svelte
Svelte, Svelte, and more Svelte.
Sometimes I think we tend to overengineer our projects and we turn to unnecessary framworks / libraries to create small projects such as this one. If I hadn't known about Svelte, I seriously suspect this challenge would've been completed using React or Vue.
There's nothing inherently wrong in that approach, but as developers, we should always try to be analytical and pragmatic in the manner we tackle projects and spend time pondering what the best approaches in terms of technologies are.
Hence me using Svelte for this project.
True, even Svelte might be too much for such a small project, but given how lightweight it is and how performance-optimized it is, I decided it'd still be a good call to use Svelte in this context.
Plus, given the structure of the challenge, reusability would've been one of the overarching scopes of this project - 3 columsn that are basically the same, only varying in the colors, text, and icons used.
The challenge presents itself rather simplistic - not much complexity involved in terms of layout, animations, or any other features. Although I used flex display for the card, the same effect could've been achieved using inline and block display.
This challenge is a great way to get comfortable with bringing in together HTML and CSS and building a nice, simple and efficient layout. It's also a great way to increase your confidence in your skills as developer and it'll pave the path to more amazing and complex challenges for you to build.
See you in the next challenge! ;)
You can join this and many other challenges on Frontend Mentor
You can find more challenges that I've completed here