---
Title: Tinker HTML/CSS Meow Mix Submission
Group 9
Sadia Ahmed
Yichen An
Sam Park
Courtney Zhu
---
## Tinker QUESTIONS
### HTML things
- Mess around with the sequence of different tags.
- How does _SEQUENCE_ affect the visual display of HTML elements?
```
We moved some elements around and generally things will appear top to bottom.
```
- 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 font size changes if we change the hierarchy (eg If we change the section from H1 to H2, the font size becomes smaller).
```
- Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`
- What did you do and what did you discover in terms of the GENERALIZABLE patterns?
```When we delete the elements and ids, the visual display stays the same.
When we delete the classes and attributes, the layout and the color change.
We noticed the that the upper and lowcases matter and any changes to the HTML, we need to ensure the changes on CSS is consistent.
```
- 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 weren't able to embed the video? Instead, only the link appeared. Is it possible with markdown?
```
- Create some notes as _comments_ in this code.
- What are some ways that you can use comments to help you understand your code better?
```
The comments can help recall what the coder was thinking/intending. Also can document the changes in the code. You can also use comments to "blank" out part of the code without actually deleting it.
```
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these tags?
```html
<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">
```
```
These are all self-closing elements that could contain classes and attributes.
```
- 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)?
```Learning a new element by typing it with syntax. Then interact with the web page see what is going to happen```
- How can different `elements`, `classes`, and `id`s help to _organize_ our html content?
```The elements and IDs allow us to write specific instructions for individual items. The class specification allows us to group items together, so we can apply an action to multiple items in CSS```
### 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?
```Different selector corresponds to the tag in the html file and define their styles. When html tags need more complex styles, there will be more types of selectors in the css file.```
- Take a look at the following:
- What is the generalizable syntax **_pattern_** between all these css rules?
```Every tag has set of brackets which contain styles and values.```
- 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?
```Good way is to study new rules or properties is through doodle exercises to try and see the results. ```
### COMBINED and META things
- How might HTML sequence and hierarchy of tags affect your CSS rules?
```Sequence doesn't have an effect on the CSS rules, but hierarchy can change the font size or where the rule is applied```
- 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 can determine where the error is coming from by checking the sequence and hierarchy from the top down to pinpoint which line the error is stemming from```
- Based on said understanding, what are some best practices to reduce errors _as you code?_
```Best practices are referring to the guides to help with structure and basic guidance```
- What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding?
```The strength is that we are able to write the code structures and understand patterns for each type. It also provides hints on how to correct any errors so we can understand the reason for the error and how to correct it to move forward```
- What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding?
```The strength of tinkering is that we get to practice and apply the skills that we learned in class and in the videos. By practicing the steps, we are able to see what happens with each action in the code. We also learn from errors so we can understand how to correct them through trial and error.```
- 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 Html and CSS though interacting and typing different elements. CSS acts as a language that enriches the presence of HTML. We each learned slightly different elements and properties because we were experimenting (tinkering) individually.```
[30 CSS Selectors]: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
[CSS Tricks Almanac]: https://css-tricks.com/almanac/
[HTML5 Cheatsheet]: https://websitesetup.org/html5-cheat-sheet/
Google Drive
Gist
Clipboard
Sign in with Wallet
