Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Notifications box build with HTML and CSS

elasri21 1,390

@elasri21

Desktop design screenshot for the Notifications page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


IT is been a long! here is an other challenge and i am waiting for your advice Thanks a lot!

Community feedback

@VCarames

Posted

Hey @elasri21, great job on this project!

Some suggestions to improve you code:

  • For accessibility purposes, it’s best to use rem/em instead of px for your CSS property values.

  • 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 helpful

0

elasri21 1,390

@elasri21

Posted

@vcarames Thanks you so much, i appreciate that. I used Sass To build this project and i do have variables separated in a files When i use css I use variables. thanks again!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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