# Tinker Meow-Mix
## Task 1
> Compare what you see in the code and map the relationships between the code and output.
>
### TOP HEADING

> Contains:
> * H1 header
> * Horizontal rule
> * Paragraph text

#### Code snipet
>
<div class="container-top">
<div class="page-header">
<h1>Meow meow meow meow</h1>
</div>
<p>I like chicken, I like liver, Meow Mix Meow Mix does deliver.</p>
</div>

#### Visual representation to user


### MAIN CONTENT

> Contains:
> * H3 header
> * Hyper text reference: <href></href>
> * Paragraph text

#### Code snipet
>

<div class="container-main">

  <section id="intro">
    <h3>Introduction to Purrr</h3>
    <p><a href="http://en.wikipedia.org/wiki/Cat">The domestic cat (Felis catus or Felis silvestris catus)</a> is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet,[6] or simply the cat when there is no need to distinguish it from other felids and felines. Cats are often valued by humans for companionship, and their ability to hunt vermin and household pests.</p>

    <p>Cats are similar in anatomy to the other felids, with strong, flexible bodies, quick reflexes, sharp retractable claws, and teeth adapted to killing small prey. Cat senses fit a crepuscular and predatory ecological niche. Cats can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small animals. They can see in near darkness. Like most other mammals, cats have poorer color vision and a better sense of smell than humans.</p>

    <p>Since cats were cult animals in ancient Egypt, they were commonly believed to have been domesticated there, but there may have been instances of domestication as early as the Neolithic from around 9500 years ago (7500 BC). A genetic study in 2007 concluded that domestic cats are descended from African wildcats (Felis silvestris lybica), having diverged around 8000 BC in West Asia. Cats are the most popular pet in the world, and are now found in almost every place where humans live.</p>

#### Visual representation to user

### "Analysis of Felis Catus" WITHIN MAIN CONTENT

> Contains:
> - Section
> - Section ID attribute with a value equal to "analysis"
> - H3 header
> - Table attribute with a value equal to "cat danger"
> - Table rows
> - Table headers
> - Table data
> - Table data class with a value equal to "extremely deadly"
> -- A "span" is used to limit how wide the browser presents this data visually.

#### Code snipet
</section>
<section id="analysis">
<h3>Analysis of Felis Catus</h3>
<table id="catDanger">
<tbody>
<tr>
<td></td>
<th>Cute</th>
<th>Sassy</th>
<th>Playful</th>
</tr>
<tr>
<th>Small</th>
<td>Deadly</td>
<td>Deadly</td>
<td>Deadly</td>
</tr>
<tr>
<th>Medium</th>
<td>Very Deadly</td>
<td>Very Deadly</td>
<td>Very Deadly</td>
</tr>
<tr>
<th>Large</th>
<td><span class="danger">EXTREMELY Deadly</span></td>
<td><span class="danger">EXTREMELY Deadly</span></td>
<td><span class="danger">EXTREMELY Deadly</span></td>
</tr>
</tbody>
</table>
</section>

#### Visual representation to user

### "Cats Opinions" WITHIN MAIN CONTENT

> Contains:
> - Section
> - Section ID attribute with a value equal to "opinions"
> - Section CLASS attribute with a value equal to "gallery"
> - H3 header
> - Div CLASS attribute with a value equal to "thumbnail-pane"
> - Image Source
> --Image source has an '"alt" attribute for accessibility (visually or hearing imparied).
> - H5 header
> - Paragraph text
> - Section ID attribute with a value equal to "videos"
> -- This section has commented-out code referencing something that appears legacy and no longer applicable.

#### Code snipet

  <section id="opinions" class="gallery">
        <h3>Cats Opinions</h3>
        <div class="thumbnail-pane">
          <img src="https://jmk2142.github.io/mstu5003/week01/visualize/images/catZero.jpg" alt="grumpycat">
          <div>
            <h5>Grumpy Cat</h5>
            <p>I'm unimpressed. Shut up and code.</p>
          </div>
        </div>
        <div class="thumbnail-pane">
          <img src="https://jmk2142.github.io/mstu5003/week01/visualize/images/nyan.png" alt="nyancat">
          <div>
            <h5>Nyan Cat</h5>
            <p>I love tasty cupcakes and sweets.</p>
          </div>
        </div>
        <div class="thumbnail-pane">
          <img src="https://jmk2142.github.io/mstu5003/week01/visualize/images/businessCat.jpg" alt="catInTie">
          <div>
            <h5>Business Cat</h5>
            <p>It's time for your purrrrformance review.</p>
          </div>
        </div>
      </section>
    </div>

    <section id="videos">
      <!-- Add Old Timey Nyan-cat here. https://www.youtube.com/watch?v=LDaayQj-vq8 -->
    </section>

#### Visual representation to user

### FOOTER

> Contains:
> * Div CLASS attribute with a value equal to "container-bottom"
> * Paragraph text
> * Elipsis element
> * Bold emphasis tag
> * Italics emphasis tag

#### Code snipet

<div class="container-bottom">
  <p>Copycatright 2014 &hellip; <strong>All tunafish reserved.</strong> &hellip; <em>Jin Kuwcata</em></p>
</div>
</div>
</body>

#### Visual representation to user

---
<!-- # HTML THINGS

> Moving around
>
` <div class="container"></div>`

> Impacts the visual presentation of the page. This is because it has a color defintion within the CSS. By putting it witihn

`<div class="container-top"></div>`

> The entire section takes on the state of

<div class="container"></div>

