Design comparison
Solution retrospective
Hi everyone, this my solution for this challenge. Any comments on my solution are welcomed \ (•◡•) / Thank You!
Community feedback
- @VCaramesPosted about 2 years ago
Hey @osamasalm, great job on this project!
Some suggestions to improve you code:
To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…
It’ll look something like this:
:root { --primary-color: value; --secondary-color: value; --tertiary-color: value; }
And to use the variables you’ll use the var() function. So it’ll look like this.
h1 { color: var(—primary-color); }
Heres are some articles regarding CSS Variables.
You can also take a look at my projects and see how I use it.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
https://www.w3schools.com/css/css3_variables.asp
Happy Coding!
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello @osamasalm, Congratulations on completing this challenge!
Amazing this effect you've added to the intro, something you can do to improve the accessiblity and avoid animation for users that prefer to not see this kind of animation its to add a media query reducing the motion.The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Here’s the code for that:
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
✌️ I hope this helps you and happy coding!
Marked as helpful0
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