# Tinker: Meow Mix - Group 1 Notes

###### Group members: Jolin Shen, Yuwei Mao, Danqing Yang, Sharleen Loh

Our group worked collectively to decide what changes best fit the guiding Tinker questions, then discussed what they meant.

## HTML

### Sequence of Elements

#### What does "sequence" mean?
"Sequence" has different meanings to each of us:
* Danqing: A hierarchy.
* Yuwei: Organization from inside-out or outside-in.
* Sharleen: From left to right or up to down.
* Jolin: Elements of similar characteristics. The arrangement of elements in code.

#### How does SEQUENCE affect the visual display of HTML elements?
After we changed the position of the first \<p> element, the first paragraph appeared under the chart.

> 

From our tinkering, we refined our definition of sequence as related to HTML coding to the ordering of elements. We saw that elements like `<p>` and `<table>` were ordered from top to bottom, whereas `<th>` and `<td>`s were ordered from left to right.

### Hierarchy of Elements

#### What does "hierarchy" mean?
We found that one of our definitions of "sequence" fit for "hierarchy"--the arrangement of elements from outside in. Child elements are placed within parent elements.

From our in-class discussion, we learned that child elements under the same parent element are called "siblings," which makes a lot of sense! ...but are there cousins and aunts/uncles and great-great-great grand elements?

#### What are some ways that the hierarchy of your tags will affect the end result / visual output?
We put the 2nd `<p>` inside one of the `<td>` elements. This placed the text of the second paragraph inside the table cell.

>

### Modifying Elements
We were able to change the color of the bottommost text by changing the `color: xxx;` CSS code in `.container-bottom`.



### Removing Elements
When we tried deleting the class attribute in the Bottom Footer `<div>`, we didn't notice any observable changes. This sparked a conversation about what classes and IDs do, the differences between them, and how they relate HTML and CSS.


#### What did you do and what did you discover in terms of the GENERALIZABLE patterns?
* We can group elements that we want to have similar properties with the same class, in order to target all or subsets of them in CSS

#### ID vs. Class
We were confused about the difference between ID and Class. Jin helped us in experimenting with and explaining the difference.

ID only works once, something unique, can stop once it found the result, for more efficient coding. It will also format child elements.

Class can be used multiple times. The script searches through the entirety of the code for instances of the class.

#### Tinkering with ID & Class
Class: `.intro {...}`
ID: `#intro {...}`

Jin walked us through experimenting with a bolder visible change to explore the difference between class and ID.

When we used `#intro {background-color: red};`, the color of the paragraph block only changed to red when the `<p>` class included the attribute `id="intro"`. The color did not change when we had the attribute `class="color"`.

On the other hand, using `.intro {background-color: red};` only changed the paragraph block color when the `<p>` class included the attribute `class="intro"`, not `id="color"`.

### Further HTML Questions

#### Take a guess as to what you expect to see as the visual result. Were your guesses correct?
We were primed by Jin's discussion during class! We tried translating `section#video` to `<section id="videos">` TT.TT

Lisa showed us how to go to YouTube, then find a video's embed code to copy into the HTML section of our code.

#### What are some ways that you can use comments to help you understand your code better?
We can temporarily comment out parts of code that we don't currently need, or leave notes for other collaborators / future users to better understand what's going on.
We can also debug by commenting out parts of code to either simplify what we're looking at, or see what a chunk of code is doing.

#### What is the generalizable syntax pattern between all these tags?
`<tag> attribute1="value1" attribute2="value2"</tag>`
* Some tags do not need to include attributes--we can add them depending on how much we want to customize
* Some tags are self-enclosing, and follow the pattern: `<tag attribute1="value1" attribute2="value2" />`

#### How did you go about learning how to utilize a new element (process)?
We found the documentation of the new element, copied the base into our code, then tinkered with the attribute values to see what it'd do. It didn't come down to this, but our contingency plan was to ask Google, YouTube tutorials, or the #ask-us-code Slack channel for help!

#### How can different elements, classes, and ids help to organize our html content?
Elements like `<header>`, `<main>`, and `<footer>` can organize different sections of our code and help with SEO.
This also comes back to the difference between class and ID to help us locate specific elements we want to style in CSS. Classes can be used to group elements that should be similar together.
Nesting elements within others can also help us organize the code into separate sections and form hierarchies.

## CSS

#### Why do we have so many different kinds of CSS selectors available?
* It's easier to target the right HTML elements
* You'll want different combinations and rules that apply to specific patterns
* You can use classes for self-determined categories and more patterns, or IDs to target a single element

#### What is the generalizable syntax pattern between all these css rules?

Jin: "Generalizable" - What's the template, and what can we replace?

selector {
  property: value;
}

#### How should you go about studying resources like 30 CSS Selectors and CSS Tricks Almanac to help you become a more capable and efficient programmer?
Familiarize yourself with them not to memorize them, but to see and know what's possible, so you know where to find them in the future

## Combined & Meta

#### How might HTML sequence and hierarchy of tags affect your CSS rules?
* Danqing noticed that in certain situations, when you apply some rules to parent objects, they also affect the children
* When you use a parent element as your selector your CSS rule will also aplly to all the things inside that parent element.
* For example, if you change the font-family of the body element, all descendents of body element will have the font applied.

#### 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?
* You can use the Console at the bottom left of CodePen that will alert you to errors when you run the code

#### Based on said understanding, what are some best practices to reduce errors as you code?
* Use the shortcuts we learned in class to make sure you have the correct elements, as well as both the start/end tags
* Some good habits include:
* Remembering to include a space between elements and after commas
* Remembering to include a semicolon after each CSS value
* Remembering the typical rules for each coding language
* CSS uses `lowercase-words-separated-by-dashes`
* Whereas JS uses `camelCaseWordsWithNoSpaces`
* Look in the Inspector console to test out adjustments before making them

#### What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?
Strengths
* Visualize the changes that we're learning about
* Immediately receive feedback for changes we make, both visual and written
* Helps with debugging!

Limitations
* You can only create the project that FCC dictates
* Bugs: Jolin noticed that sometimes, FCC won't let you move to the next step even when you have the correct answer typed, and you
* These limitations sometimes make us want to give up! >:(

#### What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?
Strengths
* We can learn from each others' experiences and expertise, and discuss / correct each other if we have differences in interpretations
* We can be more creative than in FCC, and try new properties we wouldn't necessarily explore in a concrete project until much later

Limitations
* The process can take a really long time if we don't know the answer - until Jin or Lisa swoop in to help!

#### 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?
* When we're making changes as a group, we typically rely on the person screensharing to adjust the code, so we can all stay on the same page. However, this limits how much code practice the rest of us get while we're watching the shared screen.
* We bring different backgrounds and experiences, which affected our interpretations of definitions.
* Some of us are also more familiar with coding already, which is very helpful for bringing in new insights/concepts like using the Console for debugging

## Extra Notes
* ">" looks for children `<p>`
* If an "id" is not being used in CSS, don't delete "id" for further use