This forum is now read-only. Please use our new forums at discuss.codecademy.com.

218 points
F65783a9470d15f1020bbfc18e2e81b6?s=140&d=retro
Submitted by
TuffHedeman
over 3 years ago

Huge jump from static site to interactive site. Assistance needed.

I just completed the lesson of building a static site and everything went great, I felt like I absorbed a lot of what was thrown my way and at the end of the lesson was able to complete the tasks with little to no help other than a few typos.
However; when I switched to building an interactive site lesson I began getting held up at the beginning. I don't understand the functions or how they work, or how to select them or what the special characters do and how to use them.
Can someone point me in the direction of a tutorial or a different lesson plan that outlines this?


2 votes

permalink

I have no help for you. But I agree with you. I do not feel as if there is nearly as much guidance as need in this section. I feel like they kinda just expect me to know all of this. The first part where you are making the menu come out I don't know how we are expected to just know where all of the symbols go, what position to put them in. That section let me go on even though my menu does not even open as it should!

125 points
56454575d3292f333800093f_675916768
Submitted by
Timothy
over 3 years ago


0 votes

permalink

I'm glad I'm not the only one with this issue but one thing I found that may or may not help in the long run.
I took a step back and went to programming languages on the main page and started with HTML & CSS, it is delving much deeper into the syntax of the language. After I've completed the HTML & CSS course I'm going to move onto JS and JQ.

218 points
F65783a9470d15f1020bbfc18e2e81b6?s=140&d=retro
Submitted by
TuffHedeman
over 3 years ago


0 votes

permalink

This is quite a leap from HTML and CSS, I'm struggling to understand where all the syntax goes.

I think that this lesson could definitely be explained in further depth. i have the same issue from part 5/8 it allows me to proceed without my Menu appearing, I even tried copying and pasting their "Get a Hint" and it still did not appear.

Some further clarification is definitely needed with this lesson, however, for free I'm not complaining.

204 points
3efb4b6e1afafee86947592f39e79e3d?s=140&d=retro
Submitted by
baca5ate
over 3 years ago


0 votes

permalink

@baca5ate,

+++++ DOM representation of push menu

If your HTML-page is loaded into memory by the Browser
the memory-layout will be build
using the rules, as defined in the Document Object Model
in short the DOM

The DOM representation of the index.html file would look like:

               html
                |
         |------+---------|
         |                |
        head             body
         |                |
    |----+----|      |----+-----------|
    |    |    |      |                |
   link link link  10div(.menu)     27div(.jumbotron)
                    |                 |
     |--------------+----|          29div(.icon-menu)
     |                   |             |
   13div(.icon-close)  18ul          30i (.fa
     |                   |             |  and .fa-bars)
    img       |-----|----+|-----|    text  
              |     |     |     |    node
             19li  20li  21li  22li
              |     |     |     |
              a     a     a     a
              |     |     |     |
            text   text  text  text
            node   node  node  node

Now if you look at the DOM representation
the body-Tag is parent to
a 10div Element's Tree ( with class-attribute with class-name "menu" )
and
a 27div Element's Tree ( with class-attr. with class-name "jumbotron" set )

Now if you look in the style.css file,
with which you manage the Display of your Elements,
you will find that
the body object has the property left: 0; being set
( the body-Tree has a _start-Display at position left-0 )_

but
the .menu object has the property left: -285px; being set
and therefor the 10div-Tree is outside of Display.

In your 'app.js' file you are
CREATING a VARIABLE main
to which you assign a so-called anonymous Function
and in the FUNCTION-BODY of this anonymous Function
we are attaching our click Event-handlers
to the HTML-Elements which are
-1 carrying the "icon-menu" class-name as class-attribute
-2 carrying the "icon-close" class-name as class-attribute
( during the assignment the function is NOT executed )

You will have to add the code-line
$(document).ready( main );
which will result in the =main= Function to be executed
AFTER the Browser has set the ready Event-flag.

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/

what is CSS explained site:developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

@baca5ate,
++++++++++ structure P u s h M e n u function
The structure of your =main= Function should look like....

  var main= function() {
     $('.icon-menu').click( function() {
           //Your animation
     });

     $('.icon-close').click( function() {
           //Your animation
      });
   };
 $(document).ready(main);

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

Thank you, Leon! Your last post helped me to fix my problem. Although I agree it's a huge leap from HTML and CSS. I will probably do the same as a user above that after I've completed the HTML & CSS course I'm going to move onto JS and JQ.

415 points
7b5471cc3fca7cad989f91504a1d4462?s=140&d=retro
Submitted by
itiarmpalu
over 3 years ago


0 votes

permalink

@itiarmpalu,
Did you try...
http://www.codecademy.com/guidance/choose

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

That was exactly what I was looking for Thank you Leon. I have finished the HTML/CSS course and the javascript course on codecademy but the jQuery really threw me for a loop. I am going to take the full stack dev path since that is what most employers are looking for these days. I was also wondering if you know of a good way to implement python into your websites? I am fond of Python in comparison to javascript and I am having a hard time finding a practical application use for Python. It seems like kind of a waste of time to learn an entire programming language, become proficient then have no way to use it -_-. Tnx for your time

1007 points
55a5472ae39efe3eb200034b_431234153
Submitted by
Tyasu
over 3 years ago


0 votes

permalink

In this link you will find some entries to Python playgrounds....
http://stackoverflow.com/questions/25952/best-programming-based-games

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago


0 votes

permalink

I agree - this course isn't as well-written as the basic HTML course. In particular, 5/8 asks you to program things that you've not been told about before.

429 points
9e2406e49fdfc52a9e0579ffd6331393?s=140&d=retro
Submitted by
David Bodycombe
over 3 years ago


0 votes

permalink

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com

== guidance ==
www.crockford.com
[your question] site:crockford.com

3701 points
5334fc819c4e9db930001a0d_32139218
Submitted by
Leon
over 3 years ago