Learning web development: Marking guides and questions


(Chris Mills) #272

I am not sure what you mean. Do you want:

  1. A way to view in the devtools the JavaScript that creates a specific bit of generated HTML?
  2. A bit of JavaScript code that will grab the full HTML tree inside a specific element and prints it out?
  3. Something else?

(Mauro Di Bert) #273

Option 1 @chris! Because in a whole HTML i cannot know what part of the JS corresponds to a specific button, for instance. Is there anyway? Tks again!

(Chris Mills) #274

Not exactly, but kind of :wink:

If you have an event listener attached to a button, you’ll see a little “ev” button next to the button in the DOM inspector. Clicking this will ring up the event listener code associated with that button.

Apart from that, you just need to give your buttons sensible class names, and save references to them in sensible variable names in the JavaScript, so you know which bit relates to what. For example, if you have

<button class="subscribe-btn">Subscribe!</button>

You could then reference it in the JS with

var subscribeBtn = document.querySelector('.subscribe-btn');

If your page is complex and contains lots of buttons, it might be worth having a physical diagram stuck on your wall showing the UI, with the HTML and JS names of each button written next to each one.

(Mauro Di Bert) #275

Thanks @2alin! I was with a lot of things and could not thank you properly! And since I’m studying again, I come with this responde now! hehe. thanks man

(Mauro Di Bert) #276

Hi @chrismills! How are you!? I’m here with this code in where I can’t find why it doesn’t work. Could be because I didn’t define separately the pronoun? Tks man!

      function Person(first, last, age, gender, interests) {
        this.name = {
          'first': first,
          'last' : last
        this.age = age;
        this.gender = gender;
        this.interests = interests;
        this.bio = function() {
          var firstString = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
          if(this.gender === 'male') {
            firstString += 'He likes';
          } else if(this.gender === 'female') {
              firstString += 'She likes';
          } else {
              firstString += 'They like';

          for(i = 0; i < this.interests.length; i++) {
            if(this.interests.length === 1) {
              firstString += this.interests[0] + '.';
            } else if(this.interests.length === 2) {
              firstString += this.interests[0] + ' and ' + this.interests[1] + '.';
            } else {
              for(i = 0; i < this.interests.length; i++) {
                if(i === this.interests.length -1) {
                  firstString += 'and ' + this.interests[i] + '.';
                } else {
                  firstString += this.interests[i] + ', ';


      var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
      var person2 = new Person('Robert', 'Diven', 12, 'male', ['games', 'more games']);
      var person3 = new Person('Sarah', 'White', 52, 'female', ['cosmethics']);
      var person4 = new Person('Meli', 'Dib', 32, 'female', ['music', 'skiing','cooking','going out with friends']);
      var person5 = new Person('Rob', 'Mark', 32, 'other', ['music', 'skiing']);


(Chris Mills) #277

Hi Mauro!

I am very well thanks!

So, I am assuming you are talking about the bio() method logic that doesn’t work properly? Yes, this is a tricky one — it is annoying to deal with the cases of having one interest, two interests, and more than two interests. I had a play with this, and came up with the following method definition, which isn’t too horribly long and seems to work:

this.bio = function() {
  var firstString = this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. ';
  if(this.gender === 'male') {
    firstString += 'He likes ';
  } else if(this.gender === 'female') {
      firstString += 'She likes ';
  } else {
      firstString += 'They like ';

  for(i = 0; i < this.interests.length; i++) {
    if(i < this.interests.length - 1 && this.interests.length > 2) {
      firstString += this.interests[i] + ', ';
    } else if(i < this.interests.length - 1 && this.interests.length === 2) {
      firstString += this.interests[i] + ' ';
    } else if(i === this.interests.length - 1 && this.interests.length === 1) {
      firstString += this.interests[i] + '.';
    } else {
      firstString += 'and ' + this.interests[i] + '.';


Let me know if that solves your problem, or if you have other questions.

All the best.

(Mauro Di Bert) #278

Hi Chris! Thanks for the answer! I’m complicated finding time to study but I hope I could resume this week. I’ve write some code that works properly and found the error: I was using a loop (for) at the beginning that make no sense at all! hehe.

Thanks and have a nice day!

(MengChoon) #279


I have been using this great site Learn Web Development to learn the basics of web development (Thank you!) and hence would like to find out if I can further use and reference the content to conduct a web development course at one of our local universities here in Singapore.

Would be grateful if I can hear from the community!

Best regards, Meng Choon

(Chris Mills) #280

Hello there! Under the license the tutorials are published under, you can reuse our content without any problem, as long as you give a credit to the original work. If you modify the content, you need to publish the modification under the same license as the original content.

Most of our code examples are CC0 licensed — you can use and modify them with no attribution.

For more on the licenses we publish things under, see https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses.

Please tell me more about the course — I am excited to hear about it!

(MengChoon) #281

Hi Chris,

Thank you for your kind response and sharing the info. I am engaged by the university to develop the course curriculum & content for a undergraduate level web development course. My intent is to teach students who has little background on web concepts to pick up practical programming skills within a 35-40 hrs learning hours period and equip them with the fundamentals to code and build a full stack MVC app.

I have been using the content to introduce web programming to our entry level staff in my web development company and had found your resources here very practical and terse and this has help to enable our staff to learn and contribute practically to our team quickly - something that I really appreciate!

(Chris Mills) #282

Sounds like a great course, and I’m so happy to hear you are finding the material useful. Please let me know if you need any help.

In terms of MVC, we have this: https://developer.mozilla.org/en-US/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture

It is a bit out of date. My colleague Irene is currently updating it to use React instead of Ember, as React is a bit more popular.

(MengChoon) #283

Thank you again for sharing more info. I’ll definitely take a look at it and will update it to apply the concepts to the python Flask framework :slight_smile:

(Acout Payn) #284

I just wanna say thanks!
I once used the school’s firefox browser,I’ve known this learning web development marking guides,then I started my learning journey.I will create a beautiful and creative website of mine.
To have my own place is my dream,thank you mozilla!Thank you volunteers!When I am strong enough,I will join your family.
I have seen your source code and compare with my code,I have already corrected my wrong code.

(Chris Mills) #285

Thanks for the feedback — I am so glad you are finding our material helpful!