Skip to content

Instantly share code, notes, and snippets.

@jmk2142

jmk2142/mstu5003.html-css.tinker.md

Last active May 26, 2017 02:20
Show Gist options
  • Save jmk2142/0e2e3c64cc5b7fb13c7d1ba66a51f579 to your computer and use it in GitHub Desktop.
Save jmk2142/0e2e3c64cc5b7fb13c7d1ba66a51f579 to your computer and use it in GitHub Desktop.
Download ZIP
A Tinker activity for HTML/CSS
Raw
mstu5003.html-css.tinker.md

Tinker Problem: Meow Mix

See demonstration: https://jsfiddle.net/jmk2142/dLb07fr2

TINKER - attempt to repair or improve something in a casual or desultory way, often to no useful effect.

It's funny that the problem is called a "tinker" problem in that tinkering is usually messing around with stuff without a very planned way. I think, when we use the word tinker, it's really to emphasize the spirit of the activity; that is to not feel too pressured into treating it like a test of your ability. It's really meant to be an opportunity for you to explore and have fun messing with stuff while using the guided questions to challenge your understanding.

So in some ways - while the spirit is about tinkering - I actually do want you to explore this in a directed way. That is:

  1. Manipulate things to understand the causal effect and relationships it has on the results.
  2. Think about the multiple manipulations you make to generalize certain key patterns that manifest across different episodes.
  3. To generate hypotheses about how stuff works, and to test those hypotheses (through manipulation) to confirm or reject your ideas and refine.

As such, for each tinker problem which will be a "full" example - I will be providing you with certain guiding questions to help you direct your attention and activities to the hidden things that are present. Think about it as if you just discovered a strange and fascinating new bug crawling across your table. You just want to poke it to see what it does. And I encourage you to do so.

Tinker Tasks

As a general flow:

  • First, take the base plunk/fiddle and fork it.
    • This will branch the original code so you have your own copy that you can edit and manipulate.
  • Next, compare what you see in the code and map the relationships between the code and output.
  • Then, use the guiding prompts and questions to manipulate the actual code one thing at a time and see what happens.
  • Be able to articulate your understanding and share your findings and insights with your weekly group and/or the class.

Note that I use Markdown as the format for these things as it is pretty programming friendly. You can get a basic understanding of Markdown in a few minutes using the following interactive tutorial: http://www.markdowntutorial.com

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)

HTML things

  • Mess around with the sequence of different tags.
    • How does SEQUENCE affect the visual display of HTML elements?
  • 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?
  • Add/remove/manipulate various elements, ids, classes, attributes
    • What did you do and what did you discover in terms of the GENERALIZABLE patterns?
  • 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?
  • Create some notes as comments in this code.
    • What are some ways that you can use comments to help you understand your code better?
  • 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">
  • 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)?
  • How can different elements, classes, and ids help to organize our html content?

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?
  • Take a look at the following:
    • What is the generalizable syntax pattern between all these css rules?
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;
}
  • Probably, no programmer knows every CSS rule and/or property by memory. I certainly don't, but I know a lot.

COMBINED and META things

  • How might HTML sequence and hierarchy of tags affect your CSS rules?
  • 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?
  • What is the STRENGTH of FCC exercises and what is the LIMITATION with respect to learning and understanding?
  • What is the STRENGTH of tinkering and what is the LIMITATION with respect to your learning and understanding?
  • 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?

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 Google Hangouts + Plunker or JSFiddle 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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment