Intro section with dropdown

Community feedback

• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  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

  1