All language subtitles for lecture0-720p-en

[MUSIC PLAYING]

DAVID MALAN: Welcome everyone to web programming with Python and JavaScript.

My name is David Malan.

BRIAN YU: I'm Brian.

DAVID MALAN: And today we're going to give you a quick overview of the course

and then dive right into the course's material.

So this is meant to be a class taken after a course like CS50, which

is the colleges and the extension schools

introduction to computer science.

But even if you haven't taken that class anything approximating

that is certainly fine.

We assume only prior programming experience in some language.

And what we'll then do is assuming you know

some of the basic constructs of most any procedural or imperative language,

we'll fill in the blanks along the way both with Python and with JavaScript.

Neither is actually assumed.

And what we'll do over the course of the next several weeks

is first dive into Git.

So you might know Git if you've used it before as a version control

software, whereby you can maintain multiple versions of your software.

But these days it's actually used for much more than that.

People will use it not only for versioning their code

and for collaborating with others, but also

for deploying their code from their local machines

to some staging server to some testing server and ultimately to production.

So it's actually become quite an integral tool

when it comes to actually deploying your code to the cloud,

so to speak these days.

Thereafter, we'll transition to HTML and CSS, with which you might already

be familiar, but we're focused on some of the more modern perhaps

some of the more advanced features of both of these languages

HTML5, specifically the latest incarnation of that,

as well as CSS and various selectors that you may or may not

have used before.

But also toolchain, something called SAS that allows you to programmatically

generate and maintain more readily, more complicated style sheets

especially as your web apps become themselves more complicated.

We'll then introduce Flask, which is going

to be a very popular framework for making web

based applications using Python.

And it's generally considered a micro framework,

which means there's not all that much complexity to it.

It doesn't try to do too much.

It really just tries to solve some very common problems so that most

of your effort when writing a web app with it

isn't focused on how do I learn Flask and how do I

build with this architecture, but rather how

do you implement your ideas without reinventing the wheel?

And so you'll get that out of a micro framework like this.

We'll then introduce a bit of SQL, or structured query language

with which you can query databases and store your actual data.

And we'll look at perhaps more complex queries

than you've seen or used in the past.

We'll talk about the idea of API, or application programming interfaces.

These can be both your own that you build for your own applications to use,

or as you may have used them already third party APIs.

Data feeds and functional behavior that you can actually access over the web

or from some other server that some other company or person has actually

made available to you to make your applications all the more

interactive or featureful.

And then we'll introduce JavaScript, which you might have used or tinkered

with before.

We'll introduce the very latest something known as ES6

or ECMAScript 6, which adds a number of features many of which,

or most of which are supported by today's browsers.

But we'll also talk about some of the pitfalls

when you try to use some of the latest and greatest features

and what it might mean to ensure as through transpiling or other techniques

that your code will indeed work on any number of mobile devices and desktops

and laptops these days.

And we'll also talk about front ends, the idea of actually building

a front end user interface using JavaScript talking about techniques

like Ajax or SPAs single page applications these days,

particularly modern paradigms with which folks are implementing today's web

applications.

Also looking at things like graphics and animation as it

can be implemented in JavaScript and inside of a browser.

And then we'll look at a heavier weight framework

something known as Django, which is similar in spirit at least at first

to something like Flask.

Just makes it easier to get going building web applications,

but comes with so many more features.

The proverbial kitchen sink.

So when you get a little tired in life of implementing

an administrative interface to your web application, or a log in interface

for your application, or any number of things that a lot of us

probably use in various tools.

You can start to lean on these larger scale frameworks that

just come with many more features.

And as such, you might have to comfort of it more to its conventions,

but you'll end up writing a lot less code than you would otherwise.

So we'll sort of graduate to that level of framework.

And then we'll talk about a world that's generally

known these days as DevOps, development and operations kind of united in one,

in the context of testing like making sure your code actually works

and how you can think about that and how you can actually do that when

writing your code.

And then CICD continuous integration and continuous development,

which is just a fancy way of saying setting yourself up

for success with the right tools and with the right scripts,

the right environments so that when you run a command on your laptop or desktop

the code actually goes somewhere and it goes not only into a code

repository to be saved and versioned and shared with other people,

but you can test it automatically and continuously so to speak.

And you can even deploy it to the cloud simply by having set up

some of those steps in advance.

So if you're already in the habit now of deploying your applications by kind

of dragging and dropping them to an FTP server or using some web interface

or copying things, all of this now can be automated in very robust ways

especially that are conducive to collaboration with others.

And then toward the end of the term we'll

talk about some higher level issues that will

inform how you go about building web applications

after the scope of the class.

Scalability.

So topics like DNS and load balancing and how

you think about anticipating that 101st user that

might not fit on just one server.

And so if you now have to have your app on two

or three or more different servers, how do you

have these servers talking to one another

and how do you share data among them?

What's going to get easy?

What's going to get hard as you scale to more and more users?

And then throughout the semester, we'll talk about topics of security.

What you want to do in terms of best practices

to avoid getting exploited in some way, but we'll also

culminate that discussion in a focus on security at the end

so that when you go out into the real world

or back into the real world after the courses lessons,

you actually are mindful of especially in the languages and tools

that we'll use throughout the semester of what

you should be particularly mindful of.

And then as punctuating the whole semester will be a number of projects.

So four assigned projects where we prescribe the specifications of some

app that we'd like you to build with the whole course's staff and support

structure.

And then one final project that will culminate this semester, whereby you'll

be invited to design and implement your own tool that's

a genuine personal or professional interest

to you that somehow draws upon the course's lessons.

And let me pause there and see before we forge ahead if there are any questions.

Anything else?

Yeah.

AUDIENCE: So HTML, CSS, JavaScript-- suppose

I don't have any experience on those things?

DAVID MALAN: Good question.

And so what then?

So if you don't have any experience in some of the alphabet soup

that we put up already like HTML and CSS,

JavaScript and/or Python, for the most part that's OK.

I would say that they'll be a bit of a more of a learning curve

early on for you.

But we will take care to provide students like you

with any number of resources supplementary

so you know where to fill in any gaps.

And we'll also introduce these topics in the class itself.

So all of the topics that we just gave an overview of we'll

introduce and dive into in the class.

It will certainly be advantageous if you've seen them before,

but each of the projects and by way of the courses sections and lectures

where you have all the material you need to succeed,

even if most of these topics are brand new.

So not to worry.

Other questions?

Yeah.

AUDIENCE: [INAUDIBLE] purchase any of the software [INAUDIBLE]??

DAVID MALAN: No need to purchase any software whatsoever.

All of the tools that we'll use, all of the libraries,

frameworks, APIs are freely available now and after the class as well.

Other questions?

No.

All right.

So first on the agenda today is version control

and Gits in particular, a tool that you'll

use not only to version your code and share your code,

but also ultimately deploy it.

So without further ado allow me to turn things over to Brian.

BRIAN YU: Thank you very much.

All right.

So the first topic that we're going to be talking about today as we approach

the world of web programming and web development

is thinking about when we're designing projects,

how do we keep track of different versions of our code?

How do we collaborate with other people?

How do we make sure that if we make a change and that change

doesn't work that we have an easy way to go back to older versions of our code

and make sure that we have access to those as well?

And so all of that falls under the larger umbrella

of what's called version control.

And out there, there are some number of different version control software

that people are using on a day to day basis, but one of the most popular

is a piece of software called Git, which is a version control

tool that we're going to be using in this class

and that people often use in industry in order to help maintain and manage

different versions of their code in order to keep track of their projects

and make sure that everything is organized

and that they're able to effectively collaborate

with other people along the way.

So we'll take a moment to step back and talk about the different things

that Git does for you at a high level.

And then we'll dive in and look at the actual commands

that you would use in order to run Git, understand how it works

and actually make use of it.

So the first thing that Git's good at doing

is keeping track of different changes to your code

so that if you're making changes, you don't only

have access to the latest version of your code,

but if you start out with a particular file

and then you make changes and add another line to it,

you remove a line to it later you can keep

track of all of those different versions of those files

such that you know the history of your project

and how it's developed from the beginning

all the way up until where you are now.

So that's one thing Git's particularly good at.

One other thing the version control is very useful for

is synchronizing code between different people.

Very often in the modern world you're not

the only person working alone on your projects independently, but rather you

and one or more other people are working together

collaboratively trying to work on a project together and making sure

that you and the people you're working with stay in sync in terms of your code

is often a challenging task.

And what Git, another version control softwares

like it do is help to make that process a little bit easier.

So you can imagine that maybe we're storing a version of your code

up in some remote server somewhere.

And Git what will allow you to do is make sure

that you and someone you're working with both have access to that same code.

And when you both make independent different changes to that code

there's an easy way via which Git can merge those changes back

together so that there's a central version that

has all of the changes to which both of you will then have access to.

So synchronizing code between different people

and making sure that everyone has access to that code base

is something that is also useful with regards to version control.

In addition, Git is also very good at letting you test your code

without losing your original copy.

So if you have a working program or a working web application

and you want to make some modifications to it in order to add a new feature

but you're worried that adding that new feature

might break some prior feature that's already existing within your web

application, Git's very good at letting you test your new changes

and experiment with your code without losing track of that original.

And only once you're happy with the original code

that you have can you then merge your new changes in with the existing

changes so that you never lose a working copy of your web application

And finally, one last thing to Git is very

good at is reverting back to old versions of your code.

So you've been working on your project, you've

made some number of modifications or edits,

and you realize that your most recent version of your program doesn't work,

you want to go back to some previous version of your code.

Git is also very good at allowing you to revert back

to old versions of your code.

And we'll see examples of all of that in just a moment.

So that's sort of the high level overview of what Git is

and how it works.

And in this course we'll also be using another service known as GitHub.

And GitHub is just a website whose purpose in life

is to store Git repositories on the internet.

It's to give you and people all around the world access

to Git repositories on the internet, such

that you can look at repositories that other people have created

and contribute to them or use them, and such

that you can work on your own projects, push them to GitHub so

that your collaborators or other people on the internet can also see and use

and work on those projects as well.

And so one of the first things you'll do in this course is go to GitHub.

And if you don't already have an account already you'll

create a free GitHub account.

And once you do, I'll show you what GitHub's interface looks like.

We'll just go to get github.com.

And so this is what github.com might look like once you log in.

And what we'll do right here is we're going

to first create a GitHub repository.

And repository is just a fancy word for the place

where we are going to keep track of all of your code and all of the changes

to your code.

Think of it as like a central storage place where

we're going to store your project.

