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

# Tinker: HTML/CSS - Meow Mix
> group member:Jiayi Xue, Moira McCavana

## Recall Tinker Tasks
- HTML Things
- CSS Things
- Combined and Meta things

---
>Tinker GUIDES and QUESTIONS
>- SEQUENCE
>- HIERARCHY
>- ORGANIZATION (Semantics)
>- PATTERNS (Generalizable syntax patterns)

### Task1: HTML things

- How does _SEQUENCE_ affect the visual display of HTML elements?

:::info
When we changed the sequence of elements, the order of displaying the element will also be affected and switched.

For example (See the original code in the end), if we switched the **div** element and its child h1(has the class="page-header") to the end, then when we display of HTML, the title Meow meow meow meow and break line will moved to the end.
:::

Code 1 (original code):

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

- What are some ways that the _hierarchy_ of your tags will affect the end result / visual output?

:::info
When we switch the hierarchy, the parent-child relationship changed. As result, elements' display, order and CSS format will also be affected.
- For example: In code 2(attached in the end) we can see the _**div with class "thumbnail-pane"**_ is the parent and **img** and other **div** are it's children (hierarchy: div with class "thumbnail-pane"> img > div> h5,p).

When we nest the **img** to the h5, then the hierarchy turns to div > h5,p > img. As the result the image will become smaller than original and aligned with the title.

Code 2

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

:::

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

:::info
When we remove or add the ids, classes, or attributes from html, it affects the CSS which will turns to the change of elements' formate, style, size, font-size or color etc.

For example, when I removed class="thumbnail-pane" from Code 2 above, the image of the cat turns to very big.

Changing the sequence of the element tags changes the order of information that is displayed.

All images and videos require a source (the place on the internet where they pull the content from). It also need to add alternative description for the image.

Both IDs and classes are a fundamental tool for creating CSS styling rules. Because the IDs cannot be repeated across code, however, they have a restriction that classes do not, and so it seems that a majority of styling happens as a result of establishing classes.

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

:::info
We expected to see the thumbnail show up where we'd embedded the code for the video. In the end, the video showed up but it showed up at full size, so we had to adjust the height and width by calculating a proper ratio, and this made the video a manageable size for our web page.

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

:::info
I think that comment can benefit for the following ways:
- Recap of what I did when I look at this code again.
- Explain the meaning of the code on that spot without making any changes to the html/css/js code.
- Note taking of the important things that I think I need to focus while I am writing for the other part of the code.
- To comment out and effectively "disable" old code that you think you may want to use again.

There might be more, this is the most important things that I would think of at this moment.
:::

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

:::info
General syntax:
- We must to have an open and closing tags.

meta, div, h1 

However, for others such as

img, link, hr, input, etc

which are self-closing elements do not need the closing tag.
- We need to include the <> for both side.
- An attribute always needs to be introduced in the following way:

<element attribute= "value"></element>

...
:::
- 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.
- How did you go about learning how to utilize a new element (process)?
:::info
In order to learn about the new element, I will go to check the cheatsheet to determine the reason why we use it. Then I will search for some example code, therfore I know how I can write the code in an acurate way.

Then I will preview changes of website after I apply the code and check the visual display. It helps me to remember how can I apply it in the future.
:::
- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?

:::info

ID is unique, we can only have one id for specific element. But we can have same class appear in different elements.

Both IDs and classes are a fundamental tool for creating CSS styling rules. Because the IDs cannot be repeated across code, however, they have a restriction that classes do not, and so it seems that a majority of styling happens as a result of establishing classes.

:::

### Task2: 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?
:::info
There are lots of different selectors so we can decorate our website in diverse and complex styles. There are three major selectors, which are common selectors, pseudo-selectors, and relational selectors. More complex slectors like **pseudo-selectors** also help you create exceptions to the general rules that you've written, and this helps you target smaller units of code and stylize more specifically.
:::
- 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;
}

