Group Member:
Zainab, Wenyi, Nuo Xu
---
###### tags: `tinker`
---

# 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?
> - If the sequence top changes, the format sometimes changes with it. Also, if the sequence is in a mess, the

> - Zainab: Removing the sequence is removing the headings for the webdesign for different categories. For example, when I removed the heading and sub-heading in the sequence, it will simply appear as text.Additionally, I also noticed that if we move the headwer around,the font color changed from white to black. It was interesting to see how changing the sequence can result in formatting changes without changing anything in CSS.

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

> If put h1 ahead of div class="page-header", the header's color changes from white to black.
> Zainab:Parent element is not indented but child element is and if we change the hierearchy, the whole visual display becomes difficult to understand and navigate.

- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
> If we remove the punctuations, for instance, quotation mark, or we switch what's inside the alligator mouth, the format and color changes.

> Zainab: We also removed a class "container-top" and we noticed the header was removed.

- 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 could see the video in the page.
> Zainab: Since the first element header is closed before this section, we assumed it would be outisde the maon article and we were proven right.
- 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 highlight the texts we want to add on comments and use slash and command to hide it from the final output.
> Wenyi: I think comments can be used in two ways: First, use it as hints to help me locate my codes. Second, help others who read my code understand better.
> Zainab: Additionally, they also help to divide the codes into section and help us in collaborative work to identify where we need to make changes.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
> Having equal mark and quotation mark.
> The generalizable pattern is also embedding "><" when its including an another element inside a tag.
> Zainab:The opening and closing tags are there and we can identify html elements when attributes are paired with values.

<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)?
> If we add a section, the format will change.
> We also add an order list to the tinker, and it changes the output list.
> Zainab: Adding <ol> also highlights meaningful order which makes more sense for example, introduction, description and conclusion.

- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?
> Zainab: we have unique id, and each id has different meanings.
>
> Nuo: When we use these items, our content can be defined accurately. Using different kinds of items to explain diffent layouts. It can make the format of our web pages more diverse.

> Wenyi: According to my understanding, class is used to apply function to anywhere you want. It is not restricted to one certain line of codes. For instance, if I want to bold certain words somewhere, I will use class together with span element: "span class='bold'"". I can apply this to anywhere I want. However, "id" is unique to one certain thing and I can name the "id" anything. I should use them flexibly according to different circumstances.

### 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.
> We change the color of h1, h2 and h3 to white. We also change the background-color to blue.

* Why do we have so many different kinds of CSS selectors available?
> Because we want our website to be more vivid and beautiful. Further, it helps us locate the elements in HTML so that we can make changes precisely.
Zainab: It helps us identify which selectors to target for style.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?

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;
}

> It follows the sequence like this: selector, curved bracket, property, colon, the value semi-colon.
> Despite the above representative pattern, there are lot more CSS patterns. For instance, if we want to select a specific attribute, we use square bracket "[]" as well.
- 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?
> Wenyi: I found another website to learn CSS selector+property very useful and I also recommended it to me group members. Here's the link:https://www.w3schools.com/css/default.asp.
>
> Zainab: When I was working on doodle homework, I first thought about the structure of my homepage on a plain paper and I had thought what elements I want bold/different colours etc. Then I refered to the cheat sheet to identify the codes used for this styling. I do not think I can ever remember all the major codes but the ones I used alot for example flex and margin and all I can remember.
>
> Nuo: Since I just can't remember all the CSS rules, I will know what function I want to contribute at first. Then I will go to check the [30 CSS Selectors] and find what kind of CSS selector should I choose.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?
> A change in HTML sequence will not affect CSS. We changed the order of h1 and the first paragraph and found that the CSS's rules are still working.
Zainab: By this we mean, that CSS will not care if the order is not making sense. For example if h2 is suppose to come after h1 but we move it around towards the end, the CSS properties on it will still show but from the webpage it will not make sense to the user.

- 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?
> Zainab: Always write the opening and closing tags together. I faced this problem during FCCs -if by mistake in CSS I have forgotten a closing curvy bracket it will give me error.
>
> Nuo: I think maybe we should check our syntax first. Because if there’s no error before we write this line of code, it probably means that the question is from here. and the syntax error is the easiest thing could be found.
>
> Wenyi: First go over the sections on by one. Within each section, check the parent then the child elements in a hierarhical way to examine whether there is a bug or not.

* Based on said understanding, what are some best practices to reduce errors _as you code?_
> Zainab: Put the opening and closing tag beforehand instantly. When I have to nest a certain element, use indentation consciously.Cheetsheet can also help us make less errors. Make use of divs, classes and section to organize the code.
>
> Wenyi: Slow down the typing speed and be patient.
> (Add on Oct.2nd) When working on my homepage project, I discovered a efficient way to reduce errors: Build the structure first in my mind, write it down then fill the structure with deatiled codes. It is particularly useful when writing CSS, I divide the whole CSS into 2 parts. The first part is the general layout of all sections, the second part is about each section's details. In this way, it is more efficient for me to locate my lines of codes and also help me establish a clearer outline.

> Nuo: Use simple words and normal syntax to create code. And if there’s some error we can’t solve and need help from others, they could easily understand what we want to express.
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
> Zainab: The strength is that it provides us with instructions, visualizes our code and input. It is like guided instruction where we are clearly told the steps. However, I felt that because the instructions were given i struggled myself to write my code from scratch.
>
> Nuo: I think FCC can help us learn the code line by line, and understand how the coded works step by step. But the limitation of it is sometimes even if I pass this step, I still don’t know why it can work. I just try for so many times and finally get passed.

- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
> Zainab: Allow myself to learn from peers. Ask questions from each other. We have less time in the class to finish the Tinker.
>
> Wenyi: The level of questions becomes more and more complex. It requires higher level of reasoning to answer the questions as well.
>
> Nuo: The strength is we could share ideas with others, so that we can solve some problems which cannot be finished by ourselves. But when we discuss together, the questions cost more time.

- 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?
> Wenyi: The most important thing in Tinker collaboration is learning me peers' MINDSET. From their sharing, I can see how they learn, process and organize the knowledge we both learned in a different way. Before our discussion, I was still confused about CSS's selector's different syntax. My group memebers told me their summary of the selector. For instance, "#" represents "id", "." represents "class", ":" can be followed with "hover", "[]" and ">" are used for targeting specific elements. I never outlined a picture of all these uses before so I really appreciate them told me this.

>
> Zainab: This proved to be a very supportive exercise as in the beginning of my classes I was struggling alot to understand the programming language as I had no prior background but while working in groups I found out that other members are also going through the same thing and that helped us explain the concepts to each other. For example, I did not understand the ordered list and unordered list and my group members explained me that.
>
> Nuo: My group members are much more detail oriented. For example, when discussing the question "generalizable syntax pattern between all these css rules", the answer in my mind was "selector, property and value". But after discussion, we added the "brackets", "colon" and so on. I think it is because I started with the overall architecture, while my group members started with the code perspective. This detailed way of thinking is worth learning for me.

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