# MSTU 5003: Tinker Week 01
Group A:
* David @dmz2117
* Fei @7KkF2LmVSduCAkN4ZYK26g
* Katrina @--ycTqNrTdGff1G85sWTAA

## Structure of the Code
- Code structure was messy
- Formatting was not consistent throughout the code
:::info
Best Practice: Click on **Format HTML** to fix formatting
:::

### What is the purpose of indenting things the way it does?
- Tidies and organises the code
- Displays hierarchy
- Makes it easier to read the codes
- Helps in spotting codes to debug

## Modes: Collaboration vs Professor
#### What is the biggest difference between the two modes?
A. Collaboration Mode
* Real time editing
* Indicates members name at the bottom
* Only owner can save changes

B. Professor Mode
* Shows number of students watching
* Students cannot edit the code
> Function Missing: We didn't see the **Pause and Play** Function
## Shortcuts
### Tags
1. `<p></p>` tag - represents paragraph
1. `<a></a>` tag - represents a hyperlink; `href` represents link destination
3. `<img>` tag - represents image source; doesn't need a closing tag
4. `<f></f>` tag - CodePen autocompletes anything but it doesn't recognise whether tags are invalid

> Note: CodePen autocompletes all other essential information within the tag, when valid and applicable ("href", "alt", etc.)

### Multiple Cursor
1. Click anywhere in the HTML panel, hold down command (Mac) or CTRL (PC), and click somewhere else. What does this allow you to do?
* Allows you to type the same information at multiple places at the same time

2. Go to the list in the code. Set your cursor between the > of the first `<li>` tag and the “E” of its description. Now, holding down the alt/option key, scroll down to the last description. How is this useful?
* This helps you select the content within the list and make changes all at once
* The selection is made per character

3. Click anywhere in the HTML panel. Hold down shift and press on the right arrow key multiple times. Now try the same by holding down shift and alt/option, as well as the right arrow. Notice the difference.
* **Shift and right arrow** - cursor selects per letter
* **Shift + alt/option + right arrow** - cursor selects per word

## CODES
#### 1. What do you notice about the way it is structured?
* New tags starts on new line
* After clicking `Format HTML`, codes are properly formatted

#### 2. What does the `a` part do? What about the `img` part?
* `a` - refer to another webpage
* `img` - image source file
* `alt` - alternative text if the image does not load
#### 3. What similarities / differences do you see between the a and the img tags?
`<a href="https://bestfriends.org/adopt/adopt-our-sanctuary/11980080/ellie"><img src="https://s3.amazonaws.com/filestore.rescuegroups.org/6685/pictures/animals/11980/11980080/48971311_385x385.jpg" alt="Ellie the Pekin"></a>`

| Similarities | Differences |
| -------- | -------- |
| Both contains links | a - links to a webpage <br>img - links to actual image source file to embed image into a webpage <br>img - contains "alt" to provide alternate text if the image is not loaded |

#### 4. How would you change the word “Descriptions” into a fourth heading?
* Heading tags - h1 (largest) descending number (smaller in size)

#### 5. How would you turn the list of descriptions into an unordered list?
* change `<ol></ol>` to `<ul></ul>`
* remove `<ol></ol>` (immediately turn the list into unordered list)

## CSS Panel
#### 1. What is your first guess as to what CSS does?
* Something to do with the formatting of texts and images (characteristics of visual elements)

#### 2. Delete line 2 (font-family: Arial;).
* Texts are changed to default fonts

#### 3. What does this tell you about what body is?
* Body refers to the document's body

#### 4. Delete line 7 (color: #e24c31).
* It became black by default

#### 5. What hint does this give you about the structure of CSS?
* Each element is defined by classes
* CSS - wil take the last class style unless !important

#### 6. Replace the hex code in line 7 with #000000. Then try #FFFFFF.
* It remains black, then turns white!

#### 7. How could we achieve a grey color using hex codes?
* HEX - 0-9/A to F (Base-16 counting system)
* Changed to gray hex code using #888888 (halfway between 0 and F, although rethinking, #808080 would be halfway)

#### 8. Change the margin in line 12 (under img) to something very small, and then something very big. Describe what happens.
* Margin - applies to all sides and changes the space around the images
* However, we can specify margin sides (top, bottom, left, right)

## Button

#### 1. Where in the code are we telling it to create the alert?
* HTML:
`<button onclick="adopt()">I'm Ready to Adopt!</button>`
* JS:
`function adopt() {
alert("Congratulations on deciding to adopt!");
}`

#### 2. How does the computer know when to create the alert? I.e., what is the link between the button itself and its functionality?
* `onclick` specifies when, i.e. when the button is clicked.
* The action taken is `Function adopt ()`
* HTML calls the function from JS

## Collaboration Video :smile:
{%youtube he6Yl-lcrMg%}