Community college HTML/CSS class - could use good resources, pointers
August 5, 2015 12:42 PM Subscribe
I am teaching a 14 week basic HTML/CSS class for community college students starting in a few weeks. It's my first time teaching younger adults and my first time teaching this class and I would love some advice and links to specific resources.
Background: I teach two sections. The class is two days a week with one day designated "lecture" (75 min) and one day designated "lab" (110 minutes). Lab takes place in the computer lab. Lecture takes place in a room with a projector, maybe. Students will mostly not have their own computers. They use Moodle for courseware. I got the handouts and syllabus from the former instructor and they're just a mash of PPT slides. I think I can do better but would love to not reinvent the wheel. My questions.
1. I did not order a textbook for the class. Is there one online or a series of "Learn HTML in ten weeks" types of pages that is particularly good? I have been a fan of w3schools' stuff for myself and WPD. What else is good?
2. The way they've done it in the past is writing HTML in Notepad and viewing it locally (I know). I can get the students accounts on the school's web drive (which is IIS) but was thinking it might be better to get them teeny unix shells somewhere (tilde.club?) so they could learn some command line stuff. Is this overreaching? Is there any way to use Moodle that is not just super annoying for this sort of thing?
3. The students will be split between a few CS majors and most who will be taking this to fill out their credits and they're taking majors like dairy farming. They are almost all 18-20. I want to do a basic "Make a website" project that will work for all kinds of students and also discuss core concepts like usability, user experience, good design, accessibility, responsive design, web standards, privacy and security. What other issues are good to get across to a group of young people who may not all even know what a URL is?
Things I am not thinking of? Please keep in mind this is supposed to be a very basic class for students who (trust me on this) may not have grown up using computers except in school so I want it to be challenging but not totally overwhelming. I'd like the class to be good but also not so outside-the-box that I don't get to teach it again if I want to, so advice that is contextually appropriate is strongly encouraged and appreciated. Thank you.
Background: I teach two sections. The class is two days a week with one day designated "lecture" (75 min) and one day designated "lab" (110 minutes). Lab takes place in the computer lab. Lecture takes place in a room with a projector, maybe. Students will mostly not have their own computers. They use Moodle for courseware. I got the handouts and syllabus from the former instructor and they're just a mash of PPT slides. I think I can do better but would love to not reinvent the wheel. My questions.
1. I did not order a textbook for the class. Is there one online or a series of "Learn HTML in ten weeks" types of pages that is particularly good? I have been a fan of w3schools' stuff for myself and WPD. What else is good?
2. The way they've done it in the past is writing HTML in Notepad and viewing it locally (I know). I can get the students accounts on the school's web drive (which is IIS) but was thinking it might be better to get them teeny unix shells somewhere (tilde.club?) so they could learn some command line stuff. Is this overreaching? Is there any way to use Moodle that is not just super annoying for this sort of thing?
3. The students will be split between a few CS majors and most who will be taking this to fill out their credits and they're taking majors like dairy farming. They are almost all 18-20. I want to do a basic "Make a website" project that will work for all kinds of students and also discuss core concepts like usability, user experience, good design, accessibility, responsive design, web standards, privacy and security. What other issues are good to get across to a group of young people who may not all even know what a URL is?
Things I am not thinking of? Please keep in mind this is supposed to be a very basic class for students who (trust me on this) may not have grown up using computers except in school so I want it to be challenging but not totally overwhelming. I'd like the class to be good but also not so outside-the-box that I don't get to teach it again if I want to, so advice that is contextually appropriate is strongly encouraged and appreciated. Thank you.
I think the shell would be overwhelming at first. There are some sites like Codepen where you can create accounts and work on html that loads immediately. The Khan Academy has a fun tutorial on html and css that is dynamic. It could be helpful to pick apart a simple site that they might know of and see what it is composed of. I have been tutoring someone on javascript and even the browser developer tools and manipulating the DOM has blown them away. Aim low most may not even realize that what is shown in manipulatable.
posted by andendau at 1:03 PM on August 5, 2015 [5 favorites]
posted by andendau at 1:03 PM on August 5, 2015 [5 favorites]
For that age group, O'Reilly's Head First HTML with CSS and XHTML might be good.
posted by jgirl at 1:22 PM on August 5, 2015 [1 favorite]
posted by jgirl at 1:22 PM on August 5, 2015 [1 favorite]
As someone who is completing a web design class right at this moment (well, later this week) as part of a Master's program I wish I had had the following (also said as someone with coding experience limited to dabbling in Geocities back in the day):
1) An example of the finished product. I want to try and write the code, I really do! But I really want to know what my end goal is supposed to look like!
2) Some examples that are reachable to new learners. There are so many super slick websites out there and terminology that can be overwhelming, and coding is learning an entirely new language. So if you have a final project, find some similar websites or pages that you deem appropriate for them to work toward.
3) I know academia loooooves to assign studies and scholarly articles and all that jazz, but giving students a solid background or definition in ideas like "good design" and "accessibility" and allowing them to discuss and apply without being weighed down with the results of testing group A and C is going to be far more useful to this group. I get it, you need the theory, but do you need three 40 page articles assigned every week?
4) TEDtalks should only be extra credit, never required.
posted by thefang at 1:25 PM on August 5, 2015 [2 favorites]
1) An example of the finished product. I want to try and write the code, I really do! But I really want to know what my end goal is supposed to look like!
2) Some examples that are reachable to new learners. There are so many super slick websites out there and terminology that can be overwhelming, and coding is learning an entirely new language. So if you have a final project, find some similar websites or pages that you deem appropriate for them to work toward.
3) I know academia loooooves to assign studies and scholarly articles and all that jazz, but giving students a solid background or definition in ideas like "good design" and "accessibility" and allowing them to discuss and apply without being weighed down with the results of testing group A and C is going to be far more useful to this group. I get it, you need the theory, but do you need three 40 page articles assigned every week?
4) TEDtalks should only be extra credit, never required.
posted by thefang at 1:25 PM on August 5, 2015 [2 favorites]
I teach Coding to high school kids, so it's a little different. Some stuff I did was have the kids use Code Academy. It's more intuitive than Khan Academy. For a fun project, I had them design websites using weebly with the emphasis on design. I gave them a pretend company with all sorts of client parameters and they got to work. They really enjoyed doing that and it was cool to see how differently they al designed their sites.
To keep them connected to the computer world, we always spent some time researching, discussing and writing responses to current tech news. We also spent some time looking at Kickstarter to see new ideas in the tech world.
posted by kinetic at 1:30 PM on August 5, 2015 [1 favorite]
To keep them connected to the computer world, we always spent some time researching, discussing and writing responses to current tech news. We also spent some time looking at Kickstarter to see new ideas in the tech world.
posted by kinetic at 1:30 PM on August 5, 2015 [1 favorite]
Be prepared for students who literally don't understand the difference between, say, a photo that they see on Instagram and an image on their hard drive. In the ed tech class I took, I was deeply irritated that there was no "computer basics" workshop or something offered in the first week. Maybe 25% of the students already knew more than the teacher (who openly admitted hating online instruction etc.), about 50% of the students were tech-illiterate, and 25% of the students had a sort of normal knowledge level. The result was that the class was a terrible experience for everyone; on any given day 50% of the class was bored senseless and the other 50% was baffled and terrified. If you can offer a lab session that goes over the basics or something, it would be doing a great service to everyone. (Maybe do a needs assessment on the first day so that you can find out people's knowledge gaps.)
posted by wintersweet at 1:44 PM on August 5, 2015 [2 favorites]
posted by wintersweet at 1:44 PM on August 5, 2015 [2 favorites]
Seconding MDN. I really like a lot of what's in Dive Into HTML5, though that might be more oriented towards people who already know some HTML.
I think a little unix account where people can edit files that go directly on the web is a pretty great idea. This is how a lot of us got our start back when, after all, and it makes a nice tight loop between "make a change" and "see the change on the internet". Something like tilde.club seems pretty good for this, though tilde.club seems like it could use a bit of TLC these days. I know ford has talked about facilitating teaching stuff, so maybe talking to folks over there is a good idea.
For that kind of thing, a little collection of good starter files in /etc/skel/public_html that will then get copied to users' home directories seems like it could work well as scaffolding, but then maybe you want to have them experience creating things from scratch?
If you find yourself looking for a tilde-like home with plenty of user capacity, I'm also happy to add users on squiggle.city.
posted by brennen at 1:45 PM on August 5, 2015
I think a little unix account where people can edit files that go directly on the web is a pretty great idea. This is how a lot of us got our start back when, after all, and it makes a nice tight loop between "make a change" and "see the change on the internet". Something like tilde.club seems pretty good for this, though tilde.club seems like it could use a bit of TLC these days. I know ford has talked about facilitating teaching stuff, so maybe talking to folks over there is a good idea.
For that kind of thing, a little collection of good starter files in /etc/skel/public_html that will then get copied to users' home directories seems like it could work well as scaffolding, but then maybe you want to have them experience creating things from scratch?
If you find yourself looking for a tilde-like home with plenty of user capacity, I'm also happy to add users on squiggle.city.
posted by brennen at 1:45 PM on August 5, 2015
I think you will lose a lot of people with the shell. I've TA'ed some intro Ruby on Rails classes where we have students use the shell and a lot of people people find working in terminal very disorienting and off-putting. And these are generally more sophisticated computer users than it sounds like you're expecting.
I second Codepen - it's nice because you can see your CSS, your HTML, and your output all in the same window. And if your CS students want to mess around with some Javascript they can do that too. But I honestly don't hate the writing it in Notepad and viewing it locally thing either. Would it be possible to install something with a linter like Atom or Sublime? That's what I do when I'm working on a flat HTML project - work on it locally (in a text editor with linting) then merge/upload.
But regardless of whether most of the work is done locally or remotely, in the end if it's at all possible I think it's super worthwhile to have your students produce a publicly available webpage. Maybe it's hours and contact information for their dairy farm, with a few pictures of cows and goats. Exactly how you would get that hosted is very situation dependent - GitHub pages is fairly easy and free but maybe still terrifying if you're brand-new.
Also maybe try pair programming, although it requires a lot of trust and self-advocacy. It's super-awesome when it works.
posted by mskyle at 2:01 PM on August 5, 2015 [1 favorite]
I second Codepen - it's nice because you can see your CSS, your HTML, and your output all in the same window. And if your CS students want to mess around with some Javascript they can do that too. But I honestly don't hate the writing it in Notepad and viewing it locally thing either. Would it be possible to install something with a linter like Atom or Sublime? That's what I do when I'm working on a flat HTML project - work on it locally (in a text editor with linting) then merge/upload.
But regardless of whether most of the work is done locally or remotely, in the end if it's at all possible I think it's super worthwhile to have your students produce a publicly available webpage. Maybe it's hours and contact information for their dairy farm, with a few pictures of cows and goats. Exactly how you would get that hosted is very situation dependent - GitHub pages is fairly easy and free but maybe still terrifying if you're brand-new.
Also maybe try pair programming, although it requires a lot of trust and self-advocacy. It's super-awesome when it works.
posted by mskyle at 2:01 PM on August 5, 2015 [1 favorite]
...and watching "The Imitation Game" turned out to be valuable because they all just accept computers=are but never question computers=how/why?
And doing the Turing Test with cleverbot.com was kind of neat.
posted by kinetic at 2:01 PM on August 5, 2015
And doing the Turing Test with cleverbot.com was kind of neat.
posted by kinetic at 2:01 PM on August 5, 2015
I think you will lose a lot of people with the shell.
I agree! There is nothing wrong with using a text editor and viewing locally. As long as you have Text Wrangler or BBEdit.
In my master's program, we were advised to start with paper and colored pencils. Then you label the divs and away you go to your text editor.
Have them enter a comment after a closed div to indicate which div has been closed. I wish my program had mentioned that! I didn't think to do that until a year or so ago. It's so much easier than trying to figure out closed divs when there are a lot of them.
For students who really like it and want to keep going after your course, then I'd recommend O'Reilly's Web Design in a Nutshell along with the Pocket Reference series for HTML and CSS.
posted by jgirl at 2:31 PM on August 5, 2015 [1 favorite]
I agree! There is nothing wrong with using a text editor and viewing locally. As long as you have Text Wrangler or BBEdit.
In my master's program, we were advised to start with paper and colored pencils. Then you label the divs and away you go to your text editor.
Have them enter a comment after a closed div to indicate which div has been closed. I wish my program had mentioned that! I didn't think to do that until a year or so ago. It's so much easier than trying to figure out closed divs when there are a lot of them.
For students who really like it and want to keep going after your course, then I'd recommend O'Reilly's Web Design in a Nutshell along with the Pocket Reference series for HTML and CSS.
posted by jgirl at 2:31 PM on August 5, 2015 [1 favorite]
If this is a course for credit (and not a community continuing ed course), then you really need to stick to the syllabus. You were given a syllabus, right? If not, ask for it. Find out the learning objectives for the course.
I admire your interest in trying to make the course interesting (and relevant), but if you are an adjunct, you should consult with the instructor in charge of the course first before making any changes or additions to the course's topics list. If you've already done this, and you have free reign to do whatever, then ignore me. I have seen an adjunct in my own department not get asked back for exactly this very scenario. She did not realize that the cool stuff she wanted to teach was actually being taught in the next class after her assigned class.
And there is absolutely nothing wrong with teaching a beginning HTML class using Notepad. That is how it's done at my school in the first course. (I suggest using Notepad++ though, which can be run off a flash drive if your IT department won't install it, and has pretty syntax highlighting.)
Assuming your students are anything like mine, take it down a notch or two. They won't even know how to open up Notepad, or have any clue what the command line IS, let alone that you can do cool stuff from it.
(Pro tip - Assuming your lab uses Windows) Be prepared to show them how to use Windows and a browser.
posted by SuperSquirrel at 2:32 PM on August 5, 2015 [1 favorite]
I admire your interest in trying to make the course interesting (and relevant), but if you are an adjunct, you should consult with the instructor in charge of the course first before making any changes or additions to the course's topics list. If you've already done this, and you have free reign to do whatever, then ignore me. I have seen an adjunct in my own department not get asked back for exactly this very scenario. She did not realize that the cool stuff she wanted to teach was actually being taught in the next class after her assigned class.
And there is absolutely nothing wrong with teaching a beginning HTML class using Notepad. That is how it's done at my school in the first course. (I suggest using Notepad++ though, which can be run off a flash drive if your IT department won't install it, and has pretty syntax highlighting.)
Assuming your students are anything like mine, take it down a notch or two. They won't even know how to open up Notepad, or have any clue what the command line IS, let alone that you can do cool stuff from it.
(Pro tip - Assuming your lab uses Windows) Be prepared to show them how to use Windows and a browser.
posted by SuperSquirrel at 2:32 PM on August 5, 2015 [1 favorite]
There's nothing wrong with using Notepad, but if you want a more collaborative / controlled experience Moodle's built-in wiki function will let students edit HTML (it's in the expanded edit view, under the symbol "<>" or just "HTML" depending on the Moodle version). It also keeps most inline CSS, although if you want to get into a separate CSS file you'd have to move beyond Moodle.
posted by Paragon at 2:39 PM on August 5, 2015 [1 favorite]
posted by Paragon at 2:39 PM on August 5, 2015 [1 favorite]
Response by poster: If you've already done this, and you have free reign to do whatever, then ignore me.
Thanks for the cautionary note. Yes I'm moving ahead after consultation with the instructor in charge of the course. I plan to cover the material she covers (which is really HTML/CSS 101 and the kids make a website that gets uploaded to the school's server at the end of the school year) and just try to make it a little less "I lecture about HTML with PowerPoint slides" with a little more real world practice. I really appreciate the feedback people have given.
posted by jessamyn at 2:41 PM on August 5, 2015
Thanks for the cautionary note. Yes I'm moving ahead after consultation with the instructor in charge of the course. I plan to cover the material she covers (which is really HTML/CSS 101 and the kids make a website that gets uploaded to the school's server at the end of the school year) and just try to make it a little less "I lecture about HTML with PowerPoint slides" with a little more real world practice. I really appreciate the feedback people have given.
posted by jessamyn at 2:41 PM on August 5, 2015
You might reach out to any local non-profits and ask if they need a site built, or need their site updated. (We usually go with one of the local animal rescues, who always have notoriously bad sites.) Each student can build a new site for them during the semester, and then the org can choose the one they want (or none at all, in some hilariously bad semesters.) Even neater if you can get someone from the org to come in for client interviews. Obviously you'd have to manage their expectations about the level of expertise to expect.
Other topics - what a browser is, and the differences between them in terms of handling HTML/CSS, how to view the source of a page, developer options in different browsers (Have a bunch of portable versions available. If your school is anything like mine, your only option in the lab is IE.)
Sorry to have been all Debbie Downer earlier. That adjunct that got fired for not teaching the class the way she was supposed to left under ugly circumstances (threatened lawsuit...)
posted by SuperSquirrel at 2:55 PM on August 5, 2015 [1 favorite]
Other topics - what a browser is, and the differences between them in terms of handling HTML/CSS, how to view the source of a page, developer options in different browsers (Have a bunch of portable versions available. If your school is anything like mine, your only option in the lab is IE.)
Sorry to have been all Debbie Downer earlier. That adjunct that got fired for not teaching the class the way she was supposed to left under ugly circumstances (threatened lawsuit...)
posted by SuperSquirrel at 2:55 PM on August 5, 2015 [1 favorite]
One thing I've done that's gone over really well is to do a compare and contrast exercise. Pick two or three sites (or pages) each class, have them compare and contrast (Which things are similar on all three? Which are different? Which make the site easier to read and use? Which make it harder?)
You can pick things that highlight the particular issue you want to talk about that class (so they're thinking about it in advance) and do it at the beginning of the class, or do a bit of lecture, and then do it. Posting the links on a slide from the projector so it's the thing they do when they get to class can work really well.
Likewise, if you want a quick presentation project, have them spend time looking for a site they like, then doing a quick 5 minute "This site and why I like it." thing, or have them create a site related to an interest they have, and then compare it to a couple of other sites on the same topic and talk about the design choices.
I'd spend a lot of time on accessibility and universal design, comparatively, personally, in the sense of 'different people will experience this content different ways depending on device/their personal circumstances/etc.' because understanding that is a sort of key idea that translates to a lot of fields.
posted by modernhypatia at 3:01 PM on August 5, 2015 [1 favorite]
You can pick things that highlight the particular issue you want to talk about that class (so they're thinking about it in advance) and do it at the beginning of the class, or do a bit of lecture, and then do it. Posting the links on a slide from the projector so it's the thing they do when they get to class can work really well.
Likewise, if you want a quick presentation project, have them spend time looking for a site they like, then doing a quick 5 minute "This site and why I like it." thing, or have them create a site related to an interest they have, and then compare it to a couple of other sites on the same topic and talk about the design choices.
I'd spend a lot of time on accessibility and universal design, comparatively, personally, in the sense of 'different people will experience this content different ways depending on device/their personal circumstances/etc.' because understanding that is a sort of key idea that translates to a lot of fields.
posted by modernhypatia at 3:01 PM on August 5, 2015 [1 favorite]
I'm one of those fuddy-duddies who really like to keep as much as possible of the interaction in CSS instead of having to rely on JavaScript for simple things like drop-down menus, etc. In the past, I've found the CSS Zen Garden very inspirational and instructive. A List Apart is a great place to read about developing for the web. Their “2015 Summer Reading” issue is excellent.
As far as shell, in addition to the aforementioned CodePen, I'm a big fan of Nitrous.io. They have a education section and will work with you if you'd like. Rather than get into all of that, they have a free tier, which should be plenty for students, you could point people to.
posted by ob1quixote at 3:39 PM on August 5, 2015 [1 favorite]
As far as shell, in addition to the aforementioned CodePen, I'm a big fan of Nitrous.io. They have a education section and will work with you if you'd like. Rather than get into all of that, they have a free tier, which should be plenty for students, you could point people to.
posted by ob1quixote at 3:39 PM on August 5, 2015 [1 favorite]
Some other topics to consider:
Marketing a site through use of social media, etc. I can't tell you how many students I've had who want to build a site for their business, thinking that all they need is a site, and then the world will find them. Um, no, it doesn't work like that. You could show them how to shorten URLs, and how to buy domains. (Lots of new tlds out lately.)
Related to that, you could talk branding, and logo design and maybe introduce Photoshop or the GIMP. If your school has a marketing director or someone in charge of web site design, maybe they would come in for a talk? Provide you with their style guide?
You could teach them how to not "borrow" designs from other sites, and what copyrights mean. (Honestly, most really won't know...)
You could show them all the free stuff that's out there to build sites quickly from templates, like webs.com. But then you have to decide if you're going to accept assignments created in those tools, and other stuff like Dreamweaver, whatever thing Microsoft has lately, or even in Word (and saved to .html). If you're teaching how to use HTML, you may not want them using drag & drop tools, since it's shielding them from the HTML.
posted by SuperSquirrel at 3:40 PM on August 5, 2015 [2 favorites]
Marketing a site through use of social media, etc. I can't tell you how many students I've had who want to build a site for their business, thinking that all they need is a site, and then the world will find them. Um, no, it doesn't work like that. You could show them how to shorten URLs, and how to buy domains. (Lots of new tlds out lately.)
Related to that, you could talk branding, and logo design and maybe introduce Photoshop or the GIMP. If your school has a marketing director or someone in charge of web site design, maybe they would come in for a talk? Provide you with their style guide?
You could teach them how to not "borrow" designs from other sites, and what copyrights mean. (Honestly, most really won't know...)
You could show them all the free stuff that's out there to build sites quickly from templates, like webs.com. But then you have to decide if you're going to accept assignments created in those tools, and other stuff like Dreamweaver, whatever thing Microsoft has lately, or even in Word (and saved to .html). If you're teaching how to use HTML, you may not want them using drag & drop tools, since it's shielding them from the HTML.
posted by SuperSquirrel at 3:40 PM on August 5, 2015 [2 favorites]
Sorry to be all over this thread...
compare and contrast exercise
I've also done this kind of thing with excellent results! Another twist is to use the Internet Archive to show different sites at different points in time, to help illustrate design trends. Hilarious if you can find an example from when most of the class was still in diapers.
posted by SuperSquirrel at 3:44 PM on August 5, 2015 [1 favorite]
compare and contrast exercise
I've also done this kind of thing with excellent results! Another twist is to use the Internet Archive to show different sites at different points in time, to help illustrate design trends. Hilarious if you can find an example from when most of the class was still in diapers.
posted by SuperSquirrel at 3:44 PM on August 5, 2015 [1 favorite]
My last year teaching high school, I taught a class in web design that was meant to span a year. My plan was to build it in two parts: the first half was about web technologies and HTML by hand. The second half was going to be in a WYSIWYG HTML editor. I didn't get to the second half because I quit teaching halfway through the year and got back into writing code, but that's neither here nor there.
Then, I used Notepad. Today, I would use Notepad++ or some similar editor that can handle HTML syntax highlighting.
I started off with understanding what an URL is and the went through the various protocols (Learning outcomes: know absolute and relative URLs as well as being able to break an URL down into its parts)
Then I covered TCP/IP as an active lesson where I wrote questions in several parts across several note cards and addressed them to particular students. I gave each student route maps and started sending out packets. So it was TCP/IP over sneakernet (learning outcomes: students know what TCP/IP, can roughly explain how it works)
Then I went through lessons based on tags.
I tried where possible to make the content of what they had to produce engaging. I did this by trying to make each exercise a quirky premise with room for the students to be creative. Face it, HTML is dry as dust. If you can get the students to want to make the product, then they can work past the tedium to get there.
For example, for ordered lists, I introduced the topic with the Dr. Evil blackmail clip from Austin Powers. The students had to produce an evil plan to take over the world with requirements for the number of steps and for each step a list of resources to make that step possible.
For images, I made a quick cheat sheet for the pronunciation of katakana characters and gave them a folder of scanned gifs of each character and had them produce pages with their name in katakana pictures and a few other words.
For links, they had to write a choose your own adventure story.
For tables, they had to do some basic tables to get the hang of it, then I had them reproduce a Mondrian painting as a table.
I can't recall my full plan for the second half, but I was thinking about setting them in small groups and have each group act as two roles: client and content producers. As a client, they would create a concept of a site and then hand that off to another group to produce. As producers, they would receive the content from a client and follow through.
For infrastructure, I had to be careful. I wanted the kids to be able to show off what they did, but the school's web hosting was shit. There was basically one password for the entire school system's web hosting and you couldn't create users. All it would take was one kid getting drunk on a weekend to ruin my next two weeks. Since I also ran IT, I set up a samba server that the kids had access to and I set up a cron job to look for changes in a folder named 'html' within their student directory and it would project the changes to the school web server via a generated ftp script. It worked moderately well and it gave the kids something they could show off to their friends/family.
Although you probably know this, there are a couple things that will make your job easier when you're putting together assignments - have your intended learning outcomes, build lecture and assignments to support them and to inform your assessment (I like formative rather than summative), and for the love of dog write a clear rubric that makes it easy to understand what they need to produce and is easy to use to grade and hand it out with the assignment.
One type of rubric I loved for summative assessment that I wish I knew from the beginning I called subway maps. Each learning outcome becomes a subway line:
It's seems like stupid redundant work, but I swear that grading this way is VERY fast and the students can see a priori exactly where to put effort and when they get the grade, it's perfectly clear how they got it.
I also mediated discussions on ethics and let the students tell me what they thought was right or wrong. Topics included libel, sharing of private information or information held in confidence, spam, hacking, DDOS copying content from other sites, and so on. I tried to have a bunch of gray area hypotheticals in my back pocket so discussion would move along and would never be completely clear cut.
Edit: almost forgot - I always did an exercise on accessibility of web sites, especially with color blindness. Visibone use to have a great tool for viewing a web page as if you had any of the various flavors of color blindedness and I'm willing to be that just by the numbers you'll have at least one person with protonopia (likely a man).
posted by plinth at 8:12 PM on August 5, 2015 [1 favorite]
Then, I used Notepad. Today, I would use Notepad++ or some similar editor that can handle HTML syntax highlighting.
I started off with understanding what an URL is and the went through the various protocols (Learning outcomes: know absolute and relative URLs as well as being able to break an URL down into its parts)
Then I covered TCP/IP as an active lesson where I wrote questions in several parts across several note cards and addressed them to particular students. I gave each student route maps and started sending out packets. So it was TCP/IP over sneakernet (learning outcomes: students know what TCP/IP, can roughly explain how it works)
Then I went through lessons based on tags.
I tried where possible to make the content of what they had to produce engaging. I did this by trying to make each exercise a quirky premise with room for the students to be creative. Face it, HTML is dry as dust. If you can get the students to want to make the product, then they can work past the tedium to get there.
For example, for ordered lists, I introduced the topic with the Dr. Evil blackmail clip from Austin Powers. The students had to produce an evil plan to take over the world with requirements for the number of steps and for each step a list of resources to make that step possible.
For images, I made a quick cheat sheet for the pronunciation of katakana characters and gave them a folder of scanned gifs of each character and had them produce pages with their name in katakana pictures and a few other words.
For links, they had to write a choose your own adventure story.
For tables, they had to do some basic tables to get the hang of it, then I had them reproduce a Mondrian painting as a table.
I can't recall my full plan for the second half, but I was thinking about setting them in small groups and have each group act as two roles: client and content producers. As a client, they would create a concept of a site and then hand that off to another group to produce. As producers, they would receive the content from a client and follow through.
For infrastructure, I had to be careful. I wanted the kids to be able to show off what they did, but the school's web hosting was shit. There was basically one password for the entire school system's web hosting and you couldn't create users. All it would take was one kid getting drunk on a weekend to ruin my next two weeks. Since I also ran IT, I set up a samba server that the kids had access to and I set up a cron job to look for changes in a folder named 'html' within their student directory and it would project the changes to the school web server via a generated ftp script. It worked moderately well and it gave the kids something they could show off to their friends/family.
Although you probably know this, there are a couple things that will make your job easier when you're putting together assignments - have your intended learning outcomes, build lecture and assignments to support them and to inform your assessment (I like formative rather than summative), and for the love of dog write a clear rubric that makes it easy to understand what they need to produce and is easy to use to grade and hand it out with the assignment.
One type of rubric I loved for summative assessment that I wish I knew from the beginning I called subway maps. Each learning outcome becomes a subway line:
Closes Tags - 3pts
O=========O========O=======O
None Few Most AllIt's seems like stupid redundant work, but I swear that grading this way is VERY fast and the students can see a priori exactly where to put effort and when they get the grade, it's perfectly clear how they got it.
I also mediated discussions on ethics and let the students tell me what they thought was right or wrong. Topics included libel, sharing of private information or information held in confidence, spam, hacking, DDOS copying content from other sites, and so on. I tried to have a bunch of gray area hypotheticals in my back pocket so discussion would move along and would never be completely clear cut.
Edit: almost forgot - I always did an exercise on accessibility of web sites, especially with color blindness. Visibone use to have a great tool for viewing a web page as if you had any of the various flavors of color blindedness and I'm willing to be that just by the numbers you'll have at least one person with protonopia (likely a man).
posted by plinth at 8:12 PM on August 5, 2015 [1 favorite]
I would let the students make a website of their own choosing, although you might give ideas. It's a lot more meaningful if they have their own purpose.
posted by maurreen at 11:49 PM on August 5, 2015 [1 favorite]
posted by maurreen at 11:49 PM on August 5, 2015 [1 favorite]
What surprised me most with my high school kids was the huge gap in abilities. Some kids jumped into coding immediately and others could only handle Scratch. Students were definitely not prepared to be patient as they combed through lines of code, but they all felt, as Masters of Facebook, that they understood coding. They didn't. But they all benefited from learning about the history of technology.
So for lower kids, Scratch and Twine and I had them start with Hour of Code.
"Twine is an open-source tool for telling interactive, nonlinear stories.
You don't need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you're ready.
Twine publishes directly to HTML, so you can post your work nearly anywhere. Anything you create with it is completely free to use any way you like, including for commercial purposes."
posted by kinetic at 4:01 AM on August 6, 2015
So for lower kids, Scratch and Twine and I had them start with Hour of Code.
"Twine is an open-source tool for telling interactive, nonlinear stories.
You don't need to write any code to create a simple story with Twine, but you can extend your stories with variables, conditional logic, images, CSS, and JavaScript when you're ready.
Twine publishes directly to HTML, so you can post your work nearly anywhere. Anything you create with it is completely free to use any way you like, including for commercial purposes."
posted by kinetic at 4:01 AM on August 6, 2015
Another "feel free to ignore this if you already have" message, but check to see what you can do on the computers if you get a chance. I can't open zip files on mine (and there's no "extract here"), so I have to extract files beforehand.
posted by Ms. Moonlight at 5:42 AM on August 6, 2015
posted by Ms. Moonlight at 5:42 AM on August 6, 2015
I took a community college HTML class because I needed 2 more credits or something and it was great. There was no book and no lecture. We were assigned to build a simple website, each week building slightly on the last, adding a new element. We basically followed simple instructions to do so.
As I recall, there was a final where we had to put together the new skills we had learned to create another website that had to include specific elements we'd learned in the course.
So yeah, I like your idea of making it basically all hands on.
posted by latkes at 8:54 AM on August 6, 2015
As I recall, there was a final where we had to put together the new skills we had learned to create another website that had to include specific elements we'd learned in the course.
So yeah, I like your idea of making it basically all hands on.
posted by latkes at 8:54 AM on August 6, 2015
I teach a college class in HTML/CSS for English majors (so.. from scratch, basically). I highly recommend Steve Krug's "Don't Make Me Think" - it's not an HTML book (you can roll your own tutorials for best control), but a usability book that gives them the tools to understand what makes a site good or bad. In your "lecture" sessions, if you have a projector, you can walk them through sample sites and really pull them to bits. (Compare/contrast several, then zoom in to each one for the details). Krug also has an excellent section on "Usability Studies for 10 cents a day" in which he shows how to set up a usability study.
Engagement is crucial to keep them from getting discouraged. Always have them build work that will end up live somewhere, in a topic they care about personally. Have them set up usability studies live and experiment using other members of the class.
I'm always surprised at how poorly they understand the file systems on their own computers. They seem to come unstuck on this more often than they do with the actual HTML. Be prepared to spend a lot of time helping them to figure out which folder they've stuck they're files in and then forgotten. Also, remind them of best practices in file naming. I would save the shell stuff for later - for beginners, it's hard enough figuring out directory structures using the folder iconography, let alone having to reconceptualize them textually.
posted by media_itoku at 8:52 AM on August 8, 2015 [2 favorites]
Engagement is crucial to keep them from getting discouraged. Always have them build work that will end up live somewhere, in a topic they care about personally. Have them set up usability studies live and experiment using other members of the class.
I'm always surprised at how poorly they understand the file systems on their own computers. They seem to come unstuck on this more often than they do with the actual HTML. Be prepared to spend a lot of time helping them to figure out which folder they've stuck they're files in and then forgotten. Also, remind them of best practices in file naming. I would save the shell stuff for later - for beginners, it's hard enough figuring out directory structures using the folder iconography, let alone having to reconceptualize them textually.
posted by media_itoku at 8:52 AM on August 8, 2015 [2 favorites]
« Older In search of a witty Harry Potter themed team name... | Aphids and earwigs and grasshoppers, oh my! Newer »
This thread is closed to new comments.
posted by xtine at 12:52 PM on August 5, 2015 [7 favorites]