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

Managey

#sass/scss
Abdulkerim Awad• 120

@AbdulkerimAwad

Desktop design screenshot for the Manage landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi there...

  • The most challenging thing is that similar to the watermark (background), it took the most project time, and I'm not sure if I did it by good way, please tell me in your feedback if it is the best practice.
  • is the js file clear? always i feel writing the variables in the global scope is bad practice if it is, tell me the best practice for it. Thanks...

Community feedback

@AngeliqueDF

Posted

Hi! I think you did great on this, the end result looks great!

For the JavaScript code, I don't think it was an issue to declare global variables like you did because this project is very small. However I think in this case it's risky to declare your variables with the let keyword instead of const.

Marked as helpful

1

Abdulkerim Awad• 120

@AbdulkerimAwad

Posted

@AngeliqueDF can I know what are the problems may I encounter by using let instead of const, and what is the way to wrap the vars in big projects?

0

@AngeliqueDF

Posted

@AbdulkerimAwad The let keyword allows you to redefine variables which is what we want sometimes. But in this case you have selected DOM elements. If you or another developer redefines them by mistake during development it could lead to bugs.

I've seen people recommend using const most times, and let only when you're sure the variable will change. I follow this advice, and so far I think it helped.

One way you could wrap the variables is by defining classes with private fields, or external modules. I invite you to search "javascript design patterns" on Google, there are many patterns you can use in your code.

I actually used the same project to learn about this, check my solution (https://github.com/AngeliqueDF/manage-landing-page/tree/main/src/js). I tried using the module design pattern for the slider.

Marked as helpful

1
Abdulkerim Awad• 120

@AbdulkerimAwad

Posted

@AngeliqueDF Thanks so much that's was very useful

1

@AngeliqueDF

Posted

@AbdulkerimAwad You're welcome!

1

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