HTML and CSS – CS50 Beyond 2019

[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 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 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 to link to
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 [email protected] 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.

Be the first to comment

Leave a Reply

Your email address will not be published.