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

site with dropdown menu(would appreciate some feedback and tips :))

Kristianā€¢ 170

@KristianJ1

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi guys, this was my first time creating a dropdown menu with standars css, while also implementing javascript; i would appreciate some feedback and some tips if you have any. Have a nice day :) PS(The project is not perfect as i didnt know how to fix certain things so lmk).

Community feedback

@0xabdulkhaliq

Posted

Hello there šŸ‘‹. Congratulations on successfully completing the challenge! šŸŽ‰

  • I have other recommendations regarding your code that I believe will be of great interest to you.

JAVASCRIPT šŸŸ”:

  • The way you declared variables are need to be well structured and organized
  • Take a look at the following example code which describes a preferable way of declaring variables to have a well structured code, this way can't improve performance but it can increase code readability
const firstName = "Your";
const lastName = "Name";
const emailAddress = "[email protected]";
const password = "supersecret";
  • instead try this,
const firstName =  "Your",
lastName =  "Name",
emailAddress = "[email protected]"
ā€¢ā€¢ā€¢                
ā€¢ā€¢ā€¢         // n number of declarations
password = "supersecret";   // make sure to add a semicolon at end of last declaration
  • This single line declaration with separated commas will helps you to have a better structured code and improves readability though

.

I hope you find this helpful šŸ˜„ Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

1
Luka Glontiā€¢ 3,440

@lack21

Posted

Fantastic work šŸ‘, but I have some recommendations!

  • Remove width: 100% from the .maincontainer, .maincontainer which is located in div is a block level element which by default takes full width available, so width: 100% does nothing here!

  • Replace height: 100vh to min-height: 100vh in the .maincontainer, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

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