SPEAKER 1: All right. Hello, everyone. And welcome to the CS50X Educator Workshop. Can everyone hear me OK? 

So nice to see everyone again. Only two sessions to go. Today, of course, we'll be joined by CS50's own Brian Yu for a look at CS50W or CS50's web programming with Python and JavaScript, the new and improved version for 2020 and beyond. 

Tomorrow then will be Brian, again, introducing us to CS50 AI, an introduction to artificial intelligence using Python. Before we dive in as usual, please feel free to say hello and where you're from in the chat, particularly to any new faces and names. Might anyone be comfortable saying hello on camera as well to everyone? Rampur, do you want to start things off today? 

SPEAKER 2: Yeah. Hi, David. 

SPEAKER 1: Nice to see you. Do you want to tell us a little something about yourself that you haven't told us already? 

SPEAKER 2: Yeah. Yeah. Sure. Yeah. I love programming. I have been teaching web programming from Boston three, four years. So I'm very much excited to look at what is programming that you are going to cover today. 

SPEAKER 1: Great. Well, likewise. And for those who are new today, where are you from? Oh, we lost you. 

SPEAKER 3: Professor, this is [INAUDIBLE]. I did your HPAC program, EDSS class. Glad to be here. Thank you very much. 

SPEAKER 1: Yeah. Nice to see you, the whole family, too, I see as well. 

SPEAKER 3: Yeah. He's learning CS50 as well. 

[LAUGHTER] 

SPEAKER 1: That's great. Nice to meet him as well. Rampur, shall we come back to you, since everyone is dying to know where in the world you are, I think. 

SPEAKER 2: I am from [INAUDIBLE]. 

SPEAKER 1: Wonderful. Thank you. Sorry for the muting and unmuting there. 

SPEAKER 2: I teach engineering graduates. 

SPEAKER 1: Excellent. Excellent. And let's see do we have any other hands who would like to get things started? OK, Ramon. The floor is yours. And do give us a really enthusiastic transition to Brian. 

SPEAKER 4: Hello, everyone. My name is Ramon. I actually was an information systems major. But then I dropped out to work as an English teacher and focus on the translation of the course. And I'm really excited for Brian's session today. The CS50 web programming was the second course I took. And let's get started. Let's jump right in. 

SPEAKER 1: All right, Brian. I think the floor is indeed yours. 

BRIAN YU: All right. Thanks very much. Welcome, everyone. Good to see familiar and new faces today. 

So today what we're going to be talking about, as was mentioned, is CS50W, which is CS50's web programming with Python and JavaScript. This is a class that picks up right where CS50 leaves off. So at the tail end of CS50, students are introduced to a little bit of web programming using Python to write Flask web programs and introducing students to SQL to be able to create databases as well. 

So CS50W web programming with Python and JavaScript takes a deeper dive into the design of web applications and looks at how to build them and how to think about organizing databases, how the different languages and frameworks can interact with each other, and looking at some modern tools and libraries for web application development, as well, to hopefully give students the tools and resources that they need to then go forth and build web applications that are interesting to them, for example. So what I thought we'd do, just to get a sense for who you all are and whether you some of you may have taken the course before-- so the course itself is available as open courseware and is also available on EdX. I'll paste the link for that course in the chat, too. 

But I thought I'd ask each of you, if you could, to fill out this poll, that if you open up the chat, I'm about to paste in the link to a poll. Curious to hear if you've taken any of CS50W before. So if you've ever started any of the lectures or started any of the projects, there are actually two versions of the class, a 2018 version and a 2020 version of the class. So if you could just fill out that poll, it would just be useful. 

It looks like everyone so far has not taken the class before. All right, so in that case, hopefully today will be a good introduction then to tell you a little bit about what the course is, what it's about, and what it is that students learn in the course and how you, then, could potentially teach this course and this curriculum to your own students as well. So we'll give people another couple of seconds to answer the poll, because it looks like about half of people have answered it so far. Give people a couple more seconds. 

And all right, so it looks like vast majority of us have not seen any of this course before. So hopefully today will be an opportunity to get a little more familiar with the curriculum. And we'll start just by talking about the syllabus and diving into what the course is all about. 

Definitely at any point today if you'd like to ask a question about anything, feel free to raise your blue hand in the participants' window. And I'll call on you and you can ask a question. If you'd like to ask questions in the chat, as well, I'm keeping an eye on the chat all throughout today's session. So if you have any questions about the material, what we teach, why we teach it, and how we teach it, definitely feel free to ask away. That's what this session is for. 

So with that in mind, let's go ahead and start talking about web programming with Python and JavaScript. And just to set up some context, if you look online, you will see two different versions of the class. The class was first offered in 2018. So we had one version of CS50W that was released then. 

And more recently, over the course of the past couple of several months, we've been reproducing and recreating a new and refreshed version of the course as well, so CS50W 2020, so two different versions of the course that you might see. I'm going to be focusing today on the latest version of the course with the latest material and the latest curriculum. But if you're curious about the differences between the two versions, between the web programming class as offered in 2018 and this year's version of the web programming class as well, the new version of the class focuses primarily on Django as the web framework that we use with students. And I'll talk a little bit more later today on what that is and why it's useful. 

Whereas in 2018, we focused on two different Python frameworks. We focused on both Flask and Django. The 2020 version of the course just focuses on Django as its backend for designing web applications. And that lets us spend more time to go into more detail into the features that Django offers. And I'll talk about some of them there. 

But it includes things like making it easier for students to create forms, which are quite common on the internet if students are creating applications that let users fill out information and submit information or data to your application, creating forms very quickly and easily can be quite helpful. The 2020 version of the course also spends some time introducing students to modern front end libraries. So libraries are in frameworks like React, which is a popular framework now for building very dynamic and interactive user interfaces. It's a framework developed by Facebook, quite popular all across the internet now for just being able to quickly create very interactive user interfaces where things are responding to new data, things are responding to user input, and it's a common paradigm for programming now as well. 

And then we introduce students to some more newer tools as well. GitHub Actions is a more recent tool offered by GitHub. It didn't exist in the same form back in 2018 that we now introduce. And the projects are all new, too, in 2020 and that are very much inspired by the types of web applications that are quite common in industry that students might encounter or use on a day-to-day basis, things like websites like Amazon or Gmail or Google that are very common. We ask students to think about how those applications might be implemented and to recreate a smaller version of those sorts of websites that have similar features, just to give students a better understanding for how those web applications might work, how they might be designed, and ultimately, how students might be able to create similar things of their own, too. 

So those are the big picture differences between the two versions of the class, if you happen to see those two versions around. There are also some smaller changes. In particular, there's some code from the 2018 version that was a little bit outdated, APIs that no longer worked over the course of those two years that have been refreshed and updated. So the 2020 version of the course is the version that you should be looking at if you were interested in taking or teaching this particular class. 

So with that, I don't see any questions so far. But we'll go ahead and dive right into the syllabus. I'll talk you through what it is this course talks about, where it picks up from CS50, and what the new things are. 

So the first topic that we cover, the very first lecture and the first project introduces students to HTML and CSS. So if unfamiliar, these are two languages that are commonly used for creating web pages. Where HTML is used to describe the structure of a web page, defining where the paragraphs are, where the images are, maybe if there are tables on the page, or if there are videos on the page or other content on the page. And then CSS, or Cascading Style Sheets, is another language that is used in order to be able to style those web pages, to be able to create things in different colors, different fonts, laying things out with the appropriate spacing. So they work very well together where we use HTML to describe the structure of the page and then CSS to describe the aesthetics of that page, to describe how each individual element inside that page should be structured. 

I see a question in the chat. Is React used together with Django or interchangeably? We'll talk about React a little bit more in a bit. But as Shristi answered, which is absolutely correct, they can be used interchangeably. 

Because we draw a distinction between what the backend frameworks are and the backend code of the application, so the code that might be running on a web server, like Google's web servers or Amazon's web servers, for example, as contrasted with the front end of the web application. So that's the part of the application that really is what's showing up in the browser window. It's maybe the JavaScript that has users interacting with various parts of the page. 

And so Django is what we might consider to be a backend framework. It's a framework that helps us to build out the structure of the web server and describes how the server is handling those requests. React, meanwhile, is a front end framework. So React describes how elements will appear on the page to the user. 

And so these two can interact with each other. So React on the front end can communicate with Django on the backend, or really with any other backend framework, so things like Ruby On Rails or Node.js are other backend frameworks, if those are familiar to you as well. Those can be used with React, too. So a lot of these components and ideas that we show students can be mixed and matched. 

They don't need to use the entire same set of tools that we show in the course. But we give students one possible set of tools that they can use to do both the backend and the front end. But more on that, certainly, when we get to it. 

All right, so we first introduced students to HTML. This over here is what HTML looks like, if you're unfamiliar with the exact syntax. But in short, it's composed of a series of nested HTML tags, where we might say that this is the title of the page and here is the body of the page. And you might have paragraphs inside the body of the page and images that are inside the body of the page. And so HTML is this mark up language that lets students describe the structure of the page. 