So in the upper right of GitHub's screen we have the plus button

and we can go to the new repository.

And this takes us to the page where we can create a brand new repository.

In this case, I'm going to name the repository Lecture Zero.

And I'll go ahead and just click Create Repository.

And that creates a new repository for me that stored on GitHub.

Right now it's not on my computer yet, but we'll see in a moment

how we can take this repository which is right now empty but on the internet

and download a copy of it to our own computer.

And so that's where we start to introduce some of the command line

interface of Git and the commands that you might run in order to use it.

So after you've installed Git, one of the first commands you'll want to learn

is git clone.

And the git clone command has just one purpose.

What it does is it takes a repository stored somewhere

else like on some server like GitHub.

And what happens is that when you run git clone followed

by the URL of that GitHub repository, that remote version of your code

will be downloaded onto your computer so that you

have a copy of the repository on your own computer.

So I'll show you what that looks like now.

We'll head back over to the GitHub repository

that we just created over here.

And what you'll notice is that GitHub provides me with this URL.

This is the URL of this GitHub repository.

So if I go ahead and copy that to my clipboard

and open up a terminal window, for example, what I can do

is type git clone followed by that URL, just pasting it right in there.

When I press Return it already exists because I already created it.

So I'll go ahead and remove the old version of that.

Sorry about that.

And we'll do git clone pasting in that repository.

And it's giving me a warning.

Warning you appear to have cloned an empty repository, which

is to be expected because the repository that I just created was in fact empty.

And I can CD, CD for change directory, if you're

unfamiliar with the command line interface

into that Lecture Zero directory.

And now I'm inside of that Lecture Zero directory.

Which if I take LS for list or list all files

in that directory nothing shows up.

So this directory is currently empty.

So let's go ahead and fix that.

Let's add some code to this repository.

I can use the touch command where touch is just

a command that if you're unfamiliar with it can help to create a brand new file.

And I'll create a new file called hello.html.

And I'll open up that file using a text editor.

In this class you can use whatever text editor you wish.

But common ones include Adam which I'm using here,

but also Sublime and VS Code and many others.

And I'll just go ahead and create here a simple HTML web page.

No worries if you haven't seen HTML before

and this looks unfamiliar to you.

Later on during tonight's lecture we'll dive

in more depth into what all this code means if you haven't seen HTML

before to understand what's actually happening when I create this web page.

But in essence, what I'm going to do is create

a website whose title is my web page and whose contents just say hello, world.

All right.

So there I have it, a simple HTML web page.

Again, not to worry if you haven't seen this type of thing before.

But now I want to take that code and save it.

I want to make a what's called a commit to my repository

to say these are changes that I want to save because one day I might want

to refer back to them, for instance.

And so the next thing we'll need to know is git add.

And the git add command basically means we're

going to take some number of files, one or more files that we've changed

and tell Git that these are files that we want to include the next time we

make a commit, to the next time that we save

a version or a snapshot of the current repository.

So for instance, if I say git add followed

by some file name, what that's going to do is tell Git to track that file.

That this file is a file that I want to track the next time

that I save a copy of the repository.

So what does that actually look like?

If I do ls right now, again, list all the files in the current directory,

you'll see that I have hello.html, that file that I just created.

And what I'll do now is I'll say git add hello.html.

To mean, I want to take hello.html, and I

want to include that the next time I save a version of this repository.

Nothing appears to have happened, but that's

OK I have now added hello.html as a file that I want

to track the next time I make a save.

So what does that process look like?

That comes in the form of a command called git commit.

Commit it just fancy way of saying take a snapshot of the repository

in the current moment and save it.

And so how that would work is I would say git commit followed by a flag dash

m, m for message, and then in quotation marks

some English message describing what it is that I've changed in this commit,

describing what it is that's happened in this change that

makes it different from previous versions of the code.

This is useful because as you begin working

on a project that has dozens or hundreds or even thousands of commits,

later on you can refer back to this list of messages

that you yourself have written describing what happened

in any successive change, so that you know where to look if you're trying

to find a particular commit, or a particular change that you made

to your code at any particular time.

So when you run git commit dash m followed by a short description of what

you've done, what that'll do is have Git save a new version or a new snapshot

of your repository in that moment keeping track

of all of your old versions as well.

So that's git commit.

And we'll take a look at that now.

I'll do git commit dash m for message.

And the message that I want to include in this case is just added hello.html.

That's what I did.

I'll press Return.

And what you'll notice is that Git provides me some helpful information

about what it is that I just did.

It said one file changed at nine insertions because I added a new file

and that file had nine lines in it.

And so now Git has kept track of the fact that in this commit,

in this save I have added this hello.html file that

has the contents that you just saw a moment ago.

So that's me making a save to the contents of that file.

Next command that's often helpful to know and to be familiar with

is git status.

Git status is a simple command that effectively just tells you what's

currently going on in your repository.

If you forget whether you've made new commits since the last time you checked

from GitHub, if you forget whether you've made new changes that you

haven't committed yet, git status is an easy way to just run git status

and see the current status of what's going on inside of your repository.

So let's take a look at the code that we've been working on.

We'll go ahead and run git status on it.

And what we see is on branch master--

don't worry about branches too much.

We'll dive into more depth about that next week.

But importantly, we'll see that we are based on origin master

and right now it says we have nothing to commit.

So git status effectively tells us the current status of the repository,

tells us what's going on with our repository at any given moment.

So next up we've made these changes to our repository.

The next question is, now how do we send those changes back to GitHub?

GitHub's keeping track of our repository on the internet

and we've made changes to the repository adding hello.html on our computer

locally, but that isn't yet reflected on GitHub.

If we were to check the GitHub page for this repository

it would still currently be empty.

So how do we then send those changes to GitHub?

That's called a push, where we push our code from our local computer

to the repository that's stored somewhere on the internet.

And so when we run git push, that causes those changes,

whatever changes that we've made to our code locally

to be pushed to the remote server so that GitHub is now able to keep

track of those changes that we've made.

So that is git push.

And I'll go ahead and try and show you that now.

If I try and run git push it pushes those changes to the GitHub repository.

And now if I go back to here, this GitHub page for student50/lecturezero,

which is the repository page on GitHub, and refresh that page

you'll notice that now there's contents here.

Now I have an hello.html file that's located inside this repository.

And if I click on it then you can see the contents of that hello.html file

that is now stored on GitHub as well.

So I've now taken my changes that were just on my computer before

and I'll push them so that they are on the internet as well for people to see.

So that's git push.

Next up is sort of the inverse of that.

Git pull.

What if someone else has been working on your repository,

has made changes to it, and pushed those to GitHub?

And now you want to download the latest version of that repository.

You want to download the latest changes down onto your computer locally

to take a look at it.

How would you go about doing that?

That's by a different command called git pull.

When you run git pull, if there are other changes that

have happened on the remote server, notice that here locally I've

made one change, but someone else on GitHub for instance

has pushed some second change that's been made to the code.

If I run git pull, that causes any of the latest changes that

have been made on the remote server to be downloaded onto my own computer

so that I now have a working copy of the entire history of what's

been going on with my project so far.

So that's git pull.

And we'll show you a quick example of that now.

If I go back into the GitHub interface there is sort of two ways

to make changes to the code that you see here on GitHub.

Either I can change that code on my own and my code on my computer,

or actually GitHub's web interface actually has a button here

that lets me edit this code.

So let's say I wanted to add another line that

says hello, again, for instance, that I wanted to add to this file,

I can scroll down and go ahead and commit those changes.

Again, commit is just a fancy way of saying save or take a snapshot.

And when I commit those changes what I see

is that the contents of my web page on GitHub show hello, world

and also hello again.

But if I were to check my computer I just have hello, world.

Just the one sentence.

That change has been made on GitHub.

It hasn't yet been reflected in my version of the code that's

stored on my computer.

So what can I do now?

I can run git pull to say pull down any of those latest changes from GitHub.

I press Return.

And notice that it says hello.html.

Two changes, one plus and one minus.

One insertion, one deletion.

Git's not quite smart enough to know that I actually took a line

and changed it.

As far as Git is concerned I removed that old line

that just said hello, world, and added a new line that

said hello, world, and hello again.

So if I check my code now going back here, I see that it's now updated.

My local version on my computer now says hello, world, and hello again

because that was the change that I had just pulled down from GitHub.

And so via pushing and pulling code can you and other people

that you're working with collaborate together on a repository

and make sure that you're keeping track of any changes that you make.

But what can go wrong here?

What might happen and cause things to not seem as simple as they are?

Well, what if I decided to make a change here?

Hello a third time.

So I make that change and I decide to OK, git add hello.html.

I want to track that.

And git commit, add a third line.

So now I've added that third line to the contents of my hello.html file.

But what if someone else on the internet who has access to my GitHub repository

decides to edit it differently and decides to say hello, hello, hello,

and save those changes by committing them?

Now the online version says hello, world, hello again, hello, hello,

hello, but in my local version of the code

it says hello, world, hello again, hello a third time.

And if I try now to pull this code from GitHub

it's not going to be as simple as it was last time of just updating the changes

because Git doesn't quite know which change I actually want.

Here I've added a sentence online that's a different sentence.

So we're going to need some way to reconcile those two things.

And so that's where we introduce the concept of merge conflicts.

Git will try whenever it can to automatically take

any changes that have been made and combine them together automatically

for you without you needing to worry about what's going on.

But in some cases, if you and another person

have both made changes to the same lines of the same files

you may run into a merge conflict, which is what

happens when you try and run git pull.

But what happens is that there's some sort of conflict.

The pull can't happen.

And so what you'll see is a message that says automatic merge failed.

You need to fix the conflicts and then commit the results.

So what does that look like?

Well, what will happen is that if you open up the file with the conflict

you'll see something that looks a little bit like this.

You'll see a file with a bunch of less than signs

and then HEAD, some lines and then equals, equals, equals,

some more lines and then this sort of random long sequence of numbers

and letters.

It might seem a little bit arcane at the moment,

but we'll break down what this actually means.

So when you look at a file like this, which

results whenever there is a merge conflict produced by Git,

there are a couple of things to keep in mind.

One is that anything between HEAD and all the equal signs are your changes.

The things that you did on your computer before you tried to do the pull.

Anything between these equal signs and the greater

than signs here, these are the remote changes.

The changes from GitHub that you were trying to pull down that

were somehow in conflict.

That these two lines couldn't automatically be merged together.

And this long sequence of numbers and letters is the conflicting commit.

Whenever you make a commit in Git, Git represents that using a long hash.

