[MUSIC PLAYING]
BRIAN YU: Welcome back, everyone, to Web Programming with Python and JavaScript.
Today we're going to continue where we left off from last week.
So last week, if you recall, we talked about Git, a version control
tool that lets us manage different versions of our project,
and keep track whenever we make new changes to our project,
and let us look back at the history of changes that we made to our project.
And then we also took a look at HTML, which
let us lay out a website how we wanted to,
as well as CSS, or Cascading Style Sheets,
which allowed us to take a web page, and style it in different ways,
and change the aesthetics of the page in order to make it look the way that we
want it to look.
So this week we'll dive more in-depth into all three of those,
focusing especially on HTML and CSS, and taking a look
at how we can leverage these tools and some other tools
to help make our websites even more dynamic
to help them be designed the way that we want them to be designed.
So the first thing that we'll take a look at is go back to Git.
So if you remember from last week, Git was a tool
that we were using in order to keep track
of different versions of our project.
And in particular, as we work on a project and continue to make changes,
the term we used in Git was to make commits to our project.
So we might start with a first commit that
just contains initial files that we had when we started the project.
And as we continue to work on the project and add new features,
it's a good idea, when working with a version control system
like Git, to frequently make commits when we make a new change,
save those changes such that, later, we can refer back
to them via a commit message that describes what changed
in this particular version so that later on, we
have a history of all of the changes that were
made to the project at any given time.
So we might continue to making changes.
And what you might imagine is that this chain of different commits
might start to get pretty long.
So maybe we have a working project at this stage in the program,
and we want to add a new feature to our web application, for example.
So at this point, we might start working on a new feature
here by adding another commit.
We might make more progress on that new feature, keep working on that feature.
But what if, at this point, while we're midway through working
on some new feature to our existing web application,
we realized that there was some sort of bug, some bug in our web application
that occurred way back here that we want to quickly fix, so that we can ship out
a new fix so that people aren't sitting with that bug for a long time?
Well, this linear structure where, every time we make changes, we just
save those changes one after another, that
makes it pretty challenging to say, I want to fix a bug back here.
We could, of course, reset, and go back to this stage, and fix the bug,
and then keep working on the new feature.
But we've already made these new changes to the new feature.
So it sort of starts to get a little bit messy at this point.
So Git has this in mind when it was first designed.
And so that's why Git has a tool called branching.
And what branching effectively allows us to do
is, rather than just have a single linear progression
of the entire project where each change always follows on the change
immediately before it, and that's the only path that we have to follow,
branching lets us take our project in multiple different directions.
It lets us maintain one branch that will be our "master"
branch, the original version of our code that's supposedly the version that's
always usable, and then lets us have other branches that allow us to work
on different features that are still in progress, and later,
take those branches and work them into the original code.
So to take an example, we might start with that same first commit
and still continue to make changes.
But when we're in a stable place and we want to try to add a new feature
and start working on that new feature, rather than just add
that feature immediately after it, what we can do is we can branch off,
begin a new branch, and say, OK, let's start
working on this new feature in a separate branch
from the original project, and keep working
on that new feature on that other separate branch.
Then, at this point, if we come to that same realization, the realization
that, oh, way back here, there was some bug in the code, some bug
that we would want to fix, rather than try and reset, and go back
here, and figure out how to get back to where we were before,
we can just switch back over to this branch, fix the bug there.
And that way, we're in a position where we now
have these two separate branches, this one original branch that
has that fixed bug, and then this other branch
whereby we started working on a new feature,
and we kept working on a new feature.
And this is especially helpful if it's not just you
that's working on the web application.
If you and multiple other teammates are also working on the same application,
you might imagine this as saying, you are
working on one branch going off in one direction working on the project.
And some other person, some collaborator you're working with,
is sort of going off in a different direction,
working on some different feature, but also on the same project.
And later, when you're ready, you can do what Git calls "merging"--
in other words, taking two separate branches
and then combining them together.
So we might label these branches.
This is what we would generally call the master
branch, which is the default branch, the original branch that we started out
with.
And then these other branches, you can have as many as you want.
You can name them whatever you want.
In this case, I've just called this branch "feature"
to represent the fact that this is a branch that's
representing a new feature that we would want to potentially add
to this existing web application.
Git also has a bit of additional terminology that's useful to know.
Git uses the capital phrase "HEAD" to refer to where we currently
are in the repository.
So if you're working on the project and you're currently working on the master
branch, then HEAD points to master.
In other words, where you are in the repository right now
is the master branch.
That's the code you're working with.
But Git makes it very easy to change where HEAD is.
If you wanted to go to the feature branch,
or "check out" the feature branch, as Git would use with its terminology,
you could very easily check out the feature branch
moving the HEAD to the feature branch.
And now you can continue working on that feature.
And so only when you feel comfortable with the feature, when
you feel comfortable with the bug fixes can you then merge the two together
by having another commit that combines two previous branches and merges
them back together into one.
And so this concept of Git branching is very helpful
whether you are working on different parts of your own web application
and have different features that are happening at once
that you want to develop separately but then combine together later,
or if you and collaborators are working together on a project
where it's very easy for you to work without having to worry
about what someone else is doing.
And only when you're both ready with your separate features
do you then want to merge them together and figure out
how to resolve any conflicts that might come about where
you and another collaborator have potentially
edited the same line of the same file, for example, that you can then
deal with by resolving those merge conflicts like we saw last week.
So we'll take a look at an example of that just to give you
a sense for how this would actually work on the command line
and how we would actually do branching.
So I have, here, a Lecture 1 repository.
And right now, inside of Lecture 1 is just a file called index.html.
So index.html is, right now, just a test website that has title as "Test."
And inside the body is just the word "test."
This is just a sample website that we're going to use
to demonstrate the idea of branching.
So maybe I'm going to make a commit to this file.
Instead of saying "test" in the body, let's say something a little bit nicer.
Let's say "Hello, world!"
So I've changed the message in the body.
And now, on the command line, I'm going to git add index.html.
I've made changes to index.html.
These are changes that I want to track the next time that I make a commit.
And now I can say git commit -m.
I want to leave a message when I make this commit.
And in this case, I want to say I changed the body message.
So that's the change that I just made.
Again, Git counts that as one insertion, one deletion.
And so that commit is now made to this repository.
But now say I want to test something a little bit different.
I want to try something different, and I don't want
to mess up my original master branch.
Well, if I type "git branch" right now and press Return, what you'll see
is a listing of all of the branches that are currently on my repository.
And right now it's just this one branch, master.
So that's the only branch that I have.
But if I want to create a new branch, it's
as simple as saying "git branch" followed by the name of some new branch
that I want to add.
So I want to add a new feature to my website.
I might call that branch the feature branch, for example.
So I press Return.
And nothing seems to happen.
But if I type "git branch" again to say, OK, let's take a look at the branches
that I currently have in this repository, what are they,
I'll see that we have a master branch, and we also have this feature branch.
And the fact that the master branch is highlighted in green and has the star
next to it tells me that this is the current branch that I'm currently on,
and this feature branch is some other branch.
So let's say I now want to move to the feature branch
and start working on that.
So I might say "git checkout," where "checkout" is the term that Git
uses for saying, I want to move where I currently
am in the repository to somewhere else.
Right now I'm on the master branch.
I want to move to the feature branch, for example.
And so if I press Return here, it says "Switched to branch 'feature.'" And
if I type "git branch" again here, you'll see that, now,
feature branch is the one that's highlighted in green.
It's the one with the star next to it.
That is now the branch that I'm currently on.
If I go back to the index.html file, nothing really seems to have changed.
But now I can start to say, OK, let's add in a new feature.
So here is a new feature, just another line to the website in this case.
But I can go ahead and add and commit that.
And a quick trick that we talked about briefly last week
is that you can say "git commit -am" to combine the git add step and the git
commit step into one step. git commit -am just says, add all of the files
that I've changed that I've already been tracking,
and commit them at the same time.
Just combines those two steps into one in case
you want to be a little more efficient.
And now I added another line.
So that's the change that I just made there.
And that's now on my feature branch, right, where I have "Hello, world!"
and "Here is a new feature."
If I were to--
now, if my current branches are feature and master,
if I were to check out the master branch again, go back to the master branch
before, what you'll notice is that, now that I'm back on branch master
and I go back to index.html, this file now
shows me the version of the file that is on the master branch that only has this
"Hello, world!" line and doesn't have that second line that I added,
which means that that other change isn't on the master branch.
It's only on the feature branch.
And as a result, it's not going to be represented here.
I can see that even more clearly using a command
that we learned last week, git log, which
shows me the history of all of the commits
that I've made on a particular branch.
If I, here, now, on the master branch, type in "git log" for example,
you'll see, here was my first file.
And here I changed the body message.
But those are the only two changes that I made on this particular branch.
If I checkout the feature branch instead, switch to that branch,
and type "git log" again, you'll see that now there
are three commits on this branch.
There was the first file, the change to the body message, and the fact
that I added another line there as well.
And so this goes to show that different branches can
have different commits working on them, so
to touch that you can be working on different features
separately without needing to worry about what's
happening on a different branch.
So now we've been working on these separately.
Now we want to combine them back together.
So let me go ahead and switch back to the masker branch.
And remember now, in the master branch, it just says "Hello, world!"
just the simple message.
If I now want to take what was previously on the feature branch
and merge it into the master branch, while on the master branch,
I'm going to type "git merge" followed by the name of the branch
that I want to merge in.
In this case, that's the feature branch.
And that's saying, take those commits that are on the feature branch,
and let's merge them into the master branch.
So git merge feature--
one file changed.
There was one insertion.
That makes sense.
And now, even though I'm on my master branch, if I check the file,
I see that second additional line that was added there.
And so different branches can work separately.
But when I'm ready, I can merge those changes together.
In this case, it was a very simple change.
But sometimes those changes could be more complicated
and might require resolving those merge conflicts.
But that allows you to assist yourself in the development
process whether you're working alone or with collaborators, just to make
that process a little bit easier.
Questions about branching or merging?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Correct.
Great question.
So the question is, if I create a branch on my computer, what
happens to the GitHub repository where I originally cloned the code from?
So the answer to that question is, when I create a branch locally
on my own computer, it only exists on my computer.
It doesn't yet exist on GitHub until I push it to GitHub in order
to tell GitHub that that new branch exists.
And in fact, we can show you that.
I'll show you that right now actually.
So if I--
I'm going to go ahead and reset what I did before.
I'm just going to remove the lecture1 repository.
And we'll just restart it, just to give you a demonstration.
If I go to github.com/student50/lecture1,
this is the GitHub page for this repository.
And I want to clone this repository.
I'm just starting from scratch here.
I'll go to the Clone or Download button.
I'll take this link, copy it, and then say "git clone" followed by that link.
That's going to clone the lecture1 repository.
And if I go into the lecture1 repository,
I only have a master branch.
But now let's say I want to add a new branch.
Let's add a feature branch.
And on this feature branch, I'm going to first checkout the feature branch
so that I'm on the feature branch.
And now I'm going to say--
let's go ahead and open up index.html.
Right now it just says "Test."
This was the original contents of that repository.
I'm going to change that to say "Here is the new branch contents."
So this is the new version that I want to add to this feature branch.
And I'll go ahead and git add index.html and commit that change--
so "New branch contents."
And now if I try to git push--
remember, before, that git push is the command
that I use to take the changes that I made on my computer
and make them reflect on GitHub--
you'll notice that what I get is this strange message that
says "The current branch feature has no upstream branch."
And what that means is that I've created a new branch, feature, on my computer.
But there is no corresponding branch on GitHub that I can push to yet, right?
GitHub only has a master branch.
And on my computer, I have both a master branch and a feature branch.
So if I want to push to GitHub and say, all right, push to GitHub,
but push to a new branch on GitHub called feature,
then I'll run this command here, git push --set-upstream.
So when I push up to GitHub, what branch do I want to push it to?
And I want to push it to the feature branch.
So that's just copying this command right here.
And so when I do that, I have now pushed that new branch up to GitHub.
And if I refresh this page-- or even if I don't refresh--
it tells me that I've pushed a new branch, feature.
And I can click on that feature branch to see that, on the feature branch,
I have the new branch contents.
But if I switch from the feature branch back to the master branch,
this just has the original test contents.
So you can take your existing branches and push them to GitHub
as well such that GitHub can help manage all of those branches too.
Other questions about Git, branching, or merging?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah.
So if you look at the URL here in GitHub,
it tells you the name of the person who owns
the repository, the name of the repository itself.
And then, here is master, which is just the name of the branch
that I'm currently on.
And so when you navigate through GitHub's user interface,
you will see the different names of the branches show up in the URL
as you go to different pages.
AUDIENCE: On the front page.
BRIAN YU: Oh, so the question is, what happens on the front page?
On the front page, by default, there's a default branch that GitHub uses.
And usually that's the master branch.
You have the ability to change what that default original branch is.
But generally speaking, it will be the master branch.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Oh, OK.
So the question is, in project 0, we're working with GitHub Pages, which
lets us take websites and deploy them to the internet
just by pushing them to a GitHub repository.
The way that GitHub Pages works is that it's only
deploying to the internet from a particular branch.
So when you set up GitHub Pages in the Settings page of your repository,
you had to tell GitHub, I want to upload files
to the internet based on the contents of the master branch, for example.
Or you could specify which branch you wanted.
And so as a result, anything that's on any other branch
isn't going to be reflected on the internet
if you just go to the GitHub Pages website.
What you'll need to do is test the changes on your own
on your own computer.
And when you feel comfortable with them, when
those are the changes that you want to deploy to the internet,
then you can merge them into the master branch.
And that will be what ultimately gets deployed to the internet.
Other questions about Git, or GitHub, or branches?
OK.
A couple other topics just to talk about briefly--
so these were sort of the key commands that we
were using when regarding to branching in Git. git branch, If we don't
have anything after it, just shows us all of the branches
that we currently have.
If we have git branch followed by the name of a branch,
that creates a new branch.
git checkout lets us change where we currently are in the repository.
We can change from one branch to another branch,
or even one commit to another commit.
And then, git merge allows us to take two separate branches
and combine them back together.
OK, so a couple other things to talk about--
next is the concept of remotes.
This is something we've already been using.
But we haven't really looked at how exactly it's working.
The concept of Git remotes is just the idea
that we can have a version of the repository that's
stored somewhere else on the computer, in particular-- or stored somewhere
else on the internet, in particular-- on GitHub,
for instance, if we're cloning the repository from GitHub.
And so if you've been working with GitHub in project 0, for example,
and you keep seeing the word "origin" show up--
it showed up just a moment ago when I was trying to push to a new branch,
for example--
that origin is just the name of a remote,
a version of the repository that lives somewhere else.
I have one version of the repository on my computer,
and the remote is some version of the repository that
exists on GitHub, for example.
And so how does that work?
Well, I have some version of the repository
that, maybe, has four commits on it.
And this is the remote version, the version on GitHub,
that might be a little bit later.
And both my version of the repository and the remote
both have their own branches.
We saw before that I might have two branches even though GitHub might only
have one branch going on.
And this branch might be further along in terms of the commit history
than my current branch is.
And so if I wanted to work with this remote version of the repository, what
I might do is run a command called git fetch, which just means,
go to the remote, this online version of the repository,
and download all of the latest commits.
And so when I run git fetch, it's going to take
those commits from the origin, this version of the repository stored
on GitHub, and download them locally so that, now, I
have this origin/master branch, the master branch from my origin remote.
And I have my current master branch, which is still here.
So master is where I am in my repository.
And so if, now, I want my master branch to be updated to reflect the latest
changes, the command to do that is to sort of
say I want to merge where I am with where origin master is.
And so if you do git merge origin/master,
that causes your master branch to be updated to reflect
the latest version of the origin.
But this process is so frequent-- the process of, download the latest commits
and move myself to the latest commit based on the master branch
of the origin--
that these two commands can be simplified into just the command git
pull.
But if you're ever wondering what git pull is actually doing,
this is what's happening.
It's downloading, or fetching, the latest commits from the origin.
And then it's sort of fast-forwarding yourself on the master branch
to match up with the latest commit on the origin master branch.
But that's what git pull is doing.
And that's what allows you to manage that remote repository
and move yourself to the latest version.
OK, couple other concepts that are sort of specific to GitHub
that may prove useful to you as you start to work on the projects-- one
is the concept of forks.
So a fork of a repository is just an entirely separate version
of that repository that gets copied based off an original.
So what you saw in project 0, if you started-- or if you haven't started,
you'll take a look at it this week--
is that we create a new repository for you that's going
to store the contents of project 0.
And the first thing that you'll want to do is create a fork of that repository
where we have a version of the repository that belongs to us,
and you are going to fork it-- in other words,
create an entirely separate version of that repository that belongs to you.
And so on that fork that you own, you can do whatever you want to it.
You can add new branches, you can push to it, you can pull from it,
and you can manage it entirely.
And all of that won't affect the original version of the repository.
So if you ever look at open source projects, projects
that many people on the internet are contributing to,
very frequently there will be one version of the repository that's
the version of the repository.
And different people that want to contribute to that project
will each independently fork that repository--
take their own version of the repository,
make their necessary changes to it.
And when they like their changes, when they'd like for those changes
to be merged back into the original version of the code,
they'll submit what's called a pull request.
And a pull request is just a fancy way of saying
that you would like for your changes to be brought
in from one branch of some repository to some other branch
of the same repository, or even a different repository.
So when you submit project 0 for instance,
you'll do that via submitting a pull request to the original version
of the repository.
And you'll often see pull requests as a good way
of getting feedback or comments from other people
that you're collaborating with on projects.
They're an easy way of saying, I've made these changes.
I would like someone to review those changes
before we merge them into the master branch of a repository, for example.
They're are a good sanity check, in a way,
to take a step back and take a look at the code
that you're about to merge before you actually perform that merge.
So I'll show you an example of that now.
So over here, we set up a--
we had, on the lecture1 repository, a master branch and a feature branch
where, on the feature branch, I had added some new changes
and added some new code.
And now if I want to submit a pull request-- in other words,
say, I like this new feature branch.
I would like for it to be merged into the master branch--
I'll just click the Compare & Pull Request button
on the right side of the feature branch.
And I'll just go ahead and click the Create Pull Request button.
And so this is a GitHub-specific feature that
lets whoever owns this repository see that I am proposing
to make these changes to the code.
You can see what changes I'm proposing to make--
remove this line, add that line.
And what this allows us to do is to have a conversation about the changes
that I'm proposing to make.
It allows for people to request that new changes get made.
And this is a common paradigm, if you see projects
on GitHub, where people will use the pull request
feature as a way of getting feedback and working together collaboratively
on projects.
And so you'll get an opportunity to play around with forks
and pull requests over the course of project 0.
And you'll find more information about that in the instructions.
But just wanted to give you a look at it so
that you can get a sense for what the interface looks like,
and ultimately, how that works.
But now let's take a step away from Git and start going back
to actually designing web pages, and structuring our web pages,
and organizing them, in particular, by taking another look at HTML.
So last week we took a look at the basics of HTML,
how we might structure a website using nested tags.
If you remember, those tags took the form of an open angled bracket, then
the name of the tag that we wanted, and then a closing angle bracket.
And using just that simple syntax, we were able to create lists,
we were able to add images into the content of our web page.
But thus far, we've only been interacting with a single page.
We had one something.html document where we put in a bunch of tags.
And that rendered a web page that displayed some contents.
But modern websites and modern web pages nowadays
don't just display content, and that's it, on one page.
They'll very often need to interact with other pages,
in particular, by linking to other pages such that you click on a button,
or click on a link, and that takes you somewhere else.
So let's take a look at how we might actually
do that if we wanted to write HTML code to connect
multiple different websites together.
So what we'll take a look now is we will look at links0.html.
And so what we see in links0.html is just a standard HTML web page.
As we remember from before, !DOCTYPE html just means this is an HTML5
document, a document written in the latest version of HTML.
This html says this is the beginning of the HTML content of the website.
Here is the header of the website, the Information
that's sort of metadata to the page--
not stuff that's going to be displayed in the main contents of the web page,
but information that's helpful for the web browser.
In particular here, we specified a title.
The title of this page is "My Web Page!"
And then, inside the body of the web page,
we have this contents, which is how we're going to be creating a link.
So here we have a, or anchor, and then href.
And href just stands for, what is the hyperlink
that we want to link to when someone clicks on the contents of whatever
is inside that tag.
So right now it says, "Click here!"
And href="hello.html" means, when someone clicks on Click here!
we should take the user to hello.html.
And so if we open up hello.html and see what's in there,
that's just a web page that says "Hello, world!" for example.
So now if I open up links0.html, what you'll see
is, right now, just has a big, blue link that says "Click here!"
And if I click on that link, where I'm taken to is--
if you look in the URL, the URL changes to hello.html.
And the contents of that page is "Hello, world!"
And so by using that tag, we were able to link to a different page that
was located in the same folder.
I had a links0.html file, and also, a hello.html file.
And a href was my way of saying, when I click here,
I want to link and go to that other page instead.
And this hello.html file doesn't just have
to be a file that's located on my computer in the same folder.
It could be an external URL if I want to link to an entirely different website,
for instance.
So if I want to link to https://google.com for example,
and say click here, and take that to Google,
now, if I refresh my links0.html page and I click here,
now I'm taken to Google's home page.
And so I can link not only to a file located on my system,
but I can also link to elsewhere on the internet as well.
And in addition to linking to a different file
or to an entirely different web page, you
can even use these a href tags to link to different places on the same web
page.
And this is becoming increasingly popular
as more and more content gets put on the same page.
And oftentimes when you click on links, they're not
taking you to different pages, they're just taking you
to different places on the same page.
So we'll take a look at an example of that as well.
Here is links1.html.
So what you'll see is, in links1.html, I have a whole bunch of sections.
So each section starts with a heading, h2, for a reasonably large heading.
And each one has an ID.
And recall from last week that the ID attribute of an HTML element
is just an easy way to give an HTML element a name.
So I want to give this header the name "section1" such that, later,
as we'll soon see, I can refer to this h2 tag as section1,
the thing whose name is section1.
I have a paragraph that has some text.
I have a second section that's called section2, another paragraph,
and then section3, with a heading, and then contents underneath that as well.
So how do I now link to different parts of this document?
Well, if we notice up here, I have what--
I just called it a table of contents, and then ul for unordered list.
And remember, li are the elements contained
within an unordered list or an ordered list, li standing for "list element."
And each one of these list elements is, itself, a link.
We have that same a ref syntax in that tag.
But the link, instead of being a .html file,
starts with this pound symbol where the pound symbol just means,
rather than link to an individual page, link to something with a specific ID.
In particular, here, by clicking on the section1 link,
this means, link to whatever has ID section1.
And this means, link to whatever has ID section2.
And this means, link to whatever has ID section 3 such that now,
if I open links1.html, you'll see a table
of contents and individual sections.
And if I make the window small enough such that I
can't see all of the sections all at once,
you'll see that if I go to the table of contents and click on Section 1,
for instance, it'll automatically jump down to Section 1.
The page didn't change.
I'm still on that same page.
But it jumps me down to that first section.
And if I instead click on Section 2 by clicking on that link,
that'll jump me down to Section 2 on the web page.
And likewise, clicking on Section 3 jumps me down to Section 3.
And the reason that this page knows about all these relationships
is via that ID attribute, the fact that every place I want to link to
has that ID identifying it as section1, section2, section3.
And then my individual links can then use those ID names to say,
here is where I want the page to link to when I click on that individual link.
Questions about linking between pages?
Yeah.
AUDIENCE: Is it possible more than one [INAUDIBLE]??
BRIAN YU: Good question.
So the question is, can the same ID show up in more than one place?
And the answer is no.
In HTML, there is sort of a rule, which is that an individual ID can only
appear once on any given page.
So you should never reuse the same ID in two different spots on the same page.
IDs are meant to be unique.
So when I refer to something by ID, there should only ever
be one of those things.
If we want to refer to a group of things by the same name,
there's a different attribute for that called "class."
And if you give multiple different things the same class name,
then it's possible to refer to a group of things all at once
by referring to that class.
Great question though.
AUDIENCE: [INAUDIBLE]
You won't be able to-- so the question is,
can we link to something based on its class?
And the answer is that's not quite going to work,
because you imagine we might have three things that all have the same class
name.
And so if I link to it, the web page isn't going to know,
which thing do I actually want to link to.
So generally speaking, when we link to things,
we'll want to link to the same page based on their individual IDs.
Couple other notes about HTML-- so those were links.
HTML has undergone a number of different revisions.
So the latest version is HTML5.
Back in HTML4, if we wanted to organize our website into different parts,
you might imagine that a more complicated website might have
a header at the top of the website.
It might have a navigation bar, whether on the left side of the website
or a banner across the top, for instance.
It has some main content, and maybe a footer
at the bottom that has copyright notices, or other links, or whatnot.
In HTML4, you might have seen syntax that looks something like this in order
to organize your website, where a div, if you recall from last week,
is just a vertical section of the web page.
It's just a generic section of the web page
that has some name associated with it.
And we might have added class names to this where we said, div class="header"
such that later, I could use CSS and say, take anything that's a header,
and give it a dark green background, and make the font size 36 points
or whatnot.
And we might have had a separate div whose class was "nav"
for the navigation bar, a separate div for individual sections of the web
page, and a separate div for the footer.
And this is still a reasonably common paradigm.
But in HTML5, since this process is so frequent in web pages,
there are actually new tags that are added
to HTML5 that are increasingly being used in more modern web
pages that simplify this process.
Rather than just have divs that have class names that
are specific parts of the web page, some parts of the web page now,
in HTML5, have their own tags such that if you want to better organize
the header of your website into one section, or the navigation
bar of your website into one section, you
can use the header tag to say, this is the header of the website, nav for,
this is the navigation part of the website.
And the reason you might do this is because, then, in your CSS,
for instance, you could say, take anything inside of the nav
bar of my website, and give it these particular stylistic properties
in order to make the navigation bar render in a particular way,
for instance.
And so this can be a nice, simpler way of helping
to organize your website in a way that's easy to read
and is easily understandable.
These aren't the only new tags that are introduced in HTML5.
There are a whole bunch.
I won't talk about them all.
But a couple that are particularly of note
are audio and video tags, which make it really
easy to embed audio content into your web page
or embed a video into your web page, and then also, this one
called datalist, which is increasingly popular now as autocomplete on--
when we're typing on a phone or on a computer,
becoming increasingly prevalent.
And I'll show you an example of one of these datalists just
now, because it is quite a nice feature.
So one thing we looked at last week was creating
a simple form where, inside of a form, we
might want people to enter in their name, and their email address,
and other information that they would want to submit.
We haven't gotten, yet, to how we can process information from that form
and do something meaningful with it.
But we talked about how to create a web page that just displays a form
that people can enter information into.
So let's go ahead and take a look at form.html now.
And what we saw before is this part looks very similar to the form
that we saw from last time where we have a form tag that just says,
this is going to be an HTML form.
And here on line 10, we have an input field.
An input tag just says, this is going to be a place where
someone can input information.
We named that input field, which doesn't do anything for us just yet.
But you can imagine that we've seen the value of naming things in the past.
When we name particular HTML elements, that makes them easy to refer to.
And in the same way, naming particular elements of our form
is going to make it easy to refer to later such that, when someone
submits the form, we're going to be able to write code that says,
get the name from the form that will get at this specific input field.
Or get the user's password from the form, which
will get at that specific input field.
The type attribute of this input field is set to "text."
This is just text that we want the user to input.
And the placeholder is "Name."
And likewise, for the password, the type is "password,"
which is a slightly different type.
And we'll see what's different about it in a moment.
And the placeholder there is just going to be "Password."
Here we see a different type of input.
Here we're asking for a favorite color.
And the options are going to be red, green, blue, or other.
And rather than just have them type in something, this type of input
is a radio input--
so a radio box where there is sort of a bunch of circles,
and you can click on one of them to select which one you want.
This is a slightly different form of form input
that might prove useful to you depending on the type of form
that you're trying to create.
And here we just have four different inputs,
one for each of those different radio options.
And then finally, down here, we have an input
that is going to represent what country the person is from.
And so we named it "country."
And we associated it with a particular list.
And so this is the new feature of HTML5.
I associate it with the list "countries."
And immediately below that, I have a datalist,
which is just going to be a list of possible options
that will populate this form.
And we'll see what that looks like in just a moment.
It's name is "countries" so that our input field knows how to reference it.
And now we just have a whole bunch of options,
one option for all of the countries.
We just got a list of countries, and put them all into individual options,
and put them into form.html.
So now if I open up form.html, here's what that ultimately looks like.
I have a place where I can type in a name.
I have a place where I can type in a password.
And recall that that password field had a slightly different type.
The name field's type had type="text," just normal text that I'm typing in.
The password had type="password."
Browsers know how to interpret type="password"
to mean something special, to mean this is secure,
sensitive information that they're typing in.
So when I start typing into this field, it's just going to show up as dots.
It doesn't actually show the actual text.
And that I got just by saying type="password."
And the browser knew to interpret that as secure password
information, stuff that shouldn't just be displayed as text on the screen.
The favorite color radio button, I had these for radio input options.
And that shows up this way, where I can select
among these potential favorite colors.
And then for country, because I had this datalist,
if I start typing in "United," for example,
it's going to automatically fill in with any matching elements
from that datalist, because I provided the list of all the countries.
And now all I have to do is click on the country that matches--
in this case, United States.
And that fills in the category appropriately.
I could also click on that arrow to see any of the matches that showed up there
as well.
And so datalist is one of several new features in HTML5.
There are a whole bunch of new tags, audio, and video,
and datalist among them.
We won't have time to look at all of them.
But just wanted to give you a taste for what's new
in the latest version of HTML.
And HTML continues to add new tags and new features.
But one of the problems is that browsers need
to support the latest versions of HTML.
So it isn't always the case that as soon as there is a new feature to HTML,
that every web browser in the world will suddenly support it.
Oftentimes, older browsers might take longer
to support newer features of HTML.
But HTML5 is starting to become widespread.
All the major browsers now support the most important features of HTML5.
So you can start to use things like audio and video embeds and datalists
in the websites you design with reasonably high confidence
that whoever is looking at the web page will be able to understand it.
Question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Good question.
So the question was, is it important that, in all the projects in the class,
that it works on every single different browser?
Generally speaking, the languages that we're teaching,
HTML5 and the latest version of CSS, you should
feel free to use even if much older web browsers might not
support those features.
We'll talk a little bit later in the course
about how you might go about making sure that some of the features
will work even on older browsers as well.
But for the sake of project 0, I wouldn't worry too much about it.
OK, so that's HTML.
And now what I wanted to do was move on to talk a little bit more about CSS.
So CSS, which stands for Cascading Style Sheets,
was the tool that we used last week to style up our website.
In the form we just saw, everything was sort of black text.
It was all in the same font.
And it wasn't particularly aesthetically pleasing.
And what CSS allows us to do is have a lot
of control over how the website actually looks,
over the colors, and the fonts, and the layout,
and ways that things are organized.
And we're going to spend, basically, the rest of the lecture
today talking about how to make that website look good.
Because there's a lot that goes into organizing the website
and styling the website in such a way that it's
going to be visually appealing, and that things are organized
the way that we want it to look.
And in particular, in the modern day and age,
where people are looking at websites on a bunch of different platforms--
looking at them on their laptops, and on their tablets, and on their phones--
it's important to think about and consider how different websites might
look on different platforms and to make appropriate adjustments in order
to make sure that if you look at the website on a computer, it looks good,
but it will still look good even if you look at the website on a phone,
for example.
And so we'll explore some of the tools and technologies
that we might use in order to do that.
But let's start by looking at some of the more advanced features of CSS
to have even more control over how it is that we
want to style our website in order to have a lot of control
over that individual style.
So let's take a look at this example.
So this is an example that is similar to something
we saw last week just to give you a refresher on what
CSS looks like in terms of code.
We see that inside the body, we have two headings.
Here's one big headline, and here's a smaller headline.
Recall that h1 is the biggest headline, h2 is the next biggest, all the way
down to h6.
And up here in the style section of the page, we've included some CSS content.
And so here, what I said is h1, comma, h2,
where the comma just means I want to apply styling
to multiple different things.
I want to apply styling to the h1s and the h2s.
I could have equivalently said, h1s I want colored red,
and h2s I want colored red.
But oftentimes, if you find yourself repeating yourself,
it's a good idea to look for ways to simplify.
And this is a paradigm that we're going to be returning to later on in this
lecture.
But to make this simpler for now, we can just say h1,
comma, h2 to mean, I want this styling to apply both to h1 tags,
the big headlines, and h2 tags, which are the slightly smaller headlines such
that if I open up multiple.html now, what I see
is the big headline, which is red, and the smaller headline,
which is red as well.
But in addition to the comma that just lets
us select multiple different things, there
are a bunch of other CSS selectors that let
us be very precise about selecting particular parts of our website
that we want to style and styling them in particular ways.
On these simple websites that I'm about to show you,
they might seem a little bit trivial.
But as your websites start to get more complex
and start to have a bunch of different moving parts to them,
it can be very helpful to be able to be very
precise in selecting particular parts of your website
that you want to style in particular ways and making sure
that only those elements get styled in a particular way
as opposed to all of the elements on the web page, for instance.
And so no need to worry about memorizing all of this.
All the CSS selectors are very well-documented.
And it's easy to look them up in order to find a particular selector that
works for you.
But I'll show you these now just to get you
a sense for what you can do with CSS and the amount of control and precision
that you can have over CSS selectors such
that they may serve as inspiration as you go ahead
working on project 0 or other websites that you want to be styling,
potentially, in the future.
So let's go ahead and open up descendant.html.
And so what's happening here inside the body of this website
is that we have a couple things going on.
So inside the body of the website, we have an ol,
where ol stands for ordered list, which is just a list where things, instead
of being bulleted like and an unordered list, are numbered-- thing number 1,
2, 3.
And the web browser will automatically number those things for us.
And we have a bunch of list items, so list item one, list item two.
And inside of this ordered list, we have a list inside of the list.
So if you've sometimes seen websites that have nested lists,
or lists that have a left side and then an indented part that's a list within
the list, this is all this is, another list inside of the ordered list that is
a sublist-- sublist item one, sublist item two--
and then another list item that's part of this original ordered list.
So if you think back last week to where we talked about the DOM, that tree that
shows how different HTML elements are nested within other HTML elements,
you can think of this as the ol, the ordered list,
containing four different pieces, one list element, another list element,
an ordered list, which, itself, contains two list elements, and then
a final list element in the ordered list.
And so what styling do we want to apply to this?
Well, here we're saying that we want to apply styling to ol li.
So there's no comma here.
It's just ol li.
ol stands for ordered list, and li stands for list item.
And what styling the ol, space, li is going to say is,
I want to style all of the list items, the li's, that
are contained within an ordered list, or all of the list items
that are descendants of the ordered list, equivalently.
And so all of those list items I want to color red, for example.
And so now, if I open up descendant.html,
we see that all of the list items, including the sublist items,
are all styled as red.
And so why did the sublist items get styled as well?
Well, it's because the only rule that this CSS is following
is that if there is a list item, an li, that is a descendant of
or is contained within an ol, an ordered list, then
it's going to be colored red.
And this list item here, even though it's inside of an unordered list,
is still inside of this broader outer ordered list.
And so it's going to be styled as red additionally.
If I add another list that's entirely outside of the ordered list
and say ul for unordered list--
and I might say, here is a second list here, and here's another item.
So this is an unordered list that's outside of the ordered list.
If I refresh the page now, this second list is not styled in that same way.
Because these are, yes, list elements, or list items,
li's, but they're not contained within an ol.
And so as a result, they don't get styled in the same way
as all of these individualist list items do.
Questions about how that space operator works to select just the descend--
any descendants of a particular HTML element
and specify those, specifically, as the ones to be styled?
AUDIENCE: [INAUDIBLE]
So the question is, if, in this case, we were
to omit the li entirely and just say ol, that I want it to be styled red,
would that do the same thing?
In this case, yeah.
Because if we style the ordered list, everything within it
is ultimately a list item.
And so it's going to be styled red as well.
But you can imagine more complicated cases
where the outside tag might have a bunch of different types of tags within it.
And if we only want to specify certain elements within the outer element
to be styled, that's when having a second thing after it
can often be helpful.
And we might take a look at couple examples of that later.
So that worked for selecting any descendants.
And the way to think about how this is working
is that we have these list items, which are--
you can think of as children of the ordered list, and these list items
down here, which you can think of as grandchildren
of the ordered list, where we have the ordered list, and then
the unordered list, and within it are the individual list elements.
What if I only wanted to select the immediate children, but not
the grandchildren, the ones inside of it?
And so for that case, what we want isn't the defendant selector that
selects all of the descendants, but rather a selector that
is just going to select, for us, the immediate children.
And so let's take a look at child.html now,
which is going to be the same body contents.
We still have an ordered list with individual list items
and a sublist contained within it.
But here's the difference in the style tag, just a minor syntactic difference.
Rather than ol, space, li, we have ol, greater than sign, li.
And not greater than sign is CSS's syntax
for specifying an immediate child.
So ol greater than li is going to only select
list items that are immediate children, directly
descended from any ordered list.
And it's going to color those as red and ignore anything else.
So if we open up that website and take a look
at what that looks like by opening up child.html, this is the result, right?
The immediate children of the ordered list, the numbered items,
all show up as red.
But the sublist items, the things that are
contained within the unordered list inside of the ordered list,
those aren't styled.
Those are still colored black, because they're not
immediate children of the ordered list.
They're grandchildren of the ordered list.
And so I'll show you that code again just so you can take a look at it
to get a sense for what's going on there.
Questions about the distinction, though, between the defendant selector
and the immediate child selector?
OK.
There are a couple other selectors that are
useful to just see so that you get a sense for what you
can do with which HTML and CSS styling.
One is going to be in attribute.html.
So in attribute.html here-- and all this source code is going to be made
available after the lecture if you want to take a look at it--
we have, here, a form where that form is very similar to the types of things
we've already seen where we have a input field for the first name,
an input field for the last name, and an input where
the person looking at the web page can type in their age, for example.
And what you notice is slightly different
about these is that first name and last name have a particular type.
Their type is text, their text that we want the user to input.
And their age, on the other hand, is going to be a number.
The type is number.
And what some web browsers will do is-- when the type of a input field
is a number, is-- they will try to help you restrict the valid inputs that you
can type it.
Have you ever seen a HTML input form, for example,
where they're expecting a number, and if you type the letter, nothing happens?
That's because the web browser might know that the type of this input field
is a number.
And so I better not allow anyone to type text into that input field.
Because it should only ever be a number.
And so that's what that's doing there.
But what that allows us to do is style things in particular ways.
And so CSS also allows for styling things based on individual attributes.
And so before, we saw how we could style any generic tag.
But here what we're looking at is I want to add styling to input fields,
but only the input fields where the type of that input is text.
And I can use any attribute name and value here.
It doesn't just need to be input types.
It can be any time where we've seen attributes added to HTML elements.
So we saw, like, src for images, or href for links.
These are all attributes that we can use the attribute selector for in order
to style them in particular ways.
So here we said the input type is text.
And if it's text, I want the background color to be red.
And if the input type is number, then I want the background color to be yellow.
So I'm delineating between different input fields based
on their individual attributes to say, here
is the way I expect certain attributes to behave.
So if I open up attribute.html now, here's what I see,
where these are all input fields.
The only difference between them is particular attributes that they have.
And first name and last name are now places where I can type in text,
and their background color is red.
And age, because it has a type of number,
is going to display a background color of yellow.
I have allowed myself to be more precise about the way
that I select elements in order to style things
exactly the way that I want them to be styled.
And ultimately, that's what CSS selectors are designed to help you do.
They are designed to help you be more specific about the way
that you work with CSS and the way that you select individual elements to help
make the process of designing a web page that looks the way you
want it to look all the easier.
So couple other things to look at--
let's take a look at different types of selectors
that operate in different situations.
In particular, CSS has the notion of what's called a pseudo-class.
And a pseudo-class is just a special state of an HTML element.
Because a web page is not just something that gets
displayed, and the user sees it, and that's it.
The user is often interacting with that web page.
They're hovering over things.
Their cursor is moving around the page.
And so we might want our web page to respond to user interactivity--
that when a user hovers over something, for example,
we might want that behavior of the web page to change in some meaningful way.
So let's take a look at exactly that example by taking a look at hover.html.
And inside the body of hover.html, it's actually a very simple body.
There is very little happening here.
I have a button tag, and it says "Click me!"
And that's it.
But now let's take a look at the styling.
This is where things get interesting.
So inside the style of this web page I have a couple things going on.
I've said, take the button.
And here are the things that I want you to know about how
we should be styling this button.
It should have a width of 200 pixels, a height of 50 pixels.
The font size will be 24 pixels.
Those are just arbitrary numbers that I chose
to make the button look a little nice.
And the background color of the button is going to be green.
But here, this colon syntax is what I call a pseudo-class representing
a specific state of the HTML element.
In particular, this is what happens when the button is hovered on,
when the cursor moves over that button.
And in particular, what I'm saying here is
that, now, I want the background color to be orange instead.
So I went to change the styling of the website based on a particular state
that an element might be in.
So if I now open up hover.html and take a look at it,
right now it just says "Click me!"
It's a green button.
But as soon as my cursor moves over the green button,
it changes to orange, right?
I have that hover pseudo-class attached to this button such
that it knows that when something hovers over it, the styling of it
should change.
So this allows the styling of a website to vary depending
on how the user's interacting with it.
And so you may have seen this type of thing
happen where, when you hover over something that's important,
it changes color, or it grows, or it does something different
with its styling.
And oftentimes this is how it's working, just
pseudo-classes that are placed on CSS elements
to make them behave in certain ways.
In addition to pseudo-classes, CSS also has
what's called pseudo-elements, which are ways of affecting
particular parts of an HTML element.
And so I'll show you a couple examples of that now.
These are a little bit less common, but are still things that may come up.
So I'll show you before.html right now.
And so in before.html, what I have here is an unordered list of links.
Here's one link.
Here's another link.
Here's a third link.
And right now they all just link to #--
in other words, don't really do anything.
We're not linking to any external website.
But for each of these links, these a tags,
I have this pseudo-element before.
And what this is saying is I want to apply some styling that happens
before the contents of the actual link.
And in this case, the content is slash 21d2,
which is a special hex value for a Unicode symbol.
So these are symbols that you can't just normally type on the keyboard.
But special symbols like emojis and other symbols have particular codes.
This code, you'll see in a moment.
And then it says "Click here."
And the font weight of this contents is before.
And so it might not be immediately clear what exactly is going on here,
but I'll show it to you.
And then we'll come back to the code so you can
take a look at what's really happening.
Let's open up before.html.
And what you see is three links-- one link, another link, a third link.
But all of them are prepended with this arrow sign that says "Click here."
And so how did that happen where all three of the links
have that additional information at the beginning of it?
Well, these individual links only said "one link," "another link,"
and "third link."
But all the magic is happening inside the style tag
where I'm saying, for every link, before the contents of that link,
I want you to add this particular content-- in particular, this symbol,
and then the words "click here."
And I want the font weight of that before element to be bold.
And the result of that is this, where each one of those individual links
is prefaced with arrow sign, click here.
And so if you have a bunch of different elements
that you all want to begin with certain text or a certain symbol for example,
you might use colon, colon, before, as we used here, or colon, colon,
after, which does the same thing, but at end of the element,
in order to make those modifications as well.
One other potentially useful one--
and then we'll take a short break--
is selection.html.
So inside selection.html, the body of it is just one long paragraph.
But inside the styling, I say p::selection.
In other words, when something is selected,
I want that selection to behave in a particular way
or have a particular styling.
In particular, I want its color to be red,
and I want its background color to be yellow.
So if I open up selection.html, what I get is just some text.
But if I highlight that text, it highlights in a very particular way.
It highlights where the text I'm highlighting is red,
and the background is yellow.
Because I'm specifically saying, I want, when
I highlight the contents of this paragraph,
for the styling to appear in a particular way.
And so that's something that you can do as well.
And so a bunch of those CSS selectors are summarized here.
We have the multiple element selector where a comma separates two things
to say, I want styling to apply to both of these things, the descendant
selector for when I want to select everything contained within something
else, immediate child for immediate children but not grandchildren
or great grandchildren of an element.
We didn't see this one, but the adjacent sibling selector
lets you select something that comes immediately after something else-- so
two elements that are sisters to each other in the tree rather than one
being the parent or containing the other.
We saw the attribute selector that let us say that inputs that are numbers
should be treated as different from text inputs, and then pseudo-class
for things like when I'm hovering over an element,
and then pseudo-elements for saying before the contents of a page
or after a contents of the page.
Again, no need to memorize all of that.
But these are just a sample of the CSS selectors
that you can use in order to have a lot more control
over the contents of your HTML page.
When we come back, we'll dive even more into CSS, not looking at CSS selectors
specifically, but looking at how we might take a web page
and make it more mobile-responsive for example,
and use some more advanced CSS features.
But for now, we'll take a short break.
And we'll be back in a couple minutes.
OK, welcome back.
So now what we're going to do is take a look
at how we can go about making our web pages mobile-responsive.
In particular, responsive design is generally
the idea of trying to make sure that our web
page is going to look good regardless of what platform we look at it on.
Whether that's a desktop machine, or a laptop, or a phone, or a tablet,
or any other device, we want the website to look good
across all of that variety of platforms.
And so when we start to think about responsive design
and how to go about making the website look good no matter what,
what are some things we would need to think about?
What might be important to keep track of when thinking about how things
look on a computer versus a phone?
Yeah?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Making sure the text responds right-- yeah,
different screen sizes might adjust for--
might require differently-sized text in order to make the text look good.
Sometimes if you look at older websites that aren't really designed for phones,
and you try and look at it on a phone, all the text
feels, like, squished into the center of what's
called the viewport, the area of the phone that you see web content on.
We'll talk about ways that we can go about fixing that.
Good point.
What other things might be relevant to consider
when we think about going from bigger screens
to smaller screens or different platforms
that websites need do exist on?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah, things need to move around a bit.
You might need to-- it might not just be a matter of making everything smaller
in order to fit on the mobile screen.
But if you've got a desktop website that has
a bunch of different columns worth of stuff, maybe three
columns of information, and you want to shrink that down to a mobile screen,
now, suddenly, you can't just squeeze all three columns
into the same narrow window on the screen.
You might want to stack the three instead rather
than have all three separate.
And so we'll talk about ways that we can go about making those considerations
and making sure that our web pages are able to adapt
to those sorts of different types of platforms and different screen sizes.
And so the first strategy that we're going to be using here--
will be a number of different strategies.
But one strategy that will use are what are called media queries.
And so a media query is a specific way of assigning CSS
not to a particular HTML element, but to a particular HTML
element on a particular type of media.
So that type of media might be particularly-sized computers,
or particularly-sized phones, or even the difference between how
you want a website to look when you are writing the code for it
to appear on a screen versus how you want
the website to look if someone prints it out, for example, on a printer.
Because maybe when someone prints your website out on a printer,
you want the content of the page to look different
than if you were just writing websites that were
going to appear on computer screens.
And you might want those to be different.
And so let's take that as a first example
and take a look at our first media query.
And so what we'll take a look at is print.html.
And so what we have here is, in the body of our web page, three paragraphs.
So this is a paragraph.
This is another paragraph.
And then I have a third paragraph, and I've added a class to it.
And that class is going to be called screen-only.
That's just a name I made up, but it's useful for me
to know that this is going to be a paragraph that is only
going to show up on computer screens.
When I print it out, it's not going to show up.
So this paragraph won't appear when you print this page.
And you might want this if you have particular instructions for,
like, click on this button or click on that button that
are relevant when someone's looking at your web page on a screen
but aren't very relevant if someone wants
to print out the contents of your web page, for instance.
And so how do I go about styling that?
Well, this is what the style header looks like here.
I have this @media, which means, create a media query.
I want to apply CSS styling, but only in particular situations,
only in particular cases.
What case do I want to apply the styling in?
Well, in this case, I said @media print.
In other words, this styling, I only want
to apply when the media, or the medium by which my web page is being viewed,
is it's being printed.
And then .screen-only-- remember that dot is a way of specifying,
select everything with a particular class name.
Down below we had a paragraph whose class name was screen-only.
And here I'm saying, take anything whose class is screen-only,
and said its display property to none.
And if you haven't seen this before, display property being set to none
means, make it not visible.
In other words, it's not being displayed.
And we'll see other examples of the display property later.
But what's the result of that going to be?
Well, again, I have three paragraphs.
Here's a paragraph.
Here's another paragraph.
And here's a paragraph that won't appear when you print the page.
And if I open print.html, what I see is those three paragraphs.
And on my screen, they look totally normal.
There'd be no way to tell that this paragraph is
any different from the other two paragraphs.
But if I go to the File menu, and I try and print this--
if I were going to print this web page out--
then the result that I see in this preview is that I see,
this is a paragraph.
I see this is another paragraph.
But that third paragraph isn't there, right?
That paragraph is now being printed.
And in my CSS, I said, when the media that I'm
trying to use when viewing this page is a screen,
I want that paragraph to have a display property of none.
I don't want that paragraph to be visible.
And by doing that, I'm able to control how that web
page appears on particular mediums.
So that allows me to make sure that this paragraph doesn't
appear when I print the page.
But of course, printing is just one example
of a different medium on which I might be looking at content.
The more frequent case nowadays is probably
that I have content being viewed on differently-sized devices,
that I have a computer with a very wide screen, a tablet with a slightly
narrower screen, a phone with a screen even narrower than that.
And I want to make sure that my website responds to those changes as well.
So how might I go about doing that?
Let's take a look at responsive0.html.
And in the body of this website, it's very simple.
All it says is a headline that says "Welcome to My Web Page!"
And that's the only content of the web page in the body.
But now let's look at the styling.
What's going on here, I have more @media queries.
But this time, instead of specifying @media screen for, here's the media
for what style it should look like when something is being displayed on screen,
or @media print for when I'm printing something out,
I have @media min-width--
500 pixels.
And what that means is that the styling that follows
is CSS styling that apply whenever this page is being viewed in a window that's
at least 500 pixels wide.
And in particular, when the window is at least 500 pixels wide,
I want the entire body of my web page to have a background color of red.
Meanwhile, for @media max-width--
499 pixels, that's saying the exact opposite,
that if I'm on a smaller window where the maximum width of the web window
is 499 pixels or anything smaller than that,
then I want the body's background color to be blue.
And so this allows me to change the styling depending upon how wide
or how narrow a particular web page is.
So if I open up responsive0.html, what I see is "Welcome to My Web Page!"
And the web page background is red.
And so that tells me that, based on the contents of my code here,
the background color of red should only apply when the width of my viewport,
the width of my window, is at least 500 pixels.
So what happens now, if I try to shrink that website
and make it less than 500--
I can grab the end and just shrink down this website.
And watch what happens.
It's still red.
But as soon as it shrinks below 500 pixels, it changes to blue, right?
Above 500 pixels, it's red.
Below that, it's blue.
And that's a first example of how we might change the styling of our website
depending on how big or small the screen that we're looking at it
happens to be at that time.
So what are some other examples of that?
What's a more practical use case?
So in reality, we probably don't care all that much about,
we want the wider screen to have a red background and the smaller screen
to have a blue background.
But we might care about something like this, which is a little more involved.
But I have a body.
And right now my headline is empty.
It's just an h1, sort of a empty headline.
But we're going to fill it in with content.
But that content is going to differ based on the size of the screen.
So here I've said @media min-width --
500, same as before.
When the width of my screen is at least 500 pixels, then before the h1 tag,
the first thing that should show up in my heading
should be the content "Welcome to My Web Page!"
But on the other hand, if the size of my web page is 499 pixels or smaller,
then I want the content of my h1 tag to just be the word "Welcome!"
maybe because, on a smaller screen, I don't want a longer headline that
might wrap onto two lines, for example.
I just want a shorter headline that's going to look a little bit better
on a smaller screen.
And so what would that ultimately look like?
Well, it's going to be the same thing as the background color,
but just instead of changing the background color,
we're changing the contents of what's actually displayed on the screen.
So I open up responsive1.html.
And right now it just says "Welcome to My Web Page!"
as if I had just had h1, welcome to my web page, end h1.
But if I shrink the window now, when it would have normally
needed to potentially wrap onto another page and I go beyond 500 pixels,
the headline changes.
Now it's just "Welcome!"
There's no "to My Web Page," because, on the smaller screen,
I want the smaller headline to appear.
If I go beyond 500 again, go larger, then the full headline comes back.
And so again, that's all because of these media queries
that let me specify the min width or the max width of the screen
that I want things to render on and decide
how I want the CSS styling to appear depending upon that screen size.
One other thing you'll notice up here on line 5 is this sort of strange line,
meta name equals "viewport" content equals "width=device-width,
initial-scale=1.0"--
so sort of complicated line.
All this line is saying-- and you'll see this line in a lot of websites
nowadays-- is the viewport of my web page
is just the visible area on the computer screen, or the phone screen,
or whatever screen is being used to view the contents of the web page.
And oftentimes in older websites, if you tried to view a website on a phone,
it would just pretend that you were rendering the website on a computer,
and render it as a wide display, and then shrink it down onto the phone such
that all the text on the phone was really, really small.
If you've looked at websites on your phone, you may have seen this before.
All this is doing is a line that's telling the browser
to adjust the viewport to make sure that we're scaling it
to the width of the actual device, that the width of the viewport
should be whatever the width of the device is.
And as a result, that will help to prevent text
from appearing really, really small when you render it on a phone as opposed
to on a desktop.
This line is often just a good first step to throw into your web page
when you want to make it mobile responsive,
because that will help to make sure that the sizing of things
appears appropriately.
But the key of what we're doing here in order to make this responsive
is these media queries that are allowing us to specify what CSS
gets applied under which circumstances.
And so this is just some of the basics of how we can use CSS in order
to help allow us to style websites in particular ways
depending on different devices.
We can also use particular CSS layouts.
And I'll show you a couple of these now.
Again, no need to memorize exactly what's happening here,
but just to give you a sense for what's available in CSS.
But before I move on, question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: If you had both--
so the question--
AUDIENCE: [INAUDIBLE]
BRIAN YU: Oh, if you wanted to specify both a minimum and maximum,
I think there is a CSS keyword that allows you to combine two different
media queries-- so like, min-width--
300 and max-width-- 500.
And I think you can look to the--
I'd refer you to the CSS documentation just
to look at how you would go about structuring that media query.
What we're looking at here is a tool built into CSS called flexbox.
And what flexbox is going to allow us to do
is create a web page that looks something like this.
So we have a whole bunch of elements here,
and each one is labeled A, B, C, D, E, F, G, all the way through L.
And there's 12 of them.
And what might we expect to happen if we were
to shrink this web page down and view it on a smaller device?
Well, what we probably want to happen is we still want to see these squares,
but we don't want to have to scroll too much to the left and right in order
to see all four.
We'd rather have these individual cells rearrange themselves
as we shrink down the page.
And so watch what happens when I shrink this page.
It originally shows me four in any given row, and I have three rows.
But after I shrink it down a little more,
it's going to just show three on each row.
And now I've got four rows.
And if I shrink it down more, it's got two on every row,
and now I've got six rows.
And if I shrink down even more, now we've
only got one, where each thing is just stacked on top of each other.
So this is what we were alluding to a little bit
before, where if we have items appearing in multiple columns of content
across the screen, we might want those things to move around
as we begin to resize the window in order
to make it more adaptable to different platforms and different devices.
So what does that ultimately look like?
Here's an example of flexbox in action.
I have a container that's just going to contain all of these individual divs.
Each one is just a letter followed by some random text.
And here's the styling that makes that all happen.
Inside my container, I'm setting its display property to flex.
In other words, I want this to be a flexbox that
allows the content to, in this case, wrap around it when
it reaches the end of a line.
So you might imagine that it's like if I had all 12 in one straight line.
But as I shrink down the screen, I want the individual cells
to wrap onto the next line and the line after that in order
to make room for everything to show up within the width of my window.
And now I have this .container, greater than sign, div.
Remember, that greater than sign means immediate child.
So for any div that is immediately the child of the container,
here's how I want it to display.
And this is just arbitrary.
I wanted the background to be green.
I gave it a font size.
I gave it some margin and padding in order
to make it look the way I want it to.
And I specified how wide it should be.
But really, the key was this, this display, colon, flex, flex-wrap, colon,
wrap.
This is what allows me to get that flexbox to wrap around just like that.
One other style that I'll show you that's useful when we're laying things
out is having a grid.
We might want a grid sort of like a table that
displays information in a grid format.
And so that might look something like this, where
I have a grid of individual cells--
1, 2, 3, 4, 5, 6, all the way up to 12.
And I might have content in each one of those.
And you might imagine that this is useful
if you want some information in the left side of the page and some information
on the right side of the page.
And notice, as I shrink this down, the size of that third column
automatically adjusts in order to fit the width of the page.
If I go beyond it, it starts to get cut off.
But if I'm greater than a certain width, that third column will adjust itself.
So how does that work?
I'll just briefly show you this.
And again, this code is all available to you after the lecture
if you want to take a look at it to get a better
understanding for how it works.
But inside the body of my website, I have a div whose class is just grid.
And I call it "grid" arbitrarily.
And then within that grid are individual grid items.
And here is 1 through 12, all just one after the other.
So how did I take those 1 through 12 grid items
and make it appear in a grid that looks like this?
Well, here's the CSS styling that made that happen.
For the grid, the background color is green.
I used display, colon, flex before when I wanted things to wrap around.
Here I'm using display, colon, grid.
I gave it a particular padding.
Remember, padding is just the spacing on the inside.
And I wanted the grid column gap, or the space
between individual columns of the grid, to be
20 pixels, and the space between individual rows in the grid
to be 10 pixels.
And here is grid-template-columns.
This is what allows me to specify how wide I want each column to be.
And here I've said the first column should be 200 pixels,
the second column should be 200 pixels, and the third column
should be automatically generated.
Just however much space you need to fill space,
that is how much space the third column should take up.
If I instead change both the second and the third columns
to be automatically filled, then what I get
is column 1 that will always be 200 pixels,
but columns 2 and 3 that will now adjust themselves naturally
in response to how I move things.
And if I change all of them to auto, for example, now all three of them
will just automatically respond to me changing the size of the website.
And they will shrink and grow accordingly in order to fit.
Question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Great question.
So the question is, how did I get the spaces to show up
between the individual grid cells?
Those were two particular CSS properties.
Here grid-column-gap was 20 pixels.
That's the space between individual columns.
And grid-row-gap is the space between rows.
If I change the row gap to, like, 50 pixels,
for example, now there's more space in between individual rows.
And so you can use the column gap in the row gap
to control the amount of space that shows up
in between the individual cells.
But ultimately, this is starting to get a little bit complicated.
And realistically, it would be pretty annoying if, every time we
wanted something to wrap onto new pages, we
needed to remember exactly how the flexbox worked and set up
the flexbox for ourselves.
But luckily, nowadays there are all these CSS libraries
out there, which are ways that are--
CSS written by other people that we can then
use them in order to make our lives easier
when it comes to making our websites mobile-responsive, for example.
And one of the most popular libraries is called Bootstrap.
And that's the one I'm going to be introducing you to now.
You'll get an opportunity to work with it in project 0.
But Bootstrap is just an easy way of giving you access to some CSS
that lets you make your websites styled a little more nicely,
make them a little more mobile-responsive right off the bat
without you needing to do a whole lot of work.
And so if I open up nobootstrap.html, this is just a simple website,
just like stuff we've seen before, where I have a heading that says "Hello,
world!"
and then a paragraph of text.
And if I open up nobootstrap.html, this is
what it looks like, same sort of thing we've seen before.
If I want to add Bootstrap to my file, all I need to do is--
in bootstrap.html, this is the exact same website,
but I've added one extra line, this link line where I'm linking a stylesheet.
I'm linking Bootstrap's CSS file, which is located somewhere on the internet.
And if you go to Bootstrap's website, you
can find this exact line that you can put into your web page.
And now everything else about my website stayed the same.
All I did was add Bootstrap's CSS.
And now if I open bootstrap.html, the website looks a little bit nicer.
You notice that there's some padding along the outside.
You notice that the headline is in a slightly different font.
This is Bootstrap's default style that you're welcome to change.
But that is Bootstrap's way of just making
your website look a little bit nicer, look a little bit more modern.
But the real power of Bootstrap comes when you start to look at the way
that Bootstrap organizes information and lays things out.
So Bootstrap's layout system uses a column-based model where the website is
divided into--
or each row in the website, you might think,
is divided into 12 individual columns.
And you can control how many columns different things take up,
recognizing that 12 columns is sort of the full width of your entire website.
So let's take a look at column0.html.
So inside the body of this website, here's what we have going on.
I have a div whose class is row.
Row is a special class in Bootstrap that just means,
this is going to be a row of my page that's
ultimately divided into 12 columns.
And here are my individual divs within that row
where each one has a class of col-3.
And col-3, in this case, just stands for, this is a column that's going
to take up three columns' worth of space.
So if I have a 12-column page, I can have four things that each take up
three columns' worth of space.
And that's ultimately going to make up my entire row.
So this is a section, another section, a third one, and a fourth one.
And I've added some styling to it in order
to make it look a little bit nicer.
I've added some padding on the outside, a background color, and a border.
And you'll see what that looks like in just a moment.
So if I open up column0.html, you can see that, now, I've
got these four sections, these four individual columns that are each
taking up three out of the 12 total columns that are on the Bootstrap grid
layout.
And notice, if I shrink it down, some of the spacing goes away.
You'll notice things automatically adjust a little bit.
So it's designed to be very mobile-responsive out of the bat.
I didn't write any of the code or the CSS to help things resize
and rearrange when the screen size changes.
Bootstrap's doing that all for me.
So that's four columns.
But really, what I would like is for these columns
to move around depending on the size of the screen,
that I don't just want it to be four columns.
Because once it gets to a really narrow device, these four columns,
if there's a lot of content in them, this
is going to look really squeezed together so to speak.
So what might I do about that?
Well, in this case, let's take a look at columns1.html.
This is very, very similar, almost the same,
with a couple of changes inside the row.
Before every class inside these divs inside my row, we had a class of col-3
for, we want this column to take up three out of the 12
possible columns that are present inside of the Bootstrap grid layout.
In this case, I've done something a little more sophisticated.
I said, "col-lg-3" and "col-sm-6."
In other words, on a large screen where Bootstrap
has defined for me what counts as a large screen
by taking a look at what typical computer displays look like,
what mobile displays look like, what tablet displays look like--
but on a large screen, I want this div to take up three columns out of the 12
on my screen--
in other words, a quarter of the total width.
But on a small device, I would rather it take up six out of the 12,
or half of the total width of the screen.
And likewise, I did the same thing for each one of these individual columns
within this row.
And so on a large screen, we have col-lg-3, large 3, large 3, large 3,
where each column will take up three out of the 12 possible columns
in the Bootstrap grid model, whereas on a small screen,
each one will take up half of the total width of my Bootstrap grid.
So what does that look like?
What's the impact of this when I try and render this website and look at it?
If I open up columns1.html, on a large screen, it looks exactly the same.
I've got one column, two, three, and four,
where each column is taking up three out of the 12 available column spaces
that Bootstrap provides to me.
But as I make this smaller, what you'll notice is that once it gets
to a certain point-- in this case, here--
it changes from four columns all in a row to two columns on each row
where, before, here, on a large screen, each column
was taking up three out of the 12 possible columns that
were available in Bootstrap.
But on a smaller screen, each one's taking up half of that width.
And the result of that is that the latter two columns, which
don't fit within the 12, get moved onto another line entirely of their own.
So I could have done this using flexbox like I showed you
a moment before, where things start wrapping onto other lines
as I start to reduce it.
But Bootstrap, which is actually written using flexbox,
sort of abstracts that away and lets us just
take advantage of defining how wide we want our columns to be
on different size devices.
And Bootstrap takes care of the rest of making sure that things get
rendered the way that we want them to.
Question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Question-- yeah, so Bootstrap does define classes within it.
AUDIENCE: What happens if I [INAUDIBLE]?
BRIAN YU: Great question.
So the question is, Bootstrap defines a whole bunch of these classes.
It defines row, and col-lg-3, and col-sm-6, and so on and so forth.
What happens if I, in my CSS files, am also using col-lg-3 or row as CSS?
And generally speaking, your web browser is able to take multiple CSS files
and try and reconcile them somehow by applying all of the styling together.
But if the styling conflicts, if Bootstrap says
this row should have this width, but you say
the row should have some other width, then one of them
ultimately needs to take precedence.
And generally speaking, the one that takes precedence
is the one that is more specific.
So if you had said that, I want the styling to apply
to any row that is a child of some other thing, then that will take precedence
over just a generic, I want rows to be styled in a particular way.
But generally speaking, it's a good idea to be mindful.
And if you were defining classes of your own,
oftentimes it's a good idea to give them different names from the ones
that Bootstrap does just to avoid having that conflict at all.
AUDIENCE: [INAUDIBLE] class in Bootstrap.
BRIAN YU: Correct, container is a class in Bootstrap.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah, Bootstrap--
AUDIENCE: [INAUDIBLE]
BRIAN YU: So if you want to take the Bootstrap classes
and add your own styling to them, you can sort of
override Bootstrap, so to speak, by adding CSS code that
refers to Bootstrap's classes.
But you can add additional styling of your own
to them to make them display the way that you want them to display.
And you can experiment around with that to see
how that ends up actually working.
But Bootstrap, in addition to providing this grid layout,
also has a host of other features.
And we're not going have time to go through all of them.
But I'll show you a couple of interesting ones here.
For instance, Bootstrap makes it very easy to create alert messages.
So these are some sample messages, just generic news, good news, and bad news.
And in order to create those alert messages, all I needed to do
was apply particular classes.
So the class alert and alert-primary will automatically style something
as a blue alert message.
An alert alert-success will automatically style it is a green one.
And alert, dash, alert-danger automatically
styles it as a red message.
And so this makes it very easy to add these alerts to my code,
because Bootstrap has already written the styling for how to make
them display in a way that looks nice.
| if you're curious and you want to use more of Bootstrap's elements,
you can go to Bootstrap's website, which, I believe, is getbootstrap.com.
And if you go to their documentation on Bootstrap's website,
you can look at all of their components.
So here, what we just saw were Bootstrap's alerts.
You can see all of Bootstrap's alerts.
And here is the code that you can just copy and paste
in order to create alerts that look in a particular way.
Bootstrap also has special styling for buttons,
buttons that appear in different colors and different sizes.
And they tell you what classes to add to your buttons
in order to make your buttons styled in a particular way
to make them look a little bit nicer.
And there's a whole lot of other features and styling
that Bootstrap adds.
You can just scroll through this list and get a sense
for some of the features that Bootstrap gives to you.
And by using some of these features, you can
start to make your website look a lot nicer
much more quickly by taking advantage of the work that Bootstrap's already done.
So one last topic that I wanted to talk about today with regards to CSS
and how we might go about styling our website
is what happens when our stylesheets start to get a little more complicated
and get a little more sophisticated.
So I want to take a look at variables.html here.
And you'll see why it's called "variables" in a moment.
But right now I have, inside of variables.html, an unordered list,
a ul, and an ordered list, an ol.
And let's take a look at a sample CSS file that I might use in order
to style this variables.html file.
I have ul, which is set to font-size--
14 pixels, and color is red, and ol, which is font-size--
18 pixels, and color is also red.
So these two lists are going to be displayed in different-sized fonts,
but I want their color, ultimately, to be the same.
I want their color to render as red either way.
What if-- and maybe that's because the generic style of my website
is that I like the color red, and I want my web page to render things as red.
But what if, later on down the line, I decide, well, wait a minute,
I'd really rather that by list be blue instead, instead of red.
In this case, I would need to go back to two different places,
to the unordered list, and change the color to blue, and the ordered list,
and change that color to blue as well.
And you can imagine, in a more complicated website,
if I had dozens of different examples of CSS styling in particular colors,
I might need to go through all of them and change those individual colors.
And it might not be as drastic of a change as red to blue.
It might be just a slight shade of red that you want to change,
and you want to change it in many, many different places.
And having to change it independently on each separate line
is ultimately going to start getting tedious.
And remember, we talked about before, if you ever
find yourself repeating the same thing over, and over,
and over, you should always think about, is there a better way to do it.
Is there something else we can be doing instead?
And if you're familiar with programming and programming languages
like C, or Python, or any other language,
then you might be familiar with the concept of variables,
where we assign a variable of value once,
and then we can reuse it multiple times.
And if we change that variable's value, then that variable's value
is changed everywhere, so to speak.
And so what we're going to do now is introduce an entirely new language
which is built on top of CSS called Sass.
And what Sass is is it's an extension to CSS
that gives us a little more power and a little more flexibility when
it comes to designing CSS stylesheets that lets us programmatically generate
stylesheets in a more advanced and more powerful way.
But ultimately you'll see that the concepts here
are just to make it easier to generate the stylesheets that we
want to generate.
So instead of variables.css, I'm going to look at variables.scss,
where .scss is the typical extension for a Sass file,
which is going to be some specific extension to CSS that we're going
to explore in a moment.
So what's going on in variables.scss?
Well, the first thing I do on line 1 is define a variable.
We haven't previously had any variables in CSS, because CSS, out of the box,
doesn't really support the idea of a variable.
But Sass, this extension to CSS, does.
And so how does it work?
On line 1, I said $color--
all variables in Sass begin with a dollar sign--
$color, colon, red.
So I'm defining a new variable.
It's called color.
And its value is going to be red.
And then, here's what's happening.
I have my unordered list, whose font size is 14 pixels.
And the color-- instead of saying red is the color,
I'm saying $color, meaning $color was this variable that I
defined to be red before.
Whatever color that is, that's the color I want my unordered list to be.
What about my ordered list?
Well, the font size is going to be 18 pixels,
and the color is also going to be whatever
the value of this color variable is.
And so by doing this, I get the same effect-- an unordered list
that's 14 pixels in font size and red.
And same is true for the ordered list--
18 pixels in size, and the color is also going to be red-- no different.
But I faced a problem.
Can anyone guess what the problem might be if I tried to just use this code
and render it in the web browser?
Do we think it will work?
Yeah?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Oh, is there, like, a particular CSS property called color?
That's not going to be a big deal for us,
but that's a good point, that we want to be careful about naming things.
But ultimately our web browsers are trained to understand CSS,
and they know how CSS works.
But web browsers don't, out of the box, understand Sass, this extension to CSS,
where we have variables in there.
So our web browsers are going to start to complain
if we just put this inside of a CSS file and say we want this to render
as the styling for the website.
So what we need to do is take this SCSS file, this Sass file,
and convert it into a CSS file.
And that's why there's a program called Sass, which does just that.
And I'll show you how it works.
If I go into my variables directory, what I have here is
a variables.scss file.
And if I run sass variables.scss variables.css,
what that is going to do is it's going to take my variables.scss file,
and it's going to compile it-- turn it into--
a CSS file that my web browser is going to be able to understand.
So I press Return.
That compiled it.
And now if I take a look at it, I see I now
have a variables.css file, which I didn't have before.
And I also have this additional map file.
You don't need to worry too much about that.
But if you're curious, that's just a way for your browser
to understand the relationship between the CSS and the SCSS file
in case it wants to figure out--
it's useful for debugging or figuring out what line something came
from in the original file.
But let's look at this variables.css file, which I didn't create.
It was generated for me by Sass.
What does it look like?
So it looks, ultimately, like this.
And it's exactly what my previous CSS file looked like.
But it substituted that color variable with the name,
or whatever value that color variable was actually assigned to.
So color is now red.
Color is now red in both the unordered list and the ordered list.
The fact that the curly brace is on the same line instead of on a new line
like we've been doing before is just that stylistic choice.
It doesn't actually make a difference on the way that the page renders.
But what I've done is I've used the variable from the SCSS file
and compiled that file into a CSS file.
And now this is something that my web browser can ultimately understand.
So now if I go back to variables.html and open up variables.html, what I get
is an ordered list where the unordered list items are
smaller than the ordered list items.
But all of the list items are red.
And now, if I wanted to change this-- if I wanted to change the color from red
to blue, for instance, rather than change it in two different places--
or, and you imagine, in a larger-scale program,
potentially dozens or hundreds of places across your web application--
all I need to do is change this $color variable.
I change it from red to blue, for example.
And if I open variables.html, now it's still red.
I changed it to blue, but the styling of the list items is still red.
Why is that the case?
Why did that happen?
AUDIENCE: [INAUDIBLE]
BRIAN YU: I need to recompile it, right.
Because this HTML website is only looking for variables.css.
It doesn't know anything about variables.scss,
which is the file I've actually been working with.
So I need to run sass variables.scss variables.css.
That's going to recompile my CSS file such that when I now refresh the page,
now everything is blue.
Now, as you're developing with SCSS, you might
imagine that it's going to start to get annoying fast, where every time you
make a change to a SCSS file, you're going
to need to recompile it back into CSS.
So Sass has some built-in features to help make this a little bit easier.
One is that Sass can watch a file--
in other words, keep track of the file, or even a directory full of files--
and any time any of them changes, automatically recompile the CSS file.
So if I said sass --watch variables.scss,
and any time a change is made to variables.scss,
compile it to variables.css, now Sass is watching for changes.
So now if I go back here and change the color to green, for example,
and I save that, if I check back here, Sass
has automatically detected that I've made a change to variables.scss.
And it's written me a new version of variables.css.
So without me needing to manually go in and recompile that SCSS file,
I can refresh the page.
And now all of the list items are green.
So that's marginally better, that instead
of needing to recompile the Sass file every time I make a change,
I can just tell Sass, watch all of my SCSS files.
And whenever any of them change, automatically compile it to CSS for me.
And an additional feature is that many website deployment systems,
GitHub Pages included, have built-in support for Sass such that if you push
an SCSS file to GitHub Pages in project 0, for instance,
GitHub will automatically take care of the process of compiling that Sass file
from a .scss file to a .css file such that when someone goes to your website,
they will see the resulting CSS style applied to your website.
And so many system nowadays have built-in support for SCSS.
They make it easy for you to use Sass in order
to have a little bit more control over your styling
in order to make websites really look the way that you want them to look.
Questions about Sass so far and what we've seen?
Yeah?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Great question.
Do you need to install anything in order to run the sass command?
Yeah, you'll need to install Sass in order
to make any of that-- the command line sass command work that does
the compilation from SCSS files to CSS.
If you never want to do the compilation yourself--
if you want to just rely on GitHub to do that compilation for you--
then you don't need to install anything.
You can just push an SCSS file to GitHub Pages.
And GitHub Pages will, on its own, convert it into CSS.
But if you want to test that compilation locally
to see what the resulting CSS looks like, then you'll want to install Sass.
It's a freely available, pretty small piece of software
that you can just install onto your computer
the same way you installed Git or other software in order to make that easier.
Other questions?
Yeah.
AUDIENCE: What if I had multiple CSS files,
like if we downloaded the Bootstrap CSS file and I [INAUDIBLE] from that?
BRIAN YU: Great question.
So the question is, how does Sass work when we're
dealing with multiple different files?
Sass has a built-in command that actually
lets you import existing CSS from a different file into a Sass file.
So there's built-in support for multi-file stylesheets built into Sass.
We won't see any examples of that in this lecture.
But if you go to the Sass website, you'll
find examples of how they're able to incorporate
different files into the same file in order
to use variables that are defined in a different file
in a separate stylesheet.
Great question though.
One more question?
Yeah?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Great question.
So the question is, when you're linking the file,
do we want to link the CSS file or the SCSS file?
We always want to link the CSS file, because the CSS file is the only one
that the browser actually understands.
Google Chrome, out of the box, doesn't know how to take a Sass file
and understand what the variables mean.
It only understands the CSS file.
So what we need to do is say, reference the CSS file,
and then just make sure that somehow, either us doing it ourselves
or letting GitHub Pages do it for us, get
that Sass file compiled down to CSS such that we can then
use it for our own purposes.
Excellent question though.
So those are variables in Sass.
But what other features does Sass give us?
How else can we make this a little more powerful?
Well, one other feature that's very helpful
is nesting different CSS selectors within each other.
And I'll show you an example of that now.
So here is nesting.html.
So inside the body of nesting.html, I have a big div, inside
of which is a paragraph inside the div, and also
a list inside the div, an unordered list with three list items
that are all inside of this div.
And outside of that division of the site,
I have a paragraph that's outside of the div and a list
that's also outside of the div--
so sort of a trivial, contrived example, but just
going to show you a bunch of different hierarchies via which we
might organize different HTML elements.
And I want to style them in a particular way.
So let's take a look at nesting.scss.
And so here's the contents of nesting.scss.
I have div font-size--
18 pixels.
And then within the div's curly braces, I have an additional p.
And what that p is standing for is that I
want this styling to apply to any paragraphs that are inside of a div.
Now, notice that this isn't anything we couldn't
have done before with just regular CSS.
We could have said, on a different line, div, space, p
and then color equals blue to say paragraphs inside of a div
should be colored blue.
But nesting things within each other just
helps to organize things a little more.
Especially as our stylesheets start to get longer and more complicated,
we might find it easier to organize our code into something
like this where we can say, all right, how are we styling the div.
Well, the font's going to be 18.
Any paragraphs within it should be blue.
And any unordered lists within it should be green.
And that just helps to organize our styles a little more
such that, as they get longer, it gets easier to look at
and easier to maintain.
So when I compile that using Sass, which I've already done,
I'll show you with the resulting nesting.css file--
or actually, I'll do it now.
I'll go into my nesting directory where I have a nesting.scss fild.
I'll go ahead and compile nesting.scss to nesting.css.
And we'll take a look at what that file looks like.
And what it's ultimately done, it's done exactly what
we would have done before if we didn't have Sass at our disposal.
It said div's font size is going to be 18.
And then where, before, we just had p inside of the div,
it's changed that to div, space, p.
In other words, all paragraphs contained within a div are going to be blue,
and all unordered lists within the div are going to be green.
But instead of needing to specify this div every time,
we were just able to enter scss, have a slightly simpler, slightly
easier to look at interface that tells us how things
are going to be styled inside the div.
So if I open up nesting.html, what the result is is that the paragraphs get
styled as blue, the list items get styled
as green, but only the ones that are inside of this part, which
was that original div.
And anything outside of it doesn't get styled in that particular way at all.
So that nesting feature is just another nice to have that Sass offers.
Sass offers a number of different other features.
But the last one that we'll take a look at today is the concept of inheritance.
And inheritance is something you may be familiar with if you've
done programming before in object-oriented programming
languages like Java or Python.
But inheritance in the context of Sass is
used to refer to when you have some general styling
that you might want to apply to a whole bunch of different things,
but each of those different things you might
want to be styled in a slightly different way.
So if you think back to Bootstrap for example,
where we saw those alert messages in Bootstrap where we had--
I'll open it up--
where we had a blue alert, a green alert, and a red alert,
what if we wanted to create this sort of interface for ourselves
without using Bootstrap where we wanted different alert messages that
were different colors?
Well, you might imagine there's a lot of styling that goes into this.
There is a particular font that they're using.
There's a particular font size that they're
using for all of these alert messages.
But also, all of these alert messages are different.
This one's blue, this one's green, this one's red.
And as a result, they need slightly different CSS styling.
But they're fundamentally very similar.
So there's a lot they share in common.
If we were to write out the CSS by hand, we
might have a lot of repetitive styling where
we have the styling for the first alert message that
got a lot of the same stuff, then a blue information, same thing
for green and red.
But with SCSS, we can use the concept of inheritance
to factor out all of those commonalities in order
to make it easier and more efficient to generate
CSS that lets us have styling that inherits
from some overarching property.
And so let's take a look at what that looks
like by opening up inheritance.html.
So what I have here is, without using Bootstrap, I have three different divs.
This is a success message.
This is a warning message.
This is an error message.
One's classes is success.
One's class is warning.
One's class is error.
So those are my three classes that I have to deal with.
And I want to style them in a particular way
so they show up sort of like the Bootstrap alerts
that we were looking at just a moment ago.
So let's look up at inheritance.scss and see what's going on here.
So what I have here is this %message.
And percent isn't something we've seen before.
It's something specific to Sass.
And it lets us define, effectively, a template, something
that other things are going to inherit from.
And this is just going to be a generic message--
whether it's a success, of a failure, or an info
message, just a generic message.
And that message has a particular font family.
It's going to be a sans-serif font.
It has a particular font size, 18 points, and it's going to be bold.
That message is going to have a border around it,
a 1-pixel solid black border around that message.
And it will have certain spacing, 20 pixels worth of padding,
and then 20-pixel margin.
And that styling, I want it to apply to all three
of my different categories of messages.
Success messages, and error messages, and info messages
alike all should have that same styling.
And so how do I do that?
Well, this is the code that I need, now, in Sass,
in order to define those three classes.
My success class, I just say, extend message.
Take all the styling from the message before, and use it.
But let's additionally add that the background color is going to be green.
Likewise, for the warning message, let's extend the message.
It's going to have the same style properties as the message.
But the background color is orange.
And same with error, except now, the background color is red.
If I now compile that down to CSS, the result
is that I get CSS code that applies this generic styling to all successes,
warnings, and errors, and this specific background color to success,
and a specific background color to warnings,
and a specific background color to red--
to errors.
And again, none of this is stuff that we needed Sass to do, but using Sass
makes it a little bit easier.
It's a little bit of a nicer semantic to say, here's a generic message,
here's the styling for that message, and here are specific success, warning,
and error messages that are going to extend
or inherit from that message in order to add
additional information, the result of which
is a CSS file that we could have written ourselves
but that gets generated from the SCSS file.
So if we now open up inheritance.html, this is what we get,
a success message, a warning message, an error message.
We see the spacing around each.
We see the font size and the font style that we wanted it to be.
But the difference comes in the different classes.
One is a success message, one is a warning message,
one is an error message.
And so those different types of messages have different CSS styling
applied to them.
And as a result, they appear a little bit differently.
So questions about any of the Sass tools that we've
seen so far, whether it was variables, or nesting elements within each other,
or using inheritance to allow a generic style
to be applied to multiple different types of classes, or IDs, or elements?
OK, if questions do come up, feel free to reach out.
And feel free to post in the Slack and ask questions
as you begin to dive into project 0.
In project 0, you'll have more of an opportunity
to experiment with some of this, to use Bootstrap,
to make your web page mobile-responsive, and to begin to use Sass in order
to create more advanced, more sophisticated stylesheets.
Next week we'll dive into a look at Python,
and how we actually create web applications by writing in Python,
and using some of the HTML and CSS we've looked at in the last two weeks
in order to do so.
But for now, that's it for Web Programming with Python and JavaScript.
Thank you all, and we'll see you next week.