---
tags: mstu5003, tinker, html, css
---

# 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?
:::success
The _SEQUENCE_ of tags is very important to HTML, as the order is required to be kept for the page to show.
The code should always start with _html_ tags.
Like a human body, the code starts with the _head_ tag, the _title_ tag within the _head_ tag, and the rest of the code within the _body_ code.

:::

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

When the < p > child from

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

is removed from its parent, the < div >, likes this

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

it shows outside of its parent containers, existing entirely outside of what the code visually represents (the box inside the page).

This shows that the _hierarchy_ is important to formulate structure of the content within the containers.

- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns

<b>elements:</b> The "elements" are the "titles" that are in <>, which state what the content is, connecting it to the css code that decorates the content. When the elements were switched around (p, h1, h2 etc.) the styles of the content changed to the "decorations" of the css.
<br>
<b>ids:</b> The "id"s are like elements, "titles" of the content, but group the various elements into sections that the css can "decorate" as a whole. For instance, when the color of the text of the container-main with "red", then changed all the "id"s to "opinions" (in place of ) "intro", the texts in both sections of "intro" and "opinions" changed to the text color of "opinions", red.
<br>
<b>classes:</b> The "classes" are similar to "ids", but different in the sense that "classes" can be repeatedly used throughout the code. For instance, the "classes" of the code is used to declare as sections such as container, container-top, page-header etc. These are repeatedly in each large sections such as the TOP HEADING, MAIN CONTENT etc. When the class of the footer was changed from container-bottom to container-main, the footer's container changed into a pseudo-main box to emulate the container-main's form.
<br>
<b>attributes:</b> attributes give "meaning" to an element. A good example would be the < img src ="" alt ="" > which add in the image source and the image's name. When the image source's URL is changed, then the image changes. The cats' images were changed to other random image URLS, which changed the visuals of the images entirely.

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

My guess was the first code, the second code was correct.

  <section id="videos" src="https://www.youtube.com/watch?v=LDaayQj-vq8">
  
  <iframe width="560" height="315" src="https://www.youtube.com/embed/y881t8ilMyc" frameborder="0" allowfullscreen></iframe>
      </iframe>

- Create some notes as _comments_ in this code.
- What are some ways that you can use comments to help you understand your code better?

Comments are good to make notes to: separate the code into recognizable sections, make notes of reminders to what to edit/take out/add, communicate with other collaborators when working on the same code to explain or ask about progress.

- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?

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

The first three follow the general _opening tag_ , content, _closing tag_ pattern. The ID, class need closing tags to formulate the HTML sequence.

The last two are _self-closing tags_ where one does not need to close the tags, like the tags below:

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen>

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

<p><strong>What does your cat mean with: MEOW?</strong>
Cats mean many things when they make the sound: <em>MEOW</em>~! It is crucial that you try to understand what your cat means as its <strike>human</strike> ehem owner. </p>

<blockquote>
Your cat is more complex than you know.
<cite>-Dante</cite>
</blockquote>
<pre>
This is a gift from the cat Gods to enlighted you...
</pre>
<p>Prepare to take notes with this complex <code>code tag</code> which will teach you a lot.</p>

- How did you go about learning how to utilize a new element (process)?

I tried to rewrite the code into different parts of the code from the cheatsheets, with new content like the example above.

- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?

As mentioned above, understanding the content as mini builder blocks in pods that are in bigger pods help create an organized structure of the different code presented on the page.

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

I would imagine it is because as the code gets much more complex, there are various and vast details that the CSS needs to call to decorate with designs and style. The different selectors allow this to happen with much more freedo, diversity and ease.

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

They are all selecting various parts of the div element through various different selectors.

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

My method would be trying out the different types of rules and properties based on a certain idea of what I want to do, and reuse the rules and properties that come easily to me and my typing up the code. Sometimes testing different types of code to do the same thing can also remind me that coding can also be creative.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?

The CSS should also be in the order of the HTML hierarchy so it is easy to track which code correlates to which. (Learned this the hard way -- where I couldn't find the correlating CSS when it got too long!)

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

I think of the HTML as the bone structure of a body and the CSS as the flesh. To track the CSS, which should be written in the hierarchial order that the HTML is written, would be seeing what is visually shown on the page within the bone structure of the HTML. When there is an error on the page, it would be a CSS bug, and I will see which part of the website needs fixing and check the CSS according to that HTML structure.

- Based on said understanding, what are some best practices to reduce errors _as you code?_

Coding in structural order would make most impact.
Also, sometimes copying and pasting the code (when written right) where there is repitition may help reduce syntax errors and typos.

- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?

The FCC is great in understanding the step-by-step process of coding and forces me to understand the concepts behind each element. Also, the immediate construction of the functions we learn on FCC is a good mechanism for a visual learner like me.

The limitations may be the limited diversity of code, as I do not always have time to look up the various types of code, and rely on what FCC teaches me. As it is moreso tryin to understand a concept and apply it accordingly to instructions, the application of it to realizing independent ideas is very hard.
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?

Tinkering is a lot of independent learning and can be confusing when the information is learned in a jumble of searches and references due to limited knowledge.

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

N/A as I did this alone

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