As I'm getting to grips with front end development I'm looking to consolidate/improve my below HTML, CSS and JS code in terms of adhering to best practices so any advice is appreciated.Quick overview:I'm working on a page which has required me to create a page with a nav bar, a horizontal bar below the nav bar, a vertical bar, a dynamic calendar and its controls.Here's my code fiddle and full screen fiddle.Any improvement suggestions are appreciated.Note: for my JS code please see the fiddle.HTML:    <header>        <a href=# id=logo></a>        <nav>            <a href=# id=menu-icon></a>            <ul>                <li><a href=#containerjoin>My Profile</a></li> <!--  class=current -->                <li><a href=#containerjoin>Log Out</a></li> <!--  class=current -->                <li><a href=#>Help and FAQs</a></li>                <li><a href=#contactus>Contact Us</a></li>            </ul>                       </nav>                  </header>  <div class=clear></div>    <div class=maindiv>        <div class=horizontalmenubar>          <label for=show-menu class=show-menu>MAIN MENU</label>          <input type=checkbox id=show-menu role=button>          <ul id=menu> <!-- removed id=menu -->            <li><a href=#>Dashboard</a>              <!-- <ul class=hidden>                <li><a href=#>SUB MENU OPTION</a></li>                <li><a href=#>SUB MENU OPTION</a></li>              </ul>-->            </li>            <li>              <a href=#>H MENU OPTION</a>              <!-- <ul class=hidden>                <li><a href=#>SUB MENU OPTION</a></li>                <li><a href=#>SUB MENU OPTION</a></li>              </ul>-->            </li>            <li>              <a href=#>H MENU OPTION</a>              <!-- <ul class=hidden>                <li><a href=#>SUB MENU OPTION</a></li>                <li><a href=#>SUB MENU OPTION</a></li>              </ul>-->            </li>            <li><a href=#>H MENU OPTION</a></li>            <li><a href=#>H MENU OPTION</a></li>          </ul>        </div>        <div class=clear></div>        <div class=div_lhs_menu>            <ul class=js-css-menu responsive vertical>              <li><a href=#overalldivcalendartable>Calendar</a>                <!--<div>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                </div> -->              </li>              <li><a href=#>Dboard option 2</a>                <!--<div>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                </div> -->              </li>              <li><a href=#>Dboard option 3</a>                <!--<div>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                  <ul>                    <li><b>Col 1</b></li>                    <li><a href=#>Sublink 1</a></li>                    <li><a href=#>Sublink 2</a></li>                    <li><a href=#>Sublink 3</a></li>                  </ul>                </div> -->              </li>            </ul>               </div>        <!-- JS targets this div -->          <div class=overalldivcalendartable>            <!-- <div id=year></div> -->              <div class=controlsdivcalendartable>                   <span id=btnPrevYr title=Previous Year><span><<</span></span>                   <span id=btnPrev title=Previous Month><span><</span></span>                   <!-- <input type=button src=images/btnprevmonth.png alt=Submit id=btnPrev/>-->                   <!-- <div id=month></div> -->                     <!-- JS targets this div -->                     <div id=monthandyear></div>                   <!--<input type=button src=images/btnnextmonth.png alt=Submit id=btnNext/>-->                   <span id=btnNext title=Next Month><span>></span></span>                   <span id=btnNextYr title=Next Year><span>>></span></span>                      </div>              <div class=clear></div>              <div id=divcalendartable></div>            <div id=divcalendartabletwo></div>                   </div>  </div>    <div class=clear></div>    <footer id=footer>        <section>            <h3>ABOUT US:</h3>            <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br></p>                     </section>        <section>            <h3>LIKE, FOLLOW OR WATCH US:</h3>            <ul class=social>                <li><a href=#><img src=http://www.w3newbie.com/wp-content/uploads/facebook.png/></a></li>                               <li><a href=#><img src=http://www.w3newbie.com/wp-content/uploads/twitter1.png/></a></li>                <li><a href=#><img src=http://www.w3newbie.com/wp-content/uploads/youtube.png/></a></li>                                </ul>        </section>        <section id=contactus>            <h3>CONTACT US:</h3>            <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br><br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b><br><br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>                     </section>    </footer>    <footer class=footerTwo>        <p> Copyright &copy; 2015 | qwerty Ltd | All rights reserved.</p>    </footer>   CSS:/* Full width styling */* {    margin: 0;    border: 0;    padding: 0;}body {    background: #F5F5F5;    color: #363636;    margin: 0;    font-family: Helvetica Neue, Arial, sans-serif;    font-size: 14px;    font-style: normal;    font-variant: normal;    font-weight: normal;    line-height: 20px;  }h1 {    text-align: center;    font-size: 100%;    line-height: 120%;    padding: 5% 0 5% 0;}h2 {    line-height: 280%;    padding-left: 3%;    text-decoration: underline;}h3 {    line-height: 120%;    padding: 5% 0 5% 0;}p {    padding: 1%;}img {    text-align: center;    max-width: 100%;    height: auto;    width: auto;}a {    color: #FFFFFF;    font-weight: bold;    font-size: 20px;        text-decoration: none;}a:hover {    color: #FFFFFF;    font-weight: bold;    text-decoration: underline; }header {    background-color: #3366FF;    width: 100%;    height: 86px;    position: fixed;    top: 0;    left: 0;    z-index: 100;    opacity: 0.90%;}#logo {    margin: 0px;    float: left;    width: 200px;    height: 86px;    background: url(../images/logo.png) no-repeat center;}nav {    float: right;    padding: 25px 20px 20px 0;}#menu-icon {    display: hidden;    width: 100px;    height: 86px;    background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);    padding: 0;    margin: 0;}   a:hover#menu-icon {    border-radius: 2px 2px 0 0;}ul {    list-style: none;}nav ul li {    display: inline-block;    float: left;    padding: 10px;}nav ul li a:hover {    color: #363636;    text-decoration: none;}section {    width: 29%;    float: left;    margin: 2% 2% 2% 2%;    text-align: center;}.clear {    clear: both;}#genericlinkdecoration {    color: #3366FF;    text-decoration: none;    font-weight: bold;    font-size: 14px;}footer {    background-color: #808080;    width: 100%;    overflow: hidden;}footer p, footer h3 {    color: #FFFFFF;}footer p a {    color: #FFFFFF;    text-decoration: none;    font-weight: normal;    font-size: 14px;}ul.social li {    display: inline;}ul.social img {    height: 50px;}footer.footerTwo {    border-top: 1px solid #4D4350;    background-color: #3366FF;    text-align: center;}/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  */@media screen and (max-width : 768px) {    body {        position: absolute;    }    header {        position: absolute;    }    #menu-icon {        display: inline-block;    }       nav {        padding: 0;    }    nav ul, nav:active ul {        display: none;        position: absolute;        background: #FFFFFF;        border: 1px solid #D6D6D6;        right: 20px;        top: 60px;        width: 50%;        border-radius: 2px;    }    nav:hover ul {        display: block;    }    nav ul li a {        color: #363636;        text-decoration: none;    }    nav ul li a:hover {        color: #3366FF;        text-decoration: none;    }    nav li {        width: 100%;        margin: 0;    }    section {        float: left;        width: 100%;        margin: 0;        padding: 0;    }                       }.horizontalmenubar {    margin-top: 86px;    background: #D6D6D6;    height: 50px;}/*Strip the ul of padding and list styling*/.horizontalmenubar ul {    list-style-type: none;    margin: 0;    padding: 0;}/*Create a horizontal list with spacing*/.horizontalmenubar li {    display:inline-block;    float: left;    margin-right: 0px;    width: 200px;    border-right: 2px solid #FFFFFF;}/*Style for menu links*/.horizontalmenubar li a {    display: block;    text-align: center;    line-height: 50px;    color: #000000;    background: #D6D6D6;    text-decoration: none;}/*Hover state for top level links*/.horizontalmenubar li:hover a {    background: #F5F5F5;    color: #3366FF;}/*Hide dropdown links until they are needed*/.horizontalmenubar li ul {    display: none;}/*Make dropdown links vertical*/.horizontalmenubar li ul li {    display: block;    float: none;}/* Style the <a> tag nested in sub-menus */.horizontalmenubar li ul li a {    padding: 0 5px 0 5px;    line-height: 25px;  }/* Style the hovering of the <a> tag nested in sub-menus */.horizontalmenubar li:hover ul li a {    background: #D6D6D6;    color: #000000; }/* Style the hovering of the <a> tag nested in sub-menus */.horizontalmenubar li ul li a:hover {    background: #F5F5F5;    color: #3366FF; }/*Display the dropdown on hover*/.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {    display: block;}/*Style 'show menu' label button and hide it by default*/.show-menu {    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;    text-decoration: none;    color: #000000;    background: #D6D6D6;    text-align: center;    padding: 10px 0;    display: none;    font-weight: bold;    font-size: 20px;}/*Hide checkbox*/.horizontalmenubar input[type=checkbox]{    display: none;}/*Show menu when invisible checkbox is checked*/.horizontalmenubar input[type=checkbox]:checked ~ #menu{    display: block;}/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  *//*@media screen and (max-width : 1024px) {*/    /*Make dropdown links appear inline    .horizontalmenubar ul {        position: static;        display: none;    }*/    /*Create vertical spacing    .horizontalmenubar li {        margin-bottom: 1px;    }*/    /*Make all menu links full width    .horizontalmenubar ul li, li a {        width: 100%;    }*/    /*Display 'show menu' link*/    /*.show-menu {        display:block;    }*//*}*//*@media screen and (min-width: 1024px) and (max-width : 1224px) {    .horizontalmenubar li {        width: 180px;    }}*/.maindiv {    width: 1280px;    margin: 0 auto;}/* LHS div */.div_lhs_menu {    margin: 10px 0 0 0;    float: left;}/* Main menu */.js-css-menu {  display: inline-block;}.js-css-menu, .js-css-menu ul, .js-css-menu li {  list-style: none;   padding: 0;   margin: 0;}.js-css-menu a {  text-decoration: none;}.js-css-menu > li {  display: inline-block;   float: left;  margin-top: 2px;  background-color: #D6D6D6;}.js-css-menu > li > a {  color: #000000;   display: block;  padding: 10px 15px;}.js-css-menu > li:hover > a {  background: #F5F5F5;  color: #3366FF;}/* Dropdown */.js-css-menu > li div {  position: absolute;   display: none;  background: #D6D6D6;}.js-css-menu > li:hover div {  display: block;}.js-css-menu > li div ul {  float: none;}.js-css-menu > li div ul li {  padding: 10px 15px;  margin-bottom: 2px;}.js-css-menu > li div ul li:hover {  background: #FFFFFF;  color: #407D94; }.js-css-menu.vertical > li {  display: block;   float: none;   position: relative;}.js-css-menu.vertical > li div {  width: 150px;   top: 0;  left: 181px; /* Adjust the left value according to the width of the vertical menu */}.js-css-menu.vertical > li div ul li:hover {  background: #FFFFFF;  color: #407D94;}.js-css-menu.vertical > li div ul li a {  color: #555;}/*@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {  */@media screen and (max-width : 768px) {    /* Vertical */    .js-css-menu.vertical {      width: 100%; /* Adjust the width of the vertical menu */    }}/* Generic table styling */.overalldivcalendartable {    margin: 20px 0 12px 20px;    float: left;}.controlsdivcalendartable {    float: left;}table {   border-collapse: collapse;  table-layout: fixed; }th {   background: #333;   color: white;   font-size: 20px;  font-weight: bold;   padding: 6px;  vertical-align: top;}td {   padding: 6px;   border: 1px solid #ccc;  vertical-align: top;  width: 130px;  height: 100px;  font-size: 20px;}#divcalendartable {    margin-top: 20px;}#btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {    font-size: 35px;    font-weight: normal;    text-decoration: none;    vertical-align: middle;    cursor: pointer;    float: left;    margin-right: 20px;    -webkit-user-select: none;  /* Chrome all / Safari all */    -moz-user-select: none;     /* Firefox all */    -ms-user-select: none;      /* IE 10+ */    /* No support for these yet, use at own risk */    -o-user-select: none;    user-select: none;}#monthandyear {    cursor: default;}#monthandyearspan {  width: 200px;  display: inline-block;    font-size: 35px;  font-weight: normal;  vertical-align: middle;  text-align: center;  /*background: #00FFCC;*/}   #monthandyear {  vertical-align: middle;  float: left;  font-weight: normal;}.daysheader {  background: #C0C0C0;  height: auto;  text-align: center;}#prevmonthdates, #nextmonthdates, #currentmonthdates  {    font-size: 20px;    font-weight: bold;}#prevmonthdates, #nextmonthdates {  background-color: #E0E0E0;}#currentmonthdates {  background-color: #FFFFFF;}/*Apply styling UL cellvaluelist*/#cellvaluelist {  font-family:'Trebuchet MS', Tahoma, Sans-serif;  font-size: 20px;    list-style-type: none;  margin: 0;  padding: 0;  width: 130px;}/*Apply styling on all LI items in the UL cellvaluelist*/#cellvaluelist > li {  list-style-type: none;  text-align: left;  border-bottom: 2px solid #F5F5F5;  width: 130px;}/*Eliminate border on last list item*/#cellvaluelist > li:last-child {  border: none;  width: 130px;}/*Styling for the span in the main list*/#cellvaluelist > li span {  text-decoration: none;  color: #000;  display: block;  width: 130px;  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;  -o-transition: font-size 0.3s ease, background-color 0.3s ease;  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;  transition: font-size 0.3s ease, background-color 0.3s ease;}/*Shared styling for swim and chrono*/.swim, .chrono {    font-size: 15px;    font-weight: normal;    width: 130px;    overflow: auto; }/*Styling for the list items in the table cells*/.swim {  background: #626FD1;}/*Hover on the 1st LI item on the list in the table cell*/.swim:hover {  background: #F5F5F5;  cursor: pointer;}/*Styling for the list items in the table cells*/.chrono {    background: #EDCF47;}/*Hover on the 2nd LI item on the list in the table cell*/.chrono:hover {  background: #F5F5F5;  cursor: pointer;}/*Styling for the list items in the table cells*/.couponcode {    background: #47ED4D;    font-size: 15px;    font-weight: normal;}/*Hover on the last LI item on the list in the table cell*/.couponcode:hover {  background: #F5F5F5;  cursor: pointer;}/*Apply the hover on the UL coupontooltipullist*/.couponcode:hover .coupontooltipullist {    display: block;}/*UL in the tooltip*/.coupontooltipullist {    display: none;    position: absolute;    z-index: 1000;    padding: 5px;}/*Shared UL and LI list properties in the tooltip*/.coupontooltipullist, .coupontooltip_li_list {    list-style-type: none;    float: left;    margin: 0;    padding: 0;    cursor: pointer;    }/*LI in the tooltip*/.coupontooltip_li_list {    background: #D6D6D6;    border-bottom: 2px solid #F5F5F5;    padding: 10px; }/*IMG in the LI in the tooltip*/.coupontooltipimg {    width: 55px;    height: 48px;    float: left;    padding-right: 5px;    }/*Span in the LI in the tooltip*/.coupontooltiplistspan {  float: right;}
Consolidating my HTML, CSS and JS code in order to adhere to best practices
html;css