Code on This Site

Now that we have started looking at code, I want to mention a few specifics about how code will work and what it will look like on this site.

You have hopefully already noticed, during all of these first three weeks that there are specific code blocks. These should be displayed in your browser with a dark grey background and utilize a monospaced font. In theory this should look like code.

Example Code Block

This is what code will look like in your browser on this site.

This code will also be highlighted so that the syntax of the code is more apparent.

Specifying Language or File

When appropriate, there will be information about what the code is you are looking at in the upper-right hand corner. Typically, for this course, this will be one of;

• HTML
  • This is HTML code.
• JS
  • or JavaScript, which specifies the code you are looking at is general JavaScript.
• BASH
  • This is code for the command line application of your choice or OS.
  • Please remember that, you will copy or type text that comes after the dollar sign ($).

Code Results Output

Whenever possible and appropriate, I will also work to show you what the code output we are working on should look like. These sections will be surrounded with a big border.

Playing with Code

Also, whenever possible, I will try to provide code output in a way that is editable, changeable, and playable, by you. There will static code blocks above the results sections, but there will also be a tab’d bar within the output section, that at a minimum will include;

• “Result”
• “HTML”
• “JavaScript”

If you see one of these sections, you can;

1. click on the other tabs,
2. change the code,
3. go back to “Results”
4. and see the changes live!

Try it below with the “Hello World!” example.

To do this;

• click the “JavaScript” tab,
• change the "Hello World!" bit in line 4,
  • perhaps add some more text, or change the tag types…?
• and go back to Results. You should now see your changes!

Code Links

Below many code examples, there will also be a number of links. These are, and do the following;

• [ Code Download ]
  • This will be a zip’d folder, containing all of the code for the example.
  • This is a way for you to easily download code examples, to play with on your own computers.
• [ View on GitHub ]
  • This link will take you directly to the GitHub entry for this code, so that you can look at it there.
• [ Live Example ]
  • This will take you to a webpage that only has the code in question presented.

These links will occur underneath code examples when appropriate and available.

All Together

Within this course website, you might see long blocks, like the following. This is an example of pulling together all of these details with the “document.write” example.