And we don't introduce students to all of the various different HTML tags. There are certainly too many to cover in any one lecture, for example. But what we do show students are some of the common HTML elements, things like lists and images and paragraphs and other common HTML elements, headings and the like. And then point students towards resources where they can then find the other tags for whatever problems that they're trying to solve. And many of the projects will involve asking students to do a little bit of work on their own to try and figure out what's the right HTML tag to use here and how do I learn how to use it. So we try to equip students with the tools in order to do that. 

When teaching middle school kids, should they learn HTML first? Or can they learn each HTML5 directly? So HTML5 is just the latest version of this particular standard for describing the page and things don't change all that much between HTML versions. 

And for the most part, they're very backwards compatible. The things that used to work in previous versions of HTML will often still work in HTML5, although some of the best practices will change a little bit from version to version. HTML5, in particular, just introduces a lot of new elements. So it makes it easier to be able to create autocomplete dropdown lists and to be able to create video elements and those sorts of things that might have been harder to do in previous versions of HTML. So certainly fine to just introduce students to the latest version of HTML. They don't need to be using all of the latest tags and all of the latest elements, but this at least allows them the option of doing so if they choose to, for example. 

Another question in the chat, will you please talk about Django deployment at the end of the presentation? Yes. So we do talk a little bit at the end of the course as to how you might take an application and deploy it to the internet and what concerns around scalability and security students need to be thinking about when doing that. 

There are a number of options for how to deploy a Django application. I think the simplest one is to deploy to a service called Heroku. Heroku is a web application hosting service that makes it pretty easy to take a web application and just put it on the internet. It's also nice because there is a free tier for Heroku where, for free, students can put their website online so that anyone can use it. And they can also get access to a free Heroku database, too, that lets them for free store up to 10,000 rows inside of a SQL database. 

So that tends to be a common option for students when trying to deploy Django applications. And there is even-- I don't have the link offhand, but maybe someone can find it-- a Django-Heroku-Python package that you can just install into your Django application, which automates the process of setting up all the settings for Django as well. That just makes it really simple to take a Django application and put it online. 

There are other options, too, many good options for doing so. But yes, so thank you, Arturo, for pasting the link for that in the chat. There are many options, but Heroku tends to be the one that I recommend. It's just an easy way to take applications and put them online. 

And that's a lot of fun for students. Especially with final projects, for example, where they can then take their application, put it online, and let friends and family access it and run it and interact with each other as well. 

Another question, which HTML editor the students use? We leave it up to the students. In class itself, in the lectures, I demonstrate using Visual Studio Code from Microsoft. 

In the 2018 version, I believe I used Atom, which is developed by GitHub. So both VS Code and Atom are both very popular text editors that work quite well. But there are others, as well, that I happen to know of. Sublime Text is another popular text editor, too. And Brackets is one I've heard a lot of students using recently as well. Because brackets does, like, a live updating page where, as you type HTML code, you can see exactly what the HTML looks like on a Chrome window without having to refresh the page over and over again, so a bunch of good options. 

Yeah, Atom, also a very good choice, PyCharm, another good one, yeah. So there are a lot of different text editors. We happen to use VS Code in the lectures. But students can really use any text editor of their choosing, whatever they like, and whatever they're comfortable with. 

If you can't hear anything-- actually, I'm going to say this. But someone should type this in the chat if they can't hear it. In the bottom left of the Zoom window, there should be a join audio button that you have to click. And you have to click the join audio button in order to be able to hear the session. So if someone could please relay that message to Azimat, who's asking in the chat, that might help. 

How can one determine whether to use Django versus Ruby versus Node.js? Ultimately, it comes down to some of the tools are better for certain things. Node.js happens to be quite good at dealing with asynchronous types of activities that we'll talk a little bit more about later. 

Ultimately, it comes down in large part to preference in language and preference in what packages and tools are available. We happen to just stick with Python for the most part in this class. And Django happens to be probably the most full-featured Python web application tool out there right now and one of the most popular. 

All right, so in addition to just teaching students the syntax of HTML, we also show the Document Object Model, which is just a way of structuring an HTML page and defining the various different components and just thinking about things in a bit of a more organized way as this hierarchy of nodes that are included with each other. And we'll talk a little bit more about this when we get to JavaScript as well. 

All right, a bunch of questions-- a link for the slides? The slides are on the notion page where you found the invitation for today's session. So if someone could paste the slides there, as well, that would be great. 

Question-- when I upload the app to Heroku with SQL database, the data disappears. Let me delay that question a little bit to when I talk about SQL itself, which is coming up. It's one of the topics of the course. And if I forget, just remind me again. 

Is it possible to teach this course to teenagers before teaching CS50X? So we assume in this course a little bit of prior programming experience in Python is really the main prerequisite. So if students have taken CS50X, they're more than well-equipped to be able to take this class. Because they've already seen Python and potentially even seen a little bit of web programming, as well. 

It's possible for students to take the class without taking CS50X. And students definitely have done that before. But we do assume some prior programming familiarity, so familiarity with things like loops and functions and conditions and variables and data types. Those are things that we introduce. But we don't introduce them from scratch. 

So if students have a little bit of prior background, even if it's not in Python, then they may be able to find that this course is accessible to them. But we're not going to explain all of the programming fundamentals from the ground up the way that CS50X does. We do assume a little bit of prior programming familiarity first. 

What is the best backend for websites with ML modules, so machine learning, or ML? Again, this is going to be something that people are reasonably going to disagree about. But definitely Python, I would say, is a very popular language for data science and machine learning nowadays. 

Especially with all these great Python libraries for machine learning that now exist, some of which I'll be talking about tomorrow when I talk about the artificial intelligence course. But I tend to think Python is a very good choice for machine learning and for integrating machine learning with web applications, too. So another good reason why Python is great for backends of web applications. 

Do students develop projects locally or remotely on something like Repl.it? We have students develop locally. And this is a difference from CS50X itself. Where for CS50X, most of students' work is inside the IDE. That way everything is installed for them. They don't have to worry about setting up their own local environment. 

In the web programming class, we encourage students to set up their own programming environment just to get comfortable with doing so, to get more comfortable programming on their own computer. So that's something that we have students do, install their own text editor, install all of the frameworks and libraries on their own computer so that students can really get practice with that on their own, too. 

Is their list of concepts required to make CS50W a more user friendly class to take? Really, the one prerequisite that we have is prior programming experience, ideally in Python, since that's the language that students are doing the most work with. But here at Harvard, at least, we generally ask that students have one or more years of prior programming experience in any programming language in order to take the class. 

All right, so after HTML in this lecture, we introduce CSS, which is just a way of styling a web page. So this is what CSS code might look like, for example. To say, take a heading and change its color, center the text, and so this is a lot of fun for students, as well, to be able to customize the style of a page, to make it look the way that they want that page to look, for example. 

And then we dive a little more in detail into how all of this is working, deeper than we do look at in CS50 itself, where CS50 introduces CSS. But in this class, we take a little more of a critical eye and think about things like how does specificity work? What if there are two different CSS selectors that are saying-- one says you should make this red and the other one says you should make this blue. 

How does it work? It turns out it doesn't just go, like, top to bottom order. It's looking at how specific these various different selectors, as they're called, are to try and identify how particular elements work. So we talk through some of the logic for that as well. 

And then we also always try to take an eye towards modern web design practices. In particular, things like responsive design, making sure your web page looks good both on desktop and on mobile devices, for example. So if this is what your website looks like on a desktop device, it might look a little something like this if you just squished it down into a mobile device. But that's probably not a great user experience in terms of what the person on the phone is going to see. 

Because the text is probably really small. And you've probably seen, if you use a mobile phone's web browser, some websites that aren't really optimized for mobile phones. Generally, websites are getting better about this. But we talk about strategies for doing that. How do you style your page so that it looks good on desktop devices but also looks good on mobile devices as well? And so we talk about strategies to make that work. 

And we also tell students about ways that they might not need to do all of this from scratch. But before I get to that, Joe, I see you have your hand raised. If you'd like to ask a question? 

JOE: Yes. Quick question as you start developing, because I notice some apps work better in Chrome or won't work at all in other browsers, is there any work you do to make it browser agnostic or browser specific? And then I have a second part question, do you do a session where you help us set up VS Code with, like, style50, even if it's available as a package and all those things in the text editor? 

BRIAN YU: Yes. So great questions. So first with regards to the style50, there was a session last week-- I think it was last Wednesday-- that was all about tools that you can install on your own computer. So how to install, like, check50 and style50 on your computer. And the recording for that is available on the notion page. So if you take a look at that, we go through how to install all of the tools in that session if you want to take a look at that. 

And then, as for-- sorry. Remind me what the other question was, the first one that you asked? 

JOE: Chrome versus other browsers. 

