Ask HN: Please help me teach CS to a HS student from a very different background

11 points by ahsanhilal 11 years ago | 25 comments

Hey Everyone, I am teaching CS to a student from an interventionist high school in one of the poorest urban neighborhoods, who has foster parents which nag him at home and who is in a constant battle to ward off bad influences (drugs, alcohol etc) in his neighborhood. He is definitely motivated and talented, and is in ok academic standing. I am trying to get teach him basic concepts of CS/web programming through the summer, and hopefully continue on through the school year. In order to teach him CS, his teachers and I devised a plan of getting him an internship at my company. The reason for that is to have him work mostly during school hours at the school building so that he does not have any distractions since we are not located in the same city. We communicate through hangouts, chats, messages etc throughout the day, so location hasn't been an issue as of yet.

I would really like recommendations from the community about which curriculum and coursework they have used in teaching high school students CS. In particular, I am really interested in learning what specific curriculum paths some of you have used in the past and what online resources you have used to achieve that. My thoughts on an 8-week curriculum are the following:<p>1. HTML/CSS for 1.5 weeks 2. Javascript 2-3 weeks 3. Setup environment 2 days 4. Make a webpage 1 week 5. Jquery 1 week 6. Intro to Python 1 week The reason this is important to get right, is that the teachers and I really want to show other students in the school how programming can enable them to create something and change their lives. There are thousands of resources on the internet but most of these students never choose to learn CS and do not have any inclination to. We are hoping to change that bit by bit. Hopefully it works.

raphaelrk 11 years ago |

Might I recommend processing.js? It's got a very shallow learning curve even to first-time programmers, there's plenty of support for it, it requires little setup, and lets you create visual applications immediately. If you use https://www.khanacademy.org/computing/cs, KhanAcademy's processing.js curriculum/editor, you'll have no setup, documentation, and lots of examples to look off of. I've been using it for a while now and suggest it to most first-time programmers because of how easy it makes it to get into programming and start building things immediately. Not that a big name necessarily means anything, but John Resig, creator of jQuery, created processing.js and is an employee of KhanAcademy, writing their editor.

ahsanhilal 11 years ago | |

Great pick! I Will definitely loo into it. Thanks for the rec!

bayonetz 11 years ago | |

I'll second that. I am teaching a workshop to 10 year olds in Processing and it is working out well so far.

krrishd 11 years ago |

One thing I'd say is that for the first week, don't go too deep into theory or even syntax. Have him work with tools like MIT's Scratch or Scirra's Construct to build games and in the process, learn how to think in a programmatic manner. Then, once he's interested and hooked, take him through your planned curriculum.

Source: I'm a 16 year old who got hooked on to programming a while ago.

ahsanhilal 11 years ago | |

Thanks for the input, appreciate it! I am mostly focusing on tools that give him explicit visual feedback, so that is why I am focusing on html and styling. Write some code and then have it do something on a blank page seems to be powerful.

As for theory, I am not really focusing on programming concepts, more on practical/visual work initially.

I was thinking of giving him some codecombat/scratch homework, but he is a bit older (16 already) so thought he might think it is for people younger than him. I will try it out though myself first.

Kushal_C 11 years ago |

As a high school student myself I found the odin project to be an incredible resource. I'm currently working through their curriculum(it's incredibly thorough), and it goes from basic css and html to java script, j query and rails. http://www.theodinproject.com/

aarohmankad 11 years ago |

One thing I don't think enough courses teach is how to actually get your code online. I suggest using Github Pages. Maybe get them into using some form of source control for their projects?

mikeshi42 11 years ago | |

Yeah, basic VCS is actually pretty good not only do they get to learn how to use Git for later when they're working on bigger projects, they can leverage GH pages. However, it's kinda hard to swallow the full complexity and array of options Git provides. Personally, I only taught my class the basic idea of git and how to commit and push using a graphical interface so they can get started on GH pages.

ahsanhilal 11 years ago | |

Yes definitely want to give him a primer of a git or some sort of VCS. Hopefully after we get through some basic python

jason_slack 11 years ago |

I think I have a spare older Lenovo Thinkpad T60 (?) The battery doesn't work, 1gb RAM, Wireless, 80gb HD. I could give it to a good cause :-)

ahsanhilal 11 years ago | |

Thanks for the offer! I will ask the teachers and get back to you

jason_slack 11 years ago | | |

Its pretty old by anything of todays standards. I did get Ubuntu loaded on it for my teenage son to travel with this Summer and he says it doesn't really work for his needs, FYI.

brudgers 11 years ago |

This class on Coursera is likely to engage a young person.

https://www.coursera.org/course/digitalmedia

In my opinion it's better to use the work product of seasoned professionals than that of even the most well intentioned amateurs. There are 10x teachers. There are 100x curricula. Being smart isn't expertise.

Good luck.

tzhong 11 years ago |

Some resources you can check out are The Odin Project (full online curriculum), BentoBox, CodeSchool, Codecademy, and Treehouse.

ahsanhilal 11 years ago | |

I am using codehs, codeacademy

Treehouse is very similar to other ones, Odin Project seems to be for older learners. Bentobox is fantastic! Thanks for the rec!

rnirnber 11 years ago |

this is the cutest story ever. i dont have any advice but want to say that what you're doing is really amazing <3

jonhmchan 11 years ago |

I'm the creator of Bento (http://bentobox.io/). I think Bento can help - all the resources there are free and curated by developers. Follow the track left to right, top to bottom.

