In JavaScript, an array is a list of items. The items can be different data types: numbers, strings, and even other arrays. An array inside another array is called array nesting.

`exampleArray` has 5 items. It contains strings, numbers, and an array; which itself has two items that are numbers.

exampleArray has 5 items, and contains strings, numbers and an array; which itself has two items that are numbers.

An arrow function is a compact way to create a new function. It uses `() => {}` instead of the `function` keyword. It also doesn't need a name.

`shape` will turn red when it gets tapped. The arrow function reduces the amount of code needed.

`shape1` will turn red when it gets tapped, and `shape2` will turn blue when it gets tapped. See how the arrow function allows the code from inside a regular function to be stuffed directly into the `.on('click',)` call.

`let` declares a variable just like `var`, except it has a different scope. The scope of a variable is the section of code where it can be used. A `let` can only be used inside the code block `{}` where it's created.

A variable called `x` is created using `var` and set to `100`. The if statement is true, so the `let` variable `x` is created and set to `25`. The `let` variable stays inside the code block `{}`. The `print(x)`, which is outside the if statement's code block, uses the value of the `var x = 100.`

When a function is used as an argument, it is called a callback function. Functions that use callbacks are useful because of their flexibility, as the code that runs can change depending on which callback is used.

The array method `.forEach()` takes the callback function `print()` as an argument, and will apply that function to each item in the array.

The `document` contains a reference to the `body` element of the HTML. It can be accessed like a normal JS object property: `document.body`.

The code creates a new `img` and sets the source. Then it adds that new `img` element to the `body` element.

A CSS ruleset consists of a selector followed by 1 or more rules.

The selector defines which elements will be affected by the rules, and is followed by curly brackets `{}`.

Inside the curly brackets, rules follow the format: `property: value;`

In this example, `h1` is the selector. Inside the curly brackets `{}` there are 2 rules. The 1st rule sets the color of every `h1` element to red, while the 2nd sets their font size to `36px`.

A selector is the text that comes before each bracket in a CSS ruleset. The selector determines which HTML elements the rules apply to. 

The selector can be the element type, id, other attributes, a combination of these, etc.

- `body` is a selector that will apply the `background-color` rule to the HTML `<body>...</body>` element
- `img` is a selector that will apply the `width` rule to the HTML `<img>` elements
- `#myTitle` is a selector that will apply the `font-size` rule to the HTML element whose `id` is `myTitle`

An HTML document is made up of different elements. The properties of an element (like style or behavior) are determined by its tag.

Each tag is surrounded with angle brackets `<tagName>`. Most elements have a start and an end tag, but some only have a start tag. An end tag has a forward slash before the tag name, like `</tagName>`.

There are 5 html elements: `html`, `body`, `h1`, `p`, `img`. The `h1`, `p`, and `img` are all nested inside of the `body`. And the `body` is inside of the `html` element. The `img` element only needs 1 tag, but all others in this example have a start and end tag.

The `document` is an object that can access and modify all of the HTML elements on a webpage.

The 1st line access the `body` of the HTML. The `.createElement()` method is used to make a new `h1` element. The text of the new `h1` element is set, and then added to the `body` using the `appendChild()` method.

The <body> element contains the visible content of a webpage. 

There can only be 1 `<body>` tag in an HTML document.

The `<h1>`, `<h2>`, `<p>`, and `<img>` tags are all nested inside the `<body>`, which acts as a container for all the visible content of a webpage.

`exampleArray` has 5 items. It contains strings, numbers and an array; which itself has two items that are numbers.

`exampleArray` has 5 items, and contains *strings*, *numbers* and an *array*; which itself has two items that are *numbers*.

An arrow function is a compact way to create a new function. It uses `() => {}` instead of the `function` keyword. It also doesn't need a name. It is best practice to use `=>` instead of the `function` keyword.

`add()` accepts two numbers as arguments, and adds them together.

```printSum``` accepts two numbers as parameters, and adds them together.