Just a long sequence of numbers and letters

so that you can uniquely identify one commit out

of a series in a history of commits.

And this long sequence of numbers and letters

is just the name of that conflicting commit.

It is that commit hash of the one that caused the conflict.

So what do you do in a situation like this?

All you need to do is remove all of the lines you don't want.

Remove all of those less than, equal than, greater than lines

and also remove whichever part of the code

you didn't want leaving only the version that you want to be merged together,

and then get rid of any that extra white space

and then you can commit the result.

So I'll show you what that looks like if we go back over to the computer here.

Recall again, that locally we had three different sentences.

And online we had three different sentences,

but the third sentence differed.

So now if I try and run a git pull what you'll notice

is that we see exactly this.

We tried to automerge hello.html, but there was a conflict.

There was a merge conflict in hello.html.

The automatic merge failed.

We need to fix the conflicts and then commit the results.

So if I take a look at hello.html, my text editor Adam

is automatically highlighting things in certain colors for me.

But what you'll notice is you see this less than, less than head,

and then this version, which was my version, hello a third time.

And then this version down here, which is the version from online.

Git doesn't know which one I want, so I need to pick.

And I'll just say you know what?

Let's use the version that I had.

So I'll go ahead and get rid of all of these extra lines

so that I'm left with just the version that I

want, the one that says hello, world, hello again, hello a third time.

And if I then commit those changes, now Git

knows because I have told it this is how I

want you to resolve the merge conflict.

Now Git is aware of how to go about merging the two different versions

of that repository together in order to come up

with one version that is going to work for everyone.

So that's the process of resolving merge conflicts.

It can seem a bit complicated at first, but as you start to deal with them

you'll start to get a sense for where the different changes are

and how to go about resolving them.

And it's something you may run into as you go about the process of working

on your project.

A couple other useful commands that are useful to know.

One is git log.

What git log does is effectively just show you a history

of all of the commits that you've made.

If you run git log while you're inside of a Git repository,

you'll see a list of all the different commits that have been made.

Notice again that you'll see each commit is marked by a unique commit hash.

Just a sequence of numbers and letters describing that commit.

You'll see who made the commit, when that commit was made,

and also a description based on that message

that you provide whenever you make a commit of what it is that happened

in that commit so that you can see the history of what's

been going on in your repository.

So that's git log.

And then one other command that's useful to know is git reset.

So we talked about before if you've made some changes,

realize that you messed up and you want to go back

to the way things were before, you can run one of these commands

if you do git reset --hard, followed by a commit hash like the numbers

and letters that we saw before.

That will reset your whole repository back

to that version, whichever version was marked by that commit hash.

And likewise, if you run something like git rest --hard origin/master,

origin/master is a fancy way of saying the version of the repository that

was the origin of this repository where I got it from.

In other words, if I cloned my repository from GitHub then running git

reset origin master is going to reset the contents to my repository

back to the version that was previously on GitHub so that then I am

able to see whatever it was originally.

So in this case, if I run git reset --hard

followed by the commit hash of some previous version of the code,

what that's going to do is reset that code back to that older version,

and now my repository is back to a previous version

such that I can correct my mistakes and then continue working appropriately.

And so we'll show a quick example of that.

So first of all, commit my changes.

So just now I fixed the merge conflict and run a quick git status.

Oh.

I need to add the files before I commit them.

So that's a good lesson to be learned.

The way Git effectively works is that we first

need to add the files to what's called a staging area or an index.

Just telling it these are files that I want to track in the next time

that I make a commit and then you commit after that.

So if I git add hello.html and then git commit, fix the merge conflicts,

that will resolve the issue.

And if you're looking to simplify these two commands into one

simpler command know that you can also do a command like git commit -am,

where the a stands for add to both add files to the staging area

and commit them all together in one command.

So go ahead and press Return there.

And now if I run a command like git log, what you'll see

is a history of all the different commits that I've made now.

Here was me fixing the merge commits, here was when I updated HTML online,

here was when I added a third line to the repository.

So I see the history of all of the different

commits that I've made to this repository.

And let's say I wanted to reset back to an older one of these.

I wanted to reset back to this original one where I first added hello.HTML.

I can take this commit hash, the commit hash

of when I first made that change, or even just

the first couple characters of the commit hash

is usually sufficient to be able to identify it.

And I can run a command like git reset --hard followed

by that commit hash by pasting it in there.

And now I've reset the head, reset where I am in this repository

back to that older version.

And now if I check the contents of hello.html, it just says hello, world.

Back to that very first version of the HTML

file that I created way back when I first created the repository.

Yes, so Git keeps track of all the different snapshots.

In fact, if you run a command like git rest log,

just a log of all of the different references

that Git has kept track of you can see all the different changes

that are still there.

So they're accessible, but they're just not present

in the current version of the repository as you see it just there.

Yeah.

A question over there.

AUDIENCE: Once you run the [INAUDIBLE] what version of the file [INAUDIBLE]??

BRIAN YU: GitHub was untouched.

So the question was, what happens to the remote repository,

the repository on GitHub when I reset something locally?

And the answer is that any changes I make to my computer,

to my version of the repository on my computer

never affect what's going on online unless I try to push

those changes to GitHub for instance.

So if I really screw things up, mess things up on my computer completely

GitHub's version is still going to be the way it was before.

And if I really wanted to I could just download a new copy

by cloning the old version from GitHub.

If I check now, even though I reset my version on my computer

it still has hello, world, hello, again, hello, hello, hello,

because I have never pushed any new changes to GitHub after that

to tell it to make any additional changes after this point

that it knows about.

So GitHub doesn't know about any of those additional changes just yet.

Question back there.

AUDIENCE: Yeah.

So does Windows or a Mac OS [INAUDIBLE] built into it so [INAUDIBLE]??

BRIAN YU: Great question.

The question is, is Git built into Windows and Mac OS,

or is there something special you have to do?

In many cases, you will need to install Git.

When we release project zero you'll find that in the project zero instructions,

there are instructions for how to get set up with a GitHub account

and how to install Git onto your computer

and configure it correctly so that it can talk to GitHub.

But yes, typically you'll need to install it.

It's free software that you can install on your machine

and it will prove helpful as you go about starting

to work on version control.

Yeah.

AUDIENCE: Do merge conflicts only happen if you

were trying to pull from the repository and it's different,

or is there any situation where I'd be pushing changes and not

running to a merge conflict?

I don't know if that makes sense.

BRIAN YU: Great question.

So the question is, is pulling the only time that you

might run into merge conflicts?

And the answer is no.

It's the only one we've seen so far.

But any time you are trying to take two different versions of the code

and combine them, there is a possibility that you'll run into a merge conflict.

And so later on in this course, we'll take a look

at additional features of Git like branching,

where you can keep track of multiple different versions of your repository

at once so that you have your current version of your repository,

but you also have a different branch on which you're

working on some new feature and maybe a different branch

where you're working on some other feature.

And any time you want to merge two branches together to say,

OK, this feature is done.

I want to bring it back into the master branch or the official version

of the code, so to speak.

Then there's possibilities for merge conflicts there.

So pulling is one instance in which conflicts can happen,

but certainly not the only instance in which those conflicts can happen.

Yeah.

One more question.

AUDIENCE: Let's say I entered in multiple files [INAUDIBLE]

should I run Git [INAUDIBLE]?

BRIAN YU: Great question.

So the question is, all right, so far in this example

we've only ever been dealing with one file, hello.html.

What happens if I have multiple files that I'm working on?

As it might happen if I'm working on a larger project,

how do I deal with that?

Well, the answer is that you need to add any of the files

that you want saved in that commit.

And so you could you git add file one, git add file two, git add file three.

You can also do git add star, where a star just means add everything.

And that will add all of the files that you have unsaved.

And the advantage of doing things file by file

is if you've edited three files, but one of those files

is unfinished but the other two are ready to go,

you can just add those two files and commit those changes.

You only ever need to commit one after you add multiple files to say,

I want to save the changes I made to these two files,

but the changes I made to the third file aren't quite done yet

and I didn't want to add or commit those.

And so separating the add and commits step gives you that kind of control

over your repository to say, these are the files

that I want to keep track of in the next change that I make to the repository.

So that was effectively a short introduction to Git

and we'll dive into more detail about Git

later on as we progress throughout the course.

But we'll go ahead and take a short, maybe five minute break now.

And when we come back, we'll start talking about the HTML code

that we actually saw before.

Diving into HTML, what it is, how it works, and also CSS,

how we might style our web pages to make them

look a little more aesthetically pleasing.

So all that when we come back.

All right.

Welcome back.

So now that we've taken a look at version control

and how we might go about versioning our project

and keeping track of different versions of our project as we go along,

we'll dive right now into the actual web programming

aspect of the course starting by just taking a look at HTML, or HyperText

Markup Language.

This is a language via which we're going to be laying out the structure of a web

page such that when a user opens up in their web browser,

their web browser, whether it's Safari or Chrome or Firefox or some other

knows how to understand and interpret that HTML and display it as a web page

to the user.

So we'll take a look at a simple example.

In fact, we'll just take a look at hello.html.

Very similar to what we've just been working on with that Git repository.

And we'll now break this down and sort of get

a feel for what's going on in terms of what we see here

and how this is going to translate when a web browser reads code like this

and tries to interpret it as a web page.

So up here on line one, we see this sort of funky angled bracket !DOCTYPE HTML.

This first line just goes mean something along the lines of HTML

has come in a number of different versions.

It's had a bunch of different standards where people specify,

here's what's included in this version of HTML and this new version of HTML.

And the latest version of HTML is called HTML5.

And the way that a web browser knows when

it gets a web page, which version of HTML it's using

is by taking a look at that first line.

So that first line saying doctype HTML is

our way of telling the web browser that this web page is written using HTML5.

So now let's take a look at the rest of this web page.

And what you'll notice throughout this web page

are a whole bunch of what are called HTML tags.

Those are these keywords that begin with an angled bracket

and end with an angled bracket.

Right here we see the HTML tag.

And all that tag means is that angled bracket HTML ending angle bracket

means this is the start of the HTML content of the website.

And this will go all the way until here on line nine where we see a tag that is

angled bracket /HTML, where that slash just means this is the end of the tag.

So what line two and line nine sort of tell

us here is that this is the start of the HTML content of our web page and line

nine here is the end of the HTML content of our website.

And everything in between is the actual contents of that website.

And if you take a look we've divided that content to the website

into two parts.

Up here on line three we've started the head of the website.

Angled bracket head angled bracket.

