Group: Linmiao Feng, Sara Allan, and Wanyu Wu
---
tags: mstu5003, tinker, html, css
---

# Tinker: HTML/CSS - Meow Mix

See demonstration: https://codepen.io/jmk2142/pen/dVMRRq

**TINKER** - _attempt to repair or improve something in a casual or desultory way, often to no useful effect._

It's funny that the problem is called a "tinker" problem in that tinkering is usually messing around with stuff without a very planned way. I think, when we use the word tinker, it's really to emphasize the _spirit_ of the activity; that is to not feel too pressured into treating it like a test of your ability. It's really meant to be an opportunity for you to explore and have fun messing with stuff while using the guided questions to challenge your understanding.

So in some ways - while the spirit is about tinkering - I actually do want you to explore this in a directed way. That is:

1. Manipulate things to understand the causal effect and relationships it has on the results.
2. Think about the multiple manipulations you make to generalize certain key patterns that manifest across different episodes.
3. To generate hypotheses about how stuff works, and to test those hypotheses (through manipulation) to confirm or reject your ideas and refine.

As such, for each tinker problem which will be a "full" example - I will be providing you with certain guiding questions to help you direct your attention and activities to the _hidden_ things that are present. Think about it as if you just discovered a strange and fascinating new bug crawling across your table. You just want to poke it to see what it does. And I encourage you to do so.

## Tinker Tasks

As a general flow:

- First, take the base codepen and **fork** it.
- This will branch the original code so you have your own copy that you can edit and manipulate.
- Next, **compare** what you see in the code and **map** the relationships between the code and output.
- Then, use the guiding prompts and questions to **manipulate** the actual code **one thing at a time** and _see_ what happens.
- Be able to **articulate** your understanding and share your findings and insights with your weekly group and/or the class.

Note that I use Markdown as the format for these things as it is pretty `programming friendly`. You can get a basic understanding of Markdown in a few minutes using the following interactive tutorial: http://www.markdowntutorial.com

---

## Tinker GUIDES and QUESTIONS

I've divided this up into parts. Basically - as you explore the example and manipulate it in various ways there are a few themes that you should keep in the back of your mind:
1. SEQUENCE
2. HIERARCHY
3. ORGANIZATION (Semantics)
4. PATTERNS (Generalizable syntax patterns)

### HTML things

- Mess around with the sequence of different tags.
- How does _SEQUENCE_ affect the visual display of HTML elements?
A:
The sequence affects the order on the page. Change the hierarchy, the parent-child relationships between different tags.

- Change the hierarchy, the parent-child relationships between different tags.
- What are some ways that the _hierarchy_ of your tags will affect the end result / visual output?
A: The hierarchy (i.e. the "parent-child" relationship) is crucial for determining the end result of our code. For example, we nested the contents of an "image" element inside of the "footer" element. This placed the entire contents of the image element (e.g. the image and its alt-text) into the footer of our page, alongside the text that was previously there.
- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
A: When we removed the angled brackets /aligator-mouth ("<") and everything contained within those elements, entire pieces of our webpage would disappear. We we removed just certain ids or classes, sometimes the content (e.g. text) remained on the page, but the styling changed.
- Try to add an embedded Youtube video in the `section#videos` tag.
- Before you do, take a guess as to what you expect to see as the visual result. Were your guesses correct?
A: We struggled a bit with this section, but thanks to Jacqueline's help we were able to embedd the youtube video. Our guesses about what we expected to see were correct, though, we wanted to play around with the sizing.
- Create some notes as _comments_ in this code.
- What are some ways that you can use comments to help you understand your code better?
A: As we figured out how visual outputs related to different aspects of the HTLM code, we added comments. We also noticed some comments already in place in the codepen. These comments made it easier for us to locate a specfiic spot in our code (e.g. a section of images) when we wanted to manipulate some aspect of that section.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
A:The pattern was a less than sign < followed by an element code and ending with a greater than sign >. Often, we saw a class or id nested within the angled brackets, after the element code. The class or id would be definied with an equals sign = and then text (e.g. class="text" or id="text").

<div id="mainStory">...</div>
<p class="important">Lorem ipsum...</p>
<span class="incorrect">Your answer</span>
<img src="https://placehold.it/50x50/4CAF50" alt="greenbox">
<input type="text" name="fullName" value="anonymous">

- Take a look at the following cheetsheets: [HTML5 Cheatsheet]
- Muck around with the page and try to add a new content feature using some _new_ elements you haven't directly worked with in FCC.
- How did you go about learning how to utilize a new element (process)?

A:
- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?

A: The different elements, classes, and ids help us understand the nature of different peices of our content and think about how each piece of content relates to the others.