BRIAN YU: Oh, yes, web browser that you use. So different browser support, different features of HTML and CSS, for example. In the lectures, we try to demonstrate features that will work across all major browsers, at least in the latest versions of those browsers. But there are some things where the rules may vary from browser to browser, where you need might need to use slightly different CSS instructions to be able to style different pages correctly for different browsers. 

And we refer students to some pages like W3Schools is a website that has great documentation about this, about how do you make sure the style is going to work across all of these various different browsers. So we refer students to those resources as well. But in lecture, I'll predominantly use Google Chrome. But most of the styling we show should be fine on other browsers as well, at least the latest versions of those. Charlene, I see you have your hand raised if you'd like to ask. 

CHARLENE: Yes. Can I just clarify, so all submission, then, is going to be via [INAUDIBLE]? 

BRIAN YU: So what we have students do is we have students upload their code directly to GitHub. They can do that in one of two ways. They can either push their code to GitHub. And I'm going to talk in a moment about what we teach students about Git and GitHub. 

Or they can just you submit50, which is the tool that I talked about last week that will upload code to GitHub directly. So if you want to, you can adopt that exact same submission format. Where you use submit50, you can use submit.CS50.io, which I introduced last week, to be able to collect submissions for the class. But if you want to have students upload their code directly to you or use a different system, that's absolutely OK as well. So we give you the option of using our tools. 

CHARLENE: So sorry. In the scratch module where you just upload to the file with a search in slug, I did find that easier. And I think students might find that easier. Is that an option? 

BRIAN YU: Yes. Also an option, so in the same way that you can upload to GitHub using submit.CS50.io's upload page, just by choosing the files you want to upload, you can do the same thing for this class as well. Just choose the files that you want to upload. Usually, you just zip them first into a compressed file to make it easier to upload. But you can use the exact same tool you use for uploading scratch projects to upload these projects, too. 

CHARLENE: And the slug, do I have to create that slug myself? Or will that be it? 

BRIAN YU: We have already created the slug. Now the projects for this course are not automatically graded, unlike CS50X, primarily because we give students a lot of freedom and flexibility in how they implement these projects. They can do it in so many ways that it would probably be difficult for us to define a very fixed set of things that we're checking for. But we do already have submission slugs that you can already use. And those are on the open courseware website that you can use if you'd like to have students submit those projects. 

CHARLENE: Thank you. 

BRIAN YU: Yeah, of course. Do students have a background in client and server knowledge, what the front end means, what the backend means? We explain that to students. And I'll have a slide upcoming about that, too. 

Question is could CS50W projects be completed locally on a Chromebook? It's a good question. I'm not 100% sure on that. But my guess is it would be very challenging to do exclusively on a Chromebook. Because it would probably be difficult to get all the necessary command line tools installed. 

That's my guess. I haven't actually tried. But if you follow up, I can maybe do a little more digging to figure that out as well. 

Does the VS Code have a built in package for style50 or should we use another style editor? VS Code-- style50 is a command line tool. So there is no style50 VS Code plug in. 

But there are other Python plug ins VS Code that do styling. I'm forgetting their exact names. And style50 is really checking for the same types of things. And so other tools should be available, they're just not CS50-specific tools. 

Oh, yeah. If you have something that's running Linux, that should absolutely be able to run all of the programs, all the software that we need for the course as well. If you're on Windows 10, you should also be able to run-- you can install Django and you can install Python on Windows 10 as well. The tricky part might be submitting. 

Running submit50 does not work natively on Windows 10. So you have to either upload via the web interface, the way I was just talking to Charlene about a moment ago, or you can install the Windows 10 Subsystem for Linux. There are instructions for that on Microsoft's website. But if you install the Windows 10 Subsystem for Linux, that will let you run submit50 on Windows as well. 

All of the course material, everything that I'm going to be talking about, all of that is available on the open courseware website. So the link is at the beginning of the chat and also on the slides that are coming up, too. All right, so just to wrap up a little bit about HTML, CSS. 

We introduce students to Bootstrap, which is basically a library that contains a whole bunch of already existing CSS code and HTML code and JavaScript code, just to make it easier to create a nice looking modern looking website very quickly so that students don't have to build everything from scratch. And Bootstrap is quite popular for styling pages on the web. You've probably seen this sort of styling before. 

And then finally, in this part of the course, we introduce students to Sass. Which is an extension to CSS that add some additional features to CSS as well. It adds things like variables to be able to factor out common code, so just teaching good design principles for style. That often, if you're building a big website that has a lot of different style sheets, using something like Sass to keep track of variables and to keep track of repeated code can often be quite helpful. 

So that's the beginning of the course, HTML and CSS. The next thing that we talk about is Git and GitHub. And so what it is is it is a piece of version control software that's useful for a number of things. So first, we don't assume any prior knowledge of Git before. But we start by talking about what it is that get can be used for. 

So it's useful for things like tracking different versions of your code, that if you're making updates to a web application, you're often going to want to keep track of every feature you add, keep track of every bug that you fix so that you can go back and see the entire history of this project. And this is useful not just for web applications, but for any time you're writing code more generally. But we introduce it primarily in the context of creating those web applications. so tracking code, one common use for Git. 

Also useful for collaborating on code, that if you're working on a team, you're not designing the web application alone, but you're working on some features and you have a collaborator who's working on other features, and you two want to work together, Git has a lot of features that make it much easier to be able to collaborate and work together on that same code base. And then finally, it's useful for experimenting. It's useful for being able to test changes to your code and experiment with it a little bit before deploying it, before saying, yes, this is final, to be able to experiment, get feedback. Try different things out separately before what we call merge these changes all back together. 

All right, so questions that are coming up, is it possible to use Django in Python for web development without needing any JavaScript? Yes, absolutely. In fact, the first couple of projects in this course exclusively just use Django and Python and don't use any JavaScript. 

JavaScript we primarily use on the front end for being able to create some more interactive user interfaces. But it's definitely possible to create a web application that works with just Python and Django. You might not be able to take advantage of all of the features of modern front end web development without JavaScript, but you can definitely still build applications. And that's where we begin. Before we introduce JavaScript, we start with just Django and Python. 

A couple of questions about GitLab. GitLab is just an alternative to GitHub. Both are services for storing Git repositories on the internet. We tend to use GitHub in this class primarily because it's more industry standard and a bit more popular. But if you learn one of these tools like GitHub, learning to use another tool like GitLab or Bitbucket or the various other different services for hosting repositories is not too challenging, because a lot of these tools are very similar in terms of the features that they offer. 

So we teach students how to use Git. We teach students how to make commits, which are effectively saving their code, saving a version of their code. And as I mentioned just now, we introduce students to GitHub, which is a website that allows the storage of Git repository so that you can see other people's code online, you can collaborate on code online. And it's just one of several tools that are available for making it easier for students to be able to collaborate together. 

Do CS50W projects require a local web server? We'll talk about Django in a moment. But in short, when you run Django, Django will start a local web server so that students can experiment with their code running locally on their own computer. 

Another question is will React include things like Redux and Native? So we'll talk about that a little more when we get to React. But in short, no. We introduce React just as one part of one of the lectures, just to briefly give students a sense for what the syntax of React is like and what components are and how to use them. I'll talk about that a little more later. 

But we don't dive into a lot of the other extensions that have been made to React, for things like React Native and Redux. Those are probably more apt for a full-fledged programming and React course, whereas this web programming course is designed more to give a high level overview of a lot of the tools that are available without going too much into the weeds into all of the details of React, for example. 

All right, so other things about Git that we teach, we teach students how to push and pull from a Git repository, uploading code to GitHub, downloading code from GitHub as well, or any other Git server, for something like GitLab lab or Bitbucket, for example. And then, what happens if two people, for example, try to both push their code, but there is some conflict? Or I'm trying to push some change that I made and a colleague of mine has made a change to the same line of code. What's going to happen? 

Well, in that case, you've get something called a merge conflict. And we teach students what those are and how to fix them, what they look like, and how you can look at what changes you made, what changes some collaborator made, and how you go about figuring out how to get those pieces of code to resolve this conflict. And then we also introduce students to branching, as well. That this is a tool of Git that allows us to be able to work not just on one branch of a code base, for example, but to split off into various different branches so that we're running different versions of the web application, for example, experimenting with different features. And these branches can eventually merge together as well. 

So especially as web applications might grow with more features and more collaborators, the ability to have different branches, each of which is keeping track of different code can be quite helpful. So we introduce students to these tools in the hope that, for this course and for in the future, they'll be able to use tools like Git to be able to be better at managing their own code, to keep everything organized, to keep track of their changes, to be able to hunt down bugs more quickly. 

There's a great feature of Git called Git bisect, where if you have a bug in your application, and you're not sure where in your application, when in your commit history you introduced that bug, you can effectively run a Git command that will automatically do a binary search through your Git repository. It will check the middle commit and say, is the bug there? And if it's not, or if it is, we either jump forwards or jump back. And you can very quickly triangulate on where it is the bug was introduced in order to then go about fixing it. So a lot of great tools that Git lends itself to that students can take advantage of with just a little bit of familiarity with some of these basic commands. 