Multiplies the value associated with the variable on the left by the value on the right, and assigns the resulting value to the existing variable.

Adds the value associated with the variable on the left to the value on the right, and assigns the resulting value to the existing variable.

Subtracts the value associated with the variable on the left by the value on the right, and assigns the resulting value to the existing variable.

Sets (or resets) the value stored in a variable. On the left is the variable you'd like to adjust, and on the right is the new value.

HTML stands for **H**yper**T**ext **M**arkup **L**anguage. It labels text with tags that have different properties, usually to change their appearance when displayed as a webpage.

This HTML has a main heading that says, `'My Favorite Things'`. Then it has  3 subsections: `Animals`, `Food`, and `Bells`. Each of those subsections has a paragraph with specific examples.

A sequence of commands grouped inside of curly brackets `{}`.

If the variable `learningToCode` is equal to `'fun'`, then the code inside the code block `{}` will be executed.

"If the *variable* ```learningToCode``` is equal to "fun", the code inside the ```{}``` will be executed. "

Divides the value associated with the variable on the left by the value on the right, and assigns the resulting value to the existing variable.

The `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` tags are used to create section headings. Generally, as the number increases, the font will get smaller, but this can be changed with CSS.

Similar to how an outline list may use numbers, letters, and Roman numerals to show different levels, the number in `<h1>`...`<h6>` represents the level of the heading.

```
1. Level 1
  a. Level 2
    i.  Level 3
  b. Level 2
    i.  Level 3
    ii. Level 3
2. Level 1
  a. Level 2
```

Inside the `body`, there is a level 1 heading with the text, `'My Diary'`. Below that, there is a level 2 heading for `'Day One'`, followed by `'Morning'` and short paragraph.

Then there is another level 2 heading for `Day Two`. It is followed by a level 3 heading for `Afternoon` and another short paragraph.

The indentation doesn't change the output but helps to visualize it.

`drawBox()` is a function. A function tells a computer to do a certain thing. Functions can take arguments to give the computer extra information. For example `drawBox(red)` has `red` as an argument, telling the computer to draw a red box.

`drawBox()` is the name of the function. When you add `blue` in the parentheses `()`, you are calling the function with the argument `blue`. This code creates a blue box.

`drawBox()` is the name of the function. When you add `blue` in between the parentheses, you are *calling* the function with parameter `blue`.

Variables are very common in coding. They allow you to reference the same piece of information multiple times. In JavaScript, variables can be defined using `var` then giving the variable a unique name. For example, `var myVariable = 'some text'`. The variable can later receive a new value. For example, `myVariable = 'changed some text'` When reassigning a variable the `var` is not necessary

The variable `myExample` is declared, then on the next line it's given a value and is then printed out. The variable's value is then updated and printed out again with a different message.

The variable `myExample` is created, it's value is printed out. The variable's value is then updated and printed out again with a different message.

*Data structures* are ways to store and organize data that's more complex than just a single `primitive` value. In JavaScript, the most common data structure types are `arrays` and `objects`.

Note that an object can contain arrays, and vice versa. In this case, `groceries.vegetables` would be equal to the `vegetables` variable.

Note that an object can contain arrays, and vice versa. In this case, ```groceries.vegetables``` would be equal to the ```vegetables``` variable.

Event handlers perform an action (or record data) when a user interacts with your app or website in a specified manner.

When the SVG shape named `circle` is clicked or tapped, its color will randomly change.

When the SVG shape called `circle` is clicked or tapped, it's color will randomly change.

A loop repeats the section of code within curly brackets `{}`. In JavaScript, a for of loop goes through each element in an array or string, repeating the code for each element.

Each item in the `groceries` array will be printed out on its own line.

Each item in the ```groceries``` Array will print to the output area.

In JavaScript, a classic for loop repeats the same code inside the block `{ }` a specified number of times. It is defined in three parts. The first part happens before the loop starts and defines a looping variable (`var i = 0;`). The second part is a test that determines if the loop should keep repeating (`i < 10;`). And the third part updates the looping variable each time the loop repeats ( `i = i + 1`).

