5
\$\begingroup\$

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.

live demo

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 ********************/
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
4
\$\begingroup\$

From a once over:

  • $(document).ready(function () { <- old skool, you should use $( handler )
  • Indenting, you are not doing it consistently
  • $('.assignmentsDown').click(function() { and
    $('.writingDown').click(function() { and
    $('.presentationDown').click(function() { all use copy pasted code, you should consider a generic function that can be used for all 3 situations
  • It is consider better form nowadays to have your JavaScript in a separate .js file
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.