So those, then, are the first two topics of CS50W, HTML, CSS, and then Git. And let me take a look now and see if there are other questions that have come up. In terms of whether to use Amazon or Google in order to host web applications or store data, both are definitely quite popular. It's probably going to come down to personal preference, because both are very extensively used. 

Do we introduce web servers? So we introduce web servers in the context of just something like Django's web server, which is going to be running the-- process handling the requests, and then responding to those requests. And we talk a little bit about servers in the context of scalability. But a lot of the details about some of the lower level setup we don't talk about, just by introducing students to tools they can use to automate a lot of that process, to use tools like the Heroku tools I shared earlier that allows for very easily taking a web application and deploying it to the internet, for example. 

All right, so moving on, the next topic we introduce students to is Python. We assume that students have some programming background. So we don't introduce everything from the ground up. 

But we do introduce students to the fundamentals of Python syntax, in case students might not have seen Python before but have seen other programming languages, or potentially have seen Python, but it's been a while since they programmed in Python, maybe. So we start by introducing variables and types, talking about the different types of values in Python can have, things like integers and floating point numbers, strings, Boolean values, the special None value that exists in Python that shows up in a lot of different contexts. So we introduce students to that, too. 

We also introduce students to object-oriented programming. So a common paradigm used in programming for dealing with objects and for dealing with actions, in other words, methods that you can perform on those objects. So we introduce students to that as well. In particular, because it's going to come up later in web program. That if you think about dealing with web applications that deal with a lot of data, for example, you're often going to work in an object-oriented paradigm. 

Where you have one class, for example, if you're familiar with object-oriented programming, that represents each of your different categories of data that your web application is storing. So we start in Python by introducing what object-oriented programming is and some of the basics of how it works so that students later can use these sorts of ideas inside of their web applications as well. 

We introduce students to Python data structures, things like dictionaries and tuples and lists and sets, all of the various, different, common, built in Python data structures that students are going to face that serve a lot of different purposes. And we use all of these in the context of web applications over the duration of the course. 

And then we introduce some of the more sophisticated features of Python that are not focused on as much in CS50X itself, for things like exception handling for dealing with errors. Web applications are inevitably going to come across some sort of error where someone tries to do something that the programmer didn't expect. And so being able to handle those errors and deal with them appropriately is something we first introduce just with command line Python, but then translate into the world of web applications as well, showing students how to deal with errors that might come up as they build their web applications and how to deal with that as a result. 

All right, so some questions that have come up, is it better to use TensorFlow or Python for the backend of websites with embedded machine learning? So TensorFlow, though you can use TensorFlow with a number of languages, TensorFlow has a Python library such that in Python you can install the TensorFlow Python package, such that from your Python code you can run TensorFlow code. So they're not mutually exclusive. They're often used together. 

I will talk a little more about TensorFlow, in particular, tomorrow when I talk about the artificial intelligence class that does introduce students to TensorFlow, which is a very popular machine learning tool that's used in modern machine learning. We don't introduce students to TensorFlow in the web programming class. But you could imagine that if students had this web programming background, understood how to build a web application in Python, and then had a little experience with using Python to do machine learning, that it's not too much of a leap to then be able to combine those things together, to be able to create a Python web application that also supports some sort of machine learning that's using a neural network, for example, or something like that. 

For the question about Docker, I'll talk about that a little bit at the end when we get to scalability and security. Can the code notebooks be downloaded into Jupiter notebooks? So we don't offer Jupiter notebooks for this Python part of the class. But we do make available all of the source code. So if you would like to create a Jupiter notebook out of all of the source code files that we provide to you, you're certainly more than welcome to do that. 

Can you please speak more about the use cases for using Python for web development? Is it used for querying, massaging data, or presenting information on websites? Python just happens to be a very popular language that's gaining a lot of usage, especially in web programming. But in particular, I find it useful because of the libraries that you can install into Python. 

So not only is it a relatively straightforward language in terms of the syntax, but there are so many, now, Python libraries that do so many things, in particular, for things like data analysis and machine learning, that all of the tools that you use for Python and data analysis, you can then translate to a web programming context. So that, I think, is one of the nice advantages. 

And I also just think that among the modern popular languages, I think Python is one of the easiest to pick up if you're just beginning. Certainly JavaScript is also popular for designing backends for web applications. But in my own personal experience, I found that beginners struggle more with trying to build applications in Node.js just because of some of the quirks of JavaScript syntax and some of the things that just aren't quite as intuitive, in my opinion. 

But reasonable people will disagree about that, too. And there are certainly ways to introduce students to web programming in a bunch of different languages. We just happened to use Python. 

What's the name of the GitHub tool that detects where a conflict or a bug was-- what commit a bug was introduced in? It's called Git bisect. It's just a command in the latest version of Git that you can use for that. 

What is a good way for students to learn Python to be able to fulfill the prerequisites for the class? One easy way is that CS50X itself has a Python lecture. So that Python lecture and the corresponding problem set introduces students to a lot of the fundamentals of Python syntax, gives students practice with creating programs in Python, for example. So getting that familiarity there and, in particular, maybe even taking the web track of CS50X to get experience using Python for web programming, all of that can potentially be good practice as well. 

All right, so we've gotten a lot of questions about front end, backend. What exactly are we doing on the backend? So that gets us to the next part of the class. The next part of the class introduces Django. 

And what Django is is it is a web framework written in Python. If you're familiar with Flask from CS50X, Django is very, very similar. And a lot of the syntax will look similar. 

But it's far more full-featured. There's more capacity that Django has to be able to create more sophisticated web applications, especially web applications that interact and deal with a large amount of data, for example. So all of that comes with Django for free, in effect. And we explore some of the features that Django gives us just to make it easier to be able to set up a web application very quickly. 

So the first thing we introduce students to in this lecture is HTTP, the Hypertext Transfer Protocol, which is just the protocol that's used for communication over the internet, communication between a client, like the user's computer, and some web server, for example. As you might make requests to some web server and expect back some web page in response, for example. And you're probably familiar with HTTP, perhaps in the context of HTTP status codes, for things like 404, if something is not found, or 500 if there's an internal server error. 

So we introduce students to these sorts of status codes and what they mean in the context of web programming in addition to some that students might not have seen before, like 301 for if the user has been redirected, for example, or 200 if everything was OK and the page was loaded just fine. Ramon, I see you have your hand raised. I can pause now for a question. 

SPEAKER 4: Yeah. My question regards the drop of Flask in favor of Django as the backend language in the versions. But I would just like to say that the change I like the most between the versions was the fact that in the new version, the GitHub lecture comes after the HTML and CSS lecture. In the previous version, the GitHub lecture was the first one. 

But I thought that was kind of weird. Because the students didn't have code yet to make versions of. So I like this change in the new version. 

Anyways, my question regards Flask versus Django. I was wondering if in this new version, you guys wanted to make students able to create more complex projects in one framework, as opposed to be able to create intermediate level projects in two different frameworks? Was that one of the reasons for sticking to one framework this time? And if that reason is correct, why do you guys favor Django over Flask since both are still widely used in the industry? 

BRIAN YU: All great questions. So first, on the topic of the ordering of the lectures, yeah, we also found that it was better to first introduce HTML and CSS so that students could start building their web pages and then introduce the version control tools they could use then afterwards. So that is a switch between the 2018 version and the 2020 version. And we just found that that helped students to get started more quickly. 

So I'm glad you like the change. I like the change, too. I think the ordering makes a little bit more sense that way. 

As for the decision to just focus on one web framework instead of two, there are a couple of things that motivated that decision. One was just that having students write a bunch of programs in Flask and then translate to Django ultimately created a fair amount of confusion. Insofar as the frameworks themselves are fairly similar in the syntax, but there are slight nuances in how the templating works and how particular features of the URL routing worked, for example. That there was often some syntax confusion where students would try to then be writing Flask-like code that they knew that worked in Flask in Django, and they were having to relearn everything that they had just learned in Flask as well. So there was that element of confusion as well. 

And the other part of it is that by focusing on just one framework, we're able to introduce more features of that framework. And we just have more time to really get a better understanding for that framework than we did when we were splitting our attention between two different frameworks. So in the 2020 version, I've been able to talk more in the lectures about common features of Django. 

Things like automatically generating forums and automatically validating forums, which I saw a lot of students doing manually before, where they were manually checking to make sure that all the form fields had the correct types of values. Where Django can do this stuff automatically, but in the past, we didn't have time to really get into that. So the 2020 version tries to spend more time on these common features, now that we have that available to us. 

As for why we picked Django instead of Flask, in particular, it has to do with Django taking care of a lot of the more challenging parts of Flask. That flask doesn't have a built in way to do things like creating models for a SQL database or for updating that SQL database with what are known as migrations. You have to install third party packages to do that. Whereas Django comes with all of that built in. 