In this example, the looping variable (`i`) starts at 0. The code in the block `{}` will keep repeating while `i` is less than 10. And `i` is increased by 1 each loop. This code prints out the numbers 0 through 9.

The three parts control how many times the code inside the block `{}` will repeat. It has a starting value, a check if you should continue (true) or exit the loop (false), and an update to the loop counter variable.

A function does some action or task defined in its block {}. The part of code where the function is made is the function declaration. To use or call this function, its name is used with a set of parentheses ().

The `function` keyword creates a new function called `printSum(num1, num2)` that has the two parameters `num1` and `num2`. When calling `printSum(5, 2)`, the arguments 5 and 2 are added together and printed. Keep in mind, `num1` and `num2` are parameters, or placeholders for the arguments 5 and 2

Because this was created without ```var```, ```printSum``` can be called prior to the line of code on which it was created.

Executes a sequence of commands when called. It has three parts: 

1. The identifier value (the name of the function)
2. The parameters or arguments (the values between the parentheses)
3. The function body, which is the sequence of commands that executes when the function is called.

When ```printSum(5, 2)``` is called, 7 will print to the output area.

`if...else` statements perform a test to decide which code to run. If the test is true, the `if` block `{}` runs. If the test is false, the `else` block `{}` runs.

This code picks a random number from 1 to 10. If `number` is 7 it will print out, 'The number is 7!'. If `number` is anything else it will print out, 'The number is not 7.'

This code will pick a random number form 1 to 10. If the number happens to be 7, it will print out, "The number is 7!". If the number is not 7, it will print out, "The number is not 7."

If statements allow you to run a specific section of code when a test is true. The code inside the parentheses `()` is the test. If the test is true then the code inside the block `{}` runs. If the test is not true, then the code inside the block doesn't run.

In this example, the variable `aNumber` is assigned the number 5. There are two if statements. The 1st is checking if `aNumber` is equal to 5. The 2nd is checking if its equal to 4. Only the 1st if statement's test is true, so a blue box would be drawn.

In this example a variable is created called `aNumber` and assigned a value of 5. There are two if statements, the first is checking if aNumber is equal to 5, then second is checking if its equal to 4.

In most programming languages, including JavaScript, arrays are indexed starting at 0. The 1st item in an array has an index of 0. For example, `myArray[0]` accesses the 1st item. While `myArray[3]` accesses the 4th item.

The `fruit` variable holds the second item in the array, which is 'bananas'.

The `fruit` variable would contain the second item in the array, which is 'bananas'.

The `.textContent` attribute of an HTML element is the text between the start and end tag. If there are nested elements, their text will be included as well.

The `description` variable is storing the HTML element identified as `paragraph3`. The current text of that element is logged to the console. Then the text of the element is changed to `'That is how a mantis shrimp do.'`.

A boolean is one of two special values in JavaScript, either `true` or `false`. They are useful for dealing with state that has just two possibilities.

It is `true` that you are learning to code, but it is `false` that one should wear socks with sandals.

A number that can either be whole (such as 10) or a decimal (such as 3.5).

The variable `numberOfApples` stores the integer (whole number) 10. The variable `temperature` stores the decimal 74.6.

In JavaScript, integers and decimals are both of type number.

Letters, words, and sentences are called strings in coding. Quotation marks are used to show the start and end of a string. For example, `'hello world'` is a string.

`'royg'` is a string used in the `drawBoxes()` function to create red, orange, yellow and green boxes.

```royg``` is a *string* value that will be used by the function `drawBoxes()`.

The `<button>` tag is used to create a button element. The text that will appear on the button is added between the start and end tags.

The HTML page has a single button. The text on that button is: `'Click Here'`.

An object can store multiple pieces of information inside one variable. Dot notation is used to access a property of an object. For example, `objectName.propertyName`.

This code will print out `'Coding is fun.'`

'Coding is fun.' would be printed out in this example.

