W03 Learning Activities: Code Comments
Overview
Comments written in code by developers provide a way to explain the purpose and function of that code. Since the code will need to be maintained and will change, comments can serve as reminders, 'to do' lists, code snippets, and notes for potential improvement during development. Comments are not processed or displayed to the user in the rendered document in HTML or CSS. Comments can be placed in any available white space.
Prepare
HTML comments are not rendered in the browser. Here is an HTML comment syntax example:
<!-- This is an HTML comment -->CSS comments have no effect on the layout or presentation of a document. Here is a CSS comment syntax example:
/* This is a comment */You can use comments in your learning activities and assignments to remind yourself of things you want to reference or document for future use. While these comments are for your personal use, keep in mind that organizations may have specific commenting requirements because many developers might work on a project over its lifetime.
The concept of comments is also used in your git commits which, are especially useful for
tracking
revision history and providing context to your commits for your development team.
Creating comments in VS Code
You can create comments by typing <!-- and --> directly into your html files, or
/* and */ directly into your CSS files. In addition, VS Code and many other programs
have a shortcut for adding comments by holding the control button (command on MacOS) and pressing the forward
slash / key. Then, you can press it again to uncomment a line.
The shortcut is very useful for commenting out a section of code that already exists, simply highlight the code
you want to comment out, and press Control / .
Activity Instructions
- Open any HTML or CSS document in VS Code.
- Use
ctrl+/(Mac⌘+/) to comment out the line of code where you cursor is currently located or lines of code that you have selected. - Pressing
ctrl+/again will toggle the commented out line(s) of code.