Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Getting a Handle on the DOM Using CSS Queries to Select Page Elements

hmmnotme
hmmnotme
4,968 Points

What is happening?! Please have Dave remake this whole course!

From the get-go it wasn't clear what is being taught in this course. I rewatched the videos and ... nope there isn't enough good explanation on what's being done. The very first coding challenge that I did not pass on the first try. I did not even get it at all. I don't know what this man is talking about! This course is either out of place in beginning javaScript track or he is just not explaining well enough. Jumping from one topic to another, to another and I'm stressing about the last topic (the terminology and syntax). All of a sudden he might say, "don't worry about this topic and what I just explained; I just wanted to show you what is possible?!!" You can't be serious, after going into details of what he is explaining, he says not to worry about it. smh. What even is DOM and why do you have to jump back and forth from HTML to JS? Just saying the abbreviation is not enough to know why it is being used. Or what it is? Is it a different program? Is it a syntax sugar? I guess the journey of my programming ends here.

John Collins
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Collins
Full Stack JavaScript Techdegree Graduate 28,593 Points

I am following the beginning JavaScript course as well, and I have to agree. This course seems out of place and/or just poorly explained for the challenge questions. I managed to muddle through to the last challenge, but I find I'm seeking answers more through the MDN or the forum than I am relying on the content of the video. This is just frustrating that I would come to TreeHouse to learn JavaScript and then would have to teach myself using the Mozilla Developers Network or other references to find the challenge answers. This leaves me feeling like my learning has come to a screeching halt while I try to decipher the code for this one challenge. I get that as I gain experience I will need to continue to pull on these same resources for help. However, at this stage in my career I'm more interested in gaining experience through teaching and doing rather than exploring ways of finding answers. I feel your pain hmmnotme!

I am following the JavaScript Full Stack course, and I still agree with this sentiment, especially when it comes to the challenge at the end of this segment. The hint is not adequate, and includes a new concept (descendants) and knowledge of CSS, neither of which was covered in any of the previous modules in this track. I've watched the supplemental video on descendants and gone to the MDN website to read more but am still unable to find what I need for the last challenge. There has been no mention of CSS in the prior courses. This challenge has led me astray and frustrated.

To me, it feels like everything explained in the previous Javascript block , Start to make sense here. As a complete beginner, I was struggling really hard for a long time on the prev Jsc block - Especially on the challanges... and there was no chance to practice anything at all on my own.

In this block, I can create small projects for myself to practice and memorize stuff - I understand better now, what I didnt understood before (from the jsc course) and I enjoy to study, and progress again. I m kinda happy that finally I get there!

8 Answers

Charles Badger
Charles Badger
18,189 Points

DOM stands for document object model. It's the underlying structure that makes up a website. It's the browser's interpretation of your code.

A website is made of three layers: HTML is the content layer. It's the words, images, forms, etc that make up a website. CSS is the presentation layer. It's what allows you to change the colors, size, position, etc of the content of the website. JavaScript is the behavior layer. It's what tells your browser how to act when certain events take place like form submissions, animations, or dynamically generate content.

