Tinker: HTML/CSS - Meow Mix (with answers)

--- tags: mstu5003, tinker, html, css --- # Tinker: HTML/CSS - Meow Mix (with answers) #### Chris Lapp, Dorothy Licorish, Hanna Vanya --- ## Tinker GUIDES and QUESTIONS I've divided this up into parts. Basically - as you explore the example and manipulate it in various ways there are a few themes that you should keep in the back of your mind: 1. SEQUENCE 2. HIERARCHY 3. ORGANIZATION (Semantics) 4. PATTERNS (Generalizable syntax patterns) ### Tinker Assignment ### HTML **How does the SEQUENCE affect the visual display of HTML elements?** We noticed a directly observable spatial relationship between the sequence of the HTML elements within lines of code and those that appeared on the page. That is, if one line of code was placed above or below another, that element moved above or below its place on the page. Some elements were difficult to move, like pictures, as moving one thing would rearrange others on the page to make room for it. This sometimes made it so elements would continue off the page. **What are some ways that the hierarchy of your tags will affect the end result / visual output?** We noticed that for some hierarchical tags, like ```<form>``` and ```<main>```, changing where they were on the page did not seem to make much of a difference. The computer seemed to guess where to place elements on the page if these tags weren’t parenting other tags, but the way it guessed seemed to be correct. Some tags, like ```<div>``` and ```<class>``` seemed to change the format of the page if they were moved outside of their hierarchical structures, but still functioned as normal. ***Add/remove/manipulate various elements, ids, classes, attributes. What did you do and what did you discover in terms of the GENERALIZABLE patterns?*** Removing various elements, classes, ids, and attributes seemed to change the way the computer understood the page. For example, adding a class or id to certain elements on the page caused all elements sharing that class or id to act the same. For example, we changed the font within every table to blue using the id=’blue text box.’ If we removed any of these ids, they disconnected from the group, not responding to the font color change. By deleting elements we were able to predictably delete sections of the webpage. By adding elements, like headers or tables, we were able to submit our own content to the page. ***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 were unfortunately unable to make a video appear on our webpage. We had hoped that altering the src of the <img> tag with a youtube html would link to the video we selected, but it ended up creating a small image that seemed to indicate a broken link. Regrettably, we didn’t see a section#videos section of the program and wasn’t sure if we were missing a certain line of code that was needed. Something to discuss and research more of! ***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 seem to be an incredibly useful part of coding. Not only can you make your code better by leaving notes for other people who might have to review or edit your code, you can toggle certain code on or off by turning it into a comment. The computer will be effectively ‘blind’ to whatever is added as a comment. A lot of code can be a bit confusing to human eyes when viewed as a block of text(even if you just wrote it the day before), but labeling certain sections with comments can make it more understandable the next time you see it. ***Take a look at the following. What is the generalizable syntax pattern between all these tags?*** Taking a guess, we noticed that each tag started with the type of tag, whether that was div, span, paragraph, image, or input, then moved on to the classification of that tag. That could be an identifier like ‘MainStory’, or it could signify its urgency to the computer, like the class labeled ‘important’. After that came the actual content of what would be written on the page or button, if anything. The syntax pattern for these lines of codes seems to be: open tag type, then class, then id, then content, then closing tag. ### CSS ***Take a look at the following almanac of CSS selectors and properties. Why do we have so many different kinds of CSS selectors available?*** It seems to us that the wide selection of CSS selectors is there to facilitate the ever-growing need for unique styles of web design. In order to keep up with an evolving market and changing expectations, the code has to be increasingly accurate when changing specific shapes and colors on a page. HTML structures and orders a page, but CSS and especially Javascript is more concerned with the coder's imagination; what they can create to catch a user’s eye. For this reason, there should be a wide variety of CSS functions in order to expand the coder’s toolbox. ***Take a look at the following. What is the generalizable syntax pattern between all these css rules?*** For this set of CSS rules, we noticed every line started with the div tag, mostly likely to separate one rule from another. Once again, what came after seemed to be a class, whether it was an identifier like myFavorites or a type like span. After that, we noticed curly brackets which signified that the actual rule was about to be dictated. The rule needed an id like color, font-size, or text-decoration, then came whatever the coder needed that color, size or decoration to be, followed by a closing bracket. So, the syntax pattern seemed to be div, then class, then rule id, then the actual rule, and a closing bracket. ***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?*** Studying the mentioned resources like above will help us to focus on remembering the syntax pattern. As long as we know the end goal that we're trying to reach (the looks we try to accomplish), we can easily use those resources to help us find the right property to use. ### COMBINED and META things **How might HTML sequence and hierarchy of tags affect your CSS rules?** HTML sequence and tags do not really have a direct impact to the CSS rules. They just make it easier for us to arrange the order of our CSS rules. However, what's important is how we order the class rules in our CSS. **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 need to find the find the problem first. Then we run through the code from the top, ensure that every opening tag has the closing tag and everything follows the HTML/CSS rules. - **Based on said understanding, what are some best practices to reduce errors _as you code?_** Do not retype everything, use copy and paste instead. Build the outline of the code first, then fill the tags with the content. If we want to stop or we get confuse in the middle of coding, use comment to create a note or to further remind us the next step. * What is the _STRENGTH_ of FCC exercises and what is the _LIMITATION_ with respect to learning and understanding? * Through FCC exercise, we could acquire basic rules and be exposed with many rules of formatting, styling before we code. They provide output for every lesson so we can see how our codes work. However, sometimes FCC has its wn bugs and won't let us move forward to the next lesson. FCC is also the enemy of Safari as it won't save our progress after we learned so many things. * What is the _STRENGTH_ of tinkering and what is the _LIMITATION_ with respect to your learning and understanding? * Tinkering is basically learning by doing. We can figure out every possibilities by adding, removing, or changing our code. We can learn something that haven't even taught in the class. However, Tinkering really relies on our imagination. If we do not maximally explore, we won't get far in tinkering. ### Tinker experience to Collaboration This is your tinker activity. Play with this page and manipulate things to make it "yours" in terms of the understanding. The purpose is to give you a sandbox to try things in the guide, as well as your OWN ideas and inquiries. This activity provides the anchor point for your collaborative discussion. As such: 1. Tackle each question _by yourself first_ so you can get a sense of what you understand and what you may not. - TOTALLY okay to not be able to answer every question yourself at first. - That's what the social collaboration is for. 2. Write out your responses to the questions to guide your collaborative work. I would like you to use Markdown format for your tinker-problem responses / submissions. (Using Word, Google Docs, is going to be very tricky and messy when it comes to writing CODE as notes.) 3. In your collaborative discussions, share your individual answers and use it as a starting point for your group discussions. 4. Use the collaboration tool like codepen to code together as you discuss and make examples of what you discovered together. 5. Generate a final _group_ response to each of the questions I ask above to come up with your _final answer_ as a team. It's less about what is right or wrong, more about being able to articulate what you learned and how you generated a deeper understanding by sharing what you individually understood into a bigger more comprehensive whole. Additionally, you might want to also use that time (or times) together to help each other with the mini-problem or project of the week. **_GOOD LUCK, HAPPY CODING!_** [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/