The `document` contains a method named `.getElementById()` which can be used to access specific HTML elements.

The method takes an id name as a string, and returns the HTML element with the matching id.

The `line` variable is storing the HTML element with the `dorothy` id. The `.textContent` attribute has its value set to the string `'Somewhere over the rainbow.'`.

An object stores multiple values that have property (or key) names. This allows them to be easily accessed later in the code.

`apples` and `bananas` are properties of the object `groceries`. `5` and `2` are the associated values with those properties. `groceries.apples`, for instance, is equal to 5.

```apples``` and ```bananas``` are keys of ```groceries```, and ```5``` and ```2``` are the associated values with those keys. ```groceries.apples```, for instance, is equal to 5.

HTML elements have attributes, similar to how JavaScript objects have properties. These attributes are usually listed inside the start tag of the element.

The `p` element has an `id` attribute with a value of `myParagraph`. The `img` element has a `src` attribute with a value of `example.jpg`.

A way of storing a value for later use, also known as a variable. A `var` should have a name (also known as an identifier), and it optionally can be assigned a value, which could be a number, a string, or a more complex piece of data.

`cityOfOrigin` is a variable that will be equal to `'Pittsburgh'`. Then another variable called `cityOfDestination` is created and later gets assigned a new value of `'Manila'`.

```cityOfOrigin``` is now a *variable* that will be equal to 'Pittsburgh'.

A while loop runs the code inside of its block until the test in its parentheses is no longer true.

As long as `i` is less than 3, the code in the Block Statement will repeat. If you forget to increase `i` in this code, the `while` loop will repeat forever and cause a crash.

As long as ```i``` is less than 5, the code in the Block Statement will repeat. If you forget to increase ```i``` in this code, the ```while``` loop will repeat forever and cause a crash.

The `.createElement()` method creates a new HTML element. It takes a tag name (as a string) as an argument.

For example:

`document.createElement('p')` will create a `<p>` element.

`document.createElement('img')` will create an `<img>` element.

While `.createElement()` creates a new element, it does not add it to the webpage.

A new `<button>` element is created and stored in `newButton`.

`newButton` is given text by setting its `.textContent` property.

`newButton` is then added as a child of the `body` element using `.appendChild()`.

The `.id` attribute of an HTML element is like its variable name. It is stored in the start tag as `id='nameOfElement'`.

Each `id` is unique. 2 or more elements can not share the same `id`.

There are 3 `h1` headings; their ids are: `intro`, `first`, and `second`. These ids uniquely identify a specific HTML element.

The `img` element is used to add a picture to the HTML document. In HTML, the `<img>` tag is not closed with `</img>`.

It has a `src` attribute that contains a URL to the image file.

There is also an `'alt'` attribute, which contains a description of the image that is shown when the image cannot be displayed. 

It is best practice to always include an `alt` attribute.

The `img` element is added to the body. The source for the picture data is at `'./images/puppy.jpg'`. The alternative text contains a description of the image.

An argument is the input given to a function when it is called.

Arguments are similar to parameters, except parameter refers to the input of a function declaration, while argument refers to the input when the function is called.

In this code example, `4` and `7` are the arguments for the `sum()` function because they are the inputs given to the function when it is called.

The parameters for the function are `number1` and `number2`.

The `<p>` tag is used to create a paragraph element. It usually contains a section of normal text between the start and end tags.

The body has an `h1` section heading that says `'Grasshoppers'`. It is followed by a paragraph element that talks about grasshoppers.

`img` HTML elements have a `src` attribute which points to the image file, for example, a URL or file location.

The `picture` variable is storing an `img` element whose id is `pup1`. The `.src` of the element is set to a new image file URL.

Adds an event listener to an HTML element. 

The event listener runs a function whenever a specified action (for example, a `'click'` event) occurs to the HTML element.

The method takes 2 arguments:

 1. The event name, e.g. `'click'`
 2. The function to run when the event listener is triggered