Let's look at an example of how JavaScript works with the DOM. Say you have a website with a button that when pressed, confetti falls down the screen. Your page would consist of HTML with a button, some CSS to style it, and JavaScript to determine the behavior of the button. In your JavaScript, you'll have an event listener that will listen for the button click, and a function that generates the confetti. In order for your event listener to know is being clicked, you have to select a DOM element to listen to (in this case, it's the button.) After the button is clicked, the confetti has to be generated and attached to the DOM.

Here's a simplified version of the DOM before the button is clicked:

<html>
  <head>
  </head>
  <body>
     <button id='confetti-button'>Confetti</button>
  </body>
</html>

And here's a simplified view of the DOM after the button is clicked:

<html>
  <head>
  </head>
  <body>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <img class-'confetti' src='mgs/confetti.svg'>
     <button id='confetti-button'>Confetti</button>
  </body>
</html>

This is one of the great things about JavaScript. It lets you dynamically change the DOM and make websites truly interactive. Learning to traverse the DOM can be challenging, and definitely gets confusing at times. It took me a long time to understand what the DOM was, and why it was important. If you're having problems with understanding how Treehouse is presenting the DOM, check out other resources. Sometimes I need things explained to me 5 or 6 times in 3 different ways before I start to understand it. Don't give up!

Converted to an answer. - Edited by Dane E. Parchment Jr. (Moderator)

hmmnotme
hmmnotme
4,968 Points

Thanks Charles for taking the time to answer. Your explanation of what DOM helped a lot! There was a little quiz in the course and I followed along with the videos. I passed the quiz easily but still did not even know that what I was doing was considered DOM. The second set of codes you attached, I thought of as pure HTML before your explanation. <body> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <img class-'confetti' src='mgs/confetti.svg'> <button id='confetti-button'>Confetti</button> </body>

In the video he just does it without enough justification as what we are doing! I'm gonna look for information on DOM elsewhere.

Without all the panic, I'll agree this course so far seems to be lacking. Lots of WHY's missing. Feel like Dave was breaking down the syntax better.

Robert O'Toole
Robert O'Toole
6,366 Points

honestly i felt this way last week. and then just pushed through the whole JS DOM course.... then this week a reviewed it FROM scratch. i highly suggest going over the ES2015 course first though so u understand things that can be overlooked like let and const. which they just randomly throw in here without explaining.

this explained the WHOLE const and let thing so well for me... but beyond that just push through. look up the answers even to help the first time around then the second time around in this course i guarantee u will be able to answer all the quiz questions and notice things u overlooked.... this is what coding is like I've realized... and I've only started my journey 3-4 months ago lol https://jscomplete.com/playground/s377304

Quinton Shuman
Quinton Shuman
7,068 Points

As I have attention issues there are other reasons I find myself restarting these Guil videos over and over again. It seems like once I hear his voice my mind automatically decides to set sail on a different thought. BUT I do feel like what you're talking about is actually beneficial and may even be intentional. For instance you pointed out that you have to stop and research a specific term or something. This, albeit frustrating and slow at first, is a valuable skill. After doing these courses with Guil I feel more and more that I can tackle things better on my own because I know how to find the answers on my own. I more or less use teamtreehouse as a course guide of what ideas and terms I should know and then go more into depth on the topic on my own whether thats youtube, written articles, or mdn. Sure it takes longer but it makes me feel more confident in my skills. That being said I do find that when I embark on a new course I am always bummed when its Guil. Sorry Guil.

If the course feels too difficult, it may not be a problem with you or the course. The concepts encountered in this course are a leap up in abstraction from the concepts needed for many of the previous JavaScript courses. Inevitably, we reach a point sometimes where it is necessary to take some time and work on problems and projects on our own and with others in order to solidify what we have learned and gain general experience with programmatical concepts. In math, we call this "gaining mathematical maturity". To just endlessly grind through textbooks of ever increasing difficulty would be a miserable exercise in frustration. You're bound to hit a wall eventually, and at that point it becomes much more fruitful to just play around with what you already know, than to try to force-learn more new concepts. In a very real, physical sense, there are hard limits on how fast we can learn, and typically those people who appear especially gifted have already spent years building a solid conceptual foundation for what they are learning. Best of luck to those experiencing frustration, don't give up, take your time and have some fun with it, as you said, it is a journey!

Robert O'Toole
Robert O'Toole
6,366 Points

oh also the nth child stuff is later in a CSS advanced selector course which is rather silly yes... lol

it seems they need to fix the order of the web development track... i spent months learning var and scope with var only to realize that var is barely even used these days lol

Maja Divkovic
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Maja Divkovic
Front End Web Development Techdegree Graduate 13,920 Points

This happens often with courses done by Guil unfortunately, it is extremely hard to follow as he starts of slow, and then within two seconds he is rushing through the code just saying don't worry about this I will explain it at a later stage. :(