# Tinker: HTML/CSS - Meow Mix
## HTML things
**1. How does SEQUENCE affect the visual display of HTML elements?**
Example:
before:

<div class="page-header"></div>
<h1>Meow meow meow meow</h1>

after:

<h1>Meow meow meow meow</h1>
<div class="page-header"></div>

we changed the positions of siblings and visual display of the content is changed

* the display order of the content is changed

**2. What are some ways that the hierarchy of your tags will affect the end result / visual output?**
example:
before:

  <div class="container-top">
      <div class="page-header"></div>
  </div>

after:

  <div class="page-header">
      <div class="container-top"></div>
  </div>

We removed the closing tag, switched the place of tags with attributes of class.
* children's posion is subject to parents positon
* children's style derives from parents' style
* children's style property vlaue overides parents' if both have definition of same style property

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

* remove "classes" "ids"
the content doesn't change but the style and format to dispay it changes
* remove attribute "herf"
The link does't work anymore.
* remove "elements"
The browser cannot recogize the element. The subsequent code till the end of the colsing tag become text displayed on the web
* add comment in CSS
The style will be ignored
* manipulate "classes" "ids"
The style linked to the element changes

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

Yifan tried to immitate the writting style of `<img>` tag and wrote the following code:
`<video src="https://www.youtube.com/watch?v=LDaayQj-vq8">`
The video doesn't show up on the web page.
After googling :

<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=LDaayQj-vq8">
</iframe>

It works for some other youtube link, but for the link provided, "youtube rufused the connet request".

**5. Create some notes as comments in this code. What are some ways that you can use comments to help you understand your code better?**
* It can be used to explain the function of the code. Sometimes the programer will forget what he has done. And for others reading your work, it takes a lot of time to understand. Therefore creating notes as comments can help others understand your work and help you remember what you have done.
* It can be used to give descriptions on different sections.
example:

<!--This is the first part.-->

**6.Take a look at the following:**

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

**What is the generalizable syntax pattern between all these tags?**
* they all have a opening tag and some have a colsing tag.
* contents can be added between two tags.
* inside each opening tag after the tag text write a <u>*attribute-value combination*</u>:
`attribute="value"`
with a space between each combination to define the attribute of the tag.
* they all have attribute values that gives the tag identity

**7.Take a look at the following cheetsheets: HTML5 [Cheatsheet](https://websitesetup.org/html5-cheat-sheet/)
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)?**
1. check the category and find the tag I want to learn
2. see the description
3. add it to the webpage following the syntax
4. if more attibutes is needed, search on google with "tag attributes"

or inspect on well-designed websites to learn from them

example (learn about new elements from cheatsheet):

<meta name="viewport" content="width=device-width, initial-scale=1" />

**8.How can different elements, classes, and ids help to organize our html content?**
* we find some similarities between these different elements
for example:

<div></div> & <section></section>
<h1></h1>, <h2></h2> & <p></p>

They can serve similar function. If we change the style of `<h2>`, make font size larger. It can have a similar display like `h1`. Classes and ids are only diffrent in its selector. We can use id to target multiple tags and use clase targeting one tag.
But using different elements, classes, and ids can help us better organize contents and acheive the desired result with ease.

Common Use:
* by using them to identify and select the tag in css and change the stlye
* classes can be used to identify tags with a same genre and ids are commonly used to define a single tag

## CSS things
**1.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?**
By using > : , selectors, we can locate the tags we want with ease.
class and id target diffrent tags(class to multiple items and id to single item), which help categorize the content.

**2.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;
}

Starts with a selector and several Properties-value combinations in a {}.

selector{
    property: value;
}

They all have a div-relevant selector.

**3.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?**
* Remember important Tricks Almanacs and Selectors
* Go over the rest and look up when needed
* Find the patterns
* Practice in exercise and actual problems

## COMBINED and META things
**1.How might HTML sequence and hierarchy of tags affect your CSS rules?**
* children's style derives from parents' style
* children's style property vlaue overides parents' if both have definition of same style property
* CSS selctor can use HTML hierarchy to locate

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

Based on said understanding, what are some best practices to reduce errors as you code?**
* follow the syntax, get a IDE with auto syntax and indentation
* write clean code, such as correctly using indentations
* be aware of hierachy
* carfully adding attributes and property
* using shortcut while coding (don't forget closing tag)
* decoupling (don't write css/js in html, reduce using selectors targeting multiple irrelevant tags)

**3.What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?**
**STRENGTH:**
Step by step, from giving code example to type yourself, which reduce cognitive load.
Repeating same things help remembering syntax and important content.
Give scaffolding hints when necessary.
**LIMITATION:**
Repeating same things, it's a waste of time for experienced programmer.
sometimes hints can be obscure and not accurate
No shortcuts.

**4.What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?**
STRENGTH:
* tinker with the codes to see how the visual elements are influenced
* build our own understanding of the code
* Through collaborative work, we can learn about how others understand the code and what we are missing when we are coding.
LIMITATION:
* heavy workload
* no shortcuts on HackMD (not user friendly)

**5.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?**
Yifan: I found that the different tags can serve same functions. I learned programming in a behaviourist instruction, so I was taught to write the correct code. But I have never thought about why I should write like this. Actrually, nesting paragraph with `<div>` or `<section>` can be the same, its okay to use id targeting multiple items. With the help of the Tinker assignment and the discussion with teammates, I find reason why we should write like this.

Xinyi:
-- I find it's quite interesting to learn from the perspectives of my teammates and exchange our idea on the same problem.
-- A good one I learned from others: when h2 is given specific styles in CSS, it can function like h1.
-- In the process of inquiring on myself, I not only learned how to use specific elements or selectors but also curate my understanding on why I should code like this.

Qinya:
-- I learned the relationship bewteen the changes of html and CSS. I found out the differences and similarities bewteen different elements, such as div and section. I think this process help me build a clear understanding of the hierarchy and sequence when coding. And the question "why do we have so many different CSS selectors avaiable" help me think about how different selectors help us target and locate individual id/attribute in CSS, which can better origanize the content and visual display of the page.

Manya:
-- The group exchange gave me a better understanding of CSS, which helps html and makes tasks like beautifying the look and feel easier. Also, I learned that different elements can be used together, such as the p and a elements. In order to complete the page faster, we use different CSS selectors, which have different ids and attributes.

-- question: what are the differences between `<section>` and `<div>` since they both divide the content of the page.

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