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

# Tinker: HTML/CSS - Meow Mix

Original demonstration: https://codepen.io/jmk2142/pen/dVMRRq
Group (Tinker:HTML/CSS - Meow Mix 4):(Ada)Xia Zhou, Aixue Zhang, Sihan Liu, Yajuan Wu

### HTML things

- Mess around with the sequence of different tags.
- How does _SEQUENCE_ affect the visual display of HTML elements?
- When we move things around, we can change the order, for instance, pictures would appear on top of text.
- Also noticed, when we move h3 text to page-header class, the font color changed to white. So, when we change the sequence of tags, it would affect features edited in CSS.

- 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?
- If I change the division element hierarchy, the arrangement of the page will change accordingly.
- If I change within the section part, only the content sequence may be changed, but if I move the content out of the section, their belongings change and visually seperate out of this section.
- If I change the hierarchy of a table, for example, put the table header somewhere else, it will not change until I put the head into the tablebody hiearachy.
- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
- "elements" can seperate a whole thing into different parts and sections, such as headers, footers, paragraphs, etc. When we remove h3 element, the text became the default text.
- "ids" can help us differentiate an element from other elements of the same type. Though, when we removed id="analysis", nothing changed since in CSS the id was not mentioned.
- "classes" can specifies different class in one element.We removed class="page-header", the h1 Meow Meow Meow text changed from white to black.
- Overall, delete some ids and classes that have format in CSS will make the **visual effects disappear**, sometimes display will also change because **the structure and hierarchy** was changed.

- 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?
- I used the "iframe" element to embed the video, it turned out to be something similar to what I guessed before doing it, the only difference was that the video was bigger than I expected, so I changed the width and height to make it fit.
- Create some notes as _comments_ in this code.
- What are some ways that you can use comments to help you understand your code better?
- Adding comments before each section would make the whole structure more organized. Even though comments would not show in the result, but when we take a look at the code, comments would help us locate certain section. Also, comments could work as a reminder for specific codes that need to be revised.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
- Every element need to begin with <elementname> and end with </elementname>, but img and input are self-closing which means that they don't need a closing tag.
- Every attribute, i.e. class, name, id, value, need to be formatted in attribute="value".
- One element can contain more than one attribute by adding a space between each.

<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 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)?
- First, check a new element that can be used in this css based on the html structure, such as color and border.
- Second, type selector as shown in the cheatsheet in CSS.
- Third, enter css rule in the selector to check if this works in html.

- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?
- Elements can divide codes into different sections and group a set of codes together.
- Both id and class attributes in html have two major functions:
- linking the html elements with the CSS such that the selected elements will display according to the specified CSS styles.
- providing a handler for the JavaScript to make changes on the corresponding element.
- However, the main difference between id and class is that the id is unique and can only refer to a single element, whereas a class can be applied to multiple elements.

### 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?
- Sometimes there are thousands of lines of codes, and the html contains a lot of elements and attributes. Having too many separate elements or attributes will make the html code hard to read and the CSS code hard to maintain. So, having different selectors can differentiate the html contents you are going to do the styling in the CSS, bind elements that often occur together, and change the style of a class/attribute which occurs in multiple places.
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?
- selector {property: value;}
- ',': choosing multiple elements at once: selectorA, selectorB{property: value;}
- '>': the direct child of its parent
- 'space' between two selectors: the second selector is a descendant of the first selector, but it doesn't need to be a direct child
- '#': select an element with a specific id
- 'dot' between two selectors: selects only the first selector with the classname after the dot.
- ':': select a certain part of the element rather than the element itself.

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?
- We can first memorize some common selectors or common rules of selectors, which we definitely would use in most cases, so we don't need to go back and check the resources most of the time. In some rare cases that we need to use unusual selectors, I think it's totally fine to review the resources and find the one you need.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?
- For example, if we want everything in the body to have the same property value, such as font size, font, or text color, we can just take the body as the selector, and all the inherited elements under the body can be changed at once.
- CSS rules serve as the visual presentation of the HTML content, so the sequence and hierarchy changes of HTML will affect the CSS rules in turn and change the whole page's appearance.
- 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 it is better to first correct mistakes in HTML codes since CSS relies a lot on HTML’s structure. First, fix errors such as missing elements and unified classes, and then use the corrected code to fix each selector and attribute’s mistakes in CSS.
- Based on said understanding, what are some best practices to reduce errors _as you code?_
- Mastering common rules of each computational language, memorizing their syntax pattern and format so that when you switch between them, less format error will occur.
- When we write codes, we can start with parent element first and add child element one by one into the parent. Then when we are done with one HTML element, we add CSS rule targeting the element we just wrote. And maybe write code to display result from top to bottom or frame a box first then add inside content accordingly.
- Close a tag as soon as you create it, then fill the contents in between.
- Watch out for spelling errors, spaces, line breaks, and some other detailed errors that could be made.
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
- STRENGTH
- The step-to-step instructions are really clear and detailed which are helpful for me who has no previous experience in coding.
- We can see the immediate effect on the result when we write things down. FCC exercises help to build our understanding of each code.
- LIMITATION
- It divides the whole hierachy into different sections and sometimes that makes we learners difficult to form a integrated understanding of the scaffolding and structure of the overall project.
- sometimes the learning outcome can be limited since FCC will give you hint if the code is not passing the test, and the hint may include the right answer. So students can just copy and paste the right code without engaging in their own thinking.
- When we misspell something, the system never tells you the error is due to a misspelling. This causes us to revise the correct code to something wrong.

- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
- STRENGTH
- Tinker allows users to explore more functional elements. It is more flexible.
- LIMITATION
- Tinker will not point out which kind of error you have made, and the error notice is not so obvious.
- 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?
- As a group, we have a common knowledge for each task. But some of us focus on how one code would change in general picture, and some of us focus on how one code would change in this one specific assignment. The changes in general could develop our understanding of HTML and CSS. The changes on this Meow Meow assignment could lead us to see a detailed and immediate change.
- Group work can bring new perspectives on one question.