SPEAKER: This is CS50, and this is CS50 Explained, Behind the Pedagogy.
So many of you have probably taken CS50 or heard of CS50 in some form already.
And so that then is what of CS50, if you've
actually gone through the courses, lectures, and/or problem sets, that
is programming assignments.
But this session during our educator workshop
is meant to be a glimpse at the why.
Why, for better or for worse, have I, have we, CS50's team,
made some of the pedagogical and curricular decisions that we have.
Ultimately, it's up to you as a teacher in your own classroom,
whether to adopt or adapt or neither of those
when it comes to each of these ideas.
But at least we thought we would share with you
some of the thinking behind our own conscious decisions.
So CS50 itself is a fairly traditional undergraduate class here in person.
It's among Harvard's largest.
So pictured here is beautiful Sanders Theater,
this old building on campus in which we're
fortunate to be able to give our lectures.
But the course is structured with other resources as well.
And everything that we do nowadays, curricularly, technologically
is freely available as open courseware, so to speak.
That is to say it costs teachers nothing to use
any and all of these materials and these tools as well.
CS50x, now in terms of nomenclature, is essentially
what we call the free version of CS50.
So they are one in the same curricularly and technologically.
But whereas we might say a Harvard or Yale student takes CS50 on campus,
anyone online would take CS50x off campus.
But curricularly and technologically they are the same.
And all of the courses materials live at this URL, as well as on other platforms
that you might know, like edX and YouTube, Apple TV, Google
TV, and other platforms over the time as well.
Now, in terms of other nomenclature, there's
an adaptation of the class called CS50 AP, which for those of you in the United
States in particular is an endorsed implementation of the AP Computer
Science Principles curriculum framework, which
is to say that high school students can take CS50 either online
or through their own school for AP credit,
if their school will administer ultimately the exam so that they
can get that credit.
All of those materials are available at this URL on CS50's own website.
And in essence, CS50 AP includes CS50x, plus some additional materials
from a course that we have long called CS50T, an introduction to technology,
more broadly, that has additional material that the AP
test might expect of students.
Pictured here is one of my favorite photos
over the years whereby we gathered in New York
City with a number of public and private schools
years ago with some of our teachers and our network
to have a hackathon for our high school students.
Pictured here just a few weeks back are about 300 teachers from Indonesia
who teach middle school and/or high school
and are going to be teaching now introductory computer
science in their own classrooms.
So some of CS50's team and I flew to Indonesia
to lead a workshop like this one in person for those teachers in Jakarta.
And lastly, pictured here are some of our students in Nicaragua.
So where they have been taking CS50 largely
in Spanish with some of their own teachers
there, as well as working their way through the courses,
problem sets, final projects, ultimately to exhibit their own CS50 certificate
at the end of the course.
And most recently, as CS50 actually begun
giving talks and professional development in companies,
like General Electric and others, whereby
the goal is to really uplift people more broadly when
it comes to understanding, technology, computing,
and programming in particular.
Now, for those of you unfamiliar, besides CS50x, and in turn CS50 AP,
CS50 has a whole curriculum now of courses
that you can take either before CS50 or after CS50 in either of those forms.
So, for instance, just to rattle these off,
we have a course that focuses particularly on programming with Python,
a course that focuses on web programming with Python and Javascript,
a course that focuses on game development,
one that focuses on artificial intelligence with Python, one of which
is an introduction to computer science for lawyers
or for business professionals or for technologists, really consumers,
or citizens more generally.
Hot off the press is a new course on programming
with R, very popular language for data science
that's about to launch in just a few days.
A course on programming with Scratch, particularly for younger students
a course on databases with SQL, a language
via which you can manipulate data.
And then lastly, for now, a course on cyber security specifically.
So even though today and tomorrow we will focus primarily
on CS50x, and in turn CS50 AP, is really the computer science backbone
that these courses, either lead to or extend from after you've taken them,
all of these courses, all of these resources and tools
are similarly available to you for free as indeed open courseware.
But there's a lot.
In those courses in CS50 itself, indeed, you
might recall if you've watched CS50's own lectures,
we display this picture here, which is a fire hydrant connected to a drinking
faucet.
And the idea is, and this is a photograph down
the road from MIT, that taking CS50, like getting an education from MIT,
is like drinking from a fire hose.
It's really going to hit you with a lot of material, a lot of water
that you might not be able to take down all at once.
But that's not really the goal ultimately.
Rather, the goal is that exposure.
And that reality that over time there's going
to be so much more to learn, and among the goals of CS50 is to teach students
and in turn teachers how to teach themselves
this material, which is never going away insofar as it's only
going to continue to change.
Now, as for the language, the programming languages
that we use in CS50, we actually do start
with Scratch, a very student friendly graphical programming language
that many kids around the world nowadays are even
using in middle school, if not younger.
But we use it to talk about programming fundamentals,
like functions and loops and arguments and conditionals
and other programming constructs that are still
going to be present in most every other language we talk about.
But in Scratch, there's no semicolons, there's no parentheses,
there's no sort of syntactic stupidity that just tends to get in the way
and gets very frustrating when students are confused.
So we get rid of that early on, spending just a day, maybe a week
or slightly more on this particular domain.
For those unfamiliar, it's indeed this drag and drop programming interface
that really isn't too young of a platform,
even for the oldest of students.
Indeed, we use this with our own university students here.
It allows us to implement Hello, World as quite simply
as a couple of puzzle pieces like that.
But then we do transition in CS50 fairly quickly
to a more traditional text based language,
an older language called C, which is not very common nowadays.
It looks a little something like this.
Much of the world, I daresay, has moved to use Java, or most recently Python,
perhaps other languages as well.
But the appeal of something like C to us is, one,
we can actually pretty readily make an analogy between Scratch and C,
even by color coding it, as I have done the code here.
Even though there's a lot more syntax going on here, of course
this program is functionally the same and just prints out Hello, World.
And so when we go from Scratch to C, among my favorite things
to do pedagogically is to show students these very user friendly puzzle
pieces in Scratch, and say in C, it just looks a little different,
like this here on the right.
Yes, it looks scarier.
Yes, it's harder to memorize at first with all of this punctuation,
but it's the exact same idea.
And we try to give students early on this mental hook, this mental comfort,
so that even if they're frustrated by or struggling with some of the syntax,
it's the same darn ideas as they were the previous week with respect
to functions and loops and conditionals and so much more.
Indeed, here is a conditional that starts
to look even more cryptic on right, but is the exact same thing as the puzzle
pieces at left.
But C now educationally also allows us to go at a lower level
and pretty quickly.
And in fact, among the most empowering things I hope about CS50
is that we actually don't abstract that much away.
At the end of the day, what's nice about C, I do think pedagogically,
is that there's no magic.
You don't just write one line of code and a whole lot of functionality
happens for free for you.
If you want to have a list of information,
if you want to have a hash table of data,
you have to implement that yourself.
Now, that's not necessarily something you're
going to want to do or even have to do professionally long term.
But the fact that in this course, we give students this bottom up
understanding of what is going on underneath the hood of the computer,
we do think intellectually is incredibly empowering.
So we present students, for instance, this grid of memory,
RAM, so to speak, inside of your computer.
And we propose to them that if we want to maintain some kind of ordering
and association among these data, we can, of course,
implement the scary old linked lists like this using pointers.
But at the end of the day, there's no magic.
This is just numbers.
And those numbers are just bits, zeros and ones.
And because we try in the course to scaffold things from building blocks
to building block to building block, layering ideas on top of one another,
the hope is that when students transition thereafter to a higher level
language like Python, they still understand what is actually going on,
and they appreciate now what tools they've been provided with.
And they're not just kind of mimicking what they've seen on the screen.
They know what Python, they know what their own code is doing.
So one of my favorite exercises, in fact, is this.
This is a bit of a spoiler, if you've not finished CS50x yourself.
But this code here in about a dozen lines of code in Python is essentially
an implementation of problem set 5 in CS50x currently,
which is to implement a spell checker in C and implement your very own hash table
for like 100,000 plus words in English that daresay takes most students 5
hours, 10 hours, 15, 20 hours to implement and get right.
But in Python, and I do this deliberately in class, 60 seconds, type,
type, type, done implementing the same spell checker in Python,
because that entire hash table, of course,
is reduced to that one line of code at the very top
there, where we use a Python set that we could
use even a list or a dictionary or some other structure
to implement that data structure containing all of those words.
And it's that moment where students see and appreciate and sort of shake
their fist metaphorically in class when they realize, oh my God,
why did we just spend 10 to 20 hours implementing it in C.
But the difference is that our students, we do hope,
understand now at a very real level what all of this code
is actually doing for them.
We transition toward the end of the CS50, of course, to web programming.
And this too is motivated by the reality nowadays
that it's just useful to be able to write code for web contexts.
It's not even the actual web necessarily.
Increasingly, do mobile devices, for instance,
have applications written in them using languages like HTML, CSS, and JavaScript
for cross-platform support across Android and iOS in particular.
So we introduced students, of course, to this structure
of HTML, the bones that allow you to structure a page.
But we very quickly transitioned to Flask, which for those unfamiliar
is a micro framework.
It's code that standardizes how you implement a web application,
but it's fairly lightweight.
There's fairly little Flask-specific stuff
that students have to master in order to make their very own web application,
unlike something like Django or other frameworks
that just tend to be heavier weight.
And indeed, this too is a pedagogical decision.
We want students to become familiar with a framework.
We want them to get exposure to some real world web applications.
But we don't want to spend a week, a month, a course teaching
them a specific framework, something like Django or the like,
which might be very useful and very applicable professionally.
But that's not the point, right?
That's the point at which you should be going and reading
the documentation is needed.
What we care about in the context of web programming
is what is the browser doing, what is the server doing, what
is HTTP, what is the framework doing to facilitate all of that.
And how are HTML, CSS, JavaScript and Python all
solving different problems in this case.
Now, ultimately, the software that we have students use in the course
has evolved over time.
And if you've been with us as a teacher in some form over the years,
you'll know that the technology, the platforms we ourselves use
has been evolving.
Most recently, we have students using Visual Studio Code or VS
Code, which is a very popular text editor,
increasingly really an IDE, or integrated development environment,
because with things called extensions or plugins,
you can really add a lot more functionality to the environment.
And so what we ourselves do for students is we can figure this for them
in the cloud using a third party tool called GitHub Codespaces.
What's nice about GitHub Codespaces is that whether you're using it for CS50
or any of your own classes, any verified teacher
can use GitHub Codespaces and related tools completely for free.
So if you're using this through CS50 or on your own,
you can use these tools in the cloud.
And this too is a very pedagogical decision.
All too often in introductory technical courses,
students might have to download some piece of software
or install it and configure it.
Sometimes that works out well, but the reality
is there's so many darn versions of Mac OS and Windows
and even other operating systems that you're
going to run into technical difficulties,
certainly if you have a medium number of students.
If you have just a handful, might not be such a big deal to get everyone up
and running on their own Macs or PCs, especially if they need offline access.
But if you're fortunate to have pretty good internet access in school,
at home or at work, more generally, using something in the cloud
is certainly very turnkey and convenient.
So we use this so we can standardize students' programming environments.
And for those of you who teach not just introductory courses, but perhaps
higher level, more advanced courses as well, we'll talk over the coming days.
And we have documentation online via which you can actually
use Codespaces and customize it yourself for courses even unrelated to CS50
as well.
But within the classroom, and what we really
wanted to share in this first session today
is like what the point is of a lot of the demonstrations,
a lot of the decisions that we make on camera or really in class itself.
And the goal for me as a teacher now has been to create as best I can,
as many as I can of these memorable moments, sort of visual memories
that stick in students' head long after the course itself is over,
so that for the most sophisticated topics, complicated, difficult topics
in the class, they have some kind of mental framework
that they can fall back on that just gives them greater
comfort an understanding of some topic that might otherwise be far too
abstract or complex to recall.
So, for instance, binary search is perhaps one of the first
that we introduced in class.
And you might remember scenes like this here.
It's getting increasingly hard to find these here phone books.
And I think quite soon, we might solicit via the internet
that if you have phone books of your own that you don't need
or colleagues or friends, please do mail them to us.
They're also getting fairly thin.
So it's not all that compelling to tear these things in half.
But what's nice about phone books is that they're
still with us in digital form.
Whether you have an iPhone or Android device,
you have a contacts or address-book app that still has people's names from A
to Z sorted alphabetically.
A phone book, then, is just a physical incarnation of that same idea.
I hope you won't mind.
I don't think I'm going to tear this one today
because I kind of need it in the fall.
So we're going to hang on to this one here.
But you can see a dramatically torn in any of our videos online.
We, of course, talked with students about binary
and indeed try to give them a sense of really
at the end of the day, what is a computer doing, how is it
storing information.
And so even though we function, of course, in the human world with decimal
primarily, among our goals with teaching binary
is also to create one of these memorable moments after that same phone book.
So pictured here, for instance, is some of our students
in a prior year holding up their hand to represent a one
or just standing there with their hand down to represent a zero.
Now, we do this with sheets of paper.
In this case, I print 1 on some of the sheets or 0 on the other sheets
as a sort of visual cue to tell them or the audience what it is they're
representing.
You don't even need that.
Sometimes we use light bulbs that are on or off.
I went on amazon.com one year and found some plastic light up numbers which we
can similarly use as well to ultimately have students represent the ones place,
the twos place, the fours place, eights, 16s, 32, 64 128s place.
The tension, I think, ultimately, is, how many minutes, how much class time
do you actually spend on these demonstrations
when you could have just written it on the board in chalk or marker?
But that's really left to you, to me, the teacher,
to decide to read the room as to what feels
like an appropriate balance of spending good time on these
to create memorable moments versus taking too much time
at the expense of other discussions.
Now, when it comes to debugging too, you might recognize
or might wonder why rubber ducks seem to be everywhere in CS50.
We've actually been giving these little rubber ducks out
to students for quite a bit of time now in class physically,
and they also line the stage in this photograph here.
Here is simply a much bigger version of the same,
because there's this thing in programming
called rubber-duck debugging, whereby if you or a student
are struggling to solve some problem or understand something,
you're encouraged to have a conversation with a rubber duck and sound it out.
Tell the duck what problems you're having.
Ask the duck any questions.
Odds are it won't actually reply.
But through that process of talking through the problem,
the presumption is that light bulb will go off
and you'll realize some illogic in your thinking,
and you will have solved the problem just by verbalizing it.
Well, nowadays we do this digitally.
We've had a chat bot that will quack back at students,
and most recently, one that will speak English or even other human languages
back to the student.
And indeed, more on that over the course of today and tomorrow,
because now underlying these ducks is artificial intelligence.
But at a lower level, of course, we introduce students to data structures,
among the simplest being an array.
We try to remind students that an array is really
just leveraging that same model we discussed in the context of memory.
But technically, a computer can only look at one location at a time,
typically.
And so we liken locations in memory to doors, like lockers in a gym
or in the hallway where students might keep their books in their backpacks.
We have been fortunate to find at a local store
a whole bunch of tiny gym lockers that aren't very convenient to move around.
But we nonetheless set them up on stage and allow students
to then visualize and hear all the more what
we mean when we say a computer can only look at one location at a time
as we go from left to right opening those same doors.
We talk about sorting information.
And here too, a fun opportunity to have students come up on stage
and sort themselves.
Pictured here are some of our students holding plastic light
up numbers that represent a number from 0 to 7 in this case.
And it's a fun exercise to, one, have them just go sort themselves.
And usually it's a little chaotic.
But as smart humans, they figure it out.
But then I ask them, well, what was the algorithm you used.
And really, no one can kind of put their finger
on what just happened chaotically on the stage.
So we try to formalize it with something like selection sort or bubble sort
or more advanced algorithm as well.
When we get two pointers, we try to, again,
to give students these memorable moments and these mental models
by likening it to pointing from one thing to another.
So I picked up from a local hardware store,
called Home Depot here, a couple of mailboxes
physically that you get postal mail in.
But we set them up on stage here.
So Carter and I were playing the roles of actually
accessing the contents of these memory locations represented by mailboxes.
And because we're at a university, we have access
to a lot of those foam fingers.
So I had a Harvard foam finger or a Yale foam
finger that allows me even more visibly and dramatically
to point from one location to another.
But of course, ultimately under the hood,
it's just this grid of memory locations, which we again remind students of.
And even though this kind of story seems to escalate quickly,
because suddenly it gets very complicated,
I'm looking at hexadecimal and grids of memory, it's just the same idea.
And so just like with Scratch and C, with memory and mailboxes,
we try to give students this very comfortable, familiar, memorable moment
and mental model, but use that to allow them to better understand
what's going on underneath the hood so they really
can appreciate and understand these so-called abstractions.
We do this again and again.
With hashing, for instance, it's common to say that you put values into buckets.
So we literally pick up some buckets from, again, the hardware store.
And in this case, we had some jumbo playing cards that we found on Amazon.
But you could make these yourself out of paper and markers.
And we bucketize the values by hashing based on the suit of these here cards.
But it's important to recognize, too, especially since we
are fortunate to teach a class like CS50 in this beautiful theater on campus,
that none of this theatricality, none of this creation of memorable moments
actually requires much in the way of those resources.
And it certainly doesn't require a theater.
Indeed, several of those examples and all of my own
earliest examples didn't have buckets, didn't have plastic numbers
that light up.
They just had sheets of paper that I grabbed
from a printer drawn on with a marker to just make
more real and more visual what it is that we're
trying to present to our students.
So the problem sets are what ultimately is where students
spend most of their time in the class.
It's an opportunity to assess their understanding of the material,
but more importantly, for them to apply the material to actually problems
and actually learn how to master it.
We try to draw inspiration from familiar aspects of culture, pop culture
and technology.
Mario, for instance, has become fairly canonical.
And as you yourself are a teacher, perhaps a new teacher,
I keep a lookout in my own life for things like this
that I could use as a hook, a way of enticing students
into caring about a problem, but reducing it really to something
that we want to teach.
So here is a fairly involved picture from the 1980s of the original Nintendo
and Super Mario Brothers.
But what caught my attention there is, wait a minute,
this pyramid is a fairly standard structure.
There's some kind of loop via which you could create it.
That's a problem set.
How do we make it more complicated?
Well, later in the game, there's two pyramids, slightly different
opposing shapes.
That's a slightly harder homework problem.
So again, we tend to look for these hooks,
be it visually, audibly, experientially, that we
use as motivation for the subsequent problem, which at the end of the day,
especially for those of us who've been programming for years,
might be kind of boring, right?
Like writing a for loop or two is not terribly exciting,
but it can be the first time and it can be if you know how it's applicable
and care why it is.
We talk about cryptography, which at the end of the day
really is just an excuse to--
really is just rather a context in which to discuss string manipulation
and treating strings as array of characters in C,
and manipulating the underlying characters as though they're
numbers because of that equivalence between chars
and ints in a language like C. So this, of course,
is the plain text that might correspond to the so-called ciphertext here in.
But again, that context, that hook is meant
to get students thinking about and caring about the material at hand.
Photographs and videos nowadays are everywhere.
And so here's a picture of a popular location
here on campus that we apply some Instagram-like filters
to make it black and white or detect all of the edges.
At the end of the day, what we really care about
with this homework assignment, so-called Problem Set 4 in CS50 of late,
is that we want them to understand file input and output.
We want them to understand bitmap files and grids of pixels and structs
via which you represent colors.
But again, we use this hook of Instagram-like filters
to get students caring about and excited about what problem they're
trying to solve.
Here, we introduce them to hexadecimal as a hook
to get rather in the context of data recovery,
to get students interested in actually recovering photos by really just looking
for patterns of bits pictured there into their hexadecimal equivalents.
We introduce students to a bit of biology in the context of DNA
and a sort of mystery with DNA really to get
them thinking about string processing, which at a glance,
is not nearly as exciting until we say, this is Alice's DNA and this is Bob,
and we ask him a question like who done it.
And then toward the end of the course, of course
in the context of web programming, we introduce them
of late to CS50 Finance, a full fledged web application that
talks to a lightweight API, a third party service
to get live data so that students, really, by the end of the course
have built something within the context and support structure of CS50,
but in a way that they can then use as a stepping stone to making
their own final project, if not a web application or mobile app as well.
But now, here on campus and perhaps in your own schools or communities as well,
we focus also on CS50's community.
I dare say we've tried to make it more than just a course, more than just
a set of homework assignments, but really this
shared collective experience.
In part, because it's meant to be fairly intense
and it is indeed rigorous for so many students.
And we want there to be this mix of work and play,
but that ultimately really brings students together in a way
that they care about.
And so we have this sequence of events that start with Puzzle Day.
And you some of you might have participated
in the online version of this.
All the better if you can get your students, your classmates together,
working on challenge problems, logical problems together.
Pictured here is among my favorite photographs
of some of our very smart students gathering together
to delight in what the solutions are.
Pictured here are some of those same students struggling with those problems
collaboratively before the solutions were revealed.
And these puzzles have nothing to do deliberately with computer science.
This is not a hackathon per se.
It has nothing to do with programming or CS,
but about problem solving collaboratively, and especially drawing
in those students less comfortable at the school
so that they might even follow their CS50 friends to this event,
learn a little something about problem solving,
and get interested perhaps in the field itself.
Now, toward the end of the semester, as you might know, here at Harvard,
as well as at Yale, do we-- once students have a programming background,
we do have a proper hackathon, a 12-hour event, in our case,
during which students can work, ideally excitedly, on their final projects,
their capstone experience.
We have a tradition of ending the evening,
which for us starts at 7:00 PM at night and ends at 7:00 AM in the morning.
But any students who are still awake with enough energy,
we invite to a local pancake place, the International House of Pancakes,
where such memories as these await ultimately
after a long night of actual problem solving.
And then, lastly, do we end our semester with the so-called CS50
Fair, which is really inspired by what some of your own schools back in the day
might have held as middle school science fairs,
where you show off the volcano that you built at home demonstrating
some chemical concept from class.
Well, we have students bring their laptops
and we invite friends, alumni, recruiters from industry.
We turn on some music, we serve some popcorn and candy,
and we invite students and faculty and staff across campus
to exhibit and see our students' final projects.
And so scenes like this are not uncommon.
Every CS50 student has their same laptop or phone on which they're
displaying the work that they created.
We use this too, as an opportunity to potentially recruit new students
to get them interested in what their friends have clearly
created over the course of just three months, in our case.
We include typically a raffle, whereby we give all of our CS50 students
a sheet of paper that has some placeholders for stickers,
and we also give our CS50 students some stickers.
And the idea is that for any person who's
attending that asks them about their final project,
the student should give that person a sticker.
And every sticker represents one entry in a raffle with fabulous prizes,
whatever those might be.
And the goal, honestly, of this raffle is just to grease the wheels socially,
break the ice for students and attendees to give them a fun excuse to go up
and ask about this project and this one and this one,
so that students, again, care and take an interest engaging
with their fellow classmates, staff and students.
So this then was an overview, ultimately,
we hope, of the course's curriculum and some of the why behind it,
some of the technical and curricular decisions behind the languages,
behind the problem sets and more, as well as
a look behind the motivation for so many of CS50's events
that we host here in person and/or online.
Ultimately, again, the goal in explaining all of this
is to enable you as a teacher to make your own informed
decision as to whether to adapt or adopt or neither
of all of these various resources.
But allow us to conclude officially here.
I'll take a-- we have a few minutes of break
ahead via which we can now transition to the next session.
So thank you so much for joining us this morning.
We will be back in just five minutes for our next session.
I'm going to hop off camera, but hop into the chat room.
So if you have any questions for me, I will appear momentarily in the chat.
But we'll see you in five.
This was CS50 Explained.