That's the start of the head tag.

The head of the website is usually used for a metadata, information

about the page that doesn't really appear

in the main contents of the page, but is used

to give the browser important information about how

to go about displaying that page or other important information about it.

In this case, you see we have a title tag here

where the title in between the start of the title tag

and the end of the title tag we've included text, my web page.

And so as you might guess what this line four is saying,

is we're going to have a web page whose title is just my web page!

And that's going to be the title of the web page.

And that's information that's all included

in the header of our HTML page.

In addition to that, on line six here we see the beginning of the body tag

and the end body tag is on line eight.

And in the body of the website very simply we just say, hello, world.

And that's it.

So what we've described here in nine lines

is an HTML5 website that's got two parts.

It's got a header whose title is my web page.

That's going to be the title of the page.

And we have a body that just says hello, world.

And so now if we actually were to open up a web page like this by saying,

open hello.html, or just opening it in a web browser like Chrome,

you'll see that what we get is a web page that just says hello, world.

And if you notice up there at the top it says that the title of the page

is my web page.

So as you might guess, Chrome is reading that HTML code that we just wrote.

And it's interpreting it trying to figure out what means what.

And it knows where to put different tags,

it knows that the title tag is going to go up here in the title part of my web

page, and it knows that whatever is in the body is

going to go in the main area, the main body of my web page in general.

So if I changed the title to something else

or change the body to something else, it would have reflected here.

Of course, this is a very simple website, but it shows you the basics.

How we use HTML tags to define the structure of our page,

and then using those tags we can create pages

that are rendered nicely when a web browser sees that HTML

and tries to do something with it.

Questions about that so far?

Yeah.

AUDIENCE: Is the indentation style or functional?

BRIAN YU: Great question.

So the question is, is the indentation that we saw in that code earlier style,

or is it functional?

The answer is that it's just style.

Ultimately Chrome and other web browsers don't really

care about whether your head tags are indented

and your title tags are indented further than that.

But it can often be easy when another human is reading your code,

or even when you're reading your own code to be able to say,

OK, here's the head tag and just look straight down here

is the end of that head tag.

And so very frequently you'll see a paradigm

like that will indent anything inside of the header,

but the header itself will be aligned nicely.

And oftentimes, you'll see things that when a tag only contains one line

within it, we'll just put the whole thing on the same line where we have

title, my web page, and then /title.

But we could have just as easily if we had one or two indented the my web page

and put the /title on its own line as well.

And that would render identically.

If we go back into Chrome, refresh that page, no changes.

Chrome doesn't care about that difference in indentation.

Great question.

Other questions about this first HTML web page that we've created?

All right.

So that was sort of the introduction to just a basic HTML page,

but there's a lot more that we can do with HTML

by taking advantage of other tags.

So far we've seen the HTML team tag and the head tag and the body tag.

And right now all that's able to do for us is render some text.

And we can type more text and it would appear there as well.

But let's take a look at how we might render headings for text

because if we have text, maybe we want a heading to go at the top of our page

and maybe subheadings to go beneath it.

And so we'll open up headings.html And what headings.html is going to do

is show you a couple of other tags.

So HTML has many, many built in tags, more

than we're going to talk about today, but we'll just

introduce some of the common ones so you can get a sense for how these tags work

and the general feel of them.

And these are ones that will come up quite frequently as you go

about writing web programs using HTML.

And what you see here is in H1 tag located inside the body, where H just

stands for heading, like a big headline at the top of the page,

and one is a number that stands for its size.

So HTML has six built in heading tags inside that understand.

h1 is the largest, h6 is the smallest, and two, three, four, and five,

as you might guess fall somewhere in between.

So this is the largest headline.

Starts at h1, ends with the /h1.

Notice this continual pattern of angled bracket name of the tag, like h1,

and then the /h1 to mean this is the end of the tag.

This is the end of that head end.

So if we open up this page now by going to not hello.html, but headings.html,

what we'll see is this is what gets rendered.

We have this is the largest headline.

Again, this was our h1, this was our h2, all the way down

to h6 at the bottom which is a relatively small headline.

And one feature of Chrome and most web browsers

nowadays is that if I actually want to take a look at any web page

and see what HTML actually made it up, I can Control click on the page

and go to View Page Source for instance.

And when I go to View Page Source, what I get

is Chrome showing me the actual contents of the page that it had just rendered.

And this can often be helpful once you start

working on larger web applications trying to understand

what's actually getting rendered.

In this case, what we see here is exactly

the same thing as what we loaded before because Chrome is just

showing us the HTML contents of the page that it then

renders to look something like this.

So it's the browser that takes the HTML, understands the tags and what they do,

and renders it to look a little bit nicer like that.

So what are some other common HTML tags that we might want?

So now we have the ability to include text in our web pages,

we have the ability to include headings.

One other thing that we might naturally want to do

is maybe create a list of different items

where frequently we'll want to have a bulleted list on our web page

or a numbered list on our web page or some other type of list.

And so we'll take a look at possible ways we can do that.

And we'll see here in lists.html that I have two different examples of lists

for you or take a look at.

So the start of our web page is the same.

We have doctype.html.

This is the start of the HTML content of our page,

this is the start of the HTML header.

Here's our title.

Then in our body is where things get interesting.

So here where I said an unordered list, I

have this tag ul, where ul as you might guess stands for unordered list.

And the ul element goes from here all the way down to line 12 over here.

And inside of it I have three li's, where li stands for list item.

This is an item inside of this unordered list.

Here's one item, another item, and yet another item.

And so these are three list items that are inside of the unordered list.

And as you'll start to notice the HTML tags very frequently

nest within each other.

We have an li which is inside of a ul which is inside of the body.

And this natural way of nesting HTML tags within each other

is a nice way of being able to add and make

your website more complex by nesting more and more of these different HTML

tags together in order to create the end product that you ultimately want.

And so that is a ul, an unordered list.

Lower down on the page we also see an ordered list, which as you might guess

is labeled ol, ol for ordered list.

And that one is going to be numbered.

We have the first item, second item, and the third item.

And now if I were to open that up by opening up list.html, what we see

is we have an unordered list that just shows up as a sequence of bullet points

and an ordered list that shows up as a sequence of numbers.

Note that nowhere in my HTML that I actually say, OK, this is one

dot first item, or two dots second item, three dot third item.

The web browser knows to render it as an ordered list

and it puts the numbers there for me, such

that if I try and insert another item here I

don't need to go back and renumber the bullet points.

The web browser will take care of noticing

that this is the third list item.

This is now going to actually be the fourth list item.

And when I render that page it's going to show

me here's the first item and the second item, another item, the third item,

and the fourth item in the list there as well.

So the web browser is pretty smart about these things.

It knows the names of these tags and it knows what they mean and what they do.

And it can use that information in order to make a web page that

looks the way that we want it to look.

Questions about any of that so far, or about the tags that we've seen?

So thus far, all the web pages that we've created

have all just had text on them.

They've had text maybe just written out like unordered list or ordered list,

they have had headings on them, they potentially had lists

whether they're bulleted or numbers.

But we'd probably like for our web pages to be a little more rich.

Maybe.

Then we want to have give them some images,

some pictures to look at as well.

And so inside of my source folder where I have all these HTML files,

I have a file called cat.jpeg, which is just a photo of a cat.

And maybe I want to take this photo of a cat

and I want to put that on to my web page.

How might I go about doing that?

Let's take a look now at imagezero.html.

So what we're looking at here is a simple web page.

It looks a lot like the ones we've already

seen with one slight difference. so here in the body we see on line seven

that we have an image tag, but there's something a little bit

different about the image tag.

In fact, there's two things that you might notice.

Thing number one, we see the start of the image tag

but we don't really see an end to the image tag.

All the other tags have body and /body, title and /title head and /head,

but there's no image and then /image at the end of it.

And the reasoning for that is that not all of the HTML tags

require a beginning tag and an end tag, a start and an end

because some things like images, it doesn't really make sense to say,

OK, start the image and end the image and what goes in the middle.

You're not going to type text in the middle of the image for instance.

And so for tags like the image tag you don't need an end tag.

It's just sort of a self-contained tag that doesn't

require an end tag to go along with it.

The second thing that you'll notice about this tag

is that it's not just the name of the tag.

The name of the tag is img, for image, but we've also

added what's called an HTML attribute.

And this HTML attribute called SRC, or source is providing

additional information to this tag.

It's saying this is an image tag that I want to render to the web browser.

But without any additional information the web browser

wouldn't know which image to render.

It wouldn't know whether to render an image of a cat

or a dog or a jellyfish or something else entirely.

And so what we have to do in this case is provide that information

to the web browser.

We have to tell in our HTML code here's the name of the file

that we actually want to render on the page.

In this case, it's cat.jpeg, that same file that I was showing you earlier.

And if instead, the image that you wanted to display

was somewhere on the internet, some linked

to an image that was on Google Images for instance

you could just paste in a link to an image and that would render on the page

as well.

So if we then go and open up imagezero.html inside of a web browser,

what we'll see is a very big--

we'll see that cat.

And why did the image render so big?

This probably isn't the type of interface

that I want to present to my users.

If I want to show my users an image of a cat I don't want it rendering huge.

And I guess the reason for this just happens

to be that the cat.jpeg file that I've stored on my computer

is a very high resolution image.

It's many pixels wide by many pixels tall.

And as a result, my web browser without being told any additional information

about how to deal with something like this is just going to take the image

and render it at full resolution because it

hasn't been told to do anything else.

But fortunately, for us in order to control that and have a little bit

more control over what's going on when our web page renders and is displayed

to the user, we can add a couple additional attributes to the image tag.

So what we see here is the exact same web page.

We have the image tag and the source attribute,

but we've added two additional attributes.

We specified a height attribute that says

render this image that's 200 pixels tall and a width attribute that says render

this image that's 300 pixels wide.

And so now when I open up this same web page

but change image zero to image one, it's going

to just render the image as 300 pixels wide by 200 pixels tall because I've

told it using those HTML attributes that this

is what I want the dimensions of the image to ultimately be.

And so we noticed that some of the attributes that we

use in HTML, like the source attribute, you need that source attribute.

If you don't provide a source attribute your web browser's not

going to know what image to add.

But there are many, many more attributes that are optional.

Attributes ones that you can include if you want to.

You can optionally specify the height or the width

of the image that displays in your HTML page, but you don't need to.

But you should be careful because your web browser is just

going to listen to you no matter what it is that you type in.

If I say, all right, I want the width to be 300, but I want the height to be I