This code adds a `'click'` event listener to the HTML element `button1`. Whenever `button1` is clicked, the arrow function runs. The function will set the `textContent` of the button to `'Submitted'`.

A parameter is a special type of variable that is used to specify the input of a function.

Parameters are defined inside the parentheses `()` of a function declaration, and behave like a variable inside a function. They only exist inside the function declaration.

In the `sum()` function declaration, `number1` and `number2` are the parameters. The function returns the sum of the 2 parameters.

When the function is called, the numbers passed into it are called arguments. In this example code, `4` and `7` are arguments.

The `.appendChild()` method adds one HTML element as a "child" of another. 

The argument of the method is the element being added. The node before the dot `.` is the element that will hold the new node.

The `newNode` is a `p` HTML element. It has `'some words'` as its `.textContent`. The `newNode` is added to the `body` element. If there are other nodes inside the `body`, the `newNode` will be the last one in the list.

CSS stands for **C**ascading **S**tyle **S**heets. It contains a list of rules about how to style different HTML elements. Each rule has a selector (or several selectors) and a block of declarations that assign values to various properties.

The CSS has 3 rules: 1 for the `body`, 1 for `img` elements, and `1` for `myTitle`. The `body` element will have a background color that is grey. All the images will be scaled to a width of `200` pixels. The element whose `id` is `myTitle` will have a font size of `36` pixels.

Learn about HTML, CSS, and how JavaScript can interact with them.

Intro to Webpages

**Between** the `<h1>` and `</h1>` tags:

- Change `'sample text'` to something else

Big Words

Which Tag?

Which [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) creates an [h1 element](concepts/CGutSCMNBXRYJu4oP2LQ) that says, "Welcome!"?

**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab:**

**Inside** the `h1` [ruleset](concepts/1XHEoyyCXwynDNfIQyma):

- Set the `color` to `white`

**Inside** the `body` [ruleset](concepts/1XHEoyyCXwynDNfIQyma):

- Set the `background-color` to `rgb(0, 50, 75)`



Back and Font

```
body {
 background-color: orange;
}
```

Which is Orange?

Which code uses [CSS](concepts/zNHbUMn482bPCAMK649y) to turn the background color of the [body](concepts/6R3aq0SUTZayCrnaiUv7) element to orange?

```
h1 {
  background-color: green;
}
```

Which Colors Text?

Which [CSS](concepts/zNHbUMn482bPCAMK649y) code sets the text color of [h1 elements](concepts/CGutSCMNBXRYJu4oP2LQ) to green?

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab**:

**Inside** the opening `<h1>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) on the line `<h1>blue</h1>`:
- Add the [id](concepts/iB2JJkdrhzUk2POGtGai) `'b'` 

**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab**:

At the **bottom** of the code:
 * Add a new [ruleset](concepts/1XHEoyyCXwynDNfIQyma) with the [selector](concepts/25N6tqOpAzPQj9zuURJ8) `#b`
 * Set its `color` to `rgb(0, 0, 255)`

Custom Style

Which Selector?

Which [ruleset](concepts/1XHEoyyCXwynDNfIQyma) is [selecting](concepts/25N6tqOpAzPQj9zuURJ8) the [element](concepts/2Yk6w8pxVDRrIZe4HJVc) with the [id](concepts/iB2JJkdrhzUk2POGtGai) `grape`?

**In the JS tab**:

Add a 2nd line of code:
- Use `document.getElementById()` and grab the [element](concepts/2Yk6w8pxVDRrIZe4HJVc) with the [id](concepts/iB2JJkdrhzUk2POGtGai) `'description'`. For example: `.getElementById('description')`
- Set the [text content](concepts/KDMLFJ2PszIvo022TrSo) of the [element](concepts/2Yk6w8pxVDRrIZe4HJVc) to a [string](concepts/Literal_string), for example: `'I made a webpage'`

Exchanging Words

How to Get it?

Which line of JavaScript accesses the [element](concepts/2Yk6w8pxVDRrIZe4HJVc) with the [id](concepts/iB2JJkdrhzUk2POGtGai) `'info'`?

