How can I make this better?

http://s.codepen.io/atharvajava/debug/ozmBrO

Any suggestions right now i am just having troubles making the navbar responsive …

  1. jQuery Library always goes before bootstrap.js
  2. You need to add the most common meta viewport tag

Go from there.

and i read somewhere that it is better to add jquery library at the end since it takes time to load it so when adding it at the end loads your basic page faster and i dont understand what is viewport tag can you tell me more about it ? ,Thanks for your response

Bootstrap.js uses jQuery so it needs to be loaded first.

For the meta tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

What @BenGitter posted is correct.

I think I know why you are confused. Because your website is on codepen, you didn’t have to worry about it, but on a normal webpage you can set it up like this

<!DOCTYPE html>
<head>
    <link type=css>
    <script href="jquery-cdn">
 </head>
<body></body>

you can put the links to the javascript in either the head with the css like above, and it will be loaded before the page, or you can put it after the body like this:

<!DOCTYPE html>
 <head>
   <link type=css>
  </head>
 <body></body>
<script href="jquery-cdn">

this way with the script at the end, the script will be loaded after the page, making the website faster.

Now, in codepen it automatically puts it at the end for you. Now, jquery comes before bootstrap, because bootstrap requires it, so it would look like this:

<!DOCTYPE html>
 <head>
   <link type=css>
  </head>
 <body></body>
<script href="jquery-cdn">
<script href="bootstrap">