> For the complete documentation index, see [llms.txt](https://benjohansen.gitbook.io/musictech/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://benjohansen.gitbook.io/musictech/appendix/html-css-and-javascript.md). # HTML, CSS, and JavaScript ### Getting Started 1. create an account for = 2. create a new HTML+CSS project 3. add an `index.js` file ### HTML Boilerplate ([explained](https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/)) ```xml MUS1331

This is a paragraph.

``` ### Understanding HTML, CSS, and JavaScript #### style.css ```css p { font-size: 2em; color: green; } ``` [font size explained](https://www.freecodecamp.org/news/what-is-rem-in-css-rem-unit-font-size-padding-height-and-more/) #### index.js Example 1 (popup box) ```javascript alert("Hello World!"); ``` #### index.js Example 2 (changing content of a paragraph) ```javascript var p = document.getElementById('dog'); p.addEventListener('click', function(event) { p.innerHTML = 'You clicked it!'; }); ``` #### index.js Example 3 (guessing a number between 1 and 10) ```javascript function myFunction() { let text; let randomNumber = Math.floor(Math.random() * 10) + 1; let person = prompt("Please enter your name:", "Harry Potter"); let guess = prompt( "Hello " + person + " guess a number between 1 and 10:", "7"); if (guess == randomNumber) { text = "Congratulations " + person + "! Your guess is correct!"; } else { text = "Nope, " + person + ". The number was " + randomNumber; } document.getElementById("dog").innerHTML = text; } ``` *** ## Great Resource {% embed url="" %}