Design comparison
Solution retrospective
🛸 Hello Front-End Mentor Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
- HTML
- SASS
- Tailwind
- JavaScript
- BEM Notation
- Mobile First workflow approach
Another very fun and challenging project. That Instagram container with the gradient border
gave me a hard time 😅
Now I know how the Light/Dark Modes are made.
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
Community feedback
- @stashixPosted 10 months ago
Love the translateY for the split background, I should have thought of that :)
Were you going off of the Figma or just that good of an eye for detail? The positioning is near perfect.
I think the Dark Mode toggle could be improved by respecting the prefers-color-scheme media query by default and only overriding the browser preference on toggle.
Plus if toggled the state could be persisted in local storage.
Marked as helpful1@danielmrz-devPosted 10 months ago@stashix
I don't have the figma files... I think that I'm developing a good eye for detail after so many projects without any design files 😅
Thank you for the prefers-color-scheme tip. I had never read or seen anything about it before. I'm gonna learn more about it so I can apply on this project and the next ones 😊
0 - @Ahmad-MaartmesriniPosted 10 months ago
I love how you used a span for the toggle, made it much easier to click. I used buttons now the user has to click on the other button to switch the toggle.
1 - @Rupesh9369Posted 10 months ago
Hello Daniel, I'd like to share some thoughts on enhancing the responsiveness of our website. Specifically, when the screen width is less than 1025px, the current layout displays just one card. To optimize the user experience on mobile and tablet devices, let's consider adjusting it to showcase three cards or more. Implementing a flex-wrap property will facilitate this change seamlessly. Looking forward to your insights and collaboration on making these adjustments for an improved mobile and tablet responsiveness.
1
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