# MSTU 5003 Tinker: HTML/CSS Meow Mix

## Team Members: Maho Hayashi, Anna Lizarov, Charlotte Price, and Ahyoung Kim

### CodePen
The link can be found here: [https://codepen.io/al3868/collab/oNvqOpL]

#### HTML Things:

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

It changes the order of the way the things (e.g., headings) are displayed. And, also, the style based on the CSS associated. Furthermore, it may change the layout of the tables.

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

Emphasis is changed, when headers/paragraphs are moved to different areas. Purpose and role change based on the order and what comes first.

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

There were no changes when the ```id``` were tinkered. However, there were changes when the ```class``` 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?

We expected to see a video and our guesses were correct.

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

It helps developers to understand the code when we return to it some time later (i.e., understand the workflow). Likewise, it helps the code reviewers understand read the code and the workflow/process behind writng the code and replicate/verify the code. Also, it helps to understand what code works and what does not in order to avoid making the same mistake in the future.

* Take a look at the following:
* What is the generalizable syntax pattern between all these tags?
> <Element attribute="value">
-- This is the consistent pattern among them. Not all have ending tags (e.g. ```<br>```), not all have class atributes.

* How did you go about learning how to utilize a new element (process)?

We picked blockquote, put that in an existing section, and by playing around, figured out that it needed an end tag, and that we could put breaks inside of it too. But that there were no other big style changes outside of the indentation.

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

We use them to keep things tidy, and define the roles of our different tags, and also how they display.

#### CSS Things:

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

It lets us to be precise with the design of the page and not all CSS selectors are compatible with every browser.

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

The generalizable rule is that we have a selector for the ```class``` and ```ids``` and a declaration block with the curly brackets. It always has a semi-colon between the property and the value inside the declaration block. That is the main syntax that we see.

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

One way to look for a similar website/page you are looking for and see what how other people wrote the CSS code. In other words, you build on what other people wrote or modify it.

#### COMBINED and META things:

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

When we move HTML blocks around, if we move it outside of a higher-level hierarchical tag that links to CSS, the whole style changes of that HTML element.

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

One way is to look at what is not displaying right and find the corresponding element to see if it is mispelled. Also, defining things and giving it ```ids``` and ```classes``` would be a preventative measure. Furthermore, tidying the code would establish hierarchy to see if the certain tags that have a corresponding closing tags, and look at the parent-child relationhip.

* What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?

The strength of FCC is the dual-display, you can see the code simultaneously as you see a display. It gives you hints too, and offers furthers steps. Each exercise being one-task-at-a-time lets you not get overwhelmed, and build off of what you did before.

The limitation of FCC is that it can be easy to go too fast and miss things. It teaches you within a framework, but in the real world, it's not as straightforward, telling you exactly what to do.Also, you remember the material only if you are working on a project that requires these skills, as in, only if it is relevent. Also, longevityis a factor since CSS and HTML evolve over time.

* What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?

The strength is that it lets you apply what you learned in a "safe" space, and by testing out stuff on your own, you understand it more thoroughly.

The limitation is that it does not tell you why things are failing, why something does not work. Since we are not creating an HTML document ffrom scratch, you do not actually get to learn the entire structure of the document.

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

***Anna***: Unlike my group members, I did not notice that there are several ways to embedd the video into a document. It is mostly a trial-and-error process. One reason for this was that I was looking at a different website. Nonetheless, during the collaboration, my group members and I were just putting our ideas together and building on each other's answers.

***Charlotte***: I have a passing familiarity with HTML and CSS and found that this often made this more difficult because I couldn't remember why I chose certain elements, and couldn't explain it to my group members. They were much more able to come up with solutions as to why things didn't work. Everyone's individual context changed their perceptions, which was effective in a group-setting, as it allowed us to find alternate solutions when things didn't work. This was especially visible during the video embed section, as we weren't sure of how to accurately embed a video and all had our own solutions to test.

***Ahyoung***:I couldn’t answer many of questions at first. By listening different ideas and thoughts from group members, I am able to answer better now. Though the learning materials were same, everyone has different understanding and thought what we’ve learned and this help us to have a better answer than initial one.

***Maho***: First, we moved different elements around to observe any changes. We also substituted new tags and noticed how it was translated on the web. There are two things that I didn't notice: 1.) the background that contains that heading 2.) the embedded video link. When a group member swapped "container-top" to "container-bottom", the changes happened so quickly that I didn't even notice that absence of the grey container on the top. The group member kindly informed me that it moved to the bottom as she changed the attribute from "top" to "bottom". As for the embedded video, we've successfully created an internal link using ```Anchor``` and href tag. However, the video is still not embedded on the web. One member went online and found this element iframe and successfully embedded the video.

I think the collaboration process is very valuable as each of us grasp onto different aspects and process them differently. I definitely appreciate my team members' input as there were some points discussed that I have not thought of myself.