> Alternatively, by moving around

<section id="intro">

-->

__1.How does SEQUENCE affect the visual display of HTML elements?__

The sequence of the elements determines and the order and organization of visual outputs on the webpage because the HTML page is parsed sequentially from the beginning to the end.

In the context of styling, however, the sequence could determine what overrides what
e.g. the order of the class declaration in the style section determines which will take precedence

second declaration will always take precedence over the first

e.g. from FCC

  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  .pink-text {
    color: pink;
  }

.blue-text {
  color: blue;
}


</style>
<h1 class="pink-text blue-text">Hello World!</h1>

__2.What are some ways that the hierarchy of your tags will affect the end result / visual output?__

The hierarchy of the tags will affect how nesting and wrapping take place. It tells the browser the importance and the emphasis of the different elements and helps communicate the information to the user in a more intuitive way.

__Add/remove/manipulate various elements, ids, classes, attributes__

__3.What did you do and what did you discover in terms of the GENERALIZABLE patterns?__

I got rid of several elements just to see how the visual output changes. Everytime I got rid of some elements, the layout changes and the styles disappear. The states of those elements were reset back to default. Because this Tinker doesn't have much function to it, the main changes happen visually.

Another implication for this might be that the override styles could be eliminated if these were not put in place
e.g. class override body elements' CSS

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

Before:
I expect a youtube video to pop up below cats opinions. I also expect it to be in a different section, so there should be some distance between the business cat picture and the video.

After:
Yes, the video is displayed in a different section, but I didn't exepct it to refuse to connect and that it would be this small. Another thing is alignment. It's alighed to the left instead to the middle. I will have to modify the respective codes in the tag or CSS to make those visual changes happen.

__What are some ways that you can use comments to help you understand your code better?__

I can use comments to help me understand my code better by using human words to organize/reference my page. They could also serve as documentation of the original idea or differnt ways to solve problems.

Clarification comment for future self (more vigilant and caffeinated self)

__What is the generalizable syntax pattern between all these tags?__

- All tags are wrapped in <>
- All tags have some sort of attributes and are represented with the = sign
- Values and content of attributes are wrapped in ""

__How did you go about learning how to utilize a new element (process)?__

First, I looked at the tag and made sure that I typed in the right open/closing tag and that the codes followed the syntax rules. Next, I tried to put in an example to see how the page changed. Since the cheatsheets were in text, I didn't know exactly how it was going to change. e.g. I tried out "srcdoc" but wasn't sure what it meant by HTML content within the frame. It turned out weird to me so I decided to go to W3S to look at an example, which turned out to be the same visual output. I just didn't understand the formatting.

__How can different elements, classes, and ids help to organize our html content?__

They can help organize our html by labeling and framing the range and groups of elements we would like to later customize or refer back to. Without them, it would be more difficult to quickly understand what the codes represent from the users' end.

__Why do we have so many different kinds of CSS selectors available?__

We have so many different kinds of CSS selectors available because then we are able to customaize the sites we are working on and are able to target the elements we would like to style more precisely without affecting the other elments we don't want to change.

__What is the generalizable syntax pattern between all these css rules?__

The syntax pattern between all the css rules are that they all have 1) a selector, 2) property, and 3) value. By finding the elements and identifying the style type that we want to change, we can assign a value that defines those style types to achieve a state change.For instance, by changing "padding" the user can increase or decrease the space between the edge of the div "box", or by changing the "text-alignment" with the appropriate syntactical value, "left, center, right, etc." the text changes position on the page.

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

We should go about studying these resources by putting the information to real practical use like making a website or writing our own code. In this way, through trial-and-error as well as continous practice, we would then be able to become more capable and efficient in recognizing what the goals/needs are and what selectors will best address them.

___COMBINED and META things___

__How might HTML sequence and hierarchy of tags affect your CSS rules?__

If our CSS isn't showing the things that we would want to see from our HTML code, then something is wrong; typically, looking at the HTML sequence and hierarchy of tags would most likely resolve the issue in the beginner stage.

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

We think that it's best to first identify what the problem is by looking at how the code is visually rendered on the page. We could ask ourselves questions like "does my code look like the design?" and "if not, why does it look different?" We also should refer back to the sequence potentially doing an internet search to validate that the sequence is correct and the syntax is properly formatted.

__Based on said understanding, what are some best practices to reduce errors as you code?__

It's best to go back to the four stages: sequence, hierarchy, organization, and patterns.

__What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?__

The strength of the FCC exercises like you mentioned Prof Kuwata is that we are actively coding and we are starting to learn to solve problems in smaller contexts. Another strength is that they introduce us a variety of commonly used and basic elements and styling strategies through small learning units, which is less overwhelming.

The limitation is that rather than providing scaffolds during the problem solving process, the hints and demo videos are directly given after the first mistake and are the only supports given. It could be challenging for the learners to work through the challenges when they fail to understand those hints. It also makes it incredibly difficult to embed all of the information into our memory at once. As an introductory type of learning resource, it does not provide more complex and layer problem-solving challenges.

__What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?__

The strength of tinkering is that we get to collaboratively learn from each other and answer each others' questions. At the same time, we get to explore different kinds of codes with little restrictions. The limitationis that since there are no correct answers, it is hard to gauge what we have done and learned within the short span of time that are tinkering.

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

We had a great time discussing the definitions and implications of sequence, hierarchy, organization, and patterns. We each had our own thoughts about what these four stages meant and it was really fulfilling to learn about each other's thought processes.