Beginner?


#1

The instructions assume you know what they're talking about. Pretty sure it's missing some key steps here (for beginners). Example:

  1. Add a function inside the .click() method.
  2. Select the 'menu' class and animate it.

Am I the only one that has no idea what it's talking about?! I always have to look at the hints. I'm not learning just copying what's in the hint box.

As many others have noticed, it also accepts code that is screwy, but obviously you can't make the script work with subsequent instructions if you got one thing wrong at the beginning. :rage::cry:


#3

@javawhiz75911,

+++++ 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.

++++++++++ 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);

explanation of the push-menu setup
https://www.codecademy.com/forum_questions/55b3d3c1d3292f529b00005e

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/
http://www.w3schools.com/jquery/jquery_ref_selectors.asp
http://www.w3schools.com/jquery/trysel.asp

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


#4

I just want to also say that this lesson is making a lot of assumptions on the users part. I finished the HTML and CSS section and moved on to this but I don't have a clue what it means when it says "Select the menu and animate it"?!

It's really frustrating. I am not learning if I am just typing whatever the hint says.

Is there a lesson I should be looking at before this one?


#5

@kittenmittns Yes, you should take the jQuery course before this one :slightly_smiling:


#6

@kittenmittns,
or the course
https://www.codecademy.com/learn/jquery


#7

@leonhard.wettengmx.n Woops! I meant the course you linked to, I just copied the wrong link :smile:
Thanks for posting the correct link! :slightly_smiling:


#8

I did exactly the same. I went from HTML and CSS to the "Build an Interactive Website" - assuming it would follow on from what we'd just learnt! Sigh Would have been helpful to point out we needed to do JQuery first. :disappointed_relieved:

Thanks for the pointers though everyone!


#9

Follow up to what you learnt in HTML & CSS course is the Make a website course

The make a website course is plain HTML & CSS, teaches you how to make good looking websites..

If you feel you don't need any more practice in HTML & CSS (everyone always needs practice) then go ahead and do the jQuery course as Zeke said..


#10

If you're on the home page it shows you a few tiles. First one says: 'Not sure where to Start?', the second: "Make a Website" and the third: "Make an Interactive Website." What I did, and I know I'm not the only one, was go from "Make a Website" to "Make an Interactive Website". I didn't realise there were other sections below, listed in "Language Skills". I now realise my mistake.


#11

@javawhiz75911 Yeah it can be annoying. Codecademy is working on removing outdated and unhelpful content (like this course), and replacing it with higher-quality content :slightly_smiling:
In fact, I think this course is supposed to be removed pretty soon, within the next several months. I'm not yet sure what will replace it, but I'm sure it will be a much better course :slightly_smiling:


#12

I am with you on this one! I did the first tutorial "Make a Website" for beginners and I learned a ton. This was the next tutorial that it suggested I take, and I am LOST. I am a really quick learner and was feeling really proud of my progress in the first tutorial, but the "Interactive Website" tutorial is not for beginners.


#13

I command you do the jQuery course first then interactive website course


#14

I have the same problem. I finished HTML and CSS and the next one is Create an Interactive website but it assumes you already know the stuff.
Why didn't they set up so it leads to the jQuery then?


#15

Please create your own topic instead of reviving a six month old one, thanks.


#16

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.