---
# System prepended metadata

title: 'Tinker 9/15 ml4567, xz2946, tz2492'

---

# Tinker 9/15 ml4567, xz2946, tz2492
**GROUP MEMBERS**
_Michelle Lin_  UNI:ml4567
_Xinyi (Charlene) Zeng_  UNI:xz2946
_Tianyi Zhang (Tracy)_  UNI:tz2492

**HTML**
1. How does SEQUENCE affect the visual display of HTML elements?

>The order of tags in HTML is the order we see in an actual webpage.


2. What are some ways that the hierarchy of your tags will affect the end result / visual output?

>Child tag is embeded under parents tag with indentation. and it will show in that order in the actual webpage

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

>We changed elements in id, class, and attribute contents within the opening tags. The structure of our webpage doesn't change, but the display of the html elements is influenced.

4. Before you do, take a guess as to what you expect to see as the visual result. Were your guesses correct?

>We expected to have a video panel we can click on to play the youtube video.
>
>_WE WERE RIGHT !!!!!!! :)))))_

5. What are some ways that you can use comments to help you understand your code better?
>`<!-- -->`

6. What is the generalizable syntax pattern between all these tags?
>`<tag class, id, attribute>...</tag>`

7. How did you go about learning how to utilize a new element (process)?
>We try to use `<ul></ul>` and `<ol></ol>` to see what happens. We also googled about the detail and found out that we can use list to construct navigation bar of a webpage.

8. What is the generalizable syntax pattern between tags in HTML?
```
<!DOCTYPE html>
<html>
    <head>
        <!-- link or anything that is not going to display in webpage -->
    </head>

    <body>
        <h1></h1>
        <p></p>
        ...
        <!-- anything here is displayable -->
    </body>
</html>
```

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

>To distinguish them from each other if they have the same tag name. So we can get easy access to them in CSS files.


**CSS**

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

>The different kinds of CSS selectors allow us to locate the html elements that we want to change the display accurately.


2. What is the generalizable syntax pattern between all these css rules?

>**For styling a class of elements:**
 .classname{...: ...;}
 **For styling an individual element with an id:**
 #idname{...: ...;}
 **For a type of element:**
 tagname{...: ...;}
 **For combination of elements:**
 tagname, tagname{...: ...;}
 tagname tagname{...: ...;}
 tagname.classname{...: ...;}
 tagname#idname{...: ...;}

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

>Yes！！


_ALL DONE!!!! :))) 