CodeNewbie Community

loading...

A Review of IDs, Labelling Bootstrap Buttons, and Commenting Code

Sarah Bartley
Front-end web developer | Moderator for Elphas Can Code | Creator of Disney Codes Challenge
・3 min read

Originally published February 21, 2018 on The Original BritishPandaChick blog. I made tweaks to the original post so it would work for Code Newbie.

Today's post is covering the last three lessons of Free Code Camp's Bootstrap course. These three lessons will finish the jQuery playground you have been building. During these lessons, you'll be getting a review of some of the concepts you've already such as writing comments and naming elements with an ID. Finally, you'll be labeling your Bootstrap buttons so you know what each button is as you move onto the jQuery lessons in Free Code Camp.

31. Give Each Element a Unique ID.

Free Code Camp wants the jQuery playground to target each button with an ID. Your mission is to add an ID to each of the buttons. Each button will be named target1 up to target6. Target1 to Target3 will be in the left well while target4 to target6 will be in the right.

jQuery playground with targets inside each of the buttons inside the wells

For each button, add an ID to each opening Button tag. Name the first button ID “target1”. Repeat with the other five buttons.

32. Label Bootstrap Buttons.

Now that we have IDs on our buttons, it is time to label them just like the wells. Inside each button, give the button text the same name as the ID. In my first button, I will have the button say #target1 between the opening and closing tags.

On the Free Code Camp project, the button will automatically add the text name to the button. Repeat with the other five buttons.

33. Use Comments to Clarify Code.

The last lesson in Bootstrap is creating comments. If you move onto the jQuery lessons in Free Code Camp, you’ll be changing HTML elements without actually changing them in HTML. In order to let other developers know they won’t be modifying code directly, you’ll be using comments.

Comments written inside the text editor. No changes are made to jQuery Playground in browswer

Comments are important for developers since it lets others know what is happening in our code. They won’t show on the live website, but if you inspect the website’s code you will see comments throughout the site’s code.

In order to add a comment to a code, you need to start the comment with a < followed by an exclamation mark with two dashes. This lets the computer know you are making a comment. In Free Code Camp text editor, the text will automatically change color to gray, preparing you to write your comment.

Next, put the text you want to put in the comment. Free Code Camp wants the comment to say “Only change code above this line.” The last thing you need to do is close your comment with two dashes and >. When the computer sees this line of code, it knows that your comment is closed, changing the grey color in your text editor back to its original colors.

Conclusion

That's a wrap on Free Code Camp's Bootstrap course! The jQuery playground is finished. Your buttons should now have IDs with each button's label matching the ID. Finally, we added some comments to our code to let developers know what is happening and what shouldn't be changed.

Discussion (0)