### CSS things
- Take a look at the following _almanac_ of CSS selectors and properties: [30 CSS Selectors], [CSS Tricks Almanac] and use some new selectors and css properties to change the visual look of the page.
- Why do we have so many different kinds of CSS selectors available?
A: Selectors are used for selecting the content of same attribution in HTML that we want to style at the same time, so we don’t need to style one specific content each time manually.Selectors allow us to make repetitive steps into just one step, so we can code more efficiently. Generally, we need different kinds of selectors to identify a wide range of elements, because the content or information delivered by our codes is a lot.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?
A:We think the generalizable pattern might be: "Selector {Property: Value}"

div {
	font-size: 10px;
}
div, span {
	color: dodgerblue;
}
div#myFavorites {
	text-decoration: underline;
}
div.incorrect {
	text-decoration:line-through;
}
div span {
	color: green;
}
div > span {
	color: lime;
}
div:only-child {
	font-family: cursive;
}

- Probably, no programmer knows every CSS rule and/or property by memory. I certainly don't, but I know a lot.
- How then, should you go about studying resources like [30 CSS Selectors] and [CSS Tricks Almanac] to help you become a more capable and efficient programmer?
A: Even if we don't memorize every rule, it seems important to understand the nature of selector types and the range of things that are possible to do within CSS. For example, even if we were to forget that the star symbol * targets every single element on the page, it would be important for us to remember the fact that it is possible to target every single element on that page and that we should recall that we can look up the selector if there was a time when it made sense for us to target every element on a page.

### COMBINED and META things

#### Q 1. How might HTML sequence and hierarchy of tags affect your CSS rules?
A:
The style of the children element will be affected by its parent element. When children and parent element all set style, the child element's own style will display.
#### There are many things that can go wrong when you code an HTML/CSS page. Your HTML might be wrong. Your CSS might be wrong. It's pretty difficult to debug/fix when you have more than one thing wrong at the same time.
Q 2. Based on your understanding of how _sequence, hierarchy, syntax_ affects the page; What do you think are best practices to systematically fix errors in your code?
A: So if errors are detected, and we find out that some similar-patterned elements that we used are all wrong in the same way, we can press the "control"or"command" button and select all the elements/parts that go wrong at the same time, and delete/add/revise at the same time. Furthermore, we can always use the "check" function time to time and see if there is anything wrong, and revise it according to the hints.

Q 3.Based on said understanding, what are some best practices to reduce errors _as you code?_
A: First, we should just learn more about the rules, and follow them. When we learn it as a beginner, there are a lot of tutorials online that we can seek help from too. Besides, when we code we can build the structures(fixed patterns) first, and then add content into it. It might help reduce errors because the code will be more tidier to see and easier to organize.

#### Q 4. What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
A:
Strenth: We can continue to strengthen the practice coding through detailed steps.

Limitation:We cannot see the whole picture of where we are heading to until the code ends.

#### Q 5. What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
A:
Strenth: Tinker gives us more chances to try and to practice without pressure.

Limitation: It is hard to find out our problem when we make too much changes and it cannot go back to the first.

#### Q 6. What kinds of things did your group members learn, notice, experience that you did not and **why** do you think that is with respect to **HOW** you each respectively studied the materials?
A: Everyone in our group was relatively new to coding, but we each remembered different pieces of the lecture videos and homework assignments. It was a very positive experience working with this group because we could build on each other's recollections and ideas. For example, at one point, one of our group members recalled learning about the concept of an anchor element from a homework assignment but couldn't remember what it was called. She described the concept to us, and upon hearing the description, another group member was able to say "Oh, right, that was the "a" element. We were able to move foward from there due to the group effort.

### Tinker experience to Collaboration

This is your tinker activity. Play with this page and manipulate things to make it "yours" in terms of the understanding. The purpose is to give you a sandbox to try things in the guide, as well as your OWN ideas and inquiries.

This activity provides the anchor point for your collaborative discussion. As such:

1. Tackle each question _by yourself first_ so you can get a sense of what you understand and what you may not.
- TOTALLY okay to not be able to answer every question yourself at first.
- That's what the social collaboration is for.
2. Write out your responses to the questions to guide your collaborative work. I would like you to use Markdown format for your tinker-problem responses / submissions. (Using Word, Google Docs, is going to be very tricky and messy when it comes to writing CODE as notes.)
3. In your collaborative discussions, share your individual answers and use it as a starting point for your group discussions.
4. Use the collaboration tool like codepen to code together as you discuss and make examples of what you discovered together.
5. Generate a final _group_ response to each of the questions I ask above to come up with your _final answer_ as a team. It's less about what is right or wrong, more about being able to articulate what you learned and how you generated a deeper understanding by sharing what you individually understood into a bigger more comprehensive whole.

Additionally, you might want to also use that time (or times) together to help each other with the mini-problem or project of the week.

**_GOOD LUCK, HAPPY CODING!_**

[30 CSS Selectors]: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
[CSS Tricks Almanac]: https://css-tricks.com/almanac/
[HTML5 Cheatsheet]: https://websitesetup.org/html5-cheat-sheet/