```
details.text('words words words');
```

```
details.textContent = 'words words words';
```

```
details.textContent('words words words');
```

Which Text?

Which code will set the [text content](concepts/KDMLFJ2PszIvo022TrSo) of the `details` [element](concepts/2Yk6w8pxVDRrIZe4HJVc) to `'words words words'`?

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab:**

* Add `<h1>Dislikes</h1>` inside the `<body>` tag


**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab:**

**Inside** the `h1` [ruleset](concepts/1XHEoyyCXwynDNfIQyma):
* Change `blue` to another color


**In the JS tab:**
* Set `likes.textContent` to equal a [string](concepts/Literal_string), for example: 'I used HTML, CSS and JavaScript'




Working Together

HTML sets the structure.

CSS controls the style.

JavaScript adds interactivity. 


CSS sets the structure.

JavaScript controls the style.

HTML adds interactivity. 


JavaScript sets the structure.

HTML controls the style.

CSS adds interactivity. 


What's the Difference?

What are the roles of [HTML](concepts/BWpNsIGVElDJHeMdgRwL), [CSS](concepts/zNHbUMn482bPCAMK649y), and JavaScript in building a webpage?

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab**:

**Inside** the <body> tag, **below** the existing `<img>`:

* Add a new `<img>` tag 
* Set its `src` [attribute](concepts/TESz6CjqzPzX0R4rx3SK) to `'../../static/images/cat.jpg'`
* Give it an `alt` [attribute](concepts/TESz6CjqzPzX0R4rx3SK) and set its value to `'picture of Edgar'`


Inserting Images

To Close or Not to Close?

The `<img>` [tag](concepts/incNrAqwbskzaupKz965) does not need to be closed with `</img>`.

`<img src: 'portrait.gif'; alt: 'a picture of me'>`

`<img 'src'='portrait.gif' 'alt'='a picture of me'>`

`<img src='portrait.gif' alt='a picture of me'>`

How to Attribute?

Which `<img>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) has proper `src` and `alt` [attributes](concepts/TESz6CjqzPzX0R4rx3SK)?

**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab**:

- Set the `height` of all the [images](concepts/incNrAqwbskzaupKz965) to `60px`

Tall and Wide

How Wide?

Which CSS [ruleset](concepts/1XHEoyyCXwynDNfIQyma) sets the width of all [image](concepts/incNrAqwbskzaupKz965) elements to `250px`?

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab**:

**Below** the 2nd `<img>`:

* Add a `<button>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc)
* Give the [button](concepts/LnUDP3Owtd97F1MDEJX5) text, like `click here!`


A Basic Button

Which Button?

Which code creates a [button](concepts/LnUDP3Owtd97F1MDEJX5) that says "Learn More"?

**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab**:

* Add a new [ruleset](concepts/1XHEoyyCXwynDNfIQyma) with `button` as its [selector](concepts/25N6tqOpAzPQj9zuURJ8)
* Set its `background-color` to `rgb(188, 143, 143)`
* Set its `color` to `rgb(255, 250, 250)`
* Set its `border-radius` to `10px`


Cute as a Button

```css
button {
  color: blue;
  border: 10px;
} 
```

```css
button {
  background-color: blue;
  border-radius: 10px;
} 
```

```css
button {
  text-color: blue;
  radius: 10px;
} 
```

Which Style?

Which [ruleset](concepts/1XHEoyyCXwynDNfIQyma) will give [buttons](concepts/LnUDP3Owtd97F1MDEJX5) a blue background and rounded corners?

**In the JS tab**:
- Declare a new [variable](concepts/CreatingVariables) to store the 2nd [button](concepts/LnUDP3Owtd97F1MDEJX5). Set its value to `document.getElementById('button2')`
- Add an [event listener](concepts/qrdzop5261kPA2Xa9Re0) to the [button](concepts/LnUDP3Owtd97F1MDEJX5)
- Set the 1st argument of the [event listener](concepts/qrdzop5261kPA2Xa9Re0) to `'click'`
- Add an [arrow function](concepts/ArrowFunctionExpression) as the 2nd argument, for example: `() => {}`