don't know 700 pixels for instance.

And then I try refreshing this page, suddenly

the cat doesn't look quite right anymore because I've

distorted the image by telling it exactly what dimensions to display it

as.

But the web browser will be smart if you give it the opportunity to be.

So if I just say, height is 700 pixels but leave off the width for example

and just say render it as a 700 pixel tall cat it will render to 700 pixels

tall and adjust the width appropriately in order to match.

So if you are going to specify both the height and width to something,

make sure the dimensions are what you want

them to be otherwise oftentimes it's best just left up to the browser

to make that determination for itself in terms of what makes the most sense.

So that's images and how we use HTML attributes to adjust

the behavior of particular HTML tags.

Questions about that?

Yes.

Question over there.

AUDIENCE: How would you make the image as a proportion [INAUDIBLE]

web browser [INAUDIBLE]?

BRIAN YU: Fantastic questions.

So the question is, how do we take this image and make it sort of proportional?

Because if I'm here looking at it on a computer with a sort of a wide screen

then this looks great, but if for instance I

were to shrink down this page, now most of the cat gets cut off.

And so HTML, and later we'll see CSS for styling,

has a number of different ways via which we can control exactly how tall

or how wide things are and control the size of things.

One way is by specifically specifying a number of pixels.

For instance, I might say that I want this cat to be 700 pixels tall,

but I might alternatively say, all right, you know what?

I want the width of this cat to be 50%, 50% of the total width of my web page.

So if I save that and render it, what I see

now is that I didn't tell my web browser here's

how many pixels to render this image as, it just

knows 50% of whatever the width of the web page

is, that's going to render as half of that.

And now if I shrink the web page, before the cat didn't change size

because it was a fixed number of pixels and if I shrink the web page

it doesn't really care, but now if I shrink the same web page

you'll notice that the cat shrinks with it.

As my web browser gets narrower, 50% of that full width of the web browser

is getting smaller.

And this is a trick that's often employed.

Now, if you start to think about how to make your web

pages responsive to people using mobile phones or tablets

or devices of different sizes, making sure that your content looks good

both on a computer but also on smaller devices as well

is very, very important nowadays as web applications

become more and more useful on varieties of different platforms.

And so techniques like that of using a percentage instead

of a number of pixels to say I want this to only show up as 50%

can often be a helpful tool to make sure that you have that dynamism, that

responsiveness in your website to make sure

that it's able to adapt accordingly.

Great question, though.

Other questions?

All right.

We'll keep going.

So that was images.

We'll show you a couple of other things that HTML can do.

One thing that it's very useful for is rendering tables.

So we will have tables of data with rows and columns

and we want to display that data to the user.

Let's take a look at table.html, which will be an example of that.

So what we have here is a table that represents US presidents.

Just the first two.

But what we'll notice here is that we have a table tag that begins the table.

And then we have a whole bunch of tags nested within it.

We have a tr tag, which stands for table row.

And then within that we have th tags, which stands for table headers.

So if you think about this just going one layer at a time,

we start our table.

And the first thing in our table is going to be a row in that table

where that row is going to consist of three headers or three columns that are

being headed by these individual cells.

We have first name, last name, and years in office.

And now we end that row with /tr.

That's the end of that row and now we start another row.

Here's a table row that says, all right, here is

going to be the start of a new row of this table.

We have George and then Washington and then

the years of George Washington's time in office.

And if we scroll down a little more we see

we have another row underneath that.

Notice that inside of the row all of the individual cells

are stored in td elements, where td stands for table data.

This is just the data that is contained within that particular row.

And so now if I were to open up table.html, what I see

is something that looks something like this.

I see my title.

Notice presidents was here labeled as a h1,

so it's going to render as a large heading.

And within that I have individual rows.

Here's my header row.

The th ones make it render as sort of bold.

And I have the names and in the second row inside of that table as well.

Now, this might not look like a very fancy table.

It doesn't have borders or a coloring or it

doesn't look like it could be aesthetically pleasing.

We'll see later on in tonight's lecture how

we might go about styling a web page like this in order

to make it look a little bit nicer and look a little more aesthetically

pleasing.

But that's an individual table.

And if I wanted to, I could add an additional row to this.

Right here is two rows and I can just continue to add more elements inside

of this HTML page.

So I can say one new table row and I'll end that table row.

And inside of that is going to be table data Thomas Jefferson and 1801 to 1809.

And so if I refresh that page, we see that the third row in that table

now appears because I've added to the HTML code.

And you can continually do this by adding more and more HTML elements

to the contents of my HTML page.

One other HTML tag that we'll take a look at just to see how they work

is form.html.

So what we're looking at here is an HTML4.

Oftentimes, when we're working with applications

we don't just want to display information to the user,

but we want to collect information from the user in order

for them to either sign up for our website or log into our web site

or submit data to us in some other way.

And so what we see here is a simple example of an HTML form, where

we have this form tag in the end of the form to say here

is going to be a place where users can input data.

On line seven we have an input tag.

Notice that like the image tag there is no end tag here.

This is just going to be a place where users can input text

and we need to tell the web browser what type of information

the user is going to be inputting.

In this case, we're saying the type of that information is just

going to be text.

And we're specifying a couple of other optional attributes

that give additional information to this form so that it knows how to behave.

Placeholder is just full name.

Placeholder, if you'll recall, and we'll take a look at it in a moment,

is sort of that same text that appears in a text field

before you start typing in it just to give

the user a little bit of an indication as to what's expected of them

as to what goes there.

And this name field at the very end just gives a name

to this input field that says that this input field is

going to store the name of the person.

This won't become relevant just yet, but as we'll see later on in this course

as we start to actually do things with the form, take this information

and log it to a database or process it in some way,

being able to reference a particular input field by its name

can ultimately be very, very helpful.

And then finally down here after they type in their name,

let's give them a button to click on.

That's created just by using a button tag.

And the name of this button is going to be Submit, and then /button to say, OK,

that's the end of that button.

So if we render that form and take a look

at what that looks like when we open it as HTML

we see it's going to look something like this.

So we have a spot for the user to type in their full name.

Notice that full name is automatically placed there as the placeholder text

that we put in or HTML, and they can type their name in there.

And then the Submit button is a button that

would theoretically submit that form.

Now, this form doesn't yet do anything because we haven't hooked it up.

We haven't told the form what to do after someone clicks on the Submit

button, but we'll see later in this course

how we can begin to using other programming languages like Python

and JavaScript begin to take the results of form information

and do something useful with it.

But for now all we're doing is designing the front end.

What the user sees when they visit a particular web page.

So that was the form.

Questions about the forms or tables or images

or any of the other HTML elements or tags that we've seen thus far?

All right.

One helpful way to think about HTML as we

think about designing our HTML websites is thinking about them

like a tree structure.

If you're unfamiliar with tree structures,

effectively think of them as a combination of nodes

where nodes are just points within this tree that are connected to other nodes.

So in this case, if we look at a simple website like the Hello, World page

that we created before, if we wanted to represent this as a tree in HTML

we typically call that tree the document object model.

It might look something like this.

We have HTML at the very top.

Everything in our web page is contained within this HTML tag.

And within that HTML tag we have the header,

that head section of the HTML page, and we have the body of the HTML page

because inside of HTML we have the head here and the body there.

Inside of the head we have a title because the whole title

tag is nested within the HTML header.

And inside of that title is our text, hello.

And likewise, inside of our body is just this text, hello, world.

And you can imagine for some of our more complicated pages

that we saw earlier where we had tables, for instance,

that we might have a table element inside of our tree

and which is connected to a whole bunch of tr's for table

rows each of which itself is connected to a whole bunch of th's for table

headers, or td's for table data.

And you can represent this entire HTML page as this big tree.

And it might not seem very intuitive as to why

you might want to do that right off the bat,

but as we'll soon see, especially as we start diving into JavaScript later

on in the course that by having an understanding of this tree can

we start to manipulate it, can we start to add things to the tree

in order to add more to our web page, remove things

if we want to take things away from the web page

while the user is interacting with it.

And as we'll see in just a moment we can use this tree in understanding

what's contained within what to begin to style our web pages.

And styling our web pages is going to be the process of taking what so far has

just been websites that have a white background and black text on it

and maybe images and other things as well,

and starting to add some of our own custom styles

to it in order to make it look a little bit nicer to the user.

Because a big part of web development these days

is not just making sure that the web site works

and that it does what it's expected to do,

but also that it's visually appealing to the user.

That it's something that they would want to interact with,

that it looks nice, that it looks professional.

And so that is not something we can do with just HTML alone,

but it's something that's going to come in with an additional tool called CSS,

or cascading style sheets which is a different language altogether

and we can use to interact with HTML in order

to style the HTML in order to change the way the HTML looks according to rules

that we set in order to add color to our web pages, for example,

or add spacing in places where we want spacing or add borders to things

or add a background to things, for instance.

And so what we'll take a look at now is how

we might be able to leverage some of the tools of CSS

in order to design a web page that looks just a little bit nicer than the web

pages that we've already been working with.

So let's take a look at stylezero.html.

And what we'll notice is that this web page is

very similar to ones we've seen before.

It's got a body, it's got an h1 as the headline,

it's also got these p elements where p just stands for paragraph,

like a paragraph of text.

But the key difference here is that we've added a new attribute.

We've added this style attribute here that's associated

with h1, that headline.

And that style attribute is equal to something a little bit complicated,

but let's break it down into parts.

We have in quotation marks, "color:blue;text-align:center";

And so what we see here in this style attribute of our heading,

R2 is CSS properties, where a CSS property is just some specific style

property that the browser is going to understand and render in a particular

way.

And as you might guess what's happening here

is we're saying that we want to assign the color property of this heading

to blue and we want to assign the text align

property of this heading to center.

And so what that's going to do is instead of just rendering an h1 as we

normally would as just a black big headline on the left side

of the screen, we'll render it as a blue headline that's centered on the screen.

And so if we now open up stylezero.html, and we see a web page

that looks something like this.

That big heading is still there at the top of the page,

but it's a little bit different now.

We styled it to be blue, we styled it to be centered.

Whereas before, if we were to just get rid of this style tag

altogether and say that this is what that looks like without any

of that additional styling.

And so leveraging tools like that we can start

to build up styles for our web page.

We can start to make things look the way we want it to.

We can apply a color scheme to our website

in order to put whatever themed colors we want to put on our site.

And this can be used in order to add the sort of styling.

And HTML and CSS have a very rich vocabulary

for the types of things that can understand.

Obviously, we can be simple colors.