In Flask, if you want to be able to manage your database via the web, you have to build an entire part of your web application for managing all of that data. In Django, Django comes with a built-in admin interface that lets you modify all that data on your own. So it just made a little bit more sense to, from the beginning, use Django to be able to build these web applications. 

Yeah. Migrations-- someone's mentioning this in the chat-- are very tricky in Flask. And they don't work very consistently or reliably, in my experience. And Django handles migrations more cleanly. It's just built into Django itself. There's a lot of documentation and support available for it, too. Joe, your hand is raised, too. 

JOE: Because you mentioned object-oriented programming and classes, do we just need to understand them? Or will we need to build classes as part of this class? 

BRIAN YU: So the classes that students will build in the class are classes that basically define-- that represent tables inside of their database. So we'll give students some examples that they can model their own classes off of, and that's generally what students do. They're not the most complex of classes, because a lot of the functionality is built in already. But you do need to have, like, methods that are associated with those classes and some variables for storing that data. But we'll get to that when we get to talking a little more about SQL databases. 

So in terms of what Django looks like, I'll just briefly highlight some of these parts. We introduce students to routes. So these are things, like, if you go to Google.com/images or Google.com/translate, each of those slash somethings are different routes that you can visit on a web application. And a web application might have multiple routes. So we show students how to build multiple routes and connect them to their code. 

And then, we show them how to build what are known in Django as views, which are these functions that decide what it is that's going to be shown to the user. And we start simple. We start with what I think is one of the simplest and silliest websites on the internet, which is isitchristmas.com. 

If you're not familiar, isitchristmas.com is a website that tells you whether or not it's Christmas. So if you go to isitchristmas.com-- you can actually try this right now-- you will see a web page that says, "No." So that is what the website does. 

And this tends to be a simple web application that we can then think about and try to ask and figure out, all right, how exactly does it work? How could we write our own version of this, for example, for checking if it's New Year's, for example? So we have students write a view that looks a little something like this. 

If you look at the Python code, instead it's saying, what is the current date? Is it January 1st? And if it's January 1st, then that's going to change the way that we're rendering the view. 

And this is just to introduce students to the idea that web applications change. They're not always displaying the same content every time. But different times you visit the page, they're going to show you different content. 

So it might be as simple as telling you whether or not it's Christmas. It might be as complex as something like your news feed that's showing you different posts based on who's posting things on your news feed, for example. So those views in Django are then connected to templates. 

So here's a template, for example, that is going to either say, "yes" or "no," depending on whether or not it's New Year's. So it has this if then else syntax that's sort of reminiscent of Python, but that lets us decide what it is the user is going to see by specifying different HTML content for the application. 

So that, then, is how Django templates work. And then, as I mentioned, we introduce some more sophisticated features of Django, too, like the ability to automatically generate forms, for example, which is quite common in a lot of applications that students develop in this class and then on their own in the future, too. Questions, then, about Django before I move on? 

I see Andrew posted ismycomputeron.com as well, another similar web site. That one we thought was a little bit too simple. Isitchristmas sort of struck the right balance for the first application that we had students create that used views and templates. 

But yes, that's a great one. I appreciate that that website exists on the internet. And there are a bunch of similar websites, if you find yourself looking around for things like it. 

All right, so we have a web application, a web application that has some server that's running, that's sending some HTML to the user. The next thing we introduce students to is how do you store data in those applications? Basically, every modern web application is storing some kind of data, whether it's all the users in the application or any of the information that's getting shown on the application. So we introduce students next to SQL, a language for interacting with data, models, which are a way of representing that data inside of Python, and then migrations, which are a way of updating our database anytime we make any changes to the type of data that we want to store. 

Question in the chat-- if I understand correctly, Django helps us organize files using Python. Is that correct? Yes, that's true. 

Django has a specific file structure that it tends to use. In short, Django divides its projects into multiple applications or apps, each of which has a separate folder. And that's designed because Django was really meant to allow for developing very sophisticated, very large web applications. And many web applications nowadays have multiple different mini-apps within it. 

So if you think about something like Google, for example, there is Google Search, but there's also Google Images, and there's also Google Translate, and there's also Google Maps. And if you think of something like Amazon, for example, there is Amazon Search. There's Amazon shopping interface, but there's also Amazon Video, and there is Amazon's web services, for example. 

And all of this is Amazon. But it's, like, different applications inside of Amazon that might communicate with each other, but they are separate from each other. So Django is designed to allow us to divide our project into those multiple different parts. 

A couple of people are asking about the architecture that Django uses. Technically, Django uses an architecture called MVT, which stands for Model View Template, where model is the data, views are those Python functions that I showed you, and the template is what gets rendered to the user, like the HTML. This is very similar to MVC, which is another popular architecture, Model View Controller. 

The main difference with an MVT architecture is that in MVT, usually the framework itself is dealing with a lot of the controller code. Where the controller code is usually the code that's interfacing between the database and with the application, like the Python code, for example. In this case, Django handles a lot of that code just inside of the framework itself so that you don't need to be writing a lot of the code that does that connection. And that's one of the nice things about Django. 

So very slight nuance between MVC and MVT. We don't really expect students to understand all the nuances and distinctions there. But since people were asking about MVT versus MVC, that technically is the distinction. And Django would technically fall under an MVT framework instead of MVC. 

Is it possible to use Python's pandas library instead of SQL? Certainly possible-- pandas if great for doing data analysis. And it's especially common for reading from a spreadsheet, for example. As web applications scale, generally you're going to want a full-fledged database to be able to do a lot of the data storage and handling many users using it at the same time. So we introduce SQL for that reason. 

But again, these don't necessarily have to be mutually exclusive. You could store data in a SQL database and then use pandas to do some of the data analysis, for example. And that's totally possible. 

So ultimately in SQL, this data is being stored in tables, where these tables have rows and columns. So the example I introduce in lecture is imagine you're creating a web application for an airline to keep track of flights, for example. So every flight has an origin, where it's going from, some destination where it's going to, and then some duration, how long the flight is, for example. 

And these columns of the table each have different text. So things like Binary Large Object, which is blob, or integers, other numeric data, real number data, text data. So we introduce students to these types that exist in SQL as well. 

There are a bunch of different databases that use the SQL language in response to a question, that they do have slight nuances. So MySQL is one popular one. PostgreSQL is another popular one. SQLite is another popular one. 

We, in this class, have standardized on just using SQLite for a couple of reasons. One, it is the easiest to set up locally. Because it's just stored inside of a file. You don't need to be running a separate database server to be able to run the application. 

And two, because it's the default database that Django uses. When you create a new Django project by default, it's by default going to use a SQLite database. But also, Django makes it very easy to swap out one database for another. That really just by changing a couple of lines of code in the settings file of Django, you can swap out the SQLite database for a MySQL database or a PostgreSQL database, for example, if you're planning to really scale the application. So that's yet another nice feature of Django, just very easy ability to be able to switch what kind of database you're using. 

So we introduce students to the types of queries they can run on that database, trying to select particular rows of that database. We talk about how to design a database for thinking about if you have multiple different tables, how should those tables relate to each other. We talk about how to join multiple tables together. That if you store data across multiple tables in different places, at some point in your application you're probably going to want to integrate all of those tables together to be able to access data that is on multiple different tables simultaneously, for example. So that's definitely something that you can do as well. 

Are NoSQL databases supported by Django? It's possible. I've definitely heard of cases where you can use a NoSQL database, something like MongoDB, for example, with Django. It's generally not their recommended approach, because a lot of the way that Django has really designed its whole model for how data works and how to interact with data is that it's all very table based. That it uses classes to represent each table and variables in those classes to represent columns in those tables. 

So you could use a NoSQL database. But you'd be losing out on a lot of what Django was for and what Django gives to you for free in the administrative interface that Django offers. So generally, a SQL database is going to be recommended here. 

And so there, too, we talk about some of the security concerns that come up with SQL, things like SQL injection attacks and how a hacker might be able to inadvertently run SQL code on your server when you don't intend for that code to be run, and how Django defends against it by using its own ORM, which is just a way of using classes to represent individual Django tables. And we talk about race conditions as well, which is brought up in CS50X, too, for dealing with what's happening if multiple people are trying to access your database at the same time and what potentially could go wrong there. So we talk about how to build your database, but also what potentially could go wrong and how you can guard your application against those potential threats and vulnerabilities that might come up over the course of the lifetime of your application. 

All right, so this alone is enough for students to really start to build a lot of interesting web applications. They can build web applications that render each HTML pages to the user, applications that have a database, so that's storing data with complex administrative interfaces for managing that data. We can generate all sorts of interesting applications just using these tools. And some of the early projects do just that. 

But we eventually want to introduce students to front end web design as well and some of the advantages and tools that are available there, too. Before we get there, there's a question in the chat. When I upload my application to Heroku with a SQLite database, all the data gets erased effectively. 

