CS50’s Web Programming with Python and JavaScript
OpenCourseWare
Donate
Brian Yu
David J. Malan
Facebook GitHub Instagram LinkedIn Reddit Threads Twitter
Menu
Lecture 0
• Introduction
• Web Programming
• HTML (Hypertext Markup Language)
o Document Object Model (DOM)
o More HTML Elements
o Forms
• CSS (Cascading Style Sheets)
• Responsive Design
• Bootstrap
• Sass (Syntactically Awesome Style Sheets)
Introduction
In this course, we’re picking up where CS50 left off and diving into the design and creation of
web applications. We’ll build our web-design skills by working on a number of projects
throughout the course, including an open-ended final project where you’ll have the chance to
create a website of your own!
In this course, you’ll need a text editor where you can write code locally on your computer.
Some popular ones include Visual Studios Code, Sublime Text, Atom, and Vim, but there are
many more to choose from!
Web Programming
Course Topics: We’ll go into more detail later, but here’s a brief overview of what we’ll be
working on during this course:
1. HTML and CSS (a markup language used to outline a webpage, and a procedure for
making our sites more visually appealing)
2. Git (used for version control and collaboration)
, 3. Python (a widely-used programming language we’ll use to make our sites more
dynamic)
4. Django (a popular web framework we’ll use for the backend of our sites)
5. SQL, Models, and Migrations (a language used for storing and retrieving data, and
Django-specific methods that make it easier to interact with SQL databases)
6. JavaScript (a programming language used to make websites faster and more interactive)
7. User Interfaces (methods used to make a website as easy to use as possible)
8. Testing, CI, CD (learning about different methods used to make sure updates to web
pages proceed smoothly)
9. Scalability and Security (making sure our websites can be accessed by many users at
once, and that they are safe from malicious intent)
HTML (Hypertext Markup Language)
• HTML is a markup language that defines the structure of a web page. It is interpreted by
your web browser (Safari, Google Chrome, Firefox, etc.) in order to display content on
your screen.
• Let’s get started by writing a simple HTML file!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
<html>
• When we open up this file in our browser, we get:
,• Now, let’s take some time to talk about the file we just wrote, which seems to be pretty
complicated for such a simple page.
o In the first line, we are declaring (to the web browser) that we are writing the
document in the latest version of HTML: HTML5.
o After that, the page consists of nested HTML elements (such as html and body),
each with an opening and closing tag marked with either <element> for an
opening and </element> for a closing.
o Notice how each of the inner elements is indented just a bit further than the last.
While this is not necessarily required by the browser, it will be very helpful to
keep this up in your own code.
o HTML elements can include attributes, which give the browser extra information
about the element. For example, when we include lang="en" in our initial tag, we
are telling the browser that we are using English as our primary language.
o Inside the HTML element, we typically want to include both a head and
a body tag. The head element will include information about your page that is not
, necessarily displayed, and the body element will contain what is actually visible
to users who visit the site.
o Within the head, we have included a title for our webpage, which you’ll notice is
displayed in the tab at the top of our web browser.
o Finally, we’ve included the text “Hello, world!” in the body, which is the visible
part of our page.
OpenCourseWare
Donate
Brian Yu
David J. Malan
Facebook GitHub Instagram LinkedIn Reddit Threads Twitter
Menu
Lecture 0
• Introduction
• Web Programming
• HTML (Hypertext Markup Language)
o Document Object Model (DOM)
o More HTML Elements
o Forms
• CSS (Cascading Style Sheets)
• Responsive Design
• Bootstrap
• Sass (Syntactically Awesome Style Sheets)
Introduction
In this course, we’re picking up where CS50 left off and diving into the design and creation of
web applications. We’ll build our web-design skills by working on a number of projects
throughout the course, including an open-ended final project where you’ll have the chance to
create a website of your own!
In this course, you’ll need a text editor where you can write code locally on your computer.
Some popular ones include Visual Studios Code, Sublime Text, Atom, and Vim, but there are
many more to choose from!
Web Programming
Course Topics: We’ll go into more detail later, but here’s a brief overview of what we’ll be
working on during this course:
1. HTML and CSS (a markup language used to outline a webpage, and a procedure for
making our sites more visually appealing)
2. Git (used for version control and collaboration)
, 3. Python (a widely-used programming language we’ll use to make our sites more
dynamic)
4. Django (a popular web framework we’ll use for the backend of our sites)
5. SQL, Models, and Migrations (a language used for storing and retrieving data, and
Django-specific methods that make it easier to interact with SQL databases)
6. JavaScript (a programming language used to make websites faster and more interactive)
7. User Interfaces (methods used to make a website as easy to use as possible)
8. Testing, CI, CD (learning about different methods used to make sure updates to web
pages proceed smoothly)
9. Scalability and Security (making sure our websites can be accessed by many users at
once, and that they are safe from malicious intent)
HTML (Hypertext Markup Language)
• HTML is a markup language that defines the structure of a web page. It is interpreted by
your web browser (Safari, Google Chrome, Firefox, etc.) in order to display content on
your screen.
• Let’s get started by writing a simple HTML file!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
</head>
<body>
Hello, world!
</body>
<html>
• When we open up this file in our browser, we get:
,• Now, let’s take some time to talk about the file we just wrote, which seems to be pretty
complicated for such a simple page.
o In the first line, we are declaring (to the web browser) that we are writing the
document in the latest version of HTML: HTML5.
o After that, the page consists of nested HTML elements (such as html and body),
each with an opening and closing tag marked with either <element> for an
opening and </element> for a closing.
o Notice how each of the inner elements is indented just a bit further than the last.
While this is not necessarily required by the browser, it will be very helpful to
keep this up in your own code.
o HTML elements can include attributes, which give the browser extra information
about the element. For example, when we include lang="en" in our initial tag, we
are telling the browser that we are using English as our primary language.
o Inside the HTML element, we typically want to include both a head and
a body tag. The head element will include information about your page that is not
, necessarily displayed, and the body element will contain what is actually visible
to users who visit the site.
o Within the head, we have included a title for our webpage, which you’ll notice is
displayed in the tab at the top of our web browser.
o Finally, we’ve included the text “Hello, world!” in the body, which is the visible
part of our page.
