- - -
Title: Tinker HTML/CSS Meow Mix
Group Members: Tiffany Zhu, Andrea Maidanik, Andrea Chen, Haoming Zhao, Jingyu Wu
- - -

Tasks and questions: https://hackmd.io/@jmk2142/rkU7P-1j-
Tinker Meow Meow: https://codepen.io/jmk2142/pen/dVMRRq

### HTML things

***1. Mess around with the sequence of different tags. How does SEQUENCE affect the visual display of HTML elements?***

(1) "h1","h2","h3"can be a sequence
- e.g., change h1 into h2 & h3 into h1
For example, if we change "h1" for "h3", the size of the header changes.
- The font size becomes smaller as the the number of "h" becomes bigger, e.g., the font size of h1 is bigger than h2, the font size of h2 is bigger than h3, etc.
- In conclusion, the sequence affects the visual display of HTML elements.

(2) We learned this code can make text go right-to-left <--bdo dir="rtl">
This text will go right-to-left.

***2. 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?***

The hierarchy is important to make it human-readable. If we change parents, childrens, siblings, the visual result doesn't change. But if it is desorganized, a peer will not be able to read it properly and make changes.

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

When I deleted the "class" elements, I realized the background disappeared. The removal of "id" didn't seem to change anything, but the id attribute is used to point to a specific style declaration in a style sheet.

***4. 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?***

We added an embedded Youtube video in the section#videos tag.
Before I did this, I expect to see this YouTube video to show, I used the link first but it was broken, then I remember what Iva taught us in class to use the share bottom to get the embedded link. Once I used that link, it worked.

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

⬇️see the comment here
<!--#For example, consider a really complex and multivariate function you defined in JavaScript, adding comments about this will remind you how to input arguments in an appropriate sequence and how many parameters are set as default and their default value.
#Besides, adding comments is also very useful especially for code with many layers of nesting and looping, because the logic chain of programming could be very complex at sometime.
#It is useful when you're working together with teammates. Leave a comment so that everyone in the team can see the inside and get your ideas.
#Finally, it is always useful for debug or development.-->

***6. 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>
<input type="text" name="fullName" value="anonymous">

<tag>content</tag> (last part depends on whether they're open or closing tab)
The tag can contain *attributes="value"*, and there are different kinds of attributes for different kinds of elements.

***7. 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)?***

I've never used telephone function. So I added a phone number to the page.

***8. How can different elements, classes, and ids help to organize our html content?***

Different elements can have certain classes and ids. And classes and ids are custom attributes we can add to the elements in order to distinguish them from one another.

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

I added a adjacent selector and manipulated the paragraph that is immediately preceded by the h3.

* ***Why do we have so many different kinds of CSS selectors available?***

CSS selectors are patterns used to select elements in the DOM, and there are different ways to select a certain element with an attribute.

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

The generalizable syntax pattern between all these css rules is:
selector(s) { property : value; }

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

I think I will refer to these resources first when I code, once I practice more, I will get used to and familiar with more selestors and properties gradually.

### COMBINED and META things

* ***How might HTML sequence and hierarchy of tags affect your CSS rules?***
CSS rules apply to the corresponding selectors, so if the sequence and hierarchy of tags change, the their CSS rules will be changed simultaneously.

* ***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 believe that you can try to remember the pattern of the work, say HTML: class= “yellow”
CSS: .yellow
HTML: id= “yellow”
CSS: #yellow

* ***Based on said understanding, what are some best practices to reduce errors as you code?***
Carefully check each part while coding, for example making sure each tag has a closing tag, there is no typo, letters are capitalized when necessary, etc.

* ***What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?***
FCC exercises are super useful for beginners.
It always provide positive feedback after learners finish a very small step which other approaches of learning code don't. Besides, its exercises are very methodical, guiding studens step by step learn the code by doing it. And if you get wrong, the code for testing could give you appropriate hint most of the time. Finally, the community have enough students so that almost every task could be searched in FCC with detailed answers and advices if you encounter with difficulties hints can't help. Your questions could be also respond in time by other learners.

* ***What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?***
The strength of tinkering is that it is a good way to practice, mess around a document without the fear of breaking things. We can explore, touch, move and see what happens. Other positive aspect is that it's a collaborative work and we can share opinions and knowledge with our peers. We also feel like it's a great way to practice constructivism. Exploring computing by ourselves establishes a basic understanding for programming languages. For limitations, we might come up various opinions from different perspectives, but it is hard to include everyone's thoughts for each piece of the work. Also, each of us has different progress for the coding experience, it might be tough to have everyone on the same page to complete the tasks and answer the questions, it could be done better through working lively on Zoom together.

* ***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?***
When we are working on the same project, even when we do the procedures in the exact same manner, sometimes there's bugs that show up in one of us's document but not others'. I found that debugging simutanously is a very good way to help us learn together.