

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

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&#x2F;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&#x27;t been an issue as of yet.<p>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:&lt;p&gt;1. HTML&#x2F;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.
======
mikeshi42
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.

~~~
ahsanhilal
Hey Mike (sorry if that is incorrect). Can you email me when you get a chance?
I would really like to see your slides in detail if possible.

Also, your doing more at 17 then I was, and I would love to talk more. (email
in profile)

~~~
mikeshi42
Hi ahsanhilal, I don't think I can see your email on your profile. You can
contact me at mike(at)scoreportal.org

~~~
ahsanhilal
sent you an email

------
wiseleo
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. :)

~~~
ahsanhilal
Thanks for the well thought out reply! The course layout you have written out
is quite thorough. The only thing is that for someone who does not have any
programming background, they need to see immediate results to gain an
understanding of how powerful code is. That is why I thought Html/CSS is a
good starting point and then go in deeper.

I am open to other methodologies, and we can talk more on email if you would
like. Would love to exchange ideas and resources (email in profile)

~~~
wiseleo
It's a bit radical, but I am tempted to test it. :)

I am wiseleo on just about every website and gmail, so feel free to send me an
instant message.

For me, seeing an executable test spec for the first time was very surprising
and revealing. There is an entire book "Refactoring: improving the design of
existing code" that teaches you how to name functions so your code reads like
English.

After all, this is valid Jasmine from near the beginning of my test suite:

it("should return an array containing at least one object", function() {
expect(menu.length).toBeGreaterThan(0); });

It reads like English. If you can show that code can be written like this
rather than like typical code, you will notice an immediate jump in
confidence.

If you show that in Rspec, where the alien-looking

function ( ) { };

is replaced with

    
    
      do

end

and expect('should do something useful') becomes expect "should do something
useful"

it becomes even more approachable.

------
raphaelrk
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](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
Great pick! I Will definitely loo into it. Thanks for the rec!

------
krrishd
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
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
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/](http://www.theodinproject.com/)

------
aarohmankad
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
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.

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

[https://www.coursera.org/course/digitalmedia](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.

------
jason_slack
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
Thanks for the offer! I will ask the teachers and get back to you

~~~
jason_slack
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.

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

~~~
ahsanhilal
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
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
I'm the creator of Bento ([http://bentobox.io/](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
Thanks Jon! Will definitely do

