# MSTU 5003 - group 3
Jinny Park, Lexuan Li, Alina Wang, Anqi Wang
:::success
Forked MeowMix: https://codepen.io/yjp2110/collab/ExLXOPp
:::
**compare what you see in the code and map the relationships between the code and output**
1. Whole page is written inside of the body elelment <body> </body>
2. There are subbody under each body section, which segment different parts in the output section
3. Always opening tag and closing tag to operate the output
4. `<h1></h1>` is used for headings.
4. Bodies written in white inside `<hiv></hiv>` corresponds to the characters in the output section
5. `<p> </p>` is used for paragragh
6. HTML is for the structure, and the css is more focused about color and font size
7. `<td> </td>`used as a table data
**Then, use the guiding prompts and questions to manipulate the actual code one thing at a time and see what happens.**
### HTML things
:::warning
1. Mess around with the sequence of different tags.
How does SEQUENCE affect the visual display of HTML elements?
:::
1. Moved line 9 to line 24. Originally it was right below the heading <h1>Meow meow meow meow</h1> but, now it's moved in between the paragraphs.
2. Moved line 16 to line 25. Originall it was above all the paraphs now it's above the last paragraph.
3. We closed the table tag line 33 to line 60. We cut and pasted inside of the top heading to line 9. When we close the tag, next line, we can see line 37. Thus, the table is now relocated inside of the gray box.
Captured images attached below:
4. When moving the ending tag `</div>` from line 8 to the end, the background color grey for the title expanded to the whole page.
:::warning
2. Change the **hierarchy**, the parent-child relationships between different tags.
:::
---If I move the sub-child <h1>Meow meow meow meow</h1>, to the begin (in front of the parent element, <div class="container-top">, the “Meow meow meow” come to the beginning
What are some ways that the hierarchy of your tags will affect the end result / visual output?
:::info
**NOTES FROM JIN**
hierarchy - order/ power
ex) work doc.
Title or heading?
Title (bigger) is above the heading (smaller)
Heading 1, Heading 2....
Which one is bigger?
<h1> Heading 1</h1>
<h2> Heading 2</h2>
tags are syntactical ways to present
**difference between tags and element?**
tag is how we create the element readable on the html
Question: Dog or animal?
All dogs are animals but not all animals are dogs.
:::
:::warning
3. Add/remove/manipulate various elements, ids, classes, attributes
What did you do and what did you discover in terms of the GENERALIZABLE patterns?
:::
1. I deleted the class attribute for line48, and the styling of that "EXTREMELY Deadly" changed to the default one.
2.The visual output of certain elements change.
Removing various elements, attributes, and classes caused the corresponding visual item to also disappear. For instance, removing `<div class="container-top">` from html removed the top container in the visual display that showed the tite “Meow meow meow meow” and the `< P >` description under which stated “I like chicken, I like liver, Meow Mix Meow Mix does deliver.” There is also a hiearchy to the way things are manipulated: elements > ids> classes > attributes
:::warning
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?
:::
1. Before I searched for how to embedded Youtube video, I thought it can be something like . However, it did not work :(
Here is something I got after I searched from the website.
2.I guessed that including a youtube URL in html would lead to the display of the video in the visual side. However, it does not. There are two ways to makae the video appear as a cover picture.One way to do this is to use the code `< iframe src ="url">< /iframe>`. Another way for the video to display is included in the image below:
clicked _share_
:::warning
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?
:::
Comments can leave some hints or tips here to let other coders notice here. Below is a comment a made in Meow Mix in Line89.
Besides, comments can also be used as notes for the designer to remember elements that they need to delete in the future. Or to establish an idea of what they want to include in a certain section but don’t fully have the idea or corresponding code written yet. You can also use a comment to give an orientatation or make a note to remember about something later.
Be careful when move (copy/cut, paste) elements, make sure select the whole family, such as open and close tag, content, and parent, child in a sequence or hierarchy. Also, don’t forget in the close tag, here’s a “slash”.
:::warning
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>
<img src="https://placehold.it/50x50/4CAF50" alt="greenbox">
<input type="text" name="fullName" value="anonymous">
```
1. Elements come with open and close tag
2. For images, src= "" is required to embed the image captured from online source
3. There is an attribute element in every opening tag
:::warning
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)?
:::
1. Using MARK element can highlight texts. Below is what I added~
2. Using the cheetsheet, I learned to change the color of the typeface/ paragrahs.
For instance,
<h1 style="color:pink;"> Tinker </h1>
3. Mark elements help create blocks to group and hightlight certain contents:
:::warning
:::
4. Bullet points using ```<ul> </ul>```
<ul>
<li>cats</li>
<li>dogs</li>
<li>turtules</li>
</ul>
:::warning
8. How can different elements, classes, and ids help to organize our html content?
:::
Elements, classes, and ids help order up html content structurally. With classes, codes hierachically or semantically similiar can be categorized under one class. IDs on the other hand, allow us to uniquely identify different elements.
### CSS things
:::warning
1. 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?
:::
Each CSS selector can help us to choose a specific content we want to change.Thus, CSS selectors allows us to work on specific details in the content. For instance, it allows us to add more specific function to be added which is not fully organzied in html. Moreover, it keeps us to have clean code by grouping the elements and applying certain styles to reoccuring elements in html.
:::warning
2. Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?
```css
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;
}
```
:::
1. We need to have similar pattern for CSS.Inside of the selector, there's specific property and values.
2. Direction of the < of this matter in determining child and parent relationships.
3. Also, inside of code, use ; before closing the }
:::warning
3. 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 figured that we can learn and be used to the rules and property through practicing on our own. And by solving together allowed us to recognize the reflected changes.
### COMBINED and META things
:::warning
- How might HTML sequence and hierarchy of tags affect your CSS rules?
:::
CSS rules are used to categorize elements - selectors, property and values. These categorised elements are effected by the HTML sequence and hierarchy of tags.
:::warning
- 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?_
:::
Correct hierachy and syntax are both important. Based on our experience, organizing the elements in order using indents to see the obvious opening tag, closing tags; be aware of mother and parent relationship allows us to debug and catch the errors easily. And always being aware of the correct spelling is one of the keys in reducing the errors.
:::warning
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
:::
The strength of FCC exercise is that challenges us to solve the problems by ourselves. And limitation is that it automatically changes the indents on the next step for us to better oraganize the code. I think this is both strength and limitation as it doesnot force us to build habit of being aware of the indents other than delivering stronger note on closing and opening tabs. Also, it could make us dependent on hints instead of conceiving structures on ourselves.
:::warning
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
:::
Strength of Tinker is that we get to solve the problems together as a group, which allows us to see other ways of coding, different problem solving skills, and working as a team. Limitation is communication among the group. All group member's familiarity in coding is different thus, it requires further more discussion and time. With different scheduels, it was a little difficult to find time together to meet but we solved it efficiently.
:::warning
- 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 learned a lot from our discussions and by having people who have already done the task allowed us to look into the code and questions further.
Google Drive
Gist
Clipboard
Sign in with Wallet
