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

Chelsey:For instance, I changed the page header"> and container-top">, I realized how the page layout has changed. I expected it to be the same but somehow the subtitle line become no longer included in the title range due to the change in sequence.

Manya:I changed the title and "div/">, I found that the context would determine the level in the image.

Diandian Huang: I also changed the div and header items as well, but unlike what I thought, some of the content that should have been displayed would not be displayed (or other content would be displayed) after the order was switched.

- 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?
Chelsey:The size of the element would change after I switch the parent cihld relationship
Manya: The parent-child relationship affects whether the element appears or not, so maybe I'm
using the wrong syntax.
Diandian: When I change the parent element's relationship to the child element, I notice a change in their form - more than simply swapping styles.

- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`

- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
-Chelsey:When I removed the classes of the title content, it no longer displayed as the title with backgrounds and headers, but normal style sentences.
Manya: Deleting DIV class will print directly on the screen.add comment in CSS The style will be ignored.
Diandian: After removing the classes, I found that the text became normal text, and I couldn't edit their styles in the css interface.

- 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?
-Chelsey: Just as what I expected, after using the code of embedded video, it would appear directly in the form of of video that you can watch on the page.
- Create some notes as _comments_ in this code.
- Manya:It's worked for some other links.
- Diandian: No, they don't seem to be working anymore - maybe I'm not doing it the right way?
- What are some ways that you can use comments to help you understand your code better?

Chelsey: It can help us to identify the code when it becomes to long, allow us to make changes or notes for furthur edits and tests.
Manya: Created notes can help others understand our work and remember what we have done.
Diandian: It can remind us of the progress of our work and prevent us from forgetting the purpose of the last time.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
-Chelsey:They all have = to indicate the values
-Manya:They have a opening tag and some have a colsing tag, attribute values that gives the tag identity
Diandian: There are special attributes and the value is assigned by the equal sign "=" to change the content of the attribute.

<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)?
- Chelsey:I would try with different elements and see how it change the layout.
- Diandian: Keep trying to use it until I can achieve the desired result.
- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?
-Chelsey:It can divide the code into different sections and make the content clearer.
-Manya:I will searching on google with “attributes and element”
Diandian: These can help us to quickly link to the options we want as we apply the code.
### 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?

chelsey: maybe it can make the process of editing easier in the html
xichen: we can locate where we want to apply the style to more accurately and convieniently
Manya:To help categarize the content
Diandian: Help us to make a better style effect.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?

chelsey:the use of {}, and - between the syntax
xichen: plus the punctuations, eg. comma, period, hashtag, colon, semicolon, aligator mouth, are all part of the pattern.
Diandian:It is important to note that these punctuation changes may affect the entire operation.

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?
xichen: we can read through the content on the website and familiarize ourselves with what they provide; we can refer back to some of the points in the future when we need it during coding
Diandian: Practice is very necessary. We need to practice in order to become proficient in the way of application.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?
xichen: it affects how we select it in the CSS
Chelsey: the CSS selection would change the layout by hierarchy and sequence
Diandian: Will change the css settings, and even some errors will occur.
- 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?
xichen&Chelsey&diandian: observe what's displayed in the preview and locate the part that goes wrong; format html and css to see if we have made any careless mistakes
- Based on said understanding, what are some best practices to reduce errors _as you code?_
xichen&Chelsey&diandian: check out spellings; have a clear sturcturing mind; follow the conventions, write in ways that humans can understand
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
Chelsey:it helps us to look at the codes step by step. However, it would auto-generate new codes so it limit the chance for us to find the mistake ourselves.
Diandian: The exercises allow us to master the basic code knowledge. However, when I was working on it, I found that even if we didn't have a clue, the "code" system would always give us many hints when we clicked to run it - which might limit our ability to correct ourselves.
xichen:
- strength: spot the exact place that has gone wrong for us to revise;
- weakness: the learning experience is passive, it might be better if it displays what we should build by step and give us the freedom to build it by ourselves
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
chelsey&xichen&diandian: tinkering is a good way to express ourselves in a group;
- 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?
Chelsey:mostly about the basic logic of coding by different attempts.

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