TINKER: HTML/CSS Meow Mix

--- tags: mstu5003, tinker, html, css --- # TINKER: HTML/CSS Meow Mix by Madeline Maeloa, Rhea Jaffer, Mariana Lederman Edelstein ### HTML * Mess around with the sequence of different tags. How does SEQUENCE affect the visual display of HTML elements? * <span style="color:red">Whatever is written first will be displayed at the very top. For example, in the top heading in the tinker, the `h1` element comes before the `p` element in the code. This means that the text in `h1` will come before the text in `p` visually. </span> * ```<div class="container-top"> <div class="page-header"> <h1>Meow meow meow meow</h1> </div> <p>I like chicken, I like liver, Meow Mix Meow Mix does deliver.</p> </div> * 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? * <span style="color:red"> If we change the hierarchy, like putting the 'h1' (child) outside the `div` (parent), the actions that we do for the 'div' in CSS would not affect `h1` anymore.</span> * Add/remove/manipulate various `elements`, `ids`, `classes`, `attributes`. What did you do and what did you discover in terms of the GENERALIZABLE patterns? * <span style="color:red">There is an order to the way things are manipulated: elements > ids > classes > attributes. Everything is written in the format of an element in html such as `<p> </p>.` Multiple elements may use a class element whereas an id is unique and will only be used once. In general, we noticed that attributes are followed by attribute values. For example, in the href attribute, it would be followed by an attribute value that could be in the form of a YouTube link. </span> * 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? * <span style="color:red">As Dr.Iva had shown us how to embedd a Youtube video during the class, we already knew how to do it. We embedded a YouTube video ` ` and the video showed up on the screen. We can play the video from that player.</span> * Create some notes as comments in this code. What are some ways that you can use comments to help you understand your code better? * <span style="color:red">We can create comments by using ``. We can use comments to section out features and also describe what the feature or code is doing. It's a good way for us to explain our code so that other people can understand what we're trying to do without it showing up on the front-end. </span> * Take a look at the following: ``` <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"> ``` * What is the generalizable syntax pattern between all these tags? * <span style="color:red">They all first have an opening tag, which inside have attributes (class, like id, href, src, type) with values. Then we have the content. For last there is a closing tag.</span> * 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)? * <span style="color:red">We tried to add an audio element to our tinker, which is something we haven't worked with in FCC. We Googled an example of how it is used and learned that we had to have a src attribute that links to the source. Moving forward, seeing examples would help us utilize new elements and processes and model them in our own code.</span> * How can different `elements`, `classes`, and `ids` help to organize our html content? * <span style="color:red"> Elements are bits that make up web pages. They start with a start tag and end with an end tag. For example, `<h1>xyz</h1>`. Classes are attributes that help us style multiple elements at once and ids help us target specific elements.</span> ### 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? * <span style="color:red">It allows us many different options when selecting elements to style. For example, we can target every single element on the page using the * or we can use combinator selectors to select very specific elements `like X + Y`.</span> * Take a look at the following. ```<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; } ``` * What is the generalizable syntax pattern between all these css rules? * <span style="color:red">All these rules contain a selector, followed by a curly brace, then the property, then a colon, a value then a semicolon and a closing curly brace. Each property has to have a corresponding value attached to it. For example, the color property has a value of dodgerblue.</span> * 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? * <span style="color:red">We think that by coding more and practicing, we will slowly be able to remember them (or at least the easier and more common ones). Over time, it will become second nature to us kind of like muscle memory.</span> ### COMBINED and META things * How might HTML sequence and hierarchy of tags affect your CSS rules? * <span style="color:red">There are certain CSS rules that can target specific elements. For example, `::before` can be used to target the first child of the selected element. This would mean that it's important to have our parent and child elements in the correct order.</span> * 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? * <span style="color:red">We should look to see if the highest element is working fine, followed by the next one, then the next one after. Sometimes, commenting things out and testing things one at a time can help too.</span> * Based on said understanding, what are some best practices to reduce errors as you code? * <span style="color:red">We think that running chunks of code after we are done writing them would be useful. For example, after we write the body and a form inside the body, we should run that first before moving on. It would be hard to debug if we wrote everything out then have to fix 20 errors at one time.</span> * What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding? * <span style="color:red">The strength of FCC exercises is that they give us very specific instructions on what to do and allow us to practice writing certain elements multiple times, for example. A limitation is that they sometimes spoonfeed us the correct code when we get something wrong, so we might not be actually learning how to code or debug ourselves.</span> * What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding? * <span style="color:red">The strength of tinkering is that we get to experiment and play with code in a stress-free and no pressure environment. If we break something, it's okay! A limitation with respect to our understanding and learning is that we might not know if our answers are right or wrong. Also, not having someone who is considered more of an "expert" to guide us or give us hints can limit the amount of things we can learn.</span> * 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? * <span style="color:red">Some of us were still confused about the definition of syntax and semantics, but others knew what the differences were immediately. We think one reason is because some of us took notes while watching the lecture and others did not. Some of us were also confused between the different syntax that we need for html and CSS. We feel like this would happen less as we start to code more and more.</span>

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.