[MUSIC PLAYING]
BRIAN YU: All right.
So welcome everyone to CS50 Beyond.
Thank you, David, for the introduction.
I'm Brian.
I'm a senior here studying computer science and linguistics.
And so goal of this whole week is going to be to pick up where CS50 leaves off,
and in particular dive into what was the latter half of CS50--
the design and implementation of web applications,
learning a little bit more about web application development,
getting some opportunity to see some of the latest features, latest
libraries with regards to web application design
and how to build them, and also to get some hands-on practice with that
as well.
So before we dive into the actual course material
I thought I'd give you a brief overview of the course-- where we're going,
the things we're going to be talking about,
and also some of the logistics for how this upcoming week is going to work.
And so the topic list in brief of the main things we're going
to be talking about are shown here.
We'll spend today talking about HTML and CSS, which you might
remember from the latter half of CS50.
Today we'll review a little bit of that for if you
might be a little rusty on HTML and CSS from when you took CS50 originally.
But we'll also go beyond it a little bit,
looking at how we can take advantage of some of the latest features of HTML 5,
which was released in 2014, and also taking
a look at some more advanced features of CSS,
figuring out how to style our pages not only once,
but also thinking about how do you style our pages so that they're
mobile responsive and look good on phones and tablets and other devices.
How do you style pages so they look good when you print them out.
How do you style pages in such a way that you
can have animations and change the sizes of pages and they still look good.
So all sorts of things with regards to the style of our pages.
Later this afternoon we're going to take a look
at Git, which is a piece of version control software, which
if you choose to continue in computer science,
you'll definitely use at some point if you haven't used it already.
And that can be a very useful tool for managing
different versions of our projects and keeping track of changes
and collaborating with other people, as we'll soon see.
Tomorrow we're going to-- and the day after-- we're going to dive
into writing web applications with Python and Flask, again,
something that you saw a little bit of and got a teaser up CS50.
But we'll dive beyond, looking at other things that you can do with Flask,
more advanced features, how to build larger and more sophisticated
web applications.
And then in particular looking at JavaScript,
which has undergone a number of revisions
over the course of recent years and looking
at how you can really take advantage of JavaScript
and writing code on the client side to be
able to build really effective and powerful and dynamic web applications
when you're working on trying to design an app.
After that we'll take a look at database design talking about SQL,
but also looking at some other SQL-related features
looking at how to build APIs and take advantage of APIs
that others have built in order to enhance your web applications even
more.
And then in the latter half of the week we'll
begin to look at React, which is a library for building user
interfaces made by Facebook.
It's quite popular nowadays.
A lot of companies and industry, if they're
looking to build a web application quickly,
will use React as their method of doing so.
And learning that will therefore empower you
to be able to work in these sorts of fields
in order to be able to build applications in this style.
It Involves a slightly different way of thinking about web applications.
But we'll learn about that-- how to think about application state
and how to think about how to flow data throughout a web application.
And those are topics that we're going to cover.
And then finally at the end we'll touch on security and scalability,
which we'll be discussing throughout the course,
but in particular thinking about how do you make sure your web applications are
secure, what are the security threats and vulnerabilities that
might come up on the internet.
And in particular also looking at how to scale our web applications.
As you go from just 10 users to 100, 1,000, 10,000 users,
how do you figure out how to make sure your web application is going
to be able to handle that load, and what are the considerations you have to make
and the changes that you have to make in order to support that kind of thing.
So those are the main topics.
And in terms of how the week's going to work,
we're going to follow a schedule that looks something like this.
We'll run from seven days starting from today, Saturday,
everyday up through next Friday.
So you still have the weekend before classes start up again.
And we'll go from 10:00 AM to 5:00 PM approximately every day.
And the general structure is going to look something like this.
Every morning we'll meet here in Yenching Auditorium at 10:00 AM.
And we'll have a morning session till about 12:30.
And I'll do some lecturing for a little bit.
And then we'll get some hands-on time to do a bit of a morning project.
After that we'll break for lunch at around 12:30 each day.
And we'll reconvene in this room at 2:00 PM for our afternoon session, which
will consist of probably a shorter lecture followed by even
more hands-on time to work on projects.
We'll suggest some projects that you might want to consider tackling.
But you're also, of course, more than welcome to take
the skills you've learned to build something of interest to yourself
as well.
And there will be teaching fellows working with you in order
to help you out, help you debug things, help you better understand
the concepts.
Because really the best way to learn a lot of these concepts is to just try it
hands-on to get an opportunity to apply these skills
and try to use them in practice.
That's the general schedule.
Questions about the schedule or what the logistics of the week
are going to look like?
All right.
Over the course of the week you'll get to meet some of the staff.
So you already met David, who's not listed on the slide,
but he introduced himself before.
I'll be teaching the class leading these lectures.
And there are also going to be four teaching fellows--
Athena, Josh, Krishna, and Julia will be helping out
as we go into different breakout rooms in order to work on hands-on projects.
You will get an opportunity to interact with and get to know and ask questions
as well.
And of course, one of the goals of this week
as well is to give you an opportunity to get to know each other.
There are a lot of people here that are all
interested in computer science, all interested in software development.
And one of the goals is that as you work on these projects,
you'll have an opportunity to work with each other, get to know each other
and form some friendships and work on collaborating together on projects,
because if you go on to take other classes here at Harvard,
you'll likely see each other in future classes as well.
So it's an opportunity to get to know other people that are sitting
with you in this room today as well.
In addition to that, we also have the course website.
You can access it by going to cs50.ly/beyond.
There you'll find all of the materials covered in lectures,
so no need to feel like you need to write down every example that I write
in code up on the screen, because all of the source code examples
are going to be published on the course website.
All the slides are going to be published there as well.
In fact, this morning's slides and code examples are already up on the website.
So you can go there now and take a look at that if you'd like.
So definitely no need to feel like you need to write down every line of code.
And feel free to reference back to these source code examples
as you go about creating your own projects as well.
Another thing you'll find if you go to cs50.ly/beyond is that if you go
to the menu bar, there's a little button that says Feedback.
If you click on the button that says Feedback,
that will take you to a traffic light screen.
It's got three faces-- a green smiley face, a red frowny face,
a yellow neutral face.
This is a way for you to provide sort of live interactive feedback to me
over the course of the week as I'm lecturing.
So if as I'm talking I'm talking about a concept, it makes sense,
you understand it, you get it, just press the green smiley face.
If as I'm talking something doesn't quite make sense,
you want me to slow down, you want me to explain something
in a slightly different way, go ahead and press the red frowny face.
Press the yellow neutral face if you're feeling somewhere in between.
I up here on my screen have a screen that looks something like this.
Yes.
And as you press your little smiley faces, frowny faces,
they show up on my screen.
I'll keep an eye on that as I'm lecturing.
It's just a way for me to get a sense for how
you're feeling so I know whether to speed up, slow down,
if things make sense, or if you want to pause and take some questions.
But of course, the best way to get help if you're feeling up to it
is just raise your hand, ask a question.
I want this to be interactive.
I want you to get an opportunity to ask questions and make
sure you leave each day with a better understanding of the web application
technologies that we've been talking about.
And so one of the goals of this week is making sure
that there is that interactivity, that you have the opportunity to get
all of your questions answered as well.
There are already way too many red frowny faces.
All right.
I'll pause here for questions.
What questions do you have?
Yeah.
AUDIENCE: Yeah.
Are the lectures recorded?
BRIAN YU: Yes, the lectures will be recorded.
So afterwards, probably a couple hours after each lecture,
they'll be posted online so you can reference back
to them if you would like to.
Other questions.
All right.
And so one other thing I'll mention actually before we actually
get into the heart of what today's lecture is going to be about
is that another one of my goals here in this week
is to not only give you an exposure to web application development,
but as we talk about web application development, that will also lend itself
opportunities to talk about a bunch of other topics within computer science.
So we'll get an opportunity to talk about security, as I mentioned before.
We'll get a chance to talk about public key cryptography and some
of the technologies behind that.
We'll get a chance to talk about caching in different algorithms
for thinking about caching.
We'll get to talk about regular expressions and regular languages,
which you might get exposure to if you take a formal language
theory class or theory of computer science class like CS121, for instance.
When we talk about JavaScript we'll have an opportunity
to talk about functional programming, which is a big idea in CS51,
if that's a class you're thinking about taking as well.
So throughout the course, even though the focus
is on web application development, we'll get some teasers
of a number of other classes.
We'll build some games in the web application
world, some web-based games.
And in the process we'll get to learn a little bit
about artificial intelligence and how to build AIs to play games as well.
So we'll get some exposure to some other topics in computer science
beyond just web application development through the lens of trying to design
and build web applications as well.
So goals for today are we're primarily going to be talking about HTML and CSS
this morning.
This afternoon we'll dive in to Git.
So we'll start with a little bit of review just
to give you an overview of the basic HTML features,
which you may have seen before.
We'll introduce some of the newer features
that you might find an HTML 5, the latest version of HTML.
And then we'll also get a little bit of a chance
to talk about regular expression, something
that HTML empowers you to take advantage of in HTML 5,
and something that you'll find is useful even beyond just the world of HTML.
Then we'll talk a little bit about CSS, talking about styling our web pages
and different more advanced ways to try and style your website in a very
specific and precise way.
And in particular, how to think about responsive design,
which is one of the most important developments
in thinking about how to design web pages in the last decade, where you
really need to begin to think about the fact
that devices come in all shapes and sizes.
You need to think about making sure a website looks good on a big screen,
making sure it looks good on a mobile device, looks good on a tablet device.
And there are different considerations you
need to take advantage of there and different features
that CSS offers that allows you to take advantage of those sorts of ideas.
So we'll begin by talking about HTML.
And so we'll start with a little bit of review, which will probably
be familiar to you from CS50.
But in case it's a little bit rusty again,
we'll give you a chance to take a look at it again.
So the basic HTML web page that we saw in CS50
looked a little something like this.
This was the simplest web page that we could design.
And we noticed that all the HTML pages are
divided into these nested tags where we've got a starting tag and an ending
tag that enclose an HTML element.
So this whole document is enclosed inside of an HTML element
inside of which we had the HTML header.
Inside of our header we had a title that just said, OK, hello.
And then inside of the body of the web page
we said something like, hello, world.
And the basic idea of HTML was just trying
to find the right tags to use in order to create the elements that we
want you to display the content that we want to on our web page.
And some of the common HTML elements that we may have seen
looked a little something like this.
So h1 through h6, those are used to create headings.
So if you want a big heading at the top of your page, you might use an h1 tag.
As the numbers get bigger, the size of the heading gets smaller.
So h2 is a slightly smaller heading.
h3, h4, h5, and then h6 is the smallest heading.
ol and ul are used to create ordered and unordered lists.
So I'll demonstrate that very quickly.
So I go here and open up the Code Editor.
And let's call this list.html.
And I'm using VS code as my code editor.
We're not going to be using CS50 IDE this week,
because increasingly most people when they're designing web applications
are working on software development more generally.
We usually just use the text editor on their own computer.
There are a number of different options right now.
Some of the more popular currently are Sublime Text, Atom, VS Code.
But there are a number of others as well.
I'd recommend that you choose one and download it and try it out and give it
a shot.
You can try multiple if you'd like to see which one
fits your personal preference better.
But VS Code is the one that I'll be using over the course of this week.
So list.html.
We'll say doc type html.
And remember, the doc type html on line 1, that
just tells the browser that this is an HTML5 web page--
the latest version of HTML.
We'll add a header.
Title will just be Lists.
And then inside the body of the web page, a ol stands for--
I'll make this a little bigger--
stands for an ordered list.
So an ordered list or a numbered list, for instance.
So I might have a list item.
So this is item 1.
And I might have item 2 and item 3.
OK.
So ol stands for "ordered list." li is each individual list item within it.
And if I open up list.html inside of Chrome.
You'll see it looks something like this.
1, 2, 3.
Each one is numbered.
Item one, item two, item three.
If I wanted to change that to an unordered list
where it's just bulleted instead of numbered,
that's as simple as changing this tag.
Instead of ol for ordered list, I'm going
to change it to ul for unordered list and do the same thing down here.
Close the unordered list.
And now it's an unordered list element.
Instead of numbers, it's replaced by individual bullet points.
And so that's ol and ul for ordered list, unordered list.
In the client CS50 we also saw the image tag
for if you want to insert an image into somewhere.
We also saw the a tag.
The a is the anchor tag.
And it's used in particular to allow you to link to somewhere else.
You can link to another page in your same web application
by just typing in like, some other file.html
to link to some other HTML file.
You can type in some other URL completely,
like Google.com to link to Google.com or some other external page.
The a anchor tag also lets you link to the same page, which
is a feature that you'll often see in really long web pages
where you might have a table of contents.
And a table of contents item will link down to somewhere later in the page,
for instance.
And so I'll show you an example of that.
If we create some paragraphs here.
So this is paragraph one.
And I'm just going to take this as paragraph one
and repeat it a whole bunch.
And we'll say this is paragraph 2 and repeat that a whole bunch.
And add another paragraph and say this is paragraph three,
and repeat that a whole bunch.
So I've got three big paragraphs.
And I might like to have some table of contents that lets me navigate quickly
between all three of these.
One thing that I can do is I need some way of uniquely
identifying each paragraph.
And this is a place where the ID attribute will come in handy.
If you recall from CS50, we can add an ID attribute to any HTML element
to give that HTML element a unique name.
So I might do something like, this paragraph has ID paragraph one.
So this is some unique name I'm giving to this paragraph such
that in the future elsewhere on the page or in my JavaScript code, as we'll
see later in the week, we can reference this particular paragraph.
So I'll scroll down and do the same thing here.
This paragraph I'll give an id of paragraph 2.
And then finally down here this paragraph
I'll give an id of paragraph three.
And so now I might like to create a table of contents whereby
I can click on paragraph 1, 2, 3 that will link me directly
to whichever paragraph it is that I'm interested in.
And so I'll go back to the top of this page.
And my table of contents is just going to be an unordered list, a ul.
And I'll have a list item that goes paragraph one.
And I'll have another one that takes me to paragraph 2.
And I'll have another one that takes me to paragraph three.
And so right now I've just created an unordered list.
I've created the table of contents.
But they don't link anywhere just yet.
So if I were to actually open up this page,
I see paragraph one, paragraph two, paragraph three.
And then I see the three paragraphs, but clicking on these
doesn't really do anything.
And so now what I'd like to do is actually make these list items link
to whichever section of the page I'm trying to refer to.
And so as you might guess, we're going to use an anchor tag, ah ref.
And where normally I might have inserted something like a link
to another website in these quotation marks,
I can instead link to a particular ID.
And I use the pound or hashtag sign to say go to this particular id.
And I want to say when you click on the paragraph one list item,
I want to link to the paragraph that has id paragraph one.
And likewise I'll do the same thing for paragraph 2.
And likewise I'll do the same thing for paragraph three.
Paragraph 1, 2, 3.
Each one links to a distinct id.
And so now if I refresh this page--
and I also shrink down the size of the page
so that I can actually see all three paragraphs not on the same screen--
and I click on paragraph one, that just takes
me to paragraph one on the same page.
I didn't link to a different page.
It just linked to a different position on the same page.
And likewise if I scroll back up to the top and click on paragraph 2,
for instance, that takes me immediately to paragraph 2.
So as you begin to build larger websites that
have a lot of content on the same page, you
might find that linking to different parts of the same page
is something that you might actually find useful as you
go about designing web applications.
All right.
In addition to linking, we also saw that we have tables and forms
that we can create as well.
Then certainly we'll have an opportunity to do some of that in this class
as well.
But you saw that in CS50 too.
And there's some source code examples for how to create tables,
how to create forms if you look at the source
code examples that are on the course website right now.
So now let's talk about some of the differences between HTML4--
the older versions of HTML--
and HTML5, the current version of HTML that introduces a lot of new features.
So in HTML4, if you wanted to organize your page in different ways,
you would often want to organize your page in--
OK.
Here's the header of the page.
Here is the navigation bar along the left-hand side, for instance.
Here is the main body of the page.
Here's a section of the page.
At the bottom you may have a footer for the page.
And you would want to distinguish those in some way.
A common way to do that in HTML4 would have been to give each one a class.
Does anyone remember what's the difference
between giving an HTML element an id and giving an HTML element a class?
Difference between those two things?
Yeah.
A-- which one's unique?
Class is not unique.
Great.
So an id is unique on an HTML page.
A single id can only be used at most once.
If you have an id, it references one and only one element on the page.
But a class, something like class equals header,
class equals now, class equals section, that
is a way of identifying an HTML element that is not unique.
There might be multiple sections on a page, for instance.
And so that makes sense to make that an HTML CSS
class instead of making it an ID.
Means there can be multiple of those.
In HTML5 they found that because people were using structures like this
so often-- saying header, nav, section, and footer--
they added a whole bunch of semantic elements
that would describe the same exact things.
So HTML5 introduces all these new tags.
You can just say, header.
You can say, nav section and footer, for instance,
among other different semantic elements to describe your page in order
to better get at the structure of the page,
helps to make things a little more consistent.
So these are tags you might see if you look at some more modern web pages.
But this doesn't fundamentally change any
like-- this isn't a new feature of HTML, for instance, in the sense
that it allows you to do something you couldn't do before.
There are some new features that we can take advantage of.
There are a bunch of them, but a small list are here.
One is contenteditable, which makes it very easy
to create sections of the HTML page elements within the HTML page
that you can edit.
You might imagine that this is great for like a blogging site,
for instance, where you might make a blog post where
you want to edit the blog posts and you want to go back and edit something.
It becomes very easy to create something that is content editable.
So let me go back here.
And let me just delete everything.
And I'll just create a paragraph.
And list is no longer a totally appropriate name for this page.
But I'll say, this is a paragraph that is editable.
And so normally if I just had a paragraph that
looks something like this, and I opened it up,
it would look something like this.
And it's just a paragraph.
But I can add in HTML5 this new attribute--
this contenteditable attribute-- set it equal to true.
And so if I set a paragraph to be contenteditable
equals true, then when I refresh the page, OK.
Nothing seems to have changed just yet.
But if I click on this, now I can actually, I can edit this paragraph.
And so you can go into the HTML page, and you can actually
allow the user to take an element and edit the element--
update text, add text to it.
And of course, all this does right now is just let me add text to it.
But as we soon-- when we'll get to JavaScript,
we'll see we have the ability to say, all right.
When someone does edit a section of the HTML page, let's
actually run some code.
Let's run some code that takes what they've changed
and actually make some sort of update or make some call to some server
somewhere in order to actually do something when
the user chooses to edit that page.
That's one of the features that HTML5 offers.
Yeah, question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Great question.
Question was, is it actually just changing like, what I see on the page?
Or is it actually changing the file?
The file is unchanged.
It is just changing what I see when I open this back up.
If I close the file and reopen the file again, it goes back to the way
that it was originally.
So you imagine that if you actually wanted
to save the state of what it is that the user typed in,
you might have to make some more changes.
And when we get to JavaScript we'll have an opportunity
to explore how to save inside the browser information about the state
of the web page that we want to save.
Good question, though.
Other things?
OK.
So contenteditable, that's one of the new features that HTML5 offers.
Another feature that it offers is the datalist element.
So the datalist element is another one you might see.
Just showing you this for the sake of giving you a sense for what
HTML5 can do.
The datalist is designed to make it easier to create autocomplete.
So you can implement autocomplete in your web pages.
And so you might see this--
I have an example in the--
you go to the source code examples and you go to datalist.html.
In datalist.html, we've created a form.
So we have a form here where I'm asking for input.
The input name is Name.
So I'm asking them to type in their name.
I'm asking them to type in a password.
I'm also asking them to type in their favorite color.
And you'll notice that the input type here is a radio button.
So we'll see what that looks like in just a moment, how you
create a radio button inside of a form.
And then I'm also asking them to input what country they're from.
And there is only a finite list of the countries of the world.
So it might be nice if I start to type in letters like UN
that it might autocomplete.
And United States might be one of the options there in the dropdown list.
And so that's what datalist is designed to do.
I create a data list with an ID called countries, inside of which
are a whole bunch of options--
Option Afghanistan, Option Albania, so on and so forth
for all the countries of the world.
And then in this input element, what I do
is I specify this additional attribute new in HTML5 called List.
And I say, OK, what is the list of possible choices for this input?
It's going to be the thing that has id countries, which in this case
is this data list.
And so now if I go ahead and open up datalist.html, what you'll see
is I have a page here that offers me an opportunity to type in a name,
type in a password, type in a favorite color as a radio button.
So I can choose red, green, blue.
And it switches between the possible options.
And then I have this country dropdown where
immediately if I click on this input field,
it's just a plain input field that has a list attribute added to it.
But already I see this whole list of possible options.
Now I can start typing.
I can type un.
And as soon as I start typing a couple letters,
I see it automatically sort of autocomplete
filter down the options to only the ones that match what it is that I typed in.
And so it becomes very easy to then choose the one that matches.
So an additional feature added in HTML5, designed
to give you the ability to make better user interfaces for your users on HTML
pages just by adding in a data list to be
able to support autocompletion or something like that.
And so these input fields for forms have a lot of capabilities now.
You can do more than just allow someone to type in a name,
allow someone to type in a password.
We can also allow someone to type in like a list of countries-- or type
in a country based on some list of countries using datalist.
And another thing that we might want to be able to do
is verify that the input is valid, for instance.
You might imagine that someone's typing in their email address, for instance.
And we know that not every sequence of characters is an email address.
Right?
What does an email address need to have for it to be a valid email address?
It needs to have an @ symbol.
OK.
What else does it need to have?
Other thoughts?
Is just an @ symbol a valid email address?
No.
It needs to have a dot.
OK.
Maybe it needs to have a dot somewhere in it.
Anything else it needs to have?
Letters or maybe letters.
So it needs to have some sort of characters.
There needs to be characters before the @ sign.
So you might imagine that there are different ways you
might want to validate the input to make sure
that it follows a particular format.
Maybe you're asking someone not just to type in their email address,
but to type in their home address.
And their home address better include their zip code somewhere, for instance,
or better include a street name.
And so you might imagine that when someone's inputting something,
you might want some way of verifying that what it is they're inputting
is actually valid before they're able to submit a form, for instance,
validating that.
And so in order to do that, what we're going to take advantage of
are regular expressions.
And so HTML5 adds support for validating input fields
based on regular expressions.
It's something we'll see now in HTMLL5, but something
that you'll see all across different domains of computer science.
And very frequently, if you want to take a string
and figure out whether that string matches a particular pattern,
you'll use a regular expression to do so.
So formally speaking, and regular expressions
are a big part of thinking about formal computer science theory.
They define an entire class of languages called
regular languages, which we're not going to go into too much detail about here
now.
But the basic idea is that you can define a pattern that
defines a set of strings--
so sets of strings of text--
that are valid, acceptable inputs.
And in order to create these patterns, we can do a couple of things.
We can say a pattern might consist of a character followed
by another character, like concatenation.
You might also say that a pattern is a character
or a pattern or some other pattern.
That's alternation.
One thing or another thing.
And | Kleene Star, which is the idea of maybe you
have one thing or zero or one or two or multiple of a particular pattern
or a sequence of characters.
So this is all very abstract.
So let's take a look more formally now at what that actually
means in practice.
We'll take a look at some sample regular expressions.
And then we'll take a look at how to actually use those regular expressions
inside of an HTML page in order to validate input.
And maybe throughout the rest of the week
we'll see other ways that we can use these as well.
So if we have a regular expression on the left that says hi,
what do we think that's going to match?
What is this saying that the thing that I type in needs to be?
Not a trick question.
A word.
What word specifically?
Hi.
So if I type in, hi, this regular expression will match.
And if I type in anything else, it will not match.
And actually I'll show this to you right now.
Most modern browsers will support this.
So granted, some older browsers might not.
I'm gonna go and create a new file.
I'll call it--
I'll take the list file and call this one pattern.html.
And I'll go into pattern.html, and I'll say--
let me create a form.
And I'll have an input.
And I'll have a button that will submit it.
And so submit.
The place holder will be type in something here.
And the pattern, I'll add a pattern attribute.
And the pattern is going to be, hi.
So I'm saying this input needs to follow the pattern
of this regular expression, hi.
And so if I open up pattern.html now.
And says type in something here.
If I type in, hi and click Submit, that will submit the form.
And right now submitting the form does nothing but take me to the same page.
But if I type in anything else other than hi-- if I type in hello,
for instance-- and press Submit, I get an error.
It says, please match the requested format.
And there are ways you can customize this error message to show something
a little bit more specific.
But what I've done here is without any JavaScript,
without any server side code, just using HTML5 and the features that it
provides, I'm able to validate that the input-- what I type in--
matches a certain pattern, the pattern that I want it to match.
And in this case, the pattern that I want it to match
is literally just the word, hi.
And that's the regular expression.
How do we feel about just that so far, about that idea of what
a regular expression is, even if we don't understand the nuances just yet.
But that we can input a pattern and validate the input to make sure
it matches.
Mostly green.
Some yellow.
Questions about any of this so far?
OK.
Feel free to interrupt with questions if you have them.
Let's take a look at a more complicated regular expression.
hi | hello.
So the bar is what we call the alternation symbol.
It means one thing or the other thing.
And so what is this going to match?
What are the valid things that I could type in
and my HTML form would accept based on this regular expression?
AUDIENCE: Hi or hello.
BRIAN YU: Hi or hello.
Right.
I could type in hi, and that would be a perfectly valid match.
Or I could type in hello, and that would be a perfectly valid match.
But nothing else.
Had I put anything else other than hi or hello, and my page will reject it.
So that's alternation.
I also have in regular expressions the idea of hi question mark.
Question mark means this pattern or this character-- in this case,
doesn't need to be there, but it can be there if you want to.
So I type in something like, hi question mark.
That will allow me to match just h, meaning the i was optional.
Didn't need to be there.
Or it could be there.
It would also match the word "hi."
So it could match just h, or it could match hi,
because the i either is there or it isn't.
And the regular expression is OK both ways.
So question mark means it's an option.
There is also hi star.
And the star is the Kleene star that I was referring to earlier.
It means zero or more of the preceding thing.
And so any thoughts as to what this is going to match?
Repeat that?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Anything starts with hi.
That's close, but not quite right.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Multiples of hi is also a good guess.
Very close.
And actually you wouldn't know unless you've tried it
before what exactly it's going to do.
But if you take those few ideas and sort of combine it.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: H and then any number of i's.
Yeah.
The star only applies to the preceding character-- the i in this case.
And so this will match h, just an h, or it will match "hi"
or it will match hi with two i's, high with three i's, high
with four i's, or on and on and on.
As many eyes as you want.
And it's going to match that sequence.
So i star means zero or more i's.
If you have a plus, that means one or more of something.
Again, all this is in the slides, so don't
feel like you need to write it down or memorize it.
Showing it to you because regular expressions
come up a lot as you begin working on building larger applications
and trying to validate strings.
They just tend to be a pretty convenient way of expressing these ideas.
So hi plus.
That can match hi with one i or two i's, three i's, four i's or more.
And it's just the idea that the plus means one or more
of a particular thing.
I see some frowny faces.
Questions about any of that?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: The star is zero or more.
So it could be none.
Or it could be more.
The plus is one or more.
So the hi with a plus requires at least one i,
whereas hi star could be just each, for instance.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yes.
Could put the h plus and then i plus.
You can combine all these in any number of ways.
These are just very simple examples.
But yes, you could do that as well.
All right.
I'll show you a couple more things that might come in handy.
Hi [? 3 ?],, the i curly brace 3, means exactly three of those things.
So it will only match this-- h iii, exactly three of those.
The dot matches any character.
So it could match a letter, a capital letter.
It could match a number or another number.
It could match a exclamation point or other punctuation
symbol, or any other character that you can type.
The dot will match just that character.
If you want to match a literal dot, like match
the period character on the keyboard, that will be backslash dot.
You might remember from CS50 that very frequently we'll
use a backslash as an escape sequence, a way of saying,
I mean to use exactly this-- exactly the dot.
And that will actually match the literal period character,
if that's something I want to do.
Because the dot itself just means any character.
We also have other expressions we can use that I'll show you briefly.
If I say in square brackets like, a-z, that
will match any lowercase letter-- a, b, c, all the way up through z.
And so that's lowercase letters.
Question?
AUDIENCE: [INAUDIBLE]
BRIAN YU: The dot will also match a space character.
Yes.
There is a way to literally match white space
only with backslash s to say just white space.
But the dot will match that as well.
So lowercase a-z in the square braces will match any lowercase letter.
In square brackets, if I have capital A-Z,
that will match any uppercase letter-- capital A, B, C, all the way up
through Z.
And if I want to match a digit, how would
I do that based on these patterns?
So square bracket capital A dash capital Z closed square bracket
matches any capital letter.
If I wanted to match a digit, like 3, or 2, or 8, what would it be?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah, exactly.
Square bracket 0-9 other bracket.
That's going to match any digit.
It's going to match 0, 1, 2, all the way up through 9.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: You can put something in parentheses
and say, parentheses hi star.
And that will match any number of the literal word "hi."
All right.
So that was a lot of information all at once.
But let's try and take a look at a bigger example of this,
see why is this actually practical.
It's a lot of syntax here of trying to build out our own way of describing
languages, describing strings.
Let's take a look at this expression here.
Complicated.
So take a minute, look at it, think about it based on the things
that we've talked about.
And try and figure out why might I want an HTML page to have this expression?
Like, what pattern is it trying to match?
What am I trying to validate here?
So think about that on your own.
Take a look at it.
You can look back to the lecture slides on the website
if you want to remember what some of the syntax means.
But what is this going to match?
AUDIENCE: [INAUDIBLE]
BRIAN YU: It's a phone number.
Great.
Why is it a phone number?
Someone else explain that to me.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Exactly.
So what I'm doing is I'm matching digits.
Remember [INAUDIBLE] square bracket 0-9.
That's giving us a digit.
And then in curly braces we're saying how many of those things.
We're saying, OK.
Three digits.
That'll be our area code.
Then we're matching the hyphen character, then three more digits, then
another hyphen, and then four digits.
And so that's going to match for us a phone number.
So it could match any phone number--
any US phone number, I suppose--
that follows that same general format.
Now it's not going to match it if the phone
number has parentheses around the area code or doesn't have the dashes,
for instance.
So if you actually wanted to match a phone number,
you might want to be a little bit more specific than just this,
or modify your regular expression slightly.
But this pattern is going to match a phone number.
Let's take a look at a slightly more complicated example.
Let's look at this one.
So this looks totally obscure.
But I promise, you've seen enough already
to be able to figure out what this means.
What is this trying to approximately match?
Think about it first before you say anything.
There's a character here that might be a little bit of a hint.
All right.
What are we matching?
An email address.
Great.
Why is this an email address?
Or why is this approximating an email address?
What does this expression actually mean?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah.
So we can sort of break this down.
This dot plus means--
the dot means any character.
And again, the plus means one or more.
So one or more characters, than an @ symbol, then a plus again.
Remember, dot plus is one or more characters.
One or more characters, an @ symbol, one or more characters, s backslash dot.
What's backslash dot?
The literal [INAUDIBLE] followed by one or more characters.
And of course, there are actually a few more rules
for actually validating what a valid email address is.
But this is pretty close.
It'll validate name@example.com.
It'll match, generally speaking, what an email address would look like.
It might [INAUDIBLE].
All right.
Let's do one last example, try and validate some input.
Let's take a look at this expression.
What's it going to match?
It's a little bit more complicated.
I'll remind you of what a couple of symbols mean.
The bar is alternation.
It means one thing or another thing.
The question mark is an option.
It means something is optional.
Good question.
So the question-- the zero on the left alternating with just minus sign
or with the rest of the pattern, this has
to do with the precedence of like, which operators and regular expressions
bind more tightly than others.
And this alternation is pretty loose in terms of its binding.
This alteration here means zero or everything else on the other side.
And if you wanted to bind it more tightly,
you could use parentheses to say, zero or just something closer to it.
But the alternation means this side or anything else on the other side.
Good question.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Good question.
Can I change the HTML by going--
like, if I'm the user of the page, can I change what the pattern is?
We'll find out, actually.
If I wanted to be able to type in something
like 2.8, which right now this form isn't letting me
do, because it doesn't match the requested pattern.
If I go into the inspector.
And so most browsers--
Google Chrome included-- let you open up the Chrome inspector, which
is something we'll be using throughout this week.
And I can actually look at the things that compose this HTML page.
And inside the inspector as the user of the page,
I can see that over here there is the input.
And there is the pattern.
Right.
There is the pattern that this is matching--
this input field is matching.
And I can actually go in there, and I can change it.
I can say, all right.
Let me change the pattern to--
let's change it to dot star.
Dot means any character.
Star means zero or more.
Dot star is literally going to match anything.
So I've changed it to dot star.
Now I type in 2.8.
I click Submit.
And it submits just fine.
So yes, you can go in and actually change the pattern.
And that will allow you to bypass this validation.
And so there is a lesson to be learned there,
which is that if you're building a web application,
and you're relying on the HTML validation here,
that might not be the smartest thing to do.
Because someone who is being super adversarial
could go in and actually change the pattern in the HTML page.
Or more likely, someone might be just using
an older browser that doesn't support this particular feature.
And so it's not quite going to work.
So even if you are doing this validation to block some invalid
inputs on the client side in the HTML page, probably also a good idea
to on the server side be validating those inputs as well.
And when we go to talking about flask web applications and building APIs,
those are some of the different ideas that
are going to come up again and again.
Questions about any of that?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: The regular expression goes in the pattern of the input element.
And when we get to Python and JavaScript, if you remind me,
I can also show you how to take advantage of regular expressions
in other programming languages as well.
They end up proving quite helpful.
In CS50, for instance, if you've ever used Help 50,
that tool that takes a command line error message
and allows you to understand what it means by presenting it
in a little more human-friendly terms.
That application is entirely built on just Python-based regular expressions,
where the Python code is just looking for an error message that matches
a particular regular expression.
And if it finds it, it produces some sort of helpful output based on that.
So other languages-- not just HTML--
can take advantage of this feature.
It tends to be a common way of trying to represent patterns
of strings, patterns of inputs.
All right.
So that's just a brief tour of some of the new features of HTML5.
There are a lot more than we're actually going to be able to talk about today.
But I do want to transition before we break for morning projects
to talk a little bit about CSS and about how to style our pages.
And so with CSS, or cascading style sheets,
is a way of adding style to our web pages.
And within CSS, as you might recall, we're
going to style an HTML element by using a number of CSS properties.
And so some common CSS properties that you might have seen
are things like color, in order to change the color of a particular thing.
Or text align if I want to align things to be centered or left justified
or right justified, for instance.
And so I'll show you very simply a number of different ways
that we can try and include CSS code inside of our page.
Let me create a new file.
I'll call it style.html.
Style.
Or nope.
Not style.
Header.
So let me create an H1--
a big heading that just says Welcome to CS50 Beyond.
And maybe I want to make that heading red, for instance.
And so what I might do is add to this H2 tag.
Add a style attribute.
And here I want to say, color colon red.
The red little square is just added by my text editor
to show me what the color's actually going to look like.
Some of the more modern text editors will do this,
but it's not actually part of the text.
And here I'm saying, all right.
I want to style this element.
The CSS property is the word "color."
It's the styling property that I want to add to this element.
And red is its value such that if I now open up style.html,
I see Welcome to CS50 Beyond.
And it is, in fact, red.
Now what I've done here is what's called inline styling.
I've taken the styling and put it directly
on the element that I want to style.
Generally what you'll see, and what tends to be a little bit better design,
is instead of doing that to up here in the header section of the page
add a style section.
Right.
And inside the style section of the page I
might say, all right, each one color red.
So I'll do something like this.
And what you're seeing here is an example of a CSS selector.
This H1 here is a CSS selector that is me saying,
I would like to style H1 tags.
Any H1 tags through the page I want to style in this particular way.
I want to give them a color.
And that color should be red.
So now if I refresh the page, it looks exactly the same.
But what's different now is that if I were to add multiple H1 tags,
if I wanted to add another H1 tag that says hello, for instance,
and refresh the page.
They're both styled as red.
Because what this CSS rule is saying is, I want to style all of the H1 tags.
And I want to style all of them to be red,
not just the one that I was applying inline styling to in the case before.
So this is all stuff that should be familiar to you
from when we were working on building web pages in CS50, for instance.
And so I could add--
we'll try one more.
If I added div--
div is generally just for any sort of vertical section of your code.
And I say, hello, world.
This div is not going to be red.
This div is going to show up as black, because it's not in an H1 tag.
And I was only styling the H1 tags to be red, not the divs.
Another thing that you might commonly see
is you could also take this style code and separate it out
into a separate file, put it in a dot CSS file,
and then just link to that dot CSS file from all of your HTML pages.
There are some examples of that in the source code.
I'm going to leave it here for now, just so it's easier to see visually.
But know that you'll commonly see that happen.
And it's an easy way of taking the same CSS code
and using it across multiple different HTML pages,
so they can all reference the [INAUDIBLE]..
All right.
Questions about HTML before we start-- or about
CSS before we start exploring some of the more advanced features
that CSS offers for us?
All right.
Seem to be feeling OK about this.
So each one is how we style just any general tag.
If I wanted to style something with a particular ID, something
you might see as, all right.
This H1 has an id of Welcome.
And so if I only want to style this--
Welcome to CS50 Beyond--
but I don't want to style the other parts of this page,
rather than styling H1, I could style pound sign or hashtag welcome.
Where again, the pound sign stands for id.
So I only want to style the thing that has an id of Welcome.
And nothing else is going to be styled as red.
And I refresh that.
OK.
Only the first thing now is styled as red,
because that's the only one that has that particular ID.
I can also say things by their class name.
So if this one's class name is Welcome, and maybe this div also
has a class name called Welcome.
Then up here, rather than pound sign welcome,
which means the thing that has an id of welcome, I can also say dot welcome.
And the dot means a thing that has a particular class name.
This will style anything whose class is Welcome.
And so I refresh this.
And now both the Welcome heading up at the top and also the Div down below,
those are both styled as red, because they both have that particular class
name.
What questions do you have so far?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: So the question is, when would you not want to use class
instead of id?
Generally speaking, if there is something that is unique,
it makes a little bit more sense to use the id.
It just helps to avoid against potential mistakes.
That if there is something that is unique,
you will want to specify it as unique, because in case you added another one,
that probably means that something is wrong in your HTML page.
This might not be as much of an issue if you just have a single HTML page.
But when you start to dynamically generate
web pages, which we'll see in like Flask, for instance,
then it could become a little more applicable.
All right.
So [INAUDIBLE] styling things based on their tag or based on their id
or based on their CSS class.
There are also different ways of trying to--
different selectors that we can use to style things in different ways as well.
So let me get rid of these class names.
Let's say I wanted to style both H1's and divs.
I wanted to style them both.
And so I might say H1,div.
The comma is what we call the multiple element selector.
It's going to select for multiple different CSS selectors
and style them both in a particular way.
So H1,div.
We'll refresh that.
Now all the H1's are styled red, and all the divs
are styled red, because I'm applying this styling to multiple things.
And in fact, I'll show you if we go here for just a moment,
there are a whole bunch of selectors that you can use.
I won't show you all of them, because there are some examples in the source
code example.
But the idea is you can style not just multiple elements,
but you can style descendants.
If I were to style like div space H1, that would only style H1's that
are inside of divs, and not style H1's that are outside of divs, for instance.
Their child selector-- if I want to say, all right, style just
the immediate children of something.
So an H1 immediately inside of a div and not something else.
[INAUDIBLE] as well for trying to style things in particular ways.
The ones that I do want to talk to you about [INAUDIBLE] they're
a little more [INAUDIBLE] are the pseudo class and pseudo element selectors.
So the pseudo class is a selector that you
can use to style a particular element in a particular way only
under certain conditions.
So a common thing for this--
thinking about mouse position-- that when you hover over a link
or when you hover over a button, you can change
the style of that element based on the fact that you're hovering over it.
This is something that you commonly see in response to more dynamic web
applications.
And so let me actually show you hover.html inside the source code
examples.
So if we go into source code.
And let me open up hove.html.
What you see is inside the body of this web application,
I just have a single button.
And that button says, click me.
[INAUDIBLE]
Up in the style section of the page I say, OK.
The button is going to have a width of 200 pixels, a height of 50 pixels,
and the font size is 24 point font.
And the background color is green.
So a whole bunch of CSS properties and their values.
And then I have this pseudo class selector-- button colon hover.
Which is to say when I hover over the button,
here is they way I want the styling to change.
And in particular, I want to change the background color to orange
instead of green.
So if I open up hover.html, here's my button.
And as you can see, the button is green.
But as soon as I hover over it, the button changes to orange.
Hover over the button, the style changes.
When I'm not hovering over it, stays its normal green.
Because the pseudo class CSS selector is only going to style something
under certain conditions.
Questions about that.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah.
Great question.
Selectors specify-- so the question is, when I hovered over it in VS code
specifically, it showed up this little icon that said, select specificity.
And so what is "specificity"?
What does that mean?
Well, what you might imagine is that it's possible in an HTML page
for there to be multiple CSS rules that would apply to a particular element.
So for instance, let me go back into the desktop and open up style.html again.
Let's imagine, for instance, that I had a heading--
Welcome to CS50 Beyond.
And it had a class name of, we'll just say Fu, and an id of bar.
Right.
It has an id, and it has a class.
And so what happens now if I say, all right.
Anything with ID bar, I went to style that red.
And anything with class Fu, I want to style that as blue.
So here's the situation.
We have an H1, the class is Fu, the id is bar.
And in my style code, I said anything with an id of bar should be red.
But I've also said that anything with a class of Fu should be blue.
What do we think?
Is it going to be red or blue?
Any guess is a good guess, because I don't expect you to know this.
Propose something and why.
AUDIENCE: Red.
BRIAN YU: Red.
OK.
So red seems to be the consensus.
And why is that your gut instinct?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Id is more specific.
All right.
Let's take a look.
Let's open up style.html.
And indeed, Welcome to CS50 Beyond is styled as red instead of blue.
And the reason for that is exactly as I mentioned.
It's about specificity.
And so the ID tag tends to be more specific than the class tag--
than the class selector.
And so if there is a competing between one id selector and one class selector,
the specificity algorithm of CSS is always going with the id one.
In more complex selectors you might have those situations
where there are multiple different ids and classes
that are in the same selector.
So you might imagine that the Fu and bar are nested inside of a div.
And this is just getting a little bit convoluted.
But cases like this actually do come up.
And we'll say the class name is Hi and the id name is Hello.
So you might imagine all right.
Id of bar is going to style a particular way.
But I might also say that something like this.
So something space something is the child selector.
So what # hello space dot Fu means is, find something that is an id of Hello.
And if it has a child whose class is Fu, then color it blue.
So again, a lot going on there.
But OK.
What has id of Hello?
All right.
This div has Id of Hello.
[INAUDIBLE] helpfully highlights the same thing for me down here.
This div has an ID of Hello.
And does it have a child with a class name of Fu?
Well, yeah.
Sure.
Here is the H1 with a class name of Fu.
And so if you run into this competing situation, both of these have an id.
But this one also has a class of Fu.
Then assuming that, remember the algorithm, right.
Yeah.
When I refresh it, the color changes to blue,
because having one id in one class is more specific than just having one id.
So the specificity algorithm just determines
how to determine if there are multiple rules that conflict,
which one is actually going to take precedence there.
Excellent question.
[INAUDIBLE] specificity or other things about CSS?
AUDIENCE: [INAUDIBLE]
BRIAN YU: Good question.
I think it should apply to--
I think it applies to both.
But actually I have to get back to you on that.
I'm not 100% sure.
Good question, though.
Other things.
It does?
Yes, it does.
It applies to both.
Yes.
Good question.
Question was what's the difference between the descendent operator
and the child operator.
So again, the descendant, which does something, space something else,
like we just saw.
Like the 1H1 is a descendant of the parent.
The child selector is represented by this greater than symbol.
The child selector is a little more specific.
It only applies to immediate children.
It's not going to apply to grandchildren, so to speak.
So for instance, if I had a let's say, a div that had an id of Fu and--
we'll give it a class of Fu, inside of which
was a another div inside of which was an H1 that said, Hello.
And I said something like let's take something that has a class of Fu.
And if it has an H1 descendant, then color that blue.
So if it has a class of Fu, and if an H1 is a descendant of that color of blue,
here's my thing that has a class of Fu.
Here is the H1 descendant.
If I refresh that, Hello is blue.
If instead I change this to a greater than symbol, this greater than symbol
is the child operator.
It only applies to immediate children.
And this H1 is nested two levels deeper.
So it's a grandchild as opposed to a child that's just one level deeper.
And so if I refresh this, Hello is black.
It doesn't get that particular styling.
But if I get rid of this intervening div--
so the H1 is an immediate child of the div in question.
Now each one is a child of the Fu.
And so I refresh that, and the color changes to blue.
So there's a lot of different selectors.
They all follow slightly different rules.
One of the best ways to get a grasp of this is just experiment with it,
try it out and see what happens with simple examples like these.
And that can help inform you as you begin to build larger and larger web
programs as well.
Questions about any of that?
All right.
So now I want to spend a little bit of time talking about responsive design.
Or actually, before we get to responsive design, one thing just worth noting
is what the CSS box model is.
That often times you'll see that a bunch of CSS attributes
and properties like margin and padding, what do all those different things
mean.
It's just good to have a visual model for [INAUDIBLE]..
So [INAUDIBLE] have some content to add a border around the content.
All elements have a border, though oftentimes that border is invisible.
You can actually specify that I want the border
to be a solid black border [INAUDIBLE].
But every element has a border that goes around it [INAUDIBLE] tent.
Border goes around it.
Outside of that border is called the margin of the element.
So if I take an element and I say margin five pixels,
that would add 5 pixels around the border of any particular element.
But inside the border there [INAUDIBLE] called the padding.
And so I can also say I want two pixels of padding.
And that's going to be padding inside the border.
And so this is important if your element actually
has a border like a button or a table cell,
for instance, that actually has a border.
You can add space outside the border by updating the margin.
You can add space inside the border by adding padding.
Just wanted to make sure that that was clear,
because that can be a common area of confusion when you're working
[INAUDIBLE].
The main thing that I want to talk about finally when talking about CSS
is talking about responsive design.
A big thing about how to think about when
we're designing web pages for mobile devices or for tablet screens,
how do we think about it?
And an important concept here is the viewport.
So what is the viewport?
The viewport is just the visible area of the web page on the screen.
And so you might imagine on a computer screen for instance, we have a heading.
We have an [INAUDIBLE] here.
We have some text here.
If I were to just literally translate this page onto a mobile device,
what would it look like?
Well, it might look something like this.
What I've done is basically just taken the computer screen that was this wide
and shrunk it down to the size of the mobile screen.
And you end up with a page that looks something like this.
Oftentimes you might see pages where if you open it up on a phone,
everything is like the text is very, very small.
That's generally a sign that the person wasn't really thinking
about how best to adapt the page for mobile responsiveness.
[INAUDIBLE] does not look something like this,
but a page that looks a little bit different to fill
the viewport of the mobile device.
So how do we [INAUDIBLE] some methods for actually doing this.
Well, probably the simplest way is just to take control of the viewport.
So how do we do that?
Let me create a new file, call it viewport.html.
All right.
Basic HTML page.
And if I were to open up viewport.html, it says, this is some text.
And if I were to open up the inspector--
I'll make the text a little bigger--
in the Chrome inspector there's this button over here
that is the device toolbar.
And the device toolbar basically lets me see
what is it that this page is going to look like if I
try to open it on a mobile device.
[INAUDIBLE] test things out on different sized screens, different sized devices
on your computer, you can actually experiment,
see how your page would look on a mobile device.
If I click on that right now, this is what the page
looks like now on an iPhone 6, 7, or 8.
You can see here is the text.
And it's just tiny.
Right?
This is not a great user experience.
Because what I've done is I've taken the entire width of the page on my computer
and shrunken it down to finish the viewport to the phone.
What I'd like to do is to be able to take [INAUDIBLE] viewport, say,
I would like the viewport on the mobile device
to just fill whatever-- to be whatever the width of the device actually is.
And so there's a simple line you can add.
It's a little bit [INAUDIBLE] first.
But it's one that just adding it into a page
can often make the page look a lot better.
I'm adding some metadata to the head of my page.
And I want to take control of the viewport.
And what I'd like to do is set the width of the viewport instead of being
whatever the width of the computer's width was--
the default width of the viewport--
I would like it to be the device width.
So whatever the width of the device is, like the width of the iPhone screen,
that's how big I want the viewport to be.
And you often see this added with initial scale equals
1.0, which means by default don't zoom.
Do a zoom of 1x or no zoom at all.
And now if I refresh this page, here's what the page looks
like right now on a mobile device.
I refresh the page.
And now it looks a fair bit better.
The text at least looks bigger, because I've adjusted the viewport
to take up the right size.
All right.
But what are other things that we can do as well?
Well, one thing we might imagine is that depending upon the size of the screen,
I might want to [INAUDIBLE] things differently.
If my screen is above a certain number of pixels wide,
I might want things to appear differently with different styles
than if the page were narrower.
So in order to do this type of styling you can take advantage of a CSS feature
called media queries.
Media queries basically let you customize
the CSS you use based upon the type of the media of the user viewing the page.
So let's try this out.
I'm gonna add some style.
And what I'm going to say is @media min width 500 pixels.
What this has done is I've given myself a space
to add CSS code that is only going to apply when
my page is at least 500 pixels wide.
So I can now say, background color red.
And I can also say @media max width 499 pixels,
and say background color is blue.
So what I've done now is I've added some logic here
to say if the screen is at least 500 pixels wide,
I want the background color of the page to be red.
If it's smaller than that, I want the background
of the page to be blue such that now--
let me get rid of the mobile view--
I refresh the page.
Viewport.
Oh, sorry.
This all needs to still be valid CSS.
So I want to style the body to have a background color of red.
And I want to style the body of the page to have a background color of blue.
So if the width is at least 500 pixels, the body is red.
Otherwise, the background color is blue.
I refresh the page, and it's red, because it is at least 500 pixels wide.
But watch what happens as I take this page and just shrink the size of it.
As soon as I get to underneath 500 pixels, color of the page
changes to blue.
I'm above 500 pixels, background color is red.
Fewer than that, and the background is blue.
I'm able to change the way I style something
based upon the width of the screen.
And while this is just sort of cool to see the color changing,
you might imagine you want the size to change,
or the alignment of things based on if you're
on a laptop device or a mobile device.
So these media queries can, in fact, be very, very powerful.
Questions about that so far?
What questions do you have?
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Yeah.
Great.
So the question was about Bootstrap.
And so Bootstrap is a library that there's
some source code examples of Bootstrap code in this week's lecture materials.
And yeah, Bootstrap has this idea of a column model
where you have columns that you can use that as you shrink things down,
and they get re-sized that they change up,
media queries are likely how that's implemented.
This idea of if something is below a certain width,
then you can actually modify the styling of something,
change the positioning of the columns, for instance, in order
to match what you want it to be.
Good question.
Yeah.
AUDIENCE: [INAUDIBLE]
BRIAN YU: Older, older browsers might not support this.
But almost all major browser nowadays-- modern browsers--
will support this feature.
Yeah.
AUDIENCE: [INAUDIBLE]
All right.
So media queries can be used in order to change the styling of something
based on the size of the screen.
It can also change based on the type of media that you're actually using.
So you might imagine that if a user like prints out a page, for instance,
you might want the styling of that page to be a little bit different.
And so I'll give you a simple example of that.
We'll get rid of these queries for now.
Let's imagine that I have a whole bunch of paragraphs.
So here is paragraph one.
Here is paragraph two.
And this paragraph will be invisible when printed.
You might imagine that when you print something out,
there is content that you want to show up on a web page
when you're viewing it on the screen that you don't want to show up
if you're just printing something out.
When you're printing something out, you probably only
want like the most relevant content on the page
to be printed out in a particular way.
Maybe you want to style things differently so
that it looks good when printed.
So let me go ahead and add a class name to this.
I'll call it print out.
Or maybe don't print is probably more accurate.
I'm going to say, @media print.
So when the media is the print media, printing something out,
if something has a class of "don't print,"
then I'm going to set its display property to none.
In other words, is it going to be visible?
No.
I just want to hide it if the media is printed.
I'm trying to print something out.
So I refresh this page again.
Here's paragraph one, here's paragraph two.
And I see this third paragraph.
But as soon as I go to print out this page, what I'll immediately noticed
is that up there, only two paragraphs.
I have paragraph one, and I have paragraph two.
But I don't have that third paragraph, because it's not visible
when I print something out.
So you can use media queries to adjust based on the type of media
that you're looking at as well.
And there are other ways you can use media queries.
You can use it to check whether the phone is in portrait mode or landscape
mode in order to adjust the styling that way as well.
So a bunch of different features that are at your disposal there too.
Final couple of things that I'll show are
a couple of more advanced ways of trying to lay things out.
And so one thing that you'll commonly see that can be quite popular
is something called Flexbox.
So Flexbox is all about how do you lay out a list of things
when you go from laying them out on a big screen to laying them out
on differently sized screens?
So you might imagine that I have six elements across the screen,
for instance, on a page that looks something like this.
What happens if I try and take this content
and display it on a mobile device?
What does it end up looking like?
Well, the simplest way to do things, and the default way
to do things if you don't mess with the viewpoint,
is just to take the size of the screen shrink it
down to fit the mold of the device.
So you'll end up taking this content and everything just
shrinks down so all the boxes end up showing up much more--
they're smaller on the mobile device.
And that's probably not the best user experience for them to see.
So what could we do instead?
Well, we could adjust the viewport.
Right?
We could make it such that the width of the boxes doesn't really change.
But what happens then?
Well, now when I take this content and move it over, I get it cut off.
Right?
Everything stayed the same size.
But now everything's like [INAUDIBLE] in order
to see all of the different boxes.
So what would a better solution be?
Flexbox is a technology, a way of styling your page that
lets me say, I would like things to flex around,
wrap around maybe, such that if I have these six boxes, translate them over,
they can show up in two distinct rows.
1, 2, 3 on the first row, 4, 5, 6 underneath it.
And so I'll show you an example of that.
We'll go into there.
I'll open up Flexbox.html.
What I have inside my body right now is just
a whole bunch of [INAUDIBLE] that have paragraphs in them.
Here is my container, inside of which is div a, b, c, all the way through l.
Each one just has some filler text in it right now.
And here's my style.
The container-- the thing that has class container--
and the display is going to be flex.
I want this to be a Flexbox enabled container.
And I'm going to flex wrap.
Wrap just means I want things to wrap around if they get too long.
Then I've said that inside of this container,
any divs inside those containers should have a background color of green.
I've given them a font size, some margins, and padding.
But what that means is now when I open up Flexbox.html.
I see these boxes.
But importantly, when I shrink the page, the boxes wrap around.
So I can scroll things through naturally here where it's only two boxes per row.
I increase the size of the screen and things automatically change.
Now there are three boxes per row.
And now there are four.
So this ability that Flexbox gives us makes it just a lot easier
to be able to style something like this when I have a big row of things
that I want to wrap around.
And as someone mentioned, Bootstrap gives you similar capacities as well.
One other model that you might find if you work with CSS is the grid model.
This is a little more complicated.
But imagine if you had a grid of data and not just a single row,
but rows and columns, for instance.
Where I have a grid and a whole bunch of grid items.
Each one of these is just numbered 1 through 12 right now.
What might I do?
Instead of display flex, I can say display grid.
I want things to show up in sort of a grid layout.
And then I can edit these properties.
All right.
How much space do I want between columns?
Let's say 20 pixels of space between each column.
What about between rows?
We'll say 10 pixels of space.
And then grid template columns is the interesting part.
Here is where I specify how long each of the columns should be.
So the first column is going to be 200 pixels.
The second one also 200 pixels.
And the third one is auto, which means just
fill up the rest of the screen with whatever space remains.
So now if I open up grid.html, here's a 200-pixel column,
another 200-pixel column.
And then the third column is just going to fill up whatever space remains.
It automatically re-sizes based upon how I resize the page.
And so the Flexbox example, grid example, they're
all in the source code examples are things
you can look to if you're looking for different ways of styling your page.
[INAUDIBLE] Questions about anything?
OK.
Then what I thought we'd do as just sort of a morning project
is give you an opportunity to get some hands-on practice with this.
It's around 11:30 now.
We'll get some time to work on things until about 12:30, at which point
we'll break for lunch, come back here at 2:00.
What we'll do is we'll take some opportunity to a,
just play around with this.
Feel free to look at the source code examples on the course website.
Try things out.
The TFs are around here in order to help answer questions,
in order to help you out as you try and work through this.
But I'll give you two suggestions.
One will be, either build a new website for yourself
or take what you used for the home page assignment for CS50
and try to make it mobile responsive.
Think about how it's going to look on a mobile device,
maybe use some media queries, change the way things
are styled based upon if you're on a big screen or a small screen.
Maybe add Flexbox or grid layouts if you'd like to.
Or alternatively, another thing that can be fun
is take a website like Bank of America.
And look at this site, look at different parts of the site,
and try to recreate the site almost without looking at the actual HTML.
Let's see if you can figure out what elements are used.
See if you can figure out the styling that's used.
Try and modify the padding.
Try and emulate what this website looks like.
And this will be good practice with different HTML and CSS features
as well.
So before we do that, can I get the TFs up here to introduce themselves?
Yeah.
If you'd just like to one by one introduce yourself, tell [INAUDIBLE]..
ATHENA: Hi, everyone.
I'm Athena.
[INAUDIBLE]
SPEAKER 1: Hi.
I'm [INAUDIBLE].
SPEAKER 2: [INAUDIBLE]
BRIAN YU: Stand here for the microphone to work.
But.
JULIA: Oh.
Hi.
I'm Julia from [INAUDIBLE].
BRIAN YU: All right.
So the four of them will be here with me helping you all as we work
on projects throughout [INAUDIBLE].
What I thought we'd do now is break out into some small [INAUDIBLE]
for the next hour or so.
30.
We'll reconvene here at 2:00.
And I think we'll do is if this side of the room could all go to room 136
down here on this floor.
[INAUDIBLE] this side of the room could head upstairs to room 212.
We'll break out there.
And the center of the room free to spread out around here and work.
We'll begin working.
And we'll reconvene back here at 2:00 PM after lunch.
I believe Lowell and Quincy are both open for lunch,
for those of you who are undergrads on the meal plan.
But other than that, we'll break out into groups now and reconvene.