**_Group members: Andrew Groll, Jacky Wu, Qiang Fan, Sijia Cheng_**

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:

Manipulate things to understand the causal effect and relationships it has on the results.
Think about the multiple manipulations you make to generalize certain key patterns that manifest across different episodes.
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:

SEQUENCE
HIERARCHY
ORGANIZATION (Semantics)
PATTERNS (Generalizable syntax patterns)

HTML things

Mess around with the sequence of different tags.

**How does SEQUENCE affect the visual display of HTML elements?**

_The sequence of HTML elements matches how the visual elements are displayed. An item on HTML line 1 will be displayed above an item on HTML line 2._

_For example, If we move `<h3>Introduction to Purrr</h3>` to HTML line 2, not only the sequence has been changed, but also the hierarchy changed (h3 no longer belongs to the previous `<div>`)_

**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?**

_The tag hierarchies can determine both the organization and the properties of the different HTML elements. When we move an element outside of its original hierarchy (i.e. moving Introduction to Purr to the top of the page) all characteristics that have been set by that hierarchy are removed, such as font-size, background-color, padding, etc._

**Add/remove/manipulate various elements, ids, classes, attributes
What did you do and what did you discover in terms of the GENERALIZABLE patterns?**

_When we change classes on HTML elements, those elements will then correspond to a different CSS class. This can affect different CSS customizations such as font-size, padding, background color, etc._

**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?**

_We guessed that it may display the link of the video or it can embedded the video directly. It turned out that by using <a href=> we can only insert the link. Therefore, we have to find the original code of the video and add it to the section so that it can embed and play the video on our website._

**Create some notes as comments in this code.
What are some ways that you can use comments to help you understand your code better?**

*We can use comments as a reminder of the division of code. Comments can also be used to explain parts of the code to other people.*

**Take a look at the following:
    What is the generalizable syntax pattern between all these tags?**

<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">

_These tags all follow the general structure of:_
* _Open Tag (<)_
* _Element_
* _Attributes & Values_
* _Closing Tag (>)_

_For some of these tags, the element has a separate opening and closing tag. This is because they are not constrained._ 

**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)?**
**How can different elements, classes, and ids help to organize our html content?**

CSS things

Take a look at the following almanac of CSS selectors and properties: [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/) 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?**

_All of these selectors can be used in specific situations to select the specific element or group of elements that you want to be affected by the CSS rule. You can target a specific item using an id rule, a group of items using a class rule, or every item of a specific type using an element or attribute rule._

Take a look at the following:
    **What is the generalizable syntax pattern between all these css rules?**
* _Selector(s);_ 
* _A pair of curly braces;_ 
* _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?**
_Try to master the most common rules first through practice, and gradually increase your knowledge about coding. Always apply the rules in a real case._

### COMBINED and META things

**How might HTML sequence and hierarchy of tags affect your CSS rules?**
- **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.**
- **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?**
  _Design the layout first, and then add more details. I would like to draw layout draft on paper before coding. Also, when you are debugging and cannot find the errors, it might be better to check from macro to micro, from big structure to small details._
_When fixing errors, we can check if the elements are nested in the right place, whether the syntax is correct, could there be a missing closing tag, or missused symbols._
- **Based on said understanding, what are some best practices to reduce errors _as you code?_**
 _Be careful when you add new styles between the existing ones as you may delete some parts of them. When writing html and css, always remember the basic structure and don't forget anything (such as the closing tag).Always write outside-in._
- **What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?**
_Strength: FCC helps us to quickly get familiar with each properties and selectors; We can quickly get hand-on practices and experience from it._
_Limitation: Sometimes it follows the authors' minds and rules that we need to wait until the last step to "jump" out of the details to see the general layout of the project.Or sometimes since we rely on the instructions, we could lose some opportunities to come up with the solutions ourselves or we simply just don't think about the intention or the meaning of the codes that we write._
- **What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?**
_Strength: Tinkering enables us to collaborate with each other to understand the cause and effect of each part of the code. Also, we share our questions or discoveries within the group, so that ours problems could be solved with the help of each other, and we are able to learn new things that ourselves may not have noticed before._
_Limitation: Sometimes the tinker problem might seem to be a little intimidating, and everyone's learning progress is different. Some questions could be a little bit difficult to answer since we are not sure in what way they expect us to answer._
- **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?**
_Everyone has their own study patterns. Some people prefer to look at the code and try to remember it, some prefer to try it out in Copepen and see what would happen. It is the differences of people's study habit and pace makes things different._

### 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/