CS50x Review: Part 3 and Final

Published on:
Feb. 25, 2017

The last third of CS50x took a turn away from C and into Web development. From PHP scripting to Javascript APIs — CS50 covered a lot of ground in relatively little time. This is where the problem-solving skills and self-learning abilities developed in the first few weeks were put to the test.

Weeks 7 & 8: WebDev Crash Course


Week 7 started with an overview of the differences between compiled languages and interpreted languages. Up to this point, all the coding in the course had been done in C and had to be compiled from source code into machine code (1s and 0s)before being run. Interpreted languages instead have their code read and executed by a program called an interpreter (creative, huh?) without ever being compiled. The interpreter actually ends up taking care of a lot of the grunt work that went into writing C, so I could focus more on what I actually wanted to do. If you read part 1, you may remember the difference between writing “Hello World” in Python vs C. Python is an interpreted language and C is compiled, hence all that extra junk.

The interpreted language of choice for CS50x in 2016 was PHP. PHP powers something like 80% of the web. Popular website-building apps like WordPress are written in PHP and can be extended by writing PHP scripts. For 2017 CS50 has moved to Python, and all the problem sets from here on out use Python instead of PHP for the 2017 version of the course.

Week 8 introduced HTML and CSS. HTML and CSS are the languages that tell browsers what to display (HTML) and how it should look (CSS). For example the text of this blog post is written in an HTML document; the info for font, text color, background color, spacing, and just about anything else visual you can think of is in a separate CSS file.

PSET 7: My First Web App


All of this came together in PSET 7. The goal was to write a web site that would allow users to register an account, log in, and trade stocks with imaginary money using real-time stock price lookups from Yahoo! Finance. Users also needed to be able to view their current portfolio, and a log of all past transactions. This meant it was time for a database, which meant it was time for a third language: Structured Query Language, or SQL.

It’s difficult to summarize how this worked without making this blog into a tutorial, but here goes nothing! This webapp was setup following the “Model, View, Controller” paradigm. The database is the “Model”. Its tables represent things in the webapp like Users, Stocks, etc. An HTML template is the “View”. It's a standard-looking HTML page with slots waiting for data to fill them. The “Controller” is a PHP script that grabs data and sends it to the template based on what the user asks for, or what action they’ve taken (like click a “submit” button).

If that sounds complicated, it was much simpler than all the stuff from PSETs 5 and 6. The course does a really good job of breaking each part down cleanly and packaging information so that it’s easily digestible. This was the point where everything started coming together. It was awesome to make something that was so clearly real, visible, and potentially useful.

Week 9: The Last PSET


After covering front-end templating and back-end scripting, the final web frontier was Javascript, and the super-popular JQuery library. Javascript allows you to “listen” for user actions and modify the HTML and CSS of your web-page to show new content that’s generated on the fly. JQuery is a Javascript library that allows you to access and navigate between HTML elements easily.

PSET 8 was to take a blank Google Map, and make it load a list of articles from Google News for any zip code visible. The PSET provided source code for everything except the Javascript calls to Google’s APIs. Because the lectures only went over Javascript syntax briefly, this PSET really tested your self-teaching ability. I have to say, the struggles in weeks 5 and 6 really paid off. For a final assignment this PSET was kind of a breeze.

Weeks 10–12: Cliffhangers


The final weeks of CS50x consisted of introductory teaser-style lectures about different advanced Computer Science topics. Each lecture was presented by a guest lecturer who was an expert in that field. There were talks on Artificial Intelligence and Speech Recognition, Robotics, and even on using Data Science programming in Archeology.

While these lectures were interesting, after a few of them I really missed Dr. Malan's speaking style. He has some serious pizazz as a public speaker. The most interesting lectures were actually the final week’s “shorts”. Different CS students at Harvard gave full-length lectures on topics they’re currently working on. There were so many that I really appreciated the chance to dive more deeply into particular subjects I thought were interesting.

Final Project


CS50x concludes with a final project that is entirely up to the student. With no guidance other than watching videos about what other students have done, or checking out their projects on Reddit or Stack Exchange, the final project is to build whatever you want. I thought this was brilliant. Programming and development basically come down to making stuff, and eventually you have to think of stuff to make.

For my final project, I first attempted to write a Reddit Bot. It failed horribly, and will probably be the subject of a future blog post. After that I made this blogging app. While what you see on my website is mostly static content, there's a fully featured admin page where I can post blog entries or edit most of the text on my page without having to re-write HTML or restyle it with CSS. I can log in to my admin site from my cell phone from anywhere and add random facts about myself to my “About” page, or change the link addresses on my “Contact” page.

My next blog post will probably be about how I built this site, but for now I'll leave it at this: building this website was a great learning experience that let me use what I learned in CS50x and teach myself some new tricks. The research skills I developed through this course and the concepts it drove home will carry into every programming project I ever take on.

Conclusion


CS50x is absolutely amazing for something that’s free. It’s still a steal if you want to buy the $90 certificate. The content has surprising breadth and depth for a single semester. David Malan is a great lecturer and has organized the information presented exceptionally well. Aso, the production value in this course is unbelievable. It must cost a fortune in Harvard grant money/tuition. If you are thinking about getting into programming or have worked through an intro book and don’t know where to turn next, look no further. 10/10. Would highly recommend. Start Today.