That's to be expected. Because SQLite stores its database in a file, when you upload your application to Heroku with a SQLite database. it's just going to replace the existing database with whatever file you've just uploaded. So in general, when you're uploading a web application for use in production, something on a server like a Roku, you don't want to be using SQLite as the database. You'll instead want to be using a separate database server. 

And the easiest way to do this with Heroku is to use Heroku Postgres, which is an add on you can add to your Heroku web application that gives you a Postgres database that you can use instead of SQLite. And it's a few, just like one or two lines that have to change inside of your Django application in order to make that shift to Postgres. And Heroku will give you a Postgres database with 10,000 rows for free that you can use with your web application. So if you're deploying it, that's something you have to think about as well. 

Will we run SQL commands in Python? Or do you need a separate application? So you can run SQL commands directly in Python. 

But in Django, Django has, again, what's called an ORM, which is an Object Relational Mapper that basically uses object-oriented programming instead of using raw SQL queries from the user's perspective. So you, instead of writing raw SQL queries, just use Django's built in functions for querying models and adding data and manipulating data, for example. And Django just figures out what the actual SQL commands that should be run are going to be. And so that lets you much more easily create more complex queries without having to write all of the SQL syntax. Because Django is doing a lot of that for you, so another of the nice features that Django gives you. 

Someone's asking my opinion. Do I think Python is going to become more used than JavaScript in the future of web development? I think it's difficult to predict trends in web development aside from saying that in web development and development more generally, like, the languages that are popular are always going to change, that over time new languages are going to become more popular for certain things and less popular for other things. The one shift that I think is particularly interesting that-- we don't talk about it in the course, per se-- but I am very much liking that there are all of these ways now to write code in languages that aren't JavaScript itself, but are like JavaScript and then compiled to JavaScript. 

So my favorite among these is typescript, which is a typed version of JavaScript that is also gaining a lot of popularity now, too. But it's more secure than JavaScript, because it's doing a lot of this type checking for you. And ultimately, it's making it easier and faster to be able to develop JavaScript applications. 

That's a bit of a tangent, because we don't talk about typescript in the web programming course itself. But if today I were to write a web application, I would probably do it in Python. But if I was going to do it in JavaScript, I would probably use typescript instead and then compile it to JavaScript. 

All right, yeah, there are other frameworks that are getting popular, too. So there's no one framework that everyone is using. There are a lot of possible options. And oftentimes, once you learn one, it's easier to learn the next one. So we introduce students to some of the possible frameworks and tools in this class. But students are more than welcome to go and explore their own, too. 

All right, so that then takes us to the front end. So we talked about Python on the backend, using a Django server. And now we turn to JavaScript, which is the language that we're going to be using on the front end to be able to run code on the client side, inside of users' browsers. 

So we talk about some of the basics of JavaScript syntax for students who haven't necessarily seen that syntax before. And then we introduce students to a great feature of using JavaScript for client side programming, which is event handling. That oftentimes we use JavaScript as an event-based language, where we're running code not just right away, but in response to particular events, when the user clicks on a button, when they mouse over a region of the page, when they press a key, when the page loads, or when some element loses focus and you focus on another thing in the web page. 

And so all of these features then are events that you can have JavaScript code listening for and handling. Such that when a particular thing happens on the page, you are then running some JavaScript code. And so that opens up a lot of possibilities for creating really interactive web pages. 

So using JavaScript, we can then also manipulate the DOM. So we talked about the DOM a little bit when we were talking about HTML. But it represents this structure of this web page, where I can now use JavaScript to, say, get access to this part of the web page and manipulate it. So that you can change the web page without needing to refresh the page or visit a different page, for example. 

And a lot of modern web applications are now doing this, that you don't need to refresh social network websites. You don't need to refresh even some news feeds, for example, news websites. You don't have to refresh your email, for example. New emails just show up when those new emails arrive. And that's in large part thanks to the ability of JavaScript to manipulate the DOM, to change what it is that the user sees on the page in response to particular events, for example. 

So we show students how they can go about doing that DOM manipulation, building simple web applications that are manipulating what happens to be present on the page. And then introduce students to some other features of JavaScript as well, things like localStorage, which you can use in order to store data inside of the user's web browser so that when the user revisits the page the next time, their progress or whatever they've been doing is saved in the page. So you can reuse data that you saved from the last time that a user visited that page. 

We also introduce students to how to use JavaScript to talk to API, to talk to other services on the internet that are going to provide information or data or other services, for example. And the one we introduce in lecture is something like a currency converter. Such that, for example, they can type in a currency and get back what the exchange rate of that currency is with the US dollar immediately, based on the latest exchange rate. So it's not just that the application is storing some outdated exchange rate that's never going to change, but that we're accessing what is the latest exchange rate between the euro and the dollar and then can we display that to the user. 

So we show students how to use JavaScript to talk to those APIs, get back some data, and then incorporate that data into their own web application. And that's something they can use with their own applications as well. That they could build their own API. And we have students do a little bit of this, too, such that their front end is then talking to the API, getting back some data, and then showing the results of that data analysis on the page, too. 

Someone's asking about TensorFlow.js versus TensorFlow in Python. I don't have too much experience with TensorFlow.js. I've primarily used TensorFlow in the context of Python. And I've shown some of that in the artificial intelligence class that we'll talk a little bit more about tomorrow. 

But TensorFlow is gaining incredible popularity across a number of different languages and a number of different places just for being one of the easiest tools to very quickly do machine learning work. So I think either is going to be fine, depending on your use case. 

What about Jinja? Is it introduced to students? Django uses a different templating language that is very similar to Jinja but has some slight differences syntactically in terms of how it works. That was another motivation for just focusing on one framework rather than both Django and Flask. Because now, instead of having to learn two different templating languages, the Jinja templating language which Flask uses and then Django's own templating language, we can just focus on one and avoid some of that potential confusion. 

Django does let you create your own commands. That if you want to run particular commands on your web application, Django supports those as well. They're known as management commands, if you want to look for that. 

We don't introduce xml as a format for representing data. We primarily introduce json, J-S-O-N, as the data representation format. Just because most of the REST APIs, especially REST APIs nowadays, are returning data in that format. And the built in Python and JavaScript libraries for dealing with requesting data have a lot of nice features for dealing with data in that format, for example. 

All right, so once we've introduced students to the syntax of JavaScript, we can then use JavaScript to build interactive and custom user interfaces, to be able to create more interesting interfaces that users can engage with. So the first of those things that we talk about is better understanding data that we get about the window. It turns out that in JavaScript, you can access a whole bunch of information about the user's current window, like how wide it is, how tall it is, how far down on the page the user has scrolled, and get access to all this information in code. 

And there are a lot of user interface implications for this. Because you want your application to do something different based on the size of the window, based on where the user has scrolled to on that page, for example. If you've ever seen a web page where things are really changing on the page as you scroll through it, they're probably using some of this window information in order to do that. And one of the most common examples is something like infinite scroll. That if you use a social networking website like Twitter, for example, you notice that you scroll down to the bottom, and you can just immediately start loading more posts, for example. 

So here, for instance, is what infinite scroll might look like. We show students how you might have a whole bunch of posts. And as you scroll through the page, as soon as you hit the bottom of the page, new posts load automatically. And so this is a common feature in many modern user interfaces that use a whole bunch of data. Rather than force the user to click a next button and next and next and next again and again, just when the user gets down to the bottom of the page, load the next page worth of information and show that to the user right away. 

Parallax scrolling is another instance of things changing when you're scrolling, for example. You can do that with JavaScript. I think there are also ways of just doing that with CSS. So you might not necessarily need JavaScript in order to do something like that. 

I did mention REST. REST is a particular way of constructing an API, like a service that web applications are interacting with to get back to request information or requests to make some sort of change on an application and get back some kind of response. That's something that we talk to students about in the course. 

And then, in addition with user interfaces, we introduce students to animation. I'm personally a big fan of using animation across a whole bunch of domains. And JavaScript does a great job of making it easy to be able to create animation. 

So that if you want things that are moving in your application, whether it's shapes that are moving around or things that are changing in shape or size or color or other features and moving seamlessly between those things, we show students how to animate their web pages using JavaScript as well. And that leaves open a lot of fun possibilities. We show both CSS animation and JavaScript animation. 

So they're both things that you can do with-- CSS animation is the one that we focus a little bit more on, just because it's a bit simpler to set up. And you just say what should the CSS be at the beginning and what should the CSS be at the end. But you can absolutely do animation in JavaScript as well. 

And that becomes especially powerful when you add it to something like React. So React is a front end web framework that's designed to make it very easy to build interactive user interfaces so that the interface is reacting to things that are happening inside of the web application. So if one thing happens in one part of the application, some other part of the application can automatically update. And it's a different way of writing your front end code, just to make it a little bit easier in order to do so. 

And React as a big library. There's a lot of features in it. There's a lot of extensions to it, as were mentioned in the chat, too. We don't talk about all of that. But we do just introduce students to the fundamentals of React, how to create what are known as React components, which are just pieces inside of the React application that can be reused in other parts of the application, for example. 