:::info
syntax:
- Before we input different properties, we need to have curly bracks { and } to open and close it.
- After we complete the properties and values, we must have ";" in the end.
- Class should be "." in the front, id should have "#" in the front. Element selectors don't require a piece of punctuation to introduce them. For example: Class vs ID:

h1 {
    font-family:verdana;
}
.section { 
    border:5px solid black;
}    // class//
#2 {
    padding:5px;
}
;

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

:::info
One should make an effort to memorize the most commonly used selectors as they start coding, and this will become easier the more projects that you make and the more that you need to depend on these basic building blocks of code.
Furthermore try to search for the function of unfamiliar selectors and find some examples to see how we can apply the selectors in our code.
:::

### COMBINED and META things

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

:::info
When the hierarchy of html changes, the parent-child relation changes, the CSS format will also changes based on it.

For example:

If you place the first p element within the h1, **the subtitle for the website becomes the main title** and "I like chicken, I like liver, Meow Mix Meow Mix does deliver" acquires the formatting applied to the h1. The result is that the main title becomes very long.

 <h1>Meow meow meow meow 
     <p>I like chicken, I like liver, Meow Mix Meow Mix does deliver.</p>
</h1>
 

:::

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

:::info
In order to fix the code, I would:
- check out the display of webiste to see if it is correct. Then I can try to go back to the specific code to look for how to fix it.
- Check whether my codepen has "!" therefore, I would know where maybe incorrect. Then I would see if there is any hint, and then use the first strategy that I have.

I would start by checking my syntax to make sure that I haven't made any silly mistakes, like forgetting to close a tag, or forgetting a final semicolon when writing styling rules in CSS.

After checking to see if my syntax is correct, I would check the relationships between the HTML and CSS. For example, if I have written a "videos" ID in HTML, but I write "#video" in CSS, I might think that I've written perfect code, but my styling will never apply.

Finally, after confirming the relationship between all my HTML elements and my CSS, I would check the hierarchy, and then the sequence. These are macro structures, and it makes more sense to check if I've made a minor error first, as these are more common, and can easily mess up code that's written with a perfectly logical structure.

:::
- Based on said understanding, what are some best practices to reduce errors _as you code?_
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?

:::info
- strength:
- I think that FCC has lots of practice problems that can help me to familarize the typing different code in reality.
- I think it breaks the big steps into multiple small steps therefore it helps us to understand.
- I like how they provide the hint when we stuck in the middle of the coding process and get super confuse about what we should do to fix it.
- Every skill that FCC teaches you is repeated again and again, each time giving you less scaffolding so that you learn to use the elements and selectors confidently on your own.

- Weakness:
- sometimes FCC steps are super confusing while they always asked us to create the css selectors that we can't find in the html. Then they will asked me to create the class or id in the html later. (I think in reality we should create the class or id in html first before we type code in CSS)
- It's easy to perform steps in FCC without thinking critically about what you're doing, and so you might create a beautiful nutrition label without later, for example, knowing how to use the box styling method

:::
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
:::info
- strength:
- I think tinker gives me a chance to collaborate work with others in mstu 5003. It can provide a chance for us to share out our difficulties and success with each other, it would be important.
- I like that we need to write out and explain terms -- it helps me to process the term of the code and help me to realize if I really understand how to apply certain code.

- Limitation:
- Lack of visual compare and contrast. Although we can type the code, we could not visually display the code and how it looks like when we run it in codepen.
- While it's useful to have the code already written in order to mess around in it, we aren't creating our own code directly, so that's a muscle that we don't get to work in Tinkers.
:::
- 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?

:::info

Jiayi:
Moira provides lots of sysmatic way of structuring the code and deep knowledge of how to she formating code. In our groupwork, she supports and strenghen the group work to support the meta thinking and deepend the critical thinking while we work on coding.

Moira:
Jiayi was expert in some things that I didn't understand as well, like sequencing and hierarchy. It was useful for me to talk through these questions with her, because I wouldn't have been able to articulate the answer in the same way if I hadn't. I think, rather than having very different strengths/learning-styles, we both just internalized some things better than others, and we were able to share that knowledge with each other.
:::