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

>HTML tags are arranged in a parent-child relationship, which establishes the hierarchy and controls how content is displayed. Layout, placement, and stacking of items on a web page are all directly impacted by the order in which they occur in the HTML source code. HTML order affects how they flow within text and containers and is crucial for creating a coherent and understandable content presentation to individuals with impairments because screen readers depend on the HTML structure for accessibility like using headings **`h1,h2...`** and paragraphs **`p`** to block, the division **`div`** element to group related content together, and **`section`** element to represent content with a common purpose. As a result, carefully considering tag order is crucial for creating well-structured and aesthetically pleasing web pages.

- 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?
- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`

>The placement, layout, relative importance, and styling of items depend on their arrangement inside the HTML structure. The flow of information and the page's overall aesthetics may change due to rearranging the hierarchy. Additionally, accessibility may be affected since screen readers interpret the sequence to give people with disabilities an understandable experience.

- What did you do and what did you discover in terms of the GENERALIZABLE patterns?

>Expanding the material and integrating new parts are made possible by adding them, but structural upkeep is crucial. Modifying characteristics like src, href, or alt affects functionality and accessibility.

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

>The section **`id="videos"`** element expects to see a specific space within the section where the player would be shown before adding an embedded YouTube video. Users could view the YouTube video linked within that section, which would appear as a rectangular video player with playing controls. The default styles and behaviors linked to the embedded video player provided by the embedded video code for YouTube will determine how the player appears and functions. In essence, the video will be viewable and playable within the defined area of the webpage.

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

>Code comments act as helpful documentation and comprehension aids. They can clarify intricate reasoning, give context and explanations, as well as act as a reminder to help us keep track of code changes. Clarifying Complex Algorithms, Explanation of Logic.

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

>They all have a opening tag, attribute, value, and closing tag.

- 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)?
- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?

>**HTML Elements** specify all of the different elements of your text, including headings, paragraphs, lists, links, photos, and more.
**Classes:** Multiple HTML elements can be grouped and given the same CSS using classes. It is a useful tool for maintaining consistency in styling because you may apply the same class name to several components on a single page.
**IDs:** They identify each HTML element on a page individually. Unlike classes, each ID on a website should be distinct, and it is frequently used to target particular items with JavaScript or apply particular styles to those 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?

> CSS selectors are patterns used to select the element we want to style. The choice of which selector to use depends on the specific design and styling requirements, so more CSS selectors provide more flexibility and precision needed to style web pages effectively. We can design some specific styles to some parts without affecting the other elements.

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

selector {
    property: value;
    property: value;
}

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?
>I'll be searching and checking out [30 CSS Selectors] and [CSS Tips Almanac] from time to time to help reinforce my familiarity with CSS Selectors. And try to use these selectors in real web development projects to reinforce understanding and expand programming efficiency.

### COMBINED and META things

- How might HTML sequence and hierarchy of tags affect your CSS rules?
> The sequence and hierarchy of HTML tags determines the specificity of selectors, the cascading of styles, the box model and layout, positioning. If we changed some sequences and hierarchy of HTML elements, we might also need to modify the CSS rules to maintain our desired layouts.
- 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?
- Based on said understanding, what are some best practices to reduce errors _as you code?_
> 1. If an error occurs, we need to figure out the specific error in our code. We can immediately find the incorrect line(s) by using the hints and red underlines on the page, and then we can go through the code, paying close attention to syntax errors, misspelled variables, and unclosed tags. Moreover, we need to check whether or not the sequences and hierachy of HTML elements and CSS rules are structured logically.

> 2. We think the best way to avoid errors is to follow a consistent coding style, get use to utilize indentation, proper naming conventions, consistent whitespace, and add comments for simplicity and readability.
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
>FCC covers essential coding knowledge and concepts. It provides real-world projects for us to step through the process of writing complete html and css for different pages, that let us more familiar with HTML and CSS elements, the relationship between parent and children. Furthermore, it enables us to learn from mistakes, leaving a deeper impression and reflection.

>The limitation might be that when I was coding the html, I was not doing perfectly with the indentation and hierarchy but my answer was not wrong, the system automatically fix my lines and set them all good. It is also a double sword when we can learn at our own pace.

- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
> Through collaboration, Tinker helps us create a bond with our classmates and let us learn from others to have a more comprehensive response. The limitation for me is that we all have to fork the file and do the assignment individually instead of doing it at same time in one file.
- 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 all gain a deeper understanding of HTML and CSS elements including the sequences and hierarchy of HTML tags, CSS rules, and the relationship between HTML and CSS. While We might each pay different levels of attention to those materials, group work help us identify some aspects and details we might have overlooked, as well as provide opportunities for refinement and imporvement.