We can do the blue color or we can say red to make the headline render as red

instead, but there is something like 140 different colors

that HTML and CSS know how to understand and interpret.

So I could do something like color:dark magenta, for instance.

And if I refresh that page then the heading is rendered as dark magenta.

And if that's not enough color sophistication for you,

the 140 different named colors out there,

you also have the ability to select exactly which color you might

want by using that colors hex value.

And so in HTML and CSS and when we're dealing with color more generally,

we'll often represent color using a format called RGB, or red, green, blue

where we specify how much red is in the color, how much green is in the color,

and how much blue is in the color.

And using different combinations of red and green and blue,

where zero means very little red and 255 means a whole lot of red.

And likewise for green and blue can we represent basically any color

that we want to.

And so if we type in HTML color picker, for instance,

and we can see over here that this color, this shade of blue

is 66 amount of red.

So a moderate amount of red and a little more green, 134 green and 244 blue.

So a whole lot of blue.

And that is this particular color.

And so if we wanted to make our headings some different color, for instance,

maybe we want it green and we want it to be a darker green like this color,

for instance, that's this color.

That's 12 red, 142 green, and five blue.

And that color is represented by this up here.

This is called a hex code.

If you're familiar with hexadecimal or base 16,

it's effectively these three numbers 12, 142, and five represented in base 16.

No need to actually understand where that number comes from,

but effectively know that the first two of these numbers and letters

represent the amount of red, the second to represent the amount of green,

and the last represent the amount of blue.

And if I take that now 0c8e05, and in my HTML code rather than dark magenta,

I say #0c8e05, for instance, that same color hex

code that I saw before and then refresh my page,

now it's going to render using that exact same green.

So by using hex codes and understanding RGB values,

we can have a lot more control over the colors

that our web page uses by specifying exactly which

color that we want to display when that page ultimately gets rendered.

So that's the basic introduction to how we

might use the style attribute to begin to add some styling to our web pages

and make them look just a little bit nicer.

Questions about that so far, CSS or colors or anything we've looked at?

As we can imagine, if we start to-- and I'll

change this back to blue just for good measure.

If we start to add a lot of styling to our HTML web pages,

this is going to start to get cluttered pretty fast.

I can start to add additional styling here.

If I want my paragraph here to be purple and I want this paragraph over here

to be red, for instance.

And this will certainly work.

I can style things in different colors and that's going to work just fine,

but I've mixed my CSS code of describing what color

and how I want things styled with the actual contents of my page,

of the actual content that I want to be displayed

when the user goes to the page.

And oftentimes, that can be seen as just a little bit messy.

We might look for a cleaner and more elegant way of styling our page.

And CSS offers a number of different ways via which we can do that.

So one way is seen here in styleone.html.

So notice in styleone.html, which ultimately

when we open it is going to render exactly the same way.

Big blue headline and then two paragraphs of black text.

We've done something a little bit different here.

What we've done is the body of the web page

is the same as it was before without any style tag attached to it.

The h1 no longer has a style attribute.

It just says h1m welcome to my web page.

What we've added is we've added an extra section to the header of the web page.

We've added the style element to the header

to say here is some style information for the web page should

know that should be included in the entire web page, the rules

to follow when deciding how to style and how different parts of the web page

should appear.

And what we see here on line six is that inside the styling of the web page

we have h1, meaning here is how you should style any h1 that you see.

We say h1, the color is going to be blue and the text align property

is going to be centered.

And that's why ultimately that page looks exactly the same

because effectively the browser is doing the same things.

We've just moved the CSS styling away from the body of the HTML content

to the web page.

And this is a paradigm you'll start to see

a lot as we begin to approach web development from a number

of different angles that whenever we're intermingling

a lot of different things, oftentimes it can

be helpful to take one part of the web page

and separate it out into a different place such

that it's more logical or more easy to understand or more readable

or ultimately more elegant.

And this is one example of that of taking the h1 out of the h1

from the body and just describing it in the header of the web

page in terms of how the entire page should be styled.

And one other note about this is that when we put the h1 in the style tag

in the header, it's going to apply to every h1

that it sees throughout the page.

So if I add another header, adding here is a second headline,

and that's also an h1 because up here in our style tag

we've told every h1 to render as blue colored

and centered in terms of its alignment of the text.

When we refresh this page the second headline

is also going to show up as centered and blue as well.

Whereas before in that first example, if we were to add an h1

and we wanted it to be styled the same way, we would have needed to go ahead,

and h1 style equals color blue text align center and repeat that same thing

again for the second one.

And generally speaking, whenever you find yourself repeating the same code,

or even copy pasting the same styling code again,

in order to make it to apply to something else, generally speaking you

should look for a better designed or a more elegant

way of doing the same thing because ultimately this repetitiveness gets

difficult to maintain.

If I want to change the headlines from blue to red, for instance,

I now need to change the headline in two different places in my web page.

Whereas, in styleone.html, where I have all the styling

contained inside of just this style element,

inside of the header of my web page.

If I wanted to change both of my headings to red instead of blue

I just need to change it in one place, changing color from color blue

to color red.

And now both of the headings change in their color

because that Heading Style is applied to the entire document as the whole.

Questions about that?

OK.

But we can in fact get even better at how

we go about trying to separate out the CSS

because natural questions that might come up now are number one,

we still have this styling code inside of the HTML file,

when it sort of feels like something separate.

The way that we style our website is sort of

fundamentally different from the actual content

of the text that goes on our website and the structure of our web page

in general.

But another issue that might come up is, what

if I start to build larger web applications that don't just

have one HTML file, that have two, three, four, or more HTML files

that all want to have red headlines that are all centered.

Of course, I could take the style tag and I

could copy paste it across all of my different HTML files,

but again, that brings up the same problems that we saw before.

The problem of whenever you find yourself copy and pasting

code and repeating code we run the risk of making it more difficult to maintain

and ultimately making it less elegant.

If we wanted to change the color down the line

it becomes a whole lot harder because we have

to change it in many different places.

So what can we do about that?

Well, we can take that CSS code and just separate it into a different file

altogether.

So what I'll show you now is styletwo.html.

Styletwo.html does the exact same thing as styleone.html.

And all the source code will be made available to you afterwards as well.

Styletwo.html shows you a big blue centered headline,

but how is it doing that?

Well, the body is still the same and we no longer have a style tag in the head,

but what we do have is this line here, line five.

Link rail equals style sheet href=styles.css.

So what's going on here?

This link tag is effectively telling us we

want to link in some other file that's going to provide us information to help

us know how to render this HTML page.

And what kind of information are we trying to render?

Well, it's going to be a style sheet.

Information about how to style our web page.

And which file are we going to include?

Which is the file that we want to link?

Well, it's styles.css.

And so now if we take a look at styles.css,

what's going on in there to allow it to render the CSS the way

that we want it to?

Let's open up styles.css.

It's exactly the same thing as the contents

that we saw in the style tag of our HTML header before.

It's just h1, color is blue, text align is center.

And that's what allows us to get this.

If we add additional properties, maybe I want my paragraphs

to all be red, for instance, and I save that, now if I refresh of the page

the paragraphs are red.

The HTML file didn't change at all.

Styletwo.html stayed the same.

Yet, when I refreshed it the styles changed because this linked file,

this linked CSS file that is defining the style for my styletwo.html file

has been updated to say, now I want all of the paragraphs

to show up with red coloring instead of the original black.

And so we saw three different ways via which we can link CSS

into the contents of our HTML code.

One, just by including that style attribute directly in the HTML.

The second way, factoring it out into the header of the HTML

page so that it applies to the entire page.

And then finally, what might be one of the most common paradigms

you'll use, especially if you start building larger web applications is

this method of saying, take the CSS, separate out into a different file such

that even if I have many different HTML files

they can all reference the same CSS file so that they all

get styled the way that I want the page to be styled.

So those are the basics of how we might go about using CSS.

Now let's take a look at a couple of the common CSS properties

that we might use.

So far we've seen color to give a particular element of color in HTML,

and we've seen text align to say I want to center this text instead of left

justifying it.

And we can also use CSS to change the size of different elements as well.

So let's take a look at size.html.

And for good measure I've just included the CSS in the header

like we saw in the second example before.

Though in practice in a larger application

you might want to move this information into a different file.

But what you see here is inside the body I have a div.

And a div just basically means a division of my code.

Some section of my code that doesn't really have any real formal meaning.

It's just a section of my code that I want to do something with,

maybe style in a particular way.

And here's a style I've applied to it.

Background color is going to be teal, width is going to be 100 pixels,

height is going to be 400 pixels.

So if I now go to size.html, this is how it gets rendered.

We have a vertical just block of HTML content that says hello, world.

But in particular its background color is teal, it's got a particular width

and it's got a particular height as defined

by what I included inside of my style tag just a moment to go.

And so using these width and height tags we

can start to really define exactly what our website looks like.

If we change the width to 500 pixels instead of 100

and refresh the page there, we see that now it's a fair bit wider.

And so we can control exactly how the web page shows up

just by making these small modifications to it.

But now what if we wanted to add a little more to this website

in terms of its design, in terms of the spacing of this page,

in terms of thinking about what it's going to look like?

You notice that right now this hello, world block

is very close to the upper left hand corner of the screen.

Maybe we would want to move it around a little bit more.

So that's where we can start to introduce the notion of a margin

around the edge of a particular HTML element.

So for instance, if I go in here and set the margin of the div

to be 30 pixels, for instance, and now refresh that page,

now we see that hello, world has a margin around it.

It's got this sort of 30 pixel invisible border that's surrounding it.

And it helps to space that out from different elements.

And so controlling margin can often be helpful

when you're trying to lay out a web page with a bunch of different elements

and you want to control how far apart different elements are from each other.

The margin is very helpful there.

Another thing you might notice is that hello, world right now

is very much just directly at the edge of this teal box, which

looks a little bit suboptimal.

Maybe I would want to change that a little more.

And for that I can add in another CSS property called padding.

So I can say, all right, let's add a padding of maybe 20 pixels.

And after I refresh that, now you'll notice

that hello, world is internally padded by sort

of an invisible border of 20 pixels.

And so margin and padding are both used in order to control spacing.

But the key difference is that the margin of an element

is the space around this outside of the border of the element.

So this is my div, this teal box.

The margin is what's outside of it.

I've got 30 pixels of space along that side

and the padding is between the content of the element and that elements

border.

So this right here is 20 pixels worth of padding for the hello, world

that's located inside of this div.

And so using margin and padding, especially on larger web applications