**Inside** the [arrow function](concepts/ArrowFunctionExpression):
- Set the [text content](concepts/KDMLFJ2PszIvo022TrSo) of the 2nd [button](concepts/LnUDP3Owtd97F1MDEJX5) to `'Clicked!'`

Button Up

**In the JS tab**:

At the **bottom** of the code:

- Add an [event listener](concepts/qrdzop5261kPA2Xa9Re0) to `button2`
- Set the 1st argument of the [event listener](concepts/qrdzop5261kPA2Xa9Re0) to `'click'`
- Add an [arrow function](concepts/ArrowFunctionExpression) as the 2nd argument, for example: `() => {}`

**Inside** the [arrow function](concepts/ArrowFunctionExpression):
- Set the `src` [attribute](concepts/TESz6CjqzPzX0R4rx3SK) of `img` to `pic2`. For example: `img.src = pic2`

An Image Change

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab**:

**Below** the 2nd `<p>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc):

* Add another `<h2>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) and give it text
* Add another `<p>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) and give it text

Smaller Words

Use the scroll on the phone to see the whole webpage.

**In the [HTML](concepts/BWpNsIGVElDJHeMdgRwL) tab**:

* Add an `id` of `highlight` to a `<p>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc)

  
**In the [CSS](concepts/zNHbUMn482bPCAMK649y) tab**:
* Add a [ruleset](concepts/1XHEoyyCXwynDNfIQyma) with `#highlight` as its [selector](concepts/25N6tqOpAzPQj9zuURJ8)
* Set its `color` to `rgb(255, 89, 94)`

Highlights

Which Display?

Which CSS [selector](concepts/25N6tqOpAzPQj9zuURJ8) will make the `<p>` [tag](concepts/2Yk6w8pxVDRrIZe4HJVc) with the [id](concepts/iB2JJkdrhzUk2POGtGai) `'quote'` look different from other `<p>` [tags](concepts/2Yk6w8pxVDRrIZe4HJVc)?

How to ID?

Which CSS [selector](concepts/25N6tqOpAzPQj9zuURJ8) will select the element with the [id](concepts/iB2JJkdrhzUk2POGtGai) `status`?


**In the JS tab**:

At the **bottom** of the code:
* Create a [variable](concepts/CreatingVariables) called `newParagraph` that stores a new [paragraph element](concepts/k8QHUrUMoUBJHbCdORsg) using `document.createElement('p')`
* Set the `.textContent` of `newParagraph` to  a [string](concepts/Literal_string)  
* Print `newParagraph.textContent` to the console

Another Paragraph

Which Way?

Which line of code creates a new `h2` [heading element](concepts/CGutSCMNBXRYJu4oP2LQ)?

At the **bottom** of the code:

- [Append](concepts/yHABqxWql6wraUYG3f3N) `text2` to the `document.body`
- [Append](concepts/yHABqxWql6wraUYG3f3N)  `text3` to the `document.body`

Good Dog

At the **bottom** of the code:

- [Append](concepts/yHABqxWql6wraUYG3f3N) `title` to the `document.body`
- [Append](concepts/yHABqxWql6wraUYG3f3N) `picture` to the `document.body`
- [Append](concepts/yHABqxWql6wraUYG3f3N) `description` to the `document.body`

Appending Kittens

```
document.body.appendChild(paragraph);
```

```
document.body.appendChild = paragraph;
```

Which Child?

Which code would add the [paragraph element](concepts/k8QHUrUMoUBJHbCdORsg) stored in the `paragraph` [variable](concepts/CreatingVariables) to the [body](concepts/6R3aq0SUTZayCrnaiUv7)?

Grasshopper Guide

Concepts for this lesson

Are you sure you want to reset your code?