And then we allow students to be able to use React in their web applications if they want to. It's effectively a substitute for just writing plain JavaScript to be able to design your user interface. You can use React instead. 

And as was mentioned in the chat, one of the nice things about React is that it can connect to any backend web server. Because it's just meant to be used on the front end. So you can use it with Django. You can use it with Node.js. You can use it with frameworks like Laravel, or Ruby On Rails, or other popular web frameworks, too. So a lot of those are possibilities, too. 

Questions, then, about the JavaScript portion of the course? We don't introduce students to pixi.js specifically. But hopefully, we give students enough of the resources and tools for how to use JavaScript libraries and tools that they should be able to pick up on a lot of that syntax, because they'll have seen a lot of similar types of syntax before. Yeah, Ramon. Go ahead. 

SPEAKER 4: I would like to ask if, in the JavaScript world since 2018, has any change happened that influenced the topics thought in the JavaScript lecture and the front end lecture? 

BRIAN YU: The main change in the front end lecture and responses is React. React was already popular in 2018. But it's only gotten more popular in recent years. 

And so when I was going through some of the examples for the 2020 version, there were a lot of examples that are a lot of sort of tedious JavaScript code that React just makes a lot simpler. And so I figured the better choice in this case was probably to introduce students to the way that things are done now and just some of really the fundamentals of React syntax so that students get exposure to that. Because if they go into the world of front end web development, or want to design applications of their own, React will save a lot of time. And it's also quite popular in the industry, too. 

Someone's asking about React versus Angular. So React and Angular are both popular frameworks for using-- for basically creating interactive applications. People will disagree about this. 

My opinion, after having tried both, and looked at tutorials for both, and tried to approach both from a pedagogical lens, is that React is a little bit easier to learn as a beginner, just for getting things set up. In particular, because you don't need the object-oriented syntax. You can just use a function in React to be able to create a component, for example, just to start things, for instance. 

But Angular is going to be very similar. They have their differences in how the frameworks work. But you could certainly teach students how to write code in Angular as well. 

Angular happens to use the language that I mentioned a little while back in this session. Typescript, that's the programming language that it uses for programming in Angular, which is an extension to JavaScript that adds some additional features to JavaScript. And I quite like typescript as a language. I think it's a great choice for Angular to use it. But I thought it would probably especially be too much for this class to not only introduce here's how you program in typescript, but then here's Angular on top of that, too. So we decided to just stick with React for the purpose of this class. 

What is native in React Native? So React Native is a way of using React code, using the React library to be able to create native mobile applications, to create applications that are running on mobile devices, in particular. So we don't use React Native in this class because we're focused on building web applications that really just use React and what's known as ReactDOM, which is React library for rendering React information into a web page. Ramon, your hand is still raised. Did you have another question? 

SPEAKER 4: Yeah. You just talked about trying to approach the course with a pedagogical lens in. I realized that not much has changed when it comes to the content between the versions. You introduced React and a new Java class. But on the overall scheme, the content remained the same. 

But I would like to ask if, with that first experience in the other two years that have passed by, is there something you learned in terms of lecturing the content that you tried to apply this time? 

BRIAN YU: Yeah, so there are some smaller differences. A lot of the big ideas in web programming haven't changed all that much in the last two years. A lot of the same ideas about requests and responses and views and the separation of controller code from the model, from the template, a lot of that has remained very similar. So a lot of the core material of the course has remained very similar. 

But we've made these adjustments in terms of what we focus on to allow ourselves to go a little bit deeper into things. And the big place where things have changed, in my opinion, is also the projects, which I'll talk a little bit more about after we get through the syllabus of the materials. Because we really found with the projects that students wanted to better understand how the web applications that they interacted with work. 

That I got a lot of questions, people coming to office hours and asking how does Amazon's website work? How does eBay's website work? How does Google's website work? 

And so using the projects as an opportunity to apply the lecture topics to the types of applications that students are seeing everyday was one of the big goals of the project. So each of the projects is inspired by a popular web application that's already out there. Joe? Go ahead. 

JOE: Yes. So does Django support anything besides web development like, building a new website? Can you use it to do automation? Or just take an existing website, build additional functionality, for example? 

BRIAN YU: I mean, Django is a web application framework. So you could add, potentially, one app that is a small piece of a larger web application separately using Django. That's certainly a possible thing you can do. We don't talk specifically about that in the class. But it's an option available. 

And I see a question in the chat. Does Django support scaffold like Ruby On Rails? If you mean that in the sense of creating the structure for the beginning of the project, yes. There is a command in Django called start project that will basically create, will automatically generate all of the files that you need to start working on the Django project. And then you can just add to that all of the details that you want to add for your particular application. 

All right, so we introduce students to programming in Python with Django, then in JavaScript for the front end. The last part of the course focuses on some of the best practices for developing web applications and for thinking about how they scale and how we make them secure. So we talk first about things like testing, so different ways that you can test your code. 

There is unittest, which is a Python framework that you can use to automatically test individual functions. That if you want to test small components of your code, unittest is quite good for that. Django has a bunch of built-in testing features that make it easy for testing your Django application. 

And this is especially helpful when you're dealing with applications that work with big databases, for example. That if you have an application and you want to test the ways you interact with the database, Django's testing framework will automatically create a fresh database just for your tests so that you can run a whole bunch of tests on that testing database without affecting your actual database, for example, which happens to be quite nice. 

And then Selenium is an example of a tool that's used for browser-based testing. That if you want to test users' interaction with a web page as by checking what happens when a user clicks on something on a page, for example, Selenium happens to be really great for that. Automation with Selenium, someone's mentioning in the chat-- it's very, very cool. 

You basically just watch your computer take over the testing. And you can see in the browser exactly what's being tested. So it's a lot of fun to see and useful for being able to test how user interaction works. 

We then talk to students a little bit about continuous integration and continuous delivery, which are tools that are commonly-- patterns of work that are commonly used for making sure that code is always being integrated together. It's always being tested. Making sure that you're able to deploy small changes to code instead of waiting months or years before you release big versions of code. 

That especially with web applications, it's fairly easy to set it up such that you fix a bug and now immediately that bug fix is deployed. You don't have to wait for the next release cycle, for example, before that change takes effect. And there are a number of tools out there for doing CI/CD types of things. 

In the 2018 version of the course, we spent a fair amount of time talking about Travis, one of the tools for doing that. In the in between years, GitHub has released its own tool for doing this kind of thing called GitHub Actions. So that's what we show the students now, so that everything stays right inside of GitHub as the tool for being able to do this kind of thing. 

And then, in answer to one of the questions from earlier before, we also talk about Docker as well. And Docker is a way of effectively creating containers in this context in which your web application is going to run. And those containers have pre-installed software, pre-installed packages. 

And the advantage here is that you can guarantee a consistency across environments. That you can test your code inside of a Docker container on your own computer, and then you can run your web application in a Docker container that's based off of what's called a Docker image. Such that students can make sure that when the web application is running on the server, it's going to be using the same environment, same version of all the software as the version that's running on their own computer. 

Why isn't Travis featured in the new version of the course? In particular, we just wanted to pick one tool to show to students for what types of CI and automated testing we could use. In 2018, the tool we used was Travis. Travis is certainly still a popular tool that's very much used in the CI world. 

But we decided just to stick with GitHub Actions so as not to introduce yet another service that students would have to sign up for. So that students who already have GitHub accounts can just use GitHub Actions to be able to do that kind of work. But a lot of the CI tools will behave in similar ways, such that you could do the same sorts of things. And Travis CI, or Circle CI, or a number of other of these types of services do. 

And then finally, the last topic we talk about with students is scalability and security. So thinking about as students' applications grow bigger, what are the types of things they have to think about. And even if they're not the person writing the web application, if they're the person managing the web application, what do you need to think about as more users start to use the application? What vulnerabilities come up? 

So a lot of these are topics that we also talk about in classes like CS50B or CS50T or CS50L, if you were at Monday's session with David. But these are things like scaling your database, so vertical scaling, taking a server and just using a bigger server in order to be able to handle more users. Or things like horizontal scaling, where you have a server, and instead, you just add multiple servers. 

So we ask students questions like, all right, when you add multiple servers, what do you then need to do? Well, now you need to have some sort of load balancer that's balancing between both of these servers, and put some users to one server and some users to another server. And you have to answer questions, questions like how do you decide which server to send to a user to in a way that's consistent and in a way that's going to try and balance between them as well. And so those are the questions that we start to answer and look at in this part of the class. 

We talk about autoscaling. So what might happen is your application is growing bigger and bigger and you have more users of certain types of times of day than others. You can have your application automatically scale up, automatically add more servers. 