you can start to really control the look and feel of the website

in order to make it display exactly the way that you would want it to.

All right.

Thus far we've also only been interacting with our HTML page

in the sense of having text that is all of the same font.

It's sort have been the same default font

that HTML tends to use whenever a web browser is displaying HTML content.

And maybe we'd like to have a little more control over that.

So let's open up font.html, and take a look at what's going on there.

So again, we have a body inside of which is a div that says hello, world.

And inside of the style tag up here we've

added some special styling to that particular div.

In particular, we've added three things.

We've added a font family that effectively just says

this is the font that I want this div to render in.

And notice that I haven't just said give it one font.

I said Arial, but I said Arial, sans serif.

Reason for this is when we start to think

about making sure that our website looks right in matter what browser it's

loaded on.

So maybe you were wanting to even include some font on your web page

that the user's computer doesn't have, or that the user's web browser just

doesn't understand.

And so if you include multiple thongs as the font family

in the styling of our HTML, then what's ultimately going to happen there

is-- sorry.

There's an extra tag there.

What's ultimately going to happen is that the web browser will first

try and match the first font that I provide.

It will try and use the font Arial if at all possible.

But if it doesn't have the font Arial, if the web browser doesn't

know what Arial is or can't find that font,

it's just going to default to any sans serif font.

And so oftentimes if you want to use fancier fonts on a web page

it can be a good idea to include the font that you want,

but after that some additional more common fonts

that might be more common in other browsers

on older browsers in particular that way you

can guarantee, or at least know with high probability

that when a user looks at your page they're

seeing what it is that you actually want them to be looking at.

In addition to the font family, we've additionally

specified the font size for how big we want the font to show up as.

In this case, 28 pixels tall.

And finally, a font weight.

You want the fun to be bold, for instance.

So now if we open up font.html, we see that what we get

is slightly different text rendering that what we saw before.

We see hello, world, but it's no longer in that same font

that it was previously.

It's now 28 point font in size, it's now in a particular font,

it's now bold because we were able to control

the font that was present there.

Couple other CSS things that we'll just take a look out before we move on.

We'll take a look at border.html So again, we have inside of the body

a div that says hello, world.

Just [INAUDIBLE] saying hello, world in some rectangular box.

But in the past that rectangular box has sort of been invisible.

We've seen the words hello, world, but there hasn't been

like in a physical box drawn around it.

But now there can be.

Up in the style tag we're going to specify that we want inside of the div

for there to be a border and that border to be a three pixel, solid blue line.

And so by specifying border three, pixel, solid blue

we can open up border.html and now we see

hello, world inside of this rectangular box that is a three pixel blue line.

And we can change this, can customize it however you like.

It can be a five pixel, dotted red line, for instance.

And now it's going to look something like that.

So we have full control over what the border looks like.

And again, there are many, many CSS properties.

Far more than we're going to be able to look at in just tonight's lecture,

but I'm giving you a taste of them, just a teaser

of what CSS properties are out there so that as you start

designing your own web applications you can

think about what do you want the web page to look

like, you can get a feel for what CSS is capable of.

And as a result, you can start to design pages that look

the way that you want them to look.

So that's borders.

And now let's try and use some of the CSS that we've learned in order

to improve the style of one of the HTML pages that we've already looked at.

So let's take a look at table.html.

And recall that table.html was just a simple web page that

listed presidents of the United States.

We have Washington, Adams, Jefferson.

And right now this table doesn't look particularly fancy or particularly

great, but we can use CSS now to begin to add styling to it,

to begin to control the way this looks to make it look the way we want it to.

Maybe, for instance, we want a border around this table.

So up in the head I can add a style tag and say, all right,

around the table lets add a border and let's make it two pixels solid black.

And now around our whole table we just have

this box, a two pixel solid black line that's

surrounding the entirety of this table.

So that's good.

That's a good start, but it's not great.

I also would probably want for there to be borders

around individual cells for this table.

Lines that are dividing up the rows and the columns.

And so let's do that now.

So now I would want to apply styling to the table headers.

Let's apply a border of maybe one pixel, solid black this time

and also around the table data.

One pixel, solid black.

Recall that the headers were these things at the top the first name,

last name, years in office.

Whereas the data, the td were the individual cells

that were composed within that table.

And by specifying this now and I refresh of the page,

now the individual cells also have a border around them.

We see a little box around each one of these individual cells.

And one thing you may have noticed is that the styling for the table header

is the same as the styling for the table data.

They're both border, one pixel solid block.

And it felt a little bit repetitive for me to have

to say the same thing two times.

So what I can do instead is just say th,td, to mean take this styling,

apply it to both table headers and table data and then I don't need this

additional information for the CSS.

I just say the table is going to have a two pixel, solid block border.

The table header and the table data will each have a one pixel solid back

border.

And if I refresh that the same exact layout results.

I don't see any changes in the styling because this is fundamentally

the same meaning as before.

We've just managed to eliminate some of that redundancy.

What else might we want to do here?

Well, right now one thing that you may notice

is that the lines are repeated twice because we

have a box around each one of our individual cells

we see two lines between each individual cell instead of one.

And so CSS found a way to get around this just an additional property

that you wouldn't know about unless you looked it up or had used it previously.

But [INAUDIBLE] additional CSS property called border collapse.

And if I had border collapse collapse to this styling of this HTML page

and then refresh it, now we see that those double borders go away.

We just have just the borders we want.

And if we didn't know that border collapse exist as a CSS tag

it would be very easy to look up.

You could just Google CSS property for removing double borders in a table.

And you'll likely find someone online who has said,

use border collapse:collapse and you can then use those CSS properties

in your own web design as well.

Now we might want to add some color to this as well.

You might want the headings of our table to be in a slightly different color.

So I might say for the table headers, let's

say we want the background color to be light gray, for instance.

And we refresh that and now the background for our table headers

is light gray.

And maybe you want to add some spacing.

Recall that there are two ways that we've

added spacing thus far in this course where

margins are around the outside of the box

and paddings on the inside of the box.

Right now I get the feeling that these cells are a little bit

cramped, that there's not a whole lot of space inside those boxes.

So maybe I want to add more space there.

So maybe for each of my table header cells and table data cells,

I want to say padding five pixels, just to add five pixels of padding

on the inside of my individual cells.

And now it looks something like this.

Looks a little bit cleaner, a little more room for the cells

to breathe because I've added some padding in there

just by adding these additional CSS properties.

I can additionally add changes to the size of this.

Maybe I want the table to be wider.

I can say make the with 500 pixels, for instance, and now it's 500 pixels wide.

But as someone mentioned earlier before, this

might not be great because now if I shrink down this page

now I've sort of lost information.

I can scroll over to the other side, but the table doesn't respond with me.

So I can instead say something like, what width?

Let's make it 50%.

So the width of the table takes up 50% of the view

of the entire width of the window.

And now as I shrink it down or make it larger

you'll notice that my web browser knows automatically

we need to add new lines to the table headers

in order to make room for all the data.

The web browser takes care of all of that.

I just need to tell it, here's how I want the data to render,

here are the specific style properties that I want to add to the HTML page.

And the result is this.

And finally, one thing I might want to do

is say, for all the table data let's align it centered.

And what we see now is we have a table that

looks a whole lot nicer than the table we had just a couple of moments ago

when we didn't have any of the CSS at all

and it was just all the tech sort of on one side without any borders

or centering or styling added to that.

So using just a couple lines of CSS, we can

start to take the contents of our pages and make

them a whole lot more responsive.

A couple final points to take a look at.

Any questions about this so far before we move on though?

Yeah.

AUDIENCE: [INAUDIBLE]

BRIAN YU: Yep.

AUDIENCE: [INAUDIBLE]

BRIAN YU: Great question.

So the question is, there are so many properties out there.

I've shown you a whole bunch today, but there

are far more that I haven't even managed to touch on

just because we don't have enough time.

How do you know which one to use to make a certain thing happen?

Oftentimes, the best way to do this is to look for documentation online.

If you look up CSS property documentation

you'll often find lists that just show you all of the different CSS properties

that you can apply to style a particular element on the page.

And you can use those.

Or likewise, if you're looking for something very specific,

you want to know how do you get something to happen?

Maybe I didn't know about collapsing those borders before,

I can just perform a Google search and look for CSS table,

combine borders of cells.

I don't quite know what I'm looking for, but I

know approximately what I'm asking for.

And if I look around carefully enough I'll notice that in the very first

result it tells me I can use that border collapse:collapse property in order

to make that happen.

So even if I didn't know how to do that particular thing

or didn't know how to do some other particular styling,

this is all readily available information

that you can look up because others have likely walked that trail before,

tried to solve the same problems and are likely have a way to use CSS in order

to make the styling look the way that you want it to ultimately look.

So great question.

OK.

One more example just to quickly show you.

What we have here are divs and spans.

So we've seen divs before in a little bit of detail, where the div is just

a division of my web page.

That's just going to be some section of the web page, some vertical section

of my web page.

And a span as we see here, is really just the section of my web page

that might be in the middle of some text.

They don't really have the same kind of meaning the way that an image

tag is an image and a list tag creates a list and a table tag creates a table.

The divs and span tags really don't do anything at all,

but they allow us to label different parts of our page.

I can say div and then give this an id, where an id is just

an attribute that uniquely identifies a section of my web page via a name

that I give it.

So I can say div id equals top, where top is just

a name that I picked to say, you know what, this is going

to be the top section of my web page.

And I'm going to put it in a div just so that I can name it,

so that I can name it top to mean this is the top of my web page.

And likewise here, div equals middle.

I picked the name middle as the name for this section of the web page.

And then div id bottom just means I have a section here

and I'm naming it bottom.

And I can give it a name by using this id attribute.

Then these spans here.

Why am I using those?

Well, I have this additional attribute called class.

Class is an attribute that lets me give names to elements as well,

but it lets me give names to a certain type of element.

So with id's.

When I have an id on an HTML element that id needs to be unique.

There can only be one HTML element in my web page that has an id of top,

only one that has an id of middle, and only one that has an id of bottom.

But I can give many things, as many as I want the same class.

And so here I'm saying, I'm going to call this class name.

And that way if I want to I can refer to all

of the different spans who have classes name and style them

in a particular way.

And you'll see what I mean by this in just a moment if it's confusing.

But right now we have three divs.

This is the top of my web page, this is the middle, this is the bottom.

Where top, middle, and bottom are inside of these spans

who have a class value of name.

So what can we do with that?

Why are we labeling things with top, middle, bottom name?

