Skip to content
OverviewSolutions
45
Comments
149

Prabhash Ranjan

@besttlookk2,540 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

Typescript, Material UI

Latest solutions

View more solutions

Latest comments

  • Prabhash Ranjan•2,540
    @besttlookk

    Hi, Nicely done. Following are some points i like to add:

    • There is no error-state for invalid-url.
    • It would be nice if you remove the error on focus. Add "onFocus" event listner on input to reset the error.
    • It is not responsive for all screen-size. Whenever you develop anything always consider all screen-size even if it is not asked for.

    Good luck,

    Happy Coding

  • Prabhash Ranjan•2,540
    @besttlookk

    HI, Following are some points i like to add:

    • Use input of type "number". User should not be able to enter any other character.
    • Use flex-box to center the whole content w.r.t screen
    • Check your design for large input and large output. Currently on entering large input digit overlap the input-icon. Also on getting large output, result comes out of the card.
    • Give max limit to input and custom percent to avoid getting very large output.

    Good luck,

    Happy coding

    Marked as helpful
  • Prabhash Ranjan•2,540
    @besttlookk

    Hi, Nice work! Everything looks great. Here are a few points I like to add:

    • On clicking overlay, sidemenu should close(for small screen)
    • Dropdown should also also while clicking outside(for large screen)
    • For large screen it would have looked good when the content were covering the whole view-port height.

    Good luck,

    Happy coding

    Marked as helpful
  • Prabhash Ranjan•2,540
    @besttlookk

    Hi, NIcely done. Just a few things I like to add.

    • Font size is bit too small for small screen.
    • Dropdown should close on clicking outside(espcially for large screen)

    I liked your menu for small screen and also menu-icon

    Good luck,

    Happy coding

    Marked as helpful
  • Prabhash Ranjan•2,540
    @besttlookk

    HI, I saw your code. Here are some points.

    • To reset the css setting you dont have to write all those tag name. Just add these lines in all of your future projects.
    *, *::after, *::before{
  magin:0;
  padding: 0;
  box-sizing: inherit;
}

html{
  box-sizing: border-box;
  font-size: 100% // I tho make it 62.5% so that 1rem = 10px
}

body{
  min-height:100vh;
  font-size: 16px;(use rem)
  color:
  backdround-color:
 
}
    • Rather than writting this
       margin-bottom: 15px;
    margin-top: 25px;

    you can write like this

     margin-block: 25px 15px;
    • When ever there is any logo/icon near nav item. `::after/ ::before pseduo selector" are best to add them. You can do it like this
    // html
 <li class="nav-item"><a href="#"><img src="images/icon-todo.svg"><span>Todo List<span></a></li>

// css
nav-item span::after{
  content: url(<location of arrow image>) 
  margin-left: 1rem;
  }
    • This i am not sure of but as much i can remember adding onclick on tag is not a good habbit. Better way is to get that element in JS and add eventListner on it.

    I have also completed this challenge. Here is the link

    https://intro-section-with-dropdown-navigation-phi.vercel.app/

    I hope i helped you in any way possible. Good luck.

    Happy coding

    Marked as helpful
  • Prabhash Ranjan•2,540
    @besttlookk

    HI, Nice work! Here are some points i like to make

    • Its not responsive for all screen size. When ever develop anything ake a habbit of making responsive even if it is not asked for.
    • Dropdown menu should close when clicking outside the dropdown.

    I also made this using styled-component. Here is the link if you want any refernce

    https://intro-section-with-dropdown-navigation-phi.vercel.app/

    Feel free to drop your feedback.

    Good luck,

    Happy coding

View more comments