Four Card Feature Section (with Javascript Dark Mode)
Solution retrospective
I simply followed the original project and coded the solution with HTML and CSS, but I also added a Dark Mode function in Javascript. Next time, I would like to try it in other frontend languages like ReactJS.
What challenges did you encounter, and how did you overcome them?Like the last project in the unit, I did not have the Figma to reference so it was a lot of guessing and checking to get it to match the challenge as close as possible. So far, this one was the most challenging to match.
What specific areas of your project would you like help with?I am still learning the other frontend languages, such as ReactJS, so any advice involving them would be helpful. A React extension may also be included on GitHub.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@oryanhach
This solution looks great! I am a beginner, so I might be wrong, but I have learned many things while watching your code. One thing I would suggest is improving your custom properties' names to make them more descriptive and consistent.
For example, instead of using --white for a color, try something like --color-white, which makes it clear that it's a color value. Similarly, for --davysGray, you could consider something like --color-davys-gray to maintain consistency in naming. Also, for --gridMinWidth, a name like --grid-min-width might be clearer.
Making these small changes can help improve the readability and maintainability of your code, especially as your project grows. Keep up the good work!
Join 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