Share your Learnings

[anmechung]

As you deliver, remix, and/or share the curriculum, please share your learnings by replying to this issue:

• What worked?
• What would you change?
• What tips do you have for others?

[mayawagon]

We used the Tagging 101 Lesson, and it went well! By the end, the learners went from not knowing about tags, to each being able to tag and style text with things like
<h1 style="color:pink;">My article title</h1>
<p>Here is a <a href="facebook.com">link</a></p>

They had a lot of fun running around the room and tagging things, and even tagged some of the instructors. We linked it to our previous module about building a portable network kit by asking them to tag the items in the kit (i.e. router, server, ethernet cables, etc). One thing that was hard for them at first was understanding the concept of an opening and closing tags, but we walked around the room and I explained that without a </purplewall>, the browser doesn't know where the purple wall ends, and will just keep making a purple wall forever. When we sat down at computers and were tagging articles, they would refer back to this when they got confused about closing tags.

One issue was that we were using Chromebooks, so there was no way to pull up a regular, non-google docs text editor, or to serve a webpage off of a local machine. We got around this by using Codepen to simulate that, which worked fine, but I realize now we could have also used Thimble. It would be helpful to include info on how to use this lesson in an environment that only has chromebooks (or tablets?)

For the Tags in Action section, we built on tag skills piece by piece:

• first, everyone had to successfully add <p> tags to their paragraphs
• then an <h1> and <h2> tag
• after that, we added <a> tags inside of a <p> tag (which introduced attributes like <a src=""></a>)
• then we added a style like <h1 style="color:red"></h1>

At the end, we had a bonus activity where people could go back to their original article, highlight and right click the headline to "inspect element," find the headline text, and then change it to say whatever they wanted:

The students thought this was funny.

Another piece that was challenging for a couple learners was the idea that when you're coding, you have to type things EXACTLY correct. The browser won't tolerate a < asrc=facebook.com">, even if we can figure it out by looking at it. It might help to emphasize this early on.

[anmechung]

@mayawagon great feedback - I will add these as tips.