I am trying to step to the next level from student to amateur web developer, and I would like to make sure I am not making any web-development no-no's, that's all. What caused me to want to ask SO this question is that I had to make some tweaks to make my responsive design work.
For instance, I had to make a lot of my positions "absolute" and had to do some hacking in my HTML, making a different nav bar if it's mobile, desktop or tablet (you'll see I haven't done anything with tablet) design. I'm also pretty new to jQuery, although I'm a programmer so I think that code is okay, but I'll post it anyways. Some other stuff as well, would really appreciate ANY feedback, and I really want some good criticism so I can become better.
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('nav').hide();
$('.maDown').hide();
$('.assignmentsDown').click(function() {
$('nav.aDown').slideDown(2000);
if($('.wDown').is(":visible"))
{
$('nav.wDown').slideToggle(300);
}
if($('.pDown').is(":visible"))
{
$('nav.pDown').slideToggle(300);
}
$('nav.aDown').slideDown(2000);
});
$('.MassignmentsDown').click(function() {
$('.maDown').show();
});
$('.writingDown').click(function() {
$('nav.wDown').slideDown(2000);
if($('.aDown').is(":visible"))
{
$('nav.aDown').slideToggle(300);
}
if($('.pDown').is(":visible"))
{
$('nav.pDown').slideToggle(300);
}
});
$('.presentationDown').click(function() {
$('nav.pDown').slideDown(2000);
if($('.wDown').is(":visible"))
{
$('nav.wDown').slideToggle(300);
}
if($('.aDown').is(":visible"))
{
$('nav.aDown').slideToggle(300);
}
});
}); //closes ready
</script>
</head>
<figure>
<img src="downwardmonkey.png" alt="down" class="head">
</figure>
<body>
<div id="navContainer">
<h1 class="mainT"> Al Gore Rhythm Labs </h1>
<h2 class="subT"> Chicago, IL </h2>
<div class="topNav">
<ul>
<li> <a href="#" class="assignmentsDown"> Assignments </a></li>
<li> <a href="#" class="writingDown"> Writings </a> </li>
<li> <a href="#" class="presentationDown"> Presentations </a></li>
</ul>
</div>
<div class="mNav">
<p> <a href="#" class="MassignmentsDown"> Assignments |</a></p>
<p> <a href="#" class="MwritingDown"> Writings |</a> </p>
<p> <a href="#" class="MpresentationDown"> Presentations </a></p>
</div>
<div class="maDown">
<ul>
<li class="assignments"><a href="origindex.html" class="a"> First Class Page (A1) </a></li>
<li class="assignments"><a href="#" class="a"> Responsive Class Page (A2) </a></li>
<li class="assignments"><a href="A3.html" class="a"> CSS Engagement (A3) </a></li>
<li class="assignments"><a href="A4.html" class="a"> Transitions and Animations (A4) </a></li>
<li class="assignments"><a href="A5.php" class="a"> jQuery (A5) </a></li>
<li class="assignments"><a href="A6.html" class="a"> jQuery Usability (A6) </a></li>
<li class="assignments"><a href="A7.html" class="a"> HTML5 Form (A7) </a></li>
</ul>
</div>
</div>
<nav class="aDown">
<ul>
<li class="assignments"><a href="origindex.html" class="a"> First Class Page (A1) </a></li>
<li class="assignments"><a href="#" class="a"> Responsive Class Page (A2) </a></li>
<li class="assignments"><a href="A3.html" class="a"> CSS Engagement (A3) </a></li>
<li class="assignments"><a href="A4.html" class="a"> Transitions and Animations (A4) </a></li>
<li class="assignments"><a href="A5.php" class="a"> jQuery (A5) </a></li>
<li class="assignments"><a href="A6.html" class="a"> jQuery Usability (A6) </a></li>
<li class="assignments"><a href="A7.html" class="a"> HTML5 Form (A7) </a></li>
</ul>
</nav>
<nav class="wDown">
<ul>
<li class="writings"><a href="#" class="Writing1.html"> How HTML Will Kill The Native App (W1) </a></li>
<li class="writings"><a href="#" class="Writing2.html"> Ubiquitous Computing (W2) </a></li>
<li class="writings"><a href="#" class="Writing3.html"> Re-examining Interactivity (W3) </a></li>
</ul>
</nav>
<nav class="pDown">
<ul>
<li class="presentations"><a href="PresOne.html" class="p"> Interactive Interests (P1) </a></li>
<li class="presentations"><a href="P2.html" class="p"> Experimental Interactive Artifacts (P2) </a></li>
<li class="presentations"><a href="P3.html" class="p"> Research Assets (P3) </a></li>
</ul>
</nav>
</body>
<figure>
<div class="grassImageDiv"></div>
</figure>
<footer>
<p><a href="http://www.jdmdev.net"> Jordan Max 2014 </a></p>
</footer>
</html>
CSS3
/********************* DEFAULT QUERIES *********************/
body
{
background-image: url("bg.gif");
}
/******************** MOBILE QUERIES ********************/
@media all and (max-width: 600px) {
a.assignmentsDown, a.writingDown, a.presentationDown, div.topNav
{
display: none;
}
h1, h2
{
text-align: center;
width: 100%;
color: #9aa49a;
}
h1.mainT
{
font-family: 'Montserrat', sans-serif;
font-size: 1.5em;
}
h2.subT
{
font-family: 'Open Sans Condensed', sans-serif;
margin-top: -17px;
}
div#navContainer
{
background: #FCFCFC;
height: 80px;
width: 100%;
}
img.head
{
display: none;
}
a
{
color: #8B8B83;
text-decoration: none;
}
footer
{
color: #9aa49a;
font-family: 'Montserrat', sans-serif;
background-color: #FCFCFC;
width: 100%;
height: 38px;
font-size: .85em;
text-align: center;
padding: 5px;
position: absolute;
bottom: 0;
}
.grassImageDiv
{
display: inline-block;
background-image: url("grass3.png");
position: absolute;
height: 107px;
width: 108%;
bottom: 44px;
margin-left:-61px;
overflow-x: hidden;
}
.mNav
{
text-align: center;
background-color: #FCFCFC;
box-shadow: 10px 10px 5px #888888;
top: 96px;
width: 100%;
position: absolute;
}
div.mNav>p
{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.2em;
height: 70%;
list-style-type: none;
display: inline;
}
ul li.assignments, li.writings, li.presentations
{
line-height: 250%;
list-style-type: none;
font-family: 'Montserrat', sans-serif;
}
div.maDown
{
background: #FCFCFC;
width: 300px;
box-shadow: 2px 3px 10px #333;
}
} /******************** end media query ********************/
/******************** TABLET QUERIES ********************/
@media all and (min-width: 600px) {
aside
{
}
} /******************** end media query ********************/
/******************** Desktop Queries ********************/
@media all and (min-width: 1240px){
}
/******************** Large Desktop Queries ********************/
@media all and (min-width: 1240px){
div.mNav
{
display: none;
}
div.maDown
{
display: none;
}
h1
{
}
h2
{
margin-top: -40px;
margin-left: 120px;
}
h1.mainT
{
width: 590px;
font-family: 'Montserrat', sans-serif;
margin-left: 10px;
font-size: 2.5em;
}
h2.subT
{
width: 130px;
font-family: 'Open Sans Condensed', sans-serif;
}
nav
{
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.2em;
width: 500;
height: 70%;
background-color: #FCFCFC;
padding: 5px;
margin: 10px auto 30px 42%;
box-shadow: 2px 3px 10px #333;
position: fixed;
margin-left: 42%;
top: 15%;
left: -100px;
}
div.topNav>ul>li
{
display: inline-block;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.2em;
list-style-type: none;
}
div.topNav
{
word-spacing: 75px;
margin-top: -60px;
margin-left: 650px;
}
a
{
color: #8B8B83;
text-decoration: none;
}
footer
{
color: #9aa49a;
font-family: 'Montserrat', sans-serif;
background-color: #FCFCFC;
width: 100%;
font-size: .85em;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 1;
}
div#navContainer
{
height: 100px;
background: #FCFCFC; /* grey99*/
box-shadow: 2px 3px 5px #333;
position: fixed;
width:100%;
z-index: 1;
}
ul li.assignments, li.writings, li.presentations
{
width: 400px;
line-height: 250%;
margin-left: -25px;
margin-right:27px;
padding: 20px;
list-style-type: none;
font-family: 'Montserrat', sans-serif;
text-align: center;
z-index: 1;
}
div.temp
{
z-index:1;
}
a:hover.a,:hover.w,:hover.p
{
color: #C1CDC1;
}
figure img.head
{
position: fixed;
top:117px;
margin-left: 58px;
}
p.clickHere
{
position: fixed;
top: 450px;
left: 77%;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.6em;
color: #EDEFED;
}
.grassImageDiv
{
display: inline-block;
background-image: url("Grass2.png");
width: 120%;
height: 216px;
position: fixed;
margin-left:-96px;
bottom: 42px;
z-index: -1;
}
/******************** end media query ********************/