Please reach out if you need any help @jonhmchan

ahsanhilal 11 years ago | |

Thanks Jon! Will definitely do

mikeshi42 11 years ago |

I teach a 7 week course (it's only on weekends and 3 hours each day). I'm not 100% sure of how effective my teaching has been, based on my student's feedback they all really enjoy the course even when I'm pushing at a very rigorous pace. (All my students have almost no programming background at all and the course is aimed to hopefully engage students to further pursue CS and have a solid foundation of knowledge to do so, not to teach theory anything too heavy).

I went through the basics of HTML on the first day, including most of the HTML tags (yeah even <em> and <strong>) and had them try to make a basic page out of that. Then I would review with them a bit of the tags the next day and then I'd move onto basic CSS (CSS Syntax, Block vs Inline, Basic Properties) and I have them improve their page. The second week I did more advanced CSS (positioning, CSS3, box model, etc.). The next day (day 4) I had them implement those new CSS properties into their page and had them make a nice button out of pure CSS and HTML and tried to guide them through breaking down a webpage. (I found that looking at a page and breaking it down into HTML structure isn't as intuitive as it seems now). Third week I did intro to Javascript and jQuery. On the first day it was really basic control structures, console, debugging, etc. With that I had them make a "conversation bot" to where they used a bunch of if/else's to try to respond reasonable to user input. Then I moved on to jQuery introducing selectors and then .click() and .slideUp/Down/Toggle to create an animated menu. Now the fourth week we're currently working on starting our imitation of FlappyBird. (Yes, we're using HTML elements + jQuery, not a HTML Canvas). I think this is the most important part, making sure you're able to apply the basic skills that I covered through the first 3 weeks into a practical application. At this point my focus is on asking the right questions to lead them to answers instead of telling them what to do. Since they should already know the foundations of web development, it's more important that they know how to think like a programmer. I still lead them, giving them hints on which jQuery function to use. But a lot of the time I ask them to look at the jQuery documentation and tell me what we should do. I intentionally introduce half solutions to a problem and ask them why my solution wouldn't work. As for the rest of the weeks, I'm planning to continue development and refinement and throughout it let them customize their game to use whatever images or arbitrary rules they decide to make. I hope this would help you a bit. As for resources, I wrote most of my own slides, following the path that a lot of other popular coding sites use. But I felt like some of it I could change to fit my students better and I wanted to be familiar with the curriculum I was teaching, instead of just using some pre-made curriculum. Of course I don't think there's anything wrong with the pre-made curriculum I guess that was more of a personal choice.

Full disclosure: I'm 17, so not sure how useful my experience would be.

wiseleo 11 years ago |

I consider background completely irrelevant. With sites like c9.io, he can have a coding environment in the cloud and access it from any web browser, including a random library computer.

What needs to happen is inspiration. If you can inspire someone to believe in himself and show how comparatively easy current technologies are, you should be able to ignite the self-sustaining desire to get better.

My approach would be to pick a funded company that resonates with him and clone it. There are plenty of them that can be cloned in a day. This will demonstrate that building software capable of attracting funding is not difficult and that becoming an engineer on such a team is easier than pursuing professional sports.

Once you decide on the target, systematically disassemble the site and discuss what makes it work.

Install git, setup a local repo and a repo on bitbucket, and instruct the student to 'git commit' after substantial changes and 'git push' every so often. It's never too soon to introduce version control.

Starting with HTML, talk about DIVs and nothing else. There is no need to talk about other tags. Explain that DIVs are the building blocks and demonstrate a page built of just DIVs and no other tags. Fill it with Lorem and style with Bootstrap. Ignore AJAX until much later.

This will lead into CSS. Explain how CSS is used to style DIVs so each element looks different.

Now I would talk about Bootstrap and how it changed the way we build web apps.

Once CSS is a relatively clear concept, lead into jQuery but don't talk about JavaScript in general. jQuery would be introduced as a way to interact with DOM.

JavaScript is a confusing language to learn as a first language. It may make sense to shift gears and talk about Ruby and Python, whichever one is more familiar.

By now, this person should be ready to learn about control structures, loops, and other basics of programming. It is difficult to get motivation to learn that without a reason to learn it.

I would introduce real programming by following the BDD methodology. Teach the student to write tests before talking about how to make them pass. It is so unusual that it should be intriguing. I am not familiar enough, as of this writing, whether Ruby or Python have a better integrated testing frameworks, but I will explore that in detail later.

Once the student has a solid understanding of Ruby or Python, I would only then introduce JavaScript and map the concepts from Ruby or Python to JavaScript. By now prototypal inheritance will not seem as alien and brackets and semicolons will be just extra things to type.

AJAX and oAuth as well as the concept of REST APIs would be next.

Finally, let's go to the cutting edge and tie it all up with Meteor and Velocity testing. This will introduce nodejs, MongoDB and mobile app syncing.

Just say no to PHP. We thankfully have alternatives to it now.

As for books, I would advise the student to get a library card at a library that has access to either Safari Books Online or Books 24x7. He will then have access to the bulk of O'Reilly titles. I prefer the Headfirst series when getting started with a new language.

Little known fact: as a resident of the state you can get a library card from any library within that state and different libraries have different resources. This means he doesn't have to be limited to whatever library is local to his community. I have 7 library cards.

Hmm... this might inspire me to produce a video course based on this outline and test how well this theory might work. Lean startup methodology applied to teaching could be interesting. Saving this post for reference. :)