Well, if we take a look at the styling up here,

this is the contents of our style tag.

We have this pound sign.

And the pound sign in CSS is short for id.

What this is here saying is get me the thing whose id is top

and style it in a particular way.

In this case, style it with a font size of 36 points.

Here, take the thing that has id of middle and style

it with a font size of 24 points.

And likewise, take the thing that has id bottom and style

it with a font size of 12 points.

And before I wouldn't have had a way to distinguish the styling between three

different divs, because if I had said div style that is 24 point text

it would have applied to all three of my divs,

but if I only want it to apply to one of them an easy way to do that

is to uniquely identify it.

This is the top div and then say, OK, get the thing whose id is top,

here's how I want you to style that thing.

Likewise down here, if the pound sign means id the dot sign in CSS

means class.

So dot name means take anything whose class is name and style

it in this particular way.

In this case, make the font weight bold.

So now if I open up divspend.html, this is the contents that I see.

I had three divs and you can sort of see them here

even though they're not laid out.

This was my top, this was my middle, this was my bottom.

And because I said get the thing with id top

and make it the biggest in font size, make the middle one somewhere

in between, and the bottom of the web page

the smallest font size at just 12 points,

then they were able to render using the correct fonts

even though that they're all div tags.

And these names, top, middle, and bottom,

they're all bolded because they were inside

of spans that had a class of name.

And I said take all of the things that have a class of name and style

them with a font weight of bold.

Take a look at that one more time in case

it was confusing now that you've seen what this web page actually looks like.

Inside the body we have these three divs.

And these id's never show up in the contents of the HTML.

These names are only present inside the HTML code and not

when it gets rendered in the browser.

But I'm giving the divs these names such that later on in my style

tags I can go in and style them however I want them to,

by giving them a particular font size, for example, in order

to result in them rendering the way that I want them to be rendered.

And likewise, the same for when we have individual names.

So that's a brief introduction to CSS.

Next week we'll dive in even further into HTML and CSS.

But any questions about the CSS that we've

seen so far in terms of how to go about styling our web pages?

Yes.

AUDIENCE: [INAUDIBLE] question.

A number of the things that you did in the HTML code

you could do in a Wysiwyg editor where you

can see what you're doing more readily.

And then Microsoft Word generates HTML code for you, right?

BRIAN YU: Great question.

AUDIENCE: Under what circumstances do you want-- in practice, how are people

really generating their HTML code?

And under what circumstances do you want to be down in the weeds

writing in HTML?

BRIAN YU: Fantastic question.

So the question was, nowadays there are all these Wysiwyg editors where

I can just click a bold button and make text bold or click a color box

and change the color to whatever I want without needing to know hex values

and class names and id's and all that, so why

would I ever want to actually use this stuff, or in what situations would

this actually come up?

And the answer is that oftentimes a lot of the basics

will already be done for you.

Next week we'll start to dive into a CSS framework called bootstrap

where a lot of the CSS to make web sites look nice is already written for you

and you can just use it and make your website look a little bit better.

But you'll want to use HTML and CSS when it's

helpful for making very specific adjustments to your web page

in order to make them look a particular way.

And also, once we start dealing with dynamic web pages.

So far all of the web pages we've created

just show whatever content I want them to show.

I type in the text that I want to appear on the page and I open up the page

and it shows that text, but most modern websites aren't like that.

I open up Facebook or Twitter and it's not like some Facebook or Twitter

engineer has written all of the posts and tweets I'm going to see in an HTML

page and shows that to me.

It's that some server somewhere is figuring out what tweets

and what Facebook post to show me.

It's generating HTML and CSS and it's displaying that information to me.

And that process of generating custom, dynamic HTML

that gets displayed to the user based on different things

is something we'll explore later in the course.

But it's a situation in which we'll really

need to start to leverage some of the tools in HTML and CSS

in order to control when we're dynamically creating content.

How does that content look?

And those are situations in which we might

want to have a little more formal control over the CSS and the HTML

that we use inside of the page.

But great question.

Other things?

Yeah.

AUDIENCE: I just want to know the difference between id and class.

For example, can I use the id attribute with span tag?

BRIAN YU: Great question.

So the question is, when you use id in class

can you use the id with a span tag instead of a div?

Yes, absolutely.

You can use id's in class attributes on any HTML element.

So I could have put a class on the div.

I could have put an id on the span.

id and class are just two different ways of identifying HTML elements in a style

sheet, for instance, or using JavaScript as we'll soon see later.

The only difference is that an id must be unique.

So there can only be one HTML element called top, only one called middle,

and only one called bottom, but there can be as many things

as I want that have a class of a name, for example.

And so generally speaking, if you want to style one thing

in just one part of the web page you use an id,

but if you want to style a bunch of different things you'll use a class.

So if we think back to Twitter, for example, maybe

your profile picture that shows up in the upper right hand

corner of the screen, maybe there's an id

attached to that that's like profile picture because I only have one

and I want to style it a particular way.

But for tweets that are showing up in my tweet feed on Twitter,

those might have a class because there are a whole bunch.

Dozens and dozens of different tweets that are all one style

basically the same way.

And so by giving them a class and say, you

know what, style anything that has a class of tweet using these rules,

then anything that is a tweet will be styled in that same manner.

AUDIENCE: So the id and class actually cannot be used in the same,

for example, div [INAUDIBLE]?

BRIAN YU: The question is, can id's and classes be used in the same element?

Yes, they absolutely can be.

If I wanted to, I could put class equals name up in this top div, for instance.

And what that would do is because it has a class of name,

when I refresh this, this whole top div is now bold

because if we just follow the rules that I gave it, I told my website,

anything that has a class of name make its font weight bold.

And then down here I said this div has a class of name,

so the entire thing is going to render as bold.

So you can give anything the class of name that you want.

Not just the spans, although in this example, we only gave it to the spans.

Great question though.

AUDIENCE: Question.

BRIAN YU: Yes.

Question?

AUDIENCE: What happens if there are conflicting

sizes of same element [INAUDIBLE]?

BRIAN YU: Great question.

Question is, what happens if there are conflicts, in terms of what happens?

And ultimately, we have to resolve those conflicts somehow

by picking one or the other.

And generally speaking, CSS will default to picking the more specific thing.

So if I said I want the top to render with a color of red

and I want the name to render with a color of blue, for instance,

technically because the top is supposed to render as red

this whole text would theoretically render as red.

But because I said name renders as blue, then when I refresh this,

even though top is still inside of that text that should all be red

because the name is more local to it, because it's part of that span that's

deeper within the tree that [INAUDIBLE] that we saw before than the div is then

top is going to show up as blue instead of red.

Great questions.

All right.

So we've seen a little bit of HTML and CSS,

but thus far our web sites have only ever existed sort of locally

on our own computers.

I've been opening up these web pages in Chrome

just by going to a particular file on my computer.

And you can certainly do that on your own computer

as well just by opening up HTML files and seeing

how a web browser renders them.

But ultimately, that's not very useful if I want to take my web page

and deploy it to the internet, for instance, for anyone

to be able to look at.

So how may I go about doing that?

To use that there are a number of different ways

to deploy web pages to the internet, but one common way, or one way

that we can use in this class using only the stuff we know so far

is something called GitHub Pages.

And GitHub Pages is a feature of GitHub which effectively

lets you take a GitHub repository and deploy it to the internet

so that people online can look at the HTML contents of that web page.

And so let's try an example of that right now.

If I go back to this GitHub repository that we

saw way back at the beginning of lecture this is the lecture zero repository

that inside of it has a hello.html page, that's got hello, world, hello, again,

hello, hello, hello.

I would like to deploy that to the internet.

And the easiest way to do this from GitHub

is using GitHub Pages by doing the following.

On the right hand side I'll go to Settings,

I'll scroll down to GitHub Pages.

GitHub Pages is designed to host your personal organization or project

pages from a GitHub repository.

And I'm going to tell GitHub Pages, you know what, deploy

to the internet from my master branch.

The master branch is just the default branch

that we've used on our GitHub repository.

We haven't yet gone into creating multiple branches,

but we'll get to that soon.

But I'll go ahead and click Save here.

And what that's going to do is enable GitHub Pages

on this particular repository and deploy this code to the internet

so that anyone online could theoretically

go and see the hello.html file that I created before.

So if I scroll down to GitHub Pages, it says your site is now

published at this link.

So if I go to this link and go to this link, /hello.html, it's student 50,

my GitHub username. github.io slash the name of the repository, in this case,

lecture zero /hello.html.

It can sometimes take some time, but this time it's already done.

What you see now is a URL that you can go to right now if you'd like.

You can go to student50.github.io/ lecturezero/hello.html,

and what you will see is a web page with the title of my web page and you'll see

the contents of hello, world, hello, again, hello, hello, hello.

And that is now deployed to the internet.

We've deployed our first website to the internet all just using GitHub Pages.

And the beauty of this is now if ever we make changes

to this repository to the way that it works

or update the code by making pushes to it,

we will automatically update GitHub Pages.

It will reflect the latest version of those changes.

So we can add CSS to these web pages, we can add new content to the HTML,

we can add different HTML files, and it will all deploy to a URL

that anyone on the internet can then visit.

And so that's GitHub Pages.

And that's something that we'll begin to explore in project zero.

Project zero, which will be released later today

is going to be an opportunity for you to start using the stuff

that we've talked about today.

HTML and CSS and Git in order to create a web page of your own

on a topic of your choosing and then deploy that to the internet for anyone

to see ultimately using GitHub Pages by combining all of these tools.

Questions about GitHub Pages or HTML or CSS or things we've seen?

AUDIENCE: Does GitHub Pages render the CSS and JavaScript, for example,

if you go visit the HTML page?

BRIAN YU: Great question.

So the question is, will GitHub Pages render a CSS and JavaScript

once we get there?

Yes, GitHub Pages will allow us to do CSS and JavaScript,

though it's not going to do everything for us.

We'll soon find ourselves within a couple

of weeks finding that there are things we want to do with our websites

that GitHub Pages just isn't quite powerful enough to do.

And then we'll want to transition using other tools.

And that's what we'll stuck getting into Flask and other web development

services that will allow us to build more dynamic, more

interactive websites that are a little more powerful than just web pages that

display the contents of what we've already shown.

But next week we'll dive a little more into Git and HTML

and CSS doing some more advanced things with figuring out

how to dynamically generate styling for our web sites

and going into some of the more advanced features of HTML5.

But for now, that's it for web programming with Python and JavaScript.

Thank you all so much and we'll stick around a bit for questions.