And in addition to scaling up your web server, you might also scale up your database. If one database isn't enough, you might have multiple databases. But then the question is how is it that you keep these databases in sync? If you've replicated all these databases, you need some way of having one of these databases tell the other databases about any changes that have been made, for example. So we talk about a couple of models that can be used for that as well to be sure to keep databases in sync. 

And we talk about caching data, so that we have some version that is faster to access which is very helpful as more users start to use the application and things start to take a little bit more time. And we talk about the security problems that might come up as you use an application. So some of those are things like phishing, where one URL might think you're going to one place. You might think you're being taken to one website. But you're actually being taken somewhere else. 

We talk about public key cryptography, which is at the heart of how secure communication over the internet works. How is it that two computers, who have never talked to each other before, can send a secret message over the internet without anyone in between being able to intercept it? We talk about hashing, how to store data in such a way that we're not storing literal passwords, but we're storing, ideally, hashed versions of those passwords so that if there's ever a breach on the database or someone gets access to the database, no one's able to actually see what those passwords are. 

And we talk about other security concerns as well, things like cross-site request forgery, which is a potential security vulnerability that might happen where someone might be tricked into sending a request to some website when they didn't intend to, for example. So questions then about anything in the syllabus? [INAUDIBLE], yeah, go ahead. 

SPEAKER 5: OK. Thank you very much, Brian. I have two questions. The first one is which programming language offers the best tools to transpose a project to another language for any different reason? 

BRIAN YU: I'm not sure I understand exactly what you're asking. Like, if you're translating on that project from one language to another? 

SPEAKER 5: Translate, transpose, for example, I have developed the project in JavaScript or in React. And I want to use to another project or to another web developing prior, but not in Java, but in another language. And so which from them offers the best tool that I can transpose it to another language, just from Java to React, from React to next one? 

BRIAN YU: Yeah. So I don't know if there is a best tool that's objectively the best. What I will say about tools like React, and this is also true of Angular and a lot of the other libraries, is that they're designed to allow you to build your entire application in React if you want to, or only to build a small portion of your application in React. And so a lot of web applications that transition to React will do so little by little. 

So that they'll start by just replacing one page or one part of one page with a React component. And then over time, start to build more and more React into the website, replacing more and more of the existing code. And that's a nice way of transitioning an existing project to React. 

It's not an all or nothing, like the whole website must be React or it is not. React in a lot of similar frameworks will let you move things over slowly. And some of the components we show in the lecture, we'll talk about that, too. 

SPEAKER 5: Thank you. And the second, which offers the most suitable tools to guarantee, or for configuring, or offering a high level of security? 

BRIAN YU: For security, I think it's largely going to depend on what framework you're using. A lot of times the web framework itself is going to build in security tools. So for example with Python and Django, Django has built in cross-site request forgery protection. So you don't need to write any of your own code to be able to protect against this kind of vulnerability because Django already has written the code that is looking for this kind of vulnerability and is trying to safeguard you against it. 

So I think it's, in large part, going to depend on the frameworks. Django is known for being a fairly secure framework. But there are definitely other secure web frameworks that are out there. Certainly, no framework is perfect. There are always bugs that people are working on. 

SPEAKER 5: In general, regarding confidentiality, availability, and integrity? 

BRIAN YU: Yeah. Again, I think I don't want to definitively say there is a single best framework for all of everything. But I think a lot of the modern popular web frameworks, things like Express.js for doing things in Node or Django for Python, they've given a lot of thought to security. And while they might not be perfect, certainly they handle a lot of things that a user building a web application from scratch might forget about. 

SPEAKER 5: OK. Thank you very much. 

BRIAN YU: Yeah, of course. We do talk about cross-site scripting, too. I didn't have a slide about it. It came up in the chat. 

Cross-site scripting is a way of sort of injecting JavaScript code into the user's browser and getting them to run code they didn't mean to run. But that is something we talk about, too. Ramon, go ahead. 

SPEAKER 4: OK. So yesterday, Colton, he was talking about a game development course. And he said that the number one rule or principle in game development means to create your game in such a way that it gives the player the perception that there is more to that virtual world than there really is. I would like to ask you what is the rule or principle in your opinion for web development that the instructor should have in mind when delivering the course and also the developers should have in mind? 

BRIAN YU: It's a good question. So yeah, it is a common mantra in game development, which is, like, every game is an illusion or something like that. Where the things you don't see are oftentimes not there at all, for instance. 

I don't have a quippy, one sentence mantra for web programming. But what I would say is a big theme of the course is thinking about a web application is not just a single big thing. It is composed of many different pieces. And so a big part of what web application development is about is A, deciding what pieces are going to be in your web application, do you need a database, do you need a cache, what is your web server like, what are the pieces on the front end, for example. 

And then, how do those pieces communicate with each other? How does the front end use an API, for example, to talk to the backend? How is the backend talking to the database? 

Is it using SQL queries? Are we using an ORM? What is the means of communication there? So if I had to boil down this course into a theme, the theme of the course is understanding what the pieces of a web application are and understanding how those pieces communicate with each other. Joe, go ahead. 

JOE: Quick question about your Python skills, how did you get from basic CS50X Intro to Python to, I don't know how you would describe your level, but I'd say advanced level? Look at books? Or did you take different courses? 

BRIAN YU: I definitely took other courses. So CS50 was sort of the first class, computer science class at Harvard that I took. And I took other computer science courses later, some of which spent some time in Python. 

But I think in large part it was from learning on my own through creating my own projects. That I would have a project I was interested in working on. And then, in the process of working on that project, I would be forced to learn the necessary Python skills I needed in order to work on that project. 

And I think that's a good way to learn a language, is not to learn the language in a vacuum and just learn all the syntax at once. But to try to build something, and in the process of building, realize what you'll need to add in order to do so, what skills you'll need to learn, and what syntax you'll need to learn in order to get that experience. So that's personally what worked for me. But I think it's going to vary. 

I'll talk about projects in a moment, Charlene. I'll just briefly show you what the projects are and what they're based on. How is Heroku different from hosting from something like GoDaddy, for example? 

So GoDaddy is an example of a domain name provider. It's primarily used if you want something.com or something.net, if you want a domain name. And there are a whole bunch of providers that will sell you domain names, that usually you have to pay for, for a certain price every year, for example. 

Hosting the website is separate from that. Once you have the domain name, you then need to connect that domain to the actual server that is hosting the application itself. And so Heroku and GoDaddy are not mutually exclusive tools. In fact, if you purchase a domain with GoDaddy, you can connect it to your application on Heroku. Such that when you go to the domain name that you bought on GoDaddy or some other domain name provider, you'll be taken to your Heroku web application. So you can definitely use that, too. 

Just to briefly talk about the projects, because a couple of people have asked about the projects. Each one is based on an existing web application. We ask students to think about how that application might work and how they not recreate it. 

So first with just HTML and CSS, we ask students to reimplement Google, reimplementing things like Google Search and Google Image Search and even the Advanced Search that lets you search for various different fields. Because all this is really some CSS to center everything, some HTML to describe the structure of the page, and then some HTML forms, to be able to submit them. 

Once we introduce students to Django, we have students build, effectively, their own version of Wikipedia that lets them create pages, edit those pages, generate, look at random pages, for example. And this is just an experiment with different views and being able to render different views and creating places where people can type text into those views, for example, creating forms within Django. 

Once we introduce students to databases in Django, we then have students implement an e-commerce site, something equivalent to something like eBay or Amazon, for example. eBay in particular being, like, an auction site where students can create listings for products they want to sell and then let people bid on those individual listings. And you have to update your database with all of the latest listings and what the latest price is, and you have to calculate who the highest bidder is. And all of this is using Python code that's interacting with the database and then displaying it to the user. 

Once we introduce students to JavaScript and building things on the front end, we then introduce students to have them build their own mail client, something like Gmail or Outlook, for example. Where they're able to get new mail, they're able to click on things and see new mail. And this is all happening on one page. Where it's not reloading new pages, it's JavaScript manipulating the DOM to change what it is that the user is seeing. 

And then finally, we have students put this all together and build a big social networking website that basically is something effectively kind of like Twitter or Facebook, where users can make posts, they can comment on other posts, they can heart other posts, they can follow other friends of theirs that are on the social networking website as well, just to give students an idea for how all these pieces fit together. At the end, we have students create a final project of their own that uses these features and more to create something of their own choosing. But these are the projects that we have students work on, in particular, to give students a sense for how you can use the tools learned in this class and apply them to better understand or even create the kinds of web applications that students interact with. 

So these, then, are the topics we talk about in the web programming class. We start with HTML, CSS, talk about Git. We use Python to then introduce Django and use Django to introduce databases. We use JavaScript to build front ends. And then we talk about continuous integration and testing and how you make sure your web application can scale and hopefully can do so securely as well. 

We are at 2 o'clock. So we are just about wrapped up. So thank you all so much. And tomorrow we'll reconvene for the final session of this educator workshop, where we'll be talking about our course on an introduction to artificial intelligence. So I hope to see you all then. And enjoy the rest of your day. Thanks, everyone.