title: Use of external .js & css files fails
body: <p>I'm trying to design a web site with bootstrap and I downloaded code for registration page </p>
  
  <p>There are 3 files:</p>
  
  <p>HTML,
  CSS
  and .js</p>
  
  <p><strong>registration.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Code &lt;/title&gt;
      &lt;link href="css/my.css" rel="stylesheet"&gt;
      &lt;script src="js/b.js"&gt;&lt;/script&gt;
    &lt;/head&gt;  
  &lt;body&gt;  
  &lt;div class="form"&gt;
  
        &lt;ul class="tab-group"&gt;
          &lt;li class="tab active"&gt;&lt;a href="#signup"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
          &lt;li class="tab"&gt;&lt;a href="#login"&gt;Log In&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="tab-content"&gt;
          &lt;div id="signup"&gt;   
            &lt;h1&gt;Sign Up for Free&lt;/h1&gt;
  
            &lt;form action="/" method="post"&gt;
  
            &lt;div class="top-row"&gt;
              &lt;div class="field-wrap"&gt;
                &lt;label&gt;
                  First Name&lt;span class="req"&gt;*&lt;/span&gt;
                &lt;/label&gt;
                &lt;input type="text" required autocomplete="off" /&gt;
              &lt;/div&gt;
  
              &lt;div class="field-wrap"&gt;
                &lt;label&gt;
                  Last Name&lt;span class="req"&gt;*&lt;/span&gt;
                &lt;/label&gt;
                &lt;input type="text"required autocomplete="off"/&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="field-wrap"&gt;
              &lt;label&gt;
                Email Address&lt;span class="req"&gt;*&lt;/span&gt;
              &lt;/label&gt;
              &lt;input type="email"required autocomplete="off"/&gt;
            &lt;/div&gt;
  
            &lt;div class="field-wrap"&gt;
              &lt;label&gt;
                Set A Password&lt;span class="req"&gt;*&lt;/span&gt;
              &lt;/label&gt;
              &lt;input type="password"required autocomplete="off"/&gt;
            &lt;/div&gt;
  
            &lt;button type="submit" class="button button-block"/&gt;Get Started&lt;/button&gt;
  
            &lt;/form&gt;
  
          &lt;/div&gt;
  
          &lt;div id="login"&gt;   
            &lt;h1&gt;Welcome Back!&lt;/h1&gt;
  
            &lt;form action="/" method="post"&gt;
  
              &lt;div class="field-wrap"&gt;
              &lt;label&gt;
                Email Address&lt;span class="req"&gt;*&lt;/span&gt;
              &lt;/label&gt;
              &lt;input type="email"required autocomplete="off"/&gt;
            &lt;/div&gt;
  
            &lt;div class="field-wrap"&gt;
              &lt;label&gt;
                Password&lt;span class="req"&gt;*&lt;/span&gt;
              &lt;/label&gt;
              &lt;input type="password"required autocomplete="off"/&gt;
            &lt;/div&gt;
  
            &lt;p class="forgot"&gt;&lt;a href="#"&gt;Forgot Password?&lt;/a&gt;&lt;/p&gt;
  
            &lt;button class="button button-block"/&gt;Log In&lt;/button&gt;
  
            &lt;/form&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;&lt;!-- tab-content --&gt;
  
  &lt;/div&gt; &lt;!-- /form --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>my.css</strong></p>
  
  <pre><code>@import "compass/css3";
  
  $body-bg: #c1bdba;
  $form-bg: #13232f;
  $white: #ffffff;
  
  $main: #1ab188;
  $main-light: lighten($main,5%);
  $main-dark: darken($main,5%);
  
  $gray-light: #a0b3b0;
  $gray: #ddd;
  
  $thin: 300;
  $normal: 400;
  $bold: 600;
  $br: 4px;
  
  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  html {
      overflow-y: scroll; 
  }
  
  body {
    background:$body-bg;
    font-family: 'Titillium Web', sans-serif;
  }
  
  a {
    text-decoration:none;
    color:$main;
    transition:.5s ease;
    &amp;:hover {
      color:$main-dark;
    }
  }
  
  .form {
    background:rgba($form-bg,.9);
    padding: 40px;
    max-width:600px;
    margin:40px auto;
    border-radius:$br;
    box-shadow:0 4px 10px 4px rgba($form-bg,.3);
  }
  
  .tab-group {
    list-style:none;
    padding:0;
    margin:0 0 40px 0;
    &amp;:after {
      content: "";
      display: table;
      clear: both;
    }
    li a {
      display:block;
      text-decoration:none;
      padding:15px;
      background:rgba($gray-light,.25);
      color:$gray-light;
      font-size:20px;
      float:left;
      width:50%;
      text-align:center;
      cursor:pointer;
      transition:.5s ease;
      &amp;:hover {
        background:$main-dark;
        color:$white;
      }
    }
    .active a {
      background:$main;
      color:$white;
    }
  }
  
  .tab-content &gt; div:last-child {
    display:none;
  }
  
  
  h1 {
    text-align:center;
    color:$white;
    font-weight:$thin;
    margin:0 0 40px;
  }
  
  label {
    position:absolute;
    transform:translateY(6px);
    left:13px;
    color:rgba($white,.5);
    transition:all 0.25s ease;
    -webkit-backface-visibility: hidden;
    pointer-events: none;
    font-size:22px;
    .req {
      margin:2px;
      color:$main;
    }
  }
  
  label.active {
    transform:translateY(50px);
    left:2px;
    font-size:14px;
    .req {
      opacity:0;
    }
  }
  
  label.highlight {
      color:$white;
  }
  
  input, textarea {
    font-size:22px;
    display:block;
    width:100%;
    height:100%;
    padding:5px 10px;
    background:none;
    background-image:none;
    border:1px solid $gray-light;
    color:$white;
    border-radius:0;
    transition:border-color .25s ease, box-shadow .25s ease;
    &amp;:focus {
          outline:0;
          border-color:$main;
    }
  }
  
  textarea {
    border:2px solid $gray-light;
    resize: vertical;
  }
  
  .field-wrap {
    position:relative;
    margin-bottom:40px;
  }
  
  .top-row {
    &amp;:after {
      content: "";
      display: table;
      clear: both;
    }
  
    &gt; div {
      float:left;
      width:48%;
      margin-right:4%;
      &amp;:last-child { 
        margin:0;
      }
    }
  }
  
  .button {
    border:0;
    outline:none;
    border-radius:0;
    padding:15px 0;
    font-size:2rem;
    font-weight:$bold;
    text-transform:uppercase;
    letter-spacing:.1em;
    background:$main;
    color:$white;
    transition:all.5s ease;
    -webkit-appearance: none;
    &amp;:hover, &amp;:focus {
      background:$main-dark;
    }
  }
  
  .button-block {
    display:block;
    width:100%;
  }
  
  .forgot {
    margin-top:-20px;
    text-align:right;
  }
  </code></pre>
  
  <p><strong>b.js</strong></p>
  
  <pre><code>$('.form').find('input, textarea').on('keyup blur focus', function (e) {
  
    var $this = $(this),
        label = $this.prev('label');
  
        if (e.type === 'keyup') {
              if ($this.val() === '') {
            label.removeClass('active highlight');
          } else {
            label.addClass('active highlight');
          }
      } else if (e.type === 'blur') {
          if( $this.val() === '' ) {
              label.removeClass('active highlight'); 
              } else {
              label.removeClass('highlight');   
              }   
      } else if (e.type === 'focus') {
  
        if( $this.val() === '' ) {
              label.removeClass('highlight'); 
              } 
        else if( $this.val() !== '' ) {
              label.addClass('highlight');
              }
      }
  
  });
  
  $('.tab a').on('click', function (e) {
  
    e.preventDefault();
  
    $(this).parent().addClass('active');
    $(this).parent().siblings().removeClass('active');
  
    target = $(this).attr('href');
  
    $('.tab-content &gt; div').not(target).hide();
  
    $(target).fadeIn(600);
  
  });
  </code></pre>
  
  <p>I downloaded it and put the html file in the website folder
  &amp; the css and js files in the css and js folders respectively.</p>
  
  <p>Then I tried to call these external files:</p>
  
  <pre><code>&lt;link href="css/my.css" rel="stylesheet"&gt;
  &lt;script src="js/b.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>but failed.</p>
  
  <p>I think the css rule is the reason or the the code for using external ".js" files &amp; css files </p>