Learning HTML/CSS — Let’s not call it programming
For my Learner Experience Design class, I’m taking the topic learning HTML/CSS, specifically for people who don’t see programming as a future career (i.e., people who ‘hate programming’).
topic in depth
The topic I want to teach is HTML/CSS, and maybe an additional information about domain and hosting services. The current plan is to have an in-class, no laptop learning environment with 20–30 students. So far I’ve focused on design students as my target learners.
I want to address people who aren’t necessarily interested in (i.e., hate) programming. This means that the students are unlikely to have intrinsic motivation and most of the time lacks self-efficacy in the subject. This is part of the reason I want to take on this project — a lot of people don’t learn HTML and CSS because they’re closely related to programming, and I think calling it programming makes it a little more complicated than it actually is. HTML and CSS do use possibly intimidating syntax, but they don’t ask you to think up algorithm; they’re just a text-based way to tell the web how to display things. In a sense, HTML and CSS is kind of, sort of, digital design, but by setting rules instead of making shapes.
HTML and CSS describe presentation, whereas programming languages describe function — http://programmers.stackexchange.com/a/28250
I think HTML/CSS can be very useful, especially now that everyone wants to have their own websites. While there are services like Squarespace or Wordpress where you can use ready-made template, knowing HTML/CSS would be useful for altering/modifying the given styles.
how it is taught now
IN CLASS
I’ve taken HTML/CSS as part of a bigger web development class. HTML and CSS was never taught in depth, because there are a lot of technology the class was trying to cover. The activity in class is limited to lectures about convention and syntax, which is good for generality (I guess?), but is very abstract because we never see what each line of HTML would do for the website.
A lot of the actual learning happen while working on the project homework, but it was never effective because we had to find our own way and learn on our own from the internet. There was no memorable connection between what we learn in class and what we actually learn by doing the projects. Students are assessed through tests, and their skills are assessed through the projects, although with group projects, it could be hard to assess individual performance.
ONLINE
A lot of what I actually learned about HTML and CSS, I learned from the internet. I usually do a case-by-case search on what I’m trying to do (e.g., css change page background), but there are numerous HTML and CSS courses now. Some examples:
See: active learning, immediate feedback
Online learning environment usually use videos (some use really, really long text) interspersed with learning activities. The learning activities, I think are the most important part of it. Learners are seeing what the code looks like, and sometimes get to try out themselves. When they do try things out, they get immediate feedback. I really want to apply these active learning and immediate feedback components of online learning to the in-class environment.
problems and opportunities
Generally, HTML/CSS can be classified as something abstract and complicated. In class, it can also be too fast and as part as something that’s too big.
For students, some problems and opportunities for students in learning this topic are:
- [P] Lack of motivation due to lack of self-efficacy
- [P] Don’t see the point of learning how to code
- [P] I just hate programming
- [O] Interest in design can be linked to the use of CSS
- [O] I need this to edit my default squarespace theme so that my portfolio don’t look exactly the same as someone else’s
As for teachers, the problems and opportunities for students in teaching this topic are:
- [P] Giving personalized feedback for everyone in the class is difficult/time-consuming
- [P] Keeping engagement high with everyone in a large class is difficult
- [P] Different students may have different learning pace (how to scaffold the ones falling behind)
- [P] Different students may learn better with different approaches (how to accommodate all preferences)
- [O] Students have interest in design
learning components
For now, I will be investigating the learning components into two parts; the lessons and the class itself (learning environment, class activities).
Some possible lessons are:
- What is in a tag
- Proper markup
Closing a tag, differences between different tags (h1, p, a, etc.) and when to use which.
- CSS selectors (#id, .class, :pseudo, etc) and properties (width, height, display, position, margin, padding, etc)
- CSS as design language
Using the same CSS for completely different HTML can make the documents have the same look and feel.
- (Maybe) CSS for responsive website
The class:
- No laptops (but how to engage in active learning?)
- Making sense of existing HTML/CSS
- Given an image and an HTML document, edit the CSS to match the image
visual learning stuff
Liking tags to containers:
A CSS property, “display”, can be explained by liking it to container with rows (like book cases?)
knowledge gaps
There are a lot of articles that explains “common mistakes” in HTML/CSS, but I feel that these two are most helpful and probably relatable to novice learners:
The main ones are:
- Forgetting to close a tag [inactive knowledge]
I feel like the visual learning about tags as containers, and that they should be closed so the things inside it don’t bleed out and make a mess, would help with this. → how do you remind them
- Using div for everything [inaccurate knowledge]
This would be related to using the proper HTML markup; that is, when it’s a heading, use heading tags, when it’s paragraph, use paragraph tags, etc. Maybe relate to “use the right container for the right content”? But how to associate “heading”, “paragraph”, etc with physical container?
I might do a design activity for this, ask students to layout a story or news, hoping to appeal to the designer in them. They would then be asked to label each element. Hopefully, by first laying it out as design, they notice that the main title is the top heading (and will then be <h1>), the story title would be a second heading (<h2>), and the contents would be in paragraphs (so <p>). → how to help them associate tags with content
- Improperly nesting tags [inaccurate knowledge]
Improperly nesting tag is using the wrong order in closing your tags, so for example, it should be
<h1><a>Look <b>here</b>!</a></h1>
but you do
<h1><a>Look <b>here</b>!</h1></a>
So they know they have to close a tag, but they’re not placing the closing tags in the correct place.
memory stuff
Core ideas
- Things you open, has to be closed (tags, brackets on CSS)
- Tags on HTML are “markups”, should describe what’s inside it
- What is “cascading” in CSS
Important to know
- Recognize properties
- (Some) CSS selectors
Worth being familiar with
- Higher level CSS (pseudo-selector, I’ll think of other examples)
all together now
The following chart has all the readings we’ve done until now related to my learning activities.
It has a lot more CSS than HTML, which I don’t think is a problem because I’m aiming for learners to be able to edit existing website instead of making from scratch. I don’t know if it’s too little though. Who do I ask?
a change of direction
It’s been a long time since I updated this post and I’m so #regret. Anyway. I’ve been playing with the idea of HTML as a container and I really like how it works well in using learners’ prior knowledge to help them better understand HTML. I decided that I will be teaching the concept of HTML, and focus on that.
The four main things that I want learners to definitely grasp are tags are container, that containers have to be opened and closed to contain something, that information should be contained in the appropriate tags, and that containers can contain other containers. I want the experience to be a tangible one, keeping people away from laptops as they learn about HTML. I think this works well with the motivation part where cognitive dissonance introduces an element of surprise that catches the learners’ attention.
first iteration
I decided on an activity where students would recreate an existing website using pieces of “tags”. I wanted this to be something done on a magnetic board. I found out that there’s such a thing as magnetic tape and magnetic paint, and I was super excited because it seemed like the idea might just work haha. The original design of my pieces looked like this:
I never really gotten to improve upon this design because I realized these problems:
- It doesn’t look like containers — and that was the basis of my entire plan, to do the analogy with boxes. I needed something that looked more like boxes.
- It may be misleading — since learners are asked to use the pieces on the top left corner and bottom right corner of what would be one container, learners might think that when they code HTML elements, they don’t put the content between tags, but within one tag.
- Too big of a jump to showing actual code — it was difficult to transition from this activity to showing actual code.
updated design
With lots and lots of self doubt and just pure confusion I had a talk with Stacie, and decided to use cardboards to do what it does best — make a box. The initial concept stays; learners are still asked to recreate a webpage using boxes that they would arrange. However, the pieces looked more like boxes to enforce the container concepts. I previously wanted to do a one-size-fits-all solution, where learners can use the kit for any existing website. That’s why it was hard to make boxes, because I don’t know the size of the box the learners are going to need. But here I decided to just do something like jigsaw puzzles, where the problem is defined and the pieces only work for a particular problem.
The tags are represented by separate pieces that are attached to the top and bottom of the container. The idea was that after learners arranged the boxes, they would take off these pieces and using a separate board arrange them so that it would look like actual code.
I didn’t take pictures of this iteration sadly :( I brought this for the class to try, and some of the most important feedback I got were:
- Lack of instruction — at this point I have not written any instruction for the pieces yet, which made it difficult for people to understand what they should be doing.
- People want to slide the attachable pieces — this was particularly interesting to me. Someone left comments that they wanted to slide the pieces instead of take them off. This gave me the idea to separate the tag pieces from the box.
- Lack of feedback — there was no way to tell if what they’re doing is right or wrong. There’s no way to ask for help, too.
final design
To improve from the feedback I got previously, I wrote an instruction manual to go with the kit. I color-coded the boxes and the tag so learners can later check if they’re doing it right by checking if their colors match.
I also provided hints on the worksheet that the learners get. The worksheet also contains instruction now! Thanks for the suggestion Stacie!
For the tags, I made it so that learners would start with arranging boxes, then attaching the appropriate tags to the boxes. Learners are given “tag cards” on which there are information about the tags. I included the meaning of each tag (e.g., div is division, ul is unordered list, etc) to help students remember them better. I think having something more concrete to relate to these tag names that would otherwise make no sense is a good way to help their memory.
I was initially confused about how to package the kit. Since the kit contains boxes of different sizes, placing it inside a box would give away the answer to the problem. Stacie suggested using bags, so I looked for one and got fabric markers to decorate it. It looked better than I expected, I’m really pleased about how the bag turned out!
All together, here’s how the kit look like:
All in all, it was a really pleasant experience. I struggled a lot with the project, and I do realize that I didn’t do as much as I could or as much as the others probably did. I’m really thankful Stacie for all the handholding you did for me as I was making this project. Thank you for the fun class, I learned a lot!
(also sorry this is late, ha)
