# Tinker: HTML/CSS - Meow Mix
Original demonstration: https://codepen.io/jmk2142/pen/dVMRRq
Group: (Alex) Yixuan Xu, Qi Zhang, Titus Chen

### HTML things

- Mess around with the sequence of different tags.
- How does _SEQUENCE_ affect the visual display of HTML elements?
- Sequence dictates a top-down, left-right order and consequence of elements and their nested elements.
- We moved the "MEOW MEOW MEOW" header below its actual page header container.
- This not only shifted the header text outside of its box but also resulted in a font color change from white to black for "MEOW MEOW MEOW".
- This was a good example of simple sequence tinkering that can result in large visual display changes because we tampered with the flow of nested elements.

- 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?
- Sequentially speaking, parent "tags" are known to be those least indented (farthest left).
- Every indented tag below a parent object signifies a child. Moving a child outside of its parents' containers will directly affect visual output.
- The visual output is thus disrupted. When the child of a parent is removed, we can actually visualize it moving away from its boxed area.

- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
- We removed class="container-top" and the header disappeared completely. WOW!
- This is probably because under CSS, the container was set to a certain color. Removing that container removes the stylistic element and we can no longer identify white header font from a now white background.
- We removed class="page-header" and the title text turned black from white. This is because CSS makes page-header H1 white. Removing it set it to default color black.

- 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?
- Because the 'section#videos' tag rests outside of the 'div header and main' containers, we presumed the video embed would rest outside of the article box.
- It appears we were correct.
- Create some notes as _comments_ in this code.
- What are some ways that you can use comments to help you understand your code better?
- Using comments in code can help us divide the code into sections
- Appropriately-placed comments help collaborators understand where, when and how they can alter elements, etc.
- Comments can also signify fun easter eggs!

- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
- Our "alligator mouth" (<>) conventions for properly opening and closing tags.
- When we see attributes paired with values we can safely infer that we are looking at HTML elements.
- We find attributes easily because they are paired w/values given an equal sign

<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 cheatsheets: [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)?
- We first took a look at the HTML Cheatsheet and noticed a tag called `<details>`. We tried using this element in our Tinker code.
- It appears the user can hide or display content using this feature.
- 
- However, the default summary text is set to "Details" (see image above) and we wanted to change that.
- We searched Google to understand the parameters of this element. According to W3Schools we can use `<summary>` as a child element for `<details>`. And then we can change the default summary text.

- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?
- We understand that certain elements emphasize meaning for the computer, for example, using `<h1>` in HTML...
- <h1>... Is not just for the purpose of creating large text; it's a heading tag! We can always make fonts larger in CSS. </h1>
- In HTML, this helps organize key information that the computer also understands.
- We can add classes to multiple elements and an id to a unique element.
- Usually, we want to add the same class or classes to HTML elements at the same hierarchy so that the computer can search and apply the same things to them e.g. if we style elements with the same class using CSS, they will appear to have the same styles.
- id is used to point to a specific unique element, and we can use CSS to style it as well. In this way, you can easily find said id.

### 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?
- Because we can precisely determine what elements we want to target stylistically.
- Also, not all selectors are supported by the same browsers. A majority of them are, but not all. For example, some older IE versions don't support "fancier" CSS selectors.
- They add a variety of rich animations and interactions to the webpage.

- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?
- Consistent use of `div` selectors and curly brackets `{}` denote different style changes.
- Within the curly brackets `{}` we see property-value pairs with semi-colon endings.
- We then can infer that this syntax pattern is used in CSS to stylistically change elements in HTML

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?
- Fully understand the difference between Selectors vs. Properties. Use them as a good framework for categorizing different CSS tools.
- By clearly classifying different "buckets" of tools, we can better remember when to use what and why.
- We want to first take a look and try to remember some of the most commonly used syntaxes. And then look at and understand the examples provided. Then, we will go and use them in some tinker code to see the differences between the different selectors.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?
- The fundamental organization of HTML affects how we write CSS
- For example, we use `x y {}` to format parent/child selectors, where `x` signals the parent and `y` signals the children. These formats affect all the children with tag `y` within `x`.
- 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?
- check the lines that are throwing error according to the coding environment. Check the code from top-down.
- check the syntax, e.g openning and closing brackets, spelling
- check errors from child to parent in HTML; always respect the sequence and hierarchy! (analogous to order of operations in math)
- be ready to fix according to hierarchy!
- Based on said understanding, what are some best practices to reduce errors _as you code?_
- Write comments to label different section
- use divs, classes, ids to seperate and organize HTML
- Pay close attention to indentation
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
- Strength:
- FCCs is a nice interactive learning environment, where we can see changes immediately and how they can affect the visual display.
- They have good scaffolding and progresses overtime.
- Limitations:
- FCCs are very guided exercises. If we want to make projects ourselves, we still need to research more. It's very different from a real development environment.
- We are mostly only learning syntax, but not so much problem solving skills or logical skills.
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
- Strength:
- The Tinker task takes a more holistic approach, and the questions usually combines multiple elements of coding, which allows us to really dig deeper and analyze on the materials.
- Through teamwork, we also learn how to be more articulate when describing coding with others.
- Limitations:
- Because of the nature of the questions (more conceptual), students without any previous coding experience might find it too generic and lack of guidance.
- On the other hand, for students with previous coding experience, the questions can seem to be too guided.
- 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?
- For one, Yixuan posesses prior JS and HTML/CSS coding experience, which proved extremely helpful.
- However, discussing the why and how behind certain iterations was valuable because she herself never thought of conceptual programming from such angles. Through this exercise, Yixuan practiced and learned to articulate programming patterns.
- Collaboration was invaluable because teammates were able to discuss their own understandings.
- Tinker is a good exercise for reflecting on one's understanding to the materials. For Qi, she was able to find out what parts she need to continue working on in the future study. For example, writing code with the correct syntax, and understanding the logics.
- Titus was also able to learn more about different syntaxes through observations and articulations.

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