---
tags: mstu5003, tinker, technical, tools
---

# Tinker: Technical

Melissa [@mdd2167](/5fxbDvw4Roii0GifA-ux4Q)

## CodePen

Follow [this link](https://codepen.io/mstu5003/pen/XeJNjz) to the exercise on CodePen that you will be using. Before you you begin the steps ahead, take a look around the page, read the headings for the different sections. What elements do you recognize? Which ones are unfamiliar?

- Notice that you can edit the text in the panes. This will not save the changes, since I have **shared** the link with you but have **not** given you access to **collaborate**.
- To save a **copy** of this **Pen** (this is the name given to **files** on CodePen) to your own **Dashboard**, click on **Fork** in the navigation bar. Once you click here, the Pen you should be working on will be **your version** of the Pen that I shared. Confirm this by going to your Dashboard and making sure that the file is saved here.
- **Forking** will be an important concept to understand once we begin to use **Github**.
- Once you have your own copy of the Pen, you can begin to manipulate it and save the changes. First, observe the **HTML panel** (far left). Some of the tag names should seem familiar to you, but don't worry about the specifics yet.
- Look at the **structure** of the code. Does it seem organized or well-structured? A *very* important part of writing code is to keep your code as **clean** as possible. This serves not only you as you read through and de-bug your code, but others as well, especially when you start to peer-assess and pair-program.
- On the top right of the HTML panel, click on the dropdown arrow and then on **"Format HTML"**. Notice what this does to the code. Scroll through and try to guess why **Format** organizes the code this way... what is the purpose of **indenting** things the way it does?
> [name=mdd2167]
This provides structural uniformity, which is easier to read. The indentations are all aligned. The parent code is on the outsides and further indentations show codes its contents. There is also double-spacing between sections of code.

### SHORTCUTS
There are some shortcuts that will be *very* useful when using CodePen (and many other text editors). Test the following one at a time:

#### Tab Autocomplete:
- In the HTML panel, type "p" and then **tab**.
- Now try the same with "a" and "img". What is the same? What is different?
> [name=mdd2167]
It quickly creates a tag. The formatting to create remains the same, but the letters within are different. It seems like `p` is for body text, `a` is for links, and `img` denotes images.

- Now try the same with "f". What happens?
- `<f></f>` is not an accepted tag in HTML. What does this say about autocomplete?
> [name=mdd2167]
It only works for recognized tags

#### Multiple cursors:
- Click anywhere in the HTML panel, hold down **command** (Mac) or **CTRL** (PC), and click somewhere else. What does this allow you to do?
> [name=mdd2167]
It creates multiple cursors so you can input the same code to multiple spots at the same time.

- 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?
> [name=mdd2167]
It jumps down to the exact same spot of the next item in the list.

- - 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.
> [name=mdd2167]
This is a shortcut for selecting text.

### CODE:
- Look at the code for the images on the page.
- What do you notice about the way it is structured?
> [name=mdd2167]They are adjacent to the tag for the links but not within them. There is also no closing tag for the images. Maybe that's why they won't load?

- What does the `a` part do? What about the `img` part?
> [name=mdd2167]The `a` tag indicates a link. The `img` tag indicates an image.

- What similarities / differences do you see between the `a` and the `img` tags?
> [name=mdd2167] The `img` has no closing tag. The `a` is followed by `href=` but the `img` is followed by `src=`. Both use tags and quotation marks to the beginning and end of relevant links.

- How would you change the word "Descriptions" into a **fourth heading**?
> [name=mdd2167] I would change it from `h4` to either `h3` or `h2` so that it is bigger.

- How would you turn the list of descriptions into an **unordered list**?
> [name=mdd2167]I would delete the tag `<ol>...</ol>`. This changes the list from numbers to bullet points.

- Take your attention to the **CSS** panel (middle).
- What is your first guess as to what CSS does?
> [name=mdd2167]CSS adds design elements to make the page more visually appealing.

- Delete line 2 (`font-family: Arial;`). What does this tell you about what **body** is?
> [name=mdd2167]I'm not sure, but this changes the font for all of the text. I guess body means body text?

- Delete line 7 (`color: #e24c31`). What hint does this give you about the structure of CSS?
> [name=mdd2167]Code within the curly braces immediately after any object will alter that object's appearance.

- Replace the **hex code** in line 7 with `#000000`. Then try `#FFFFFF`.
- How could we achieve a grey color using hex codes?
> [name=mdd2167]By looking up the HEX color code for the shade of grey we want to use `(#808080)`.

- Change the **margin** in line 12 (under `img`) to something very small, and then something very big. Describe what happens.
- Test out the **button** at the bottom of the page.
- Where in the code are we telling it to create the **alert**?
> [name=mdd2167] It looks like line 19 of the HTML panel broadcasts a message upon clicking the button. Lines 1 and 2 of the JSS panel sends an alert once the message is broadcastsed.

- How does the computer know __*when*__ to create the **alert**? I.e., what is the **link** between the **button itself** and its **functionality**?

> [name=mdd2167]See answer to previous question.