HTML, CSS – Lecture 1 – CS50’s Web Programming with Python and JavaScript 2018

[MUSIC PLAYING] BRIAN YU: Welcome back, everyone, to WebProgramming with Python and JavaScript. Today we’re going to continuewhere we left off from last week. So last week, if you recall, wetalked about Git, a version control tool that lets us managedifferent versions of our project, and keep track whenever we makenew changes to our project, and let us look back at the history ofchanges that we made to our project. And then we also tooka look at HTML, which let us lay out a websitehow we wanted to, as well as CSS, orCascading Style Sheets, which allowed us to take a web page,and style it in different ways, and change the aesthetics of the pagein order to make it look the way that we want it to look. So this week we’ll dive morein-depth into all three of those, focusing especially on HTMLand CSS, and taking a look at how we can leverage thesetools and some other tools to help make our websiteseven more dynamic to help them be designed the waythat we want them to be designed.So the first thing that we’lltake a look at is go back to Git. So if you remember fromlast week, Git was a tool that we were using inorder to keep track of different versions of our project. And in particular, as we work on aproject and continue to make changes, the term we used in Git was tomake commits to our project.So we might start witha first commit that just contains initial files thatwe had when we started the project. And as we continue to work onthe project and add new features, it’s a good idea, when workingwith a version control system like Git, to frequently makecommits when we make a new change, save those changes such that,later, we can refer back to them via a commit messagethat describes what changed in this particular versionso that later on, we have a history of allof the changes that were made to the project at any given time.So we might continue to making changes. And what you might imagine is thatthis chain of different commits might start to get pretty long. So maybe we have a working projectat this stage in the program, and we want to add a new feature toour web application, for example. So at this point, we mightstart working on a new feature here by adding another commit. We might make more progress on that newfeature, keep working on that feature. But what if, at this point, whilewe’re midway through working on some new feature to ourexisting web application, we realized that there was some sortof bug, some bug in our web application that occurred way back here that we wantto quickly fix, so that we can ship out a new fix so that people aren’tsitting with that bug for a long time? Well, this linear structure where,every time we make changes, we just save those changes oneafter another, that makes it pretty challenging tosay, I want to fix a bug back here.We could, of course, reset, and goback to this stage, and fix the bug, and then keep workingon the new feature. But we’ve already made thesenew changes to the new feature. So it sort of starts to get alittle bit messy at this point. So Git has this in mindwhen it was first designed. And so that’s why Git hasa tool called branching. And what branchingeffectively allows us to do is, rather than just havea single linear progression of the entire project where eachchange always follows on the change immediately before it, and that’sthe only path that we have to follow, branching lets us take our projectin multiple different directions.It lets us maintain one branchthat will be our “master” branch, the original version of our codethat’s supposedly the version that’s always usable, and then lets us haveother branches that allow us to work on different features that arestill in progress, and later, take those branches and workthem into the original code. So to take an example, we mightstart with that same first commit and still continue to make changes. But when we’re in a stable place andwe want to try to add a new feature and start working on that newfeature, rather than just add that feature immediately after it,what we can do is we can branch off, begin a new branch, andsay, OK, let’s start working on this new featurein a separate branch from the originalproject, and keep working on that new feature onthat other separate branch.Then, at this point, if we come tothat same realization, the realization that, oh, way back here, therewas some bug in the code, some bug that we would want to fix, ratherthan try and reset, and go back here, and figure out how to getback to where we were before, we can just switch back over tothis branch, fix the bug there. And that way, we’re ina position where we now have these two separate branches,this one original branch that has that fixed bug, andthen this other branch whereby we startedworking on a new feature, and we kept working on a new feature. And this is especiallyhelpful if it’s not just you that’s working on the web application. If you and multiple other teammates arealso working on the same application, you might imagine thisas saying, you are working on one branch going off inone direction working on the project.And some other person, somecollaborator you’re working with, is sort of going off ina different direction, working on some different feature,but also on the same project. And later, when you’re ready, youcan do what Git calls “merging”– in other words, takingtwo separate branches and then combining them together. So we might label these branches. This is what we wouldgenerally call the master branch, which is the default branch,the original branch that we started out with. And then these other branches,you can have as many as you want. You can name them whatever you want. In this case, I’ve justcalled this branch “feature” to represent the fact thatthis is a branch that’s representing a new feature thatwe would want to potentially add to this existing web application. Git also has a bit of additionalterminology that’s useful to know. Git uses the capital phrase “HEAD”to refer to where we currently are in the repository.So if you’re working on the project andyou’re currently working on the master branch, then HEAD points to master. In other words, where you arein the repository right now is the master branch. That’s the code you’re working with. But Git makes it very easyto change where HEAD is. If you wanted to goto the feature branch, or “check out” the feature branch, asGit would use with its terminology, you could very easily checkout the feature branch moving the HEAD to the feature branch. And now you can continueworking on that feature. And so only when you feelcomfortable with the feature, when you feel comfortable with the bug fixescan you then merge the two together by having another commit that combinestwo previous branches and merges them back together into one. And so this concept of Gitbranching is very helpful whether you are working on differentparts of your own web application and have different featuresthat are happening at once that you want to develop separatelybut then combine together later, or if you and collaborators areworking together on a project where it’s very easy for youto work without having to worry about what someone else is doing.And only when you’re both readywith your separate features do you then want to mergethem together and figure out how to resolve any conflictsthat might come about where you and another collaboratorhave potentially edited the same line of the samefile, for example, that you can then deal with by resolving those mergeconflicts like we saw last week. So we’ll take a look at anexample of that just to give you a sense for how this wouldactually work on the command line and how we would actually do branching.So I have, here, a Lecture 1 repository. And right now, inside of Lecture 1is just a file called index.html. So index.html is, right now, just atest website that has title as “Test.” And inside the body isjust the word “test.” This is just a sample websitethat we’re going to use to demonstrate the idea of branching. So maybe I’m going to makea commit to this file. Instead of saying “test” in the body,let’s say something a little bit nicer. Let’s say “Hello, world!” So I’ve changed the message in the body. And now, on the command line,I’m going to git add index.html. I’ve made changes to index.html. These are changes that I want to trackthe next time that I make a commit. And now I can say git commit -m. I want to leave a messagewhen I make this commit. And in this case, I want tosay I changed the body message. So that’s the change that I just made.Again, Git counts that asone insertion, one deletion. And so that commit is nowmade to this repository. But now say I want to testsomething a little bit different. I want to try somethingdifferent, and I don’t want to mess up my original master branch. Well, if I type “git branch” rightnow and press Return, what you’ll see is a listing of all of the branchesthat are currently on my repository. And right now it’s justthis one branch, master. So that’s the only branch that I have. But if I want to createa new branch, it’s as simple as saying “git branch”followed by the name of some new branch that I want to add. So I want to add a newfeature to my website.I might call that branch thefeature branch, for example. So I press Return. And nothing seems to happen. But if I type “git branch” again to say,OK, let’s take a look at the branches that I currently have in thisrepository, what are they, I’ll see that we have a master branch,and we also have this feature branch. And the fact that the master branch ishighlighted in green and has the star next to it tells me that this is thecurrent branch that I’m currently on, and this feature branchis some other branch. So let’s say I now want tomove to the feature branch and start working on that. So I might say “git checkout,” where”checkout” is the term that Git uses for saying, I wantto move where I currently am in the repository to somewhere else. Right now I’m on the master branch. I want to move to thefeature branch, for example. And so if I press Return here, it says”Switched to branch ‘feature.'” And if I type “git branch” againhere, you’ll see that, now, feature branch is the onethat’s highlighted in green.It’s the one with the star next to it. That is now the branchthat I’m currently on. If I go back to the index.html file,nothing really seems to have changed. But now I can start to say,OK, let’s add in a new feature. So here is a new feature, just anotherline to the website in this case. But I can go ahead andadd and commit that. And a quick trick that wetalked about briefly last week is that you can say “git commit -am”to combine the git add step and the git commit step into one step. git commit-am just says, add all of the files that I’ve changed thatI’ve already been tracking, and commit them at the same time.Just combines those twosteps into one in case you want to be a little more efficient. And now I added another line. So that’s the changethat I just made there. And that’s now on my feature branch,right, where I have “Hello, world!” and “Here is a new feature.” If I were to– now, if my current branchesare feature and master, if I were to check out the master branchagain, go back to the master branch before, what you’ll notice is that,now that I’m back on branch master and I go back toindex.html, this file now shows me the version of the file that ison the master branch that only has this “Hello, world!” line and doesn’thave that second line that I added, which means that that otherchange isn’t on the master branch.It’s only on the feature branch. And as a result, it’s notgoing to be represented here. I can see that even moreclearly using a command that we learned lastweek, git log, which shows me the historyof all of the commits that I’ve made on a particular branch. If I, here, now, on the masterbranch, type in “git log” for example, you’ll see, here was my first file. And here I changed the body message. But those are the only two changesthat I made on this particular branch. If I checkout the feature branchinstead, switch to that branch, and type “git log” again,you’ll see that now there are three commits on this branch. There was the first file, the changeto the body message, and the fact that I added another line there as well. And so this goes to showthat different branches can have different commitsworking on them, so to touch that you can beworking on different features separately without needingto worry about what’s happening on a different branch.So now we’ve been workingon these separately. Now we want to combinethem back together. So let me go ahead and switchback to the masker branch. And remember now, in the masterbranch, it just says “Hello, world!” just the simple message. If I now want to take what waspreviously on the feature branch and merge it into the masterbranch, while on the master branch, I’m going to type “git merge”followed by the name of the branch that I want to merge in. In this case, that’s the feature branch. And that’s saying, take those commitsthat are on the feature branch, and let’s merge theminto the master branch.So git merge feature– one file changed. There was one insertion. That makes sense. And now, even though I’m on mymaster branch, if I check the file, I see that second additionalline that was added there. And so different branchescan work separately. But when I’m ready, I canmerge those changes together. In this case, it wasa very simple change. But sometimes those changescould be more complicated and might require resolvingthose merge conflicts. But that allows you to assistyourself in the development process whether you’re working aloneor with collaborators, just to make that process a little bit easier. Questions about branching or merging? Yeah. AUDIENCE: [INAUDIBLE] BRIAN YU: Correct. Great question. So the question is, if I createa branch on my computer, what happens to the GitHub repository whereI originally cloned the code from? So the answer to that questionis, when I create a branch locally on my own computer, itonly exists on my computer.It doesn’t yet exist on GitHubuntil I push it to GitHub in order to tell GitHub thatthat new branch exists. And in fact, we can show you that. I’ll show you that right now actually. So if I– I’m going to go ahead andreset what I did before. I’m just going to removethe lecture1 repository. And we’ll just restart it, justto give you a demonstration. If I go togithub.com/student50/lecture1, this is the GitHub pagefor this repository. And I want to clone this repository. I’m just starting from scratch here. I’ll go to the Clone or Download button.I’ll take this link, copy it, and thensay “git clone” followed by that link. That’s going to clonethe lecture1 repository. And if I go into thelecture1 repository, I only have a master branch. But now let’s say I wantto add a new branch. Let’s add a feature branch. And on this feature branch, I’m goingto first checkout the feature branch so that I’m on the feature branch. And now I’m going to say– let’s go ahead and open up index.html. Right now it just says “Test.” This was the originalcontents of that repository. I’m going to change that to say”Here is the new branch contents.” So this is the new version that Iwant to add to this feature branch.And I’ll go ahead and git addindex.html and commit that change– so “New branch contents.” And now if I try to git push– remember, before, thatgit push is the command that I use to take the changesthat I made on my computer and make them reflect on GitHub– you’ll notice that what I getis this strange message that says “The current branchfeature has no upstream branch.” And what that means is that I’ve createda new branch, feature, on my computer.But there is no corresponding branch onGitHub that I can push to yet, right? GitHub only has a master branch. And on my computer, I have both amaster branch and a feature branch. So if I want to push to GitHub andsay, all right, push to GitHub, but push to a new branchon GitHub called feature, then I’ll run this commandhere, git push –set-upstream. So when I push up to GitHub, whatbranch do I want to push it to? And I want to push itto the feature branch. So that’s just copyingthis command right here. And so when I do that, I have nowpushed that new branch up to GitHub. And if I refresh this page–or even if I don’t refresh– it tells me that I’ve pusheda new branch, feature. And I can click on that feature branchto see that, on the feature branch, I have the new branch contents.But if I switch from the featurebranch back to the master branch, this just has theoriginal test contents. So you can take your existingbranches and push them to GitHub as well such that GitHub can helpmanage all of those branches too. Other questions about Git,branching, or merging? AUDIENCE: [INAUDIBLE] BRIAN YU: Yeah. So if you look at theURL here in GitHub, it tells you the nameof the person who owns the repository, the nameof the repository itself. And then, here is master, whichis just the name of the branch that I’m currently on. And so when you navigatethrough GitHub’s user interface, you will see the different namesof the branches show up in the URL as you go to different pages. AUDIENCE: On the front page. BRIAN YU: Oh, so the question is,what happens on the front page? On the front page, by default, there’sa default branch that GitHub uses.And usually that’s the master branch. You have the ability to change whatthat default original branch is. But generally speaking, itwill be the master branch. AUDIENCE: [INAUDIBLE] BRIAN YU: Oh, OK. So the question is, in project 0,we’re working with GitHub Pages, which lets us take websites anddeploy them to the internet just by pushing themto a GitHub repository. The way that GitHub Pagesworks is that it’s only deploying to the internetfrom a particular branch. So when you set up GitHub Pages inthe Settings page of your repository, you had to tell GitHub,I want to upload files to the internet based on the contentsof the master branch, for example. Or you could specifywhich branch you wanted. And so as a result, anythingthat’s on any other branch isn’t going to bereflected on the internet if you just go to theGitHub Pages website. What you’ll need to do istest the changes on your own on your own computer.And when you feelcomfortable with them, when those are the changes that youwant to deploy to the internet, then you can merge theminto the master branch. And that will be what ultimatelygets deployed to the internet. Other questions about Git,or GitHub, or branches? OK. A couple other topics justto talk about briefly– so these were sort ofthe key commands that we were using when regarding to branchingin Git. git branch, If we don’t have anything after it, justshows us all of the branches that we currently have. If we have git branch followedby the name of a branch, that creates a new branch. git checkout lets us change wherewe currently are in the repository. We can change from onebranch to another branch, or even one commit to another commit.And then, git merge allows usto take two separate branches and combine them back together. OK, so a couple otherthings to talk about– next is the concept of remotes. This is something we’vealready been using. But we haven’t really lookedat how exactly it’s working. The concept of Gitremotes is just the idea that we can have a versionof the repository that’s stored somewhere else on the computer,in particular– or stored somewhere else on the internet, inparticular– on GitHub, for instance, if we’re cloningthe repository from GitHub.And so if you’ve been working withGitHub in project 0, for example, and you keep seeing theword “origin” show up– it showed up just a moment ago whenI was trying to push to a new branch, for example– that origin is justthe name of a remote, a version of the repositorythat lives somewhere else. I have one version of therepository on my computer, and the remote is someversion of the repository that exists on GitHub, for example. And so how does that work? Well, I have someversion of the repository that, maybe, has four commits on it.And this is the remoteversion, the version on GitHub, that might be a little bit later. And both my version of therepository and the remote both have their own branches. We saw before that I might have twobranches even though GitHub might only have one branch going on. And this branch might be furtheralong in terms of the commit history than my current branch is. And so if I wanted to work with thisremote version of the repository, what I might do is run a command calledgit fetch, which just means, go to the remote, this onlineversion of the repository, and download all of the latest commits. And so when I run gitfetch, it’s going to take those commits from the origin, thisversion of the repository stored on GitHub, and downloadthem locally so that, now, I have this origin/master branch, themaster branch from my origin remote.And I have my current masterbranch, which is still here. So master is where Iam in my repository. And so if, now, I want my master branchto be updated to reflect the latest changes, the command todo that is to sort of say I want to merge where I amwith where origin master is. And so if you do gitmerge origin/master, that causes your master branchto be updated to reflect the latest version of the origin.But this process is so frequent– theprocess of, download the latest commits and move myself to the latestcommit based on the master branch of the origin– that these two commands can besimplified into just the command git pull. But if you’re ever wonderingwhat git pull is actually doing, this is what’s happening. It’s downloading, or fetching, thelatest commits from the origin. And then it’s sort of fast-forwardingyourself on the master branch to match up with the latest commiton the origin master branch.But that’s what git pull is doing. And that’s what allows you tomanage that remote repository and move yourself to the latest version. OK, couple other concepts thatare sort of specific to GitHub that may prove useful to you as youstart to work on the projects– one is the concept of forks. So a fork of a repository isjust an entirely separate version of that repository that getscopied based off an original.So what you saw in project 0, if youstarted– or if you haven’t started, you’ll take a look at it this week– is that we create a newrepository for you that’s going to store the contents of project 0. And the first thing that you’ll want todo is create a fork of that repository where we have a version of therepository that belongs to us, and you are going tofork it– in other words, create an entirely separate version ofthat repository that belongs to you.And so on that fork that you own,you can do whatever you want to it. You can add new branches, you canpush to it, you can pull from it, and you can manage it entirely. And all of that won’t affect theoriginal version of the repository. So if you ever look at opensource projects, projects that many people on theinternet are contributing to, very frequently there will be oneversion of the repository that’s the version of the repository. And different people that wantto contribute to that project will each independentlyfork that repository– take their own versionof the repository, make their necessary changes to it. And when they like their changes,when they’d like for those changes to be merged back into theoriginal version of the code, they’ll submit what’scalled a pull request.And a pull request isjust a fancy way of saying that you would like foryour changes to be brought in from one branch of somerepository to some other branch of the same repository, oreven a different repository. So when you submitproject 0 for instance, you’ll do that via submitting apull request to the original version of the repository. And you’ll often see pullrequests as a good way of getting feedback orcomments from other people that you’re collaboratingwith on projects. They’re an easy way of saying,I’ve made these changes. I would like someoneto review those changes before we merge them into the masterbranch of a repository, for example. They’re are a goodsanity check, in a way, to take a step back andtake a look at the code that you’re about to merge beforeyou actually perform that merge.So I’ll show you an example of that now. So over here, we set up a– we had, on the lecture1 repository,a master branch and a feature branch where, on the feature branch,I had added some new changes and added some new code. And now if I want to submit apull request– in other words, say, I like this new feature branch.I would like for it to bemerged into the master branch– I’ll just click the Compare& Pull Request button on the right side of the feature branch. And I’ll just go ahead and clickthe Create Pull Request button. And so this is aGitHub-specific feature that lets whoever owns this repositorysee that I am proposing to make these changes to the code. You can see what changesI’m proposing to make– remove this line, add that line. And what this allows us to do is tohave a conversation about the changes that I’m proposing to make. It allows for people to requestthat new changes get made. And this is a commonparadigm, if you see projects on GitHub, where peoplewill use the pull request feature as a way of getting feedbackand working together collaboratively on projects. And so you’ll get an opportunityto play around with forks and pull requests overthe course of project 0. And you’ll find more informationabout that in the instructions. But just wanted to giveyou a look at it so that you can get a sense forwhat the interface looks like, and ultimately, how that works.But now let’s take a step awayfrom Git and start going back to actually designing web pages,and structuring our web pages, and organizing them, in particular,by taking another look at HTML. So last week we took alook at the basics of HTML, how we might structure awebsite using nested tags. If you remember, those tags took theform of an open angled bracket, then the name of the tag that we wanted,and then a closing angle bracket. And using just that simple syntax,we were able to create lists, we were able to add images intothe content of our web page. But thus far, we’ve only beeninteracting with a single page. We had one something.html documentwhere we put in a bunch of tags. And that rendered a web pagethat displayed some contents. But modern websites andmodern web pages nowadays don’t just display content,and that’s it, on one page.They’ll very often need tointeract with other pages, in particular, by linking to otherpages such that you click on a button, or click on a link, and thattakes you somewhere else. So let’s take a look athow we might actually do that if we wanted towrite HTML code to connect multiple different websites together. So what we’ll take a look nowis we will look at links0.html. And so what we see in links0.htmlis just a standard HTML web page.As we remember from before, !DOCTYPEhtml just means this is an HTML5 document, a document writtenin the latest version of HTML. This html says this is the beginningof the HTML content of the website. Here is the header of thewebsite, the Information that’s sort of metadata to the page– not stuff that’s going to be displayedin the main contents of the web page, but information that’shelpful for the web browser. In particular here,we specified a title. The title of this page is “My Web Page!” And then, inside thebody of the web page, we have this contents, which is howwe’re going to be creating a link.So here we have a, oranchor, and then href. And href just stands for,what is the hyperlink that we want to link to when someoneclicks on the contents of whatever is inside that tag. So right now it says, “Click here!” And href=”hello.html” means, whensomeone clicks on Click here! we should take the user to hello.html. And so if we open up hello.htmland see what’s in there, that’s just a web page that says”Hello, world!” for example. So now if I open uplinks0.html, what you’ll see is, right now, just has a big,blue link that says “Click here!” And if I click on that link,where I’m taken to is– if you look in the URL, theURL changes to hello.html. And the contents of thatpage is “Hello, world!” And so by using that tag, we wereable to link to a different page that was located in the same folder.I had a links0.html file,and also, a hello.html file. And a href was my way ofsaying, when I click here, I want to link and go tothat other page instead. And this hello.htmlfile doesn’t just have to be a file that’s located onmy computer in the same folder. It could be an external URL if I want tolink to an entirely different website, for instance. So if I want to link tohttps://google.com for example, and say click here, andtake that to Google, now, if I refresh my links0.htmlpage and I click here, now I’m taken to Google’s home page. And so I can link not only toa file located on my system, but I can also link to elsewhereon the internet as well. And in addition to linkingto a different file or to an entirelydifferent web page, you can even use these a href tags to linkto different places on the same web page.And this is becomingincreasingly popular as more and more contentgets put on the same page. And oftentimes when youclick on links, they’re not taking you to differentpages, they’re just taking you to different places on the same page. So we’ll take a look at anexample of that as well. Here is links1.html. So what you’ll see is, in links1.html,I have a whole bunch of sections. So each section starts with a heading,h2, for a reasonably large heading. And each one has an ID. And recall from last week that theID attribute of an HTML element is just an easy way to givean HTML element a name. So I want to give this header thename “section1” such that, later, as we’ll soon see, I can referto this h2 tag as section1, the thing whose name is section1.I have a paragraph that has some text. I have a second section that’scalled section2, another paragraph, and then section3, with a heading, andthen contents underneath that as well. So how do I now link todifferent parts of this document? Well, if we notice uphere, I have what– I just called it a table of contents,and then ul for unordered list. And remember, li arethe elements contained within an unordered list or an orderedlist, li standing for “list element.” And each one of these listelements is, itself, a link. We have that same aref syntax in that tag. But the link, insteadof being a .html file, starts with this pound symbolwhere the pound symbol just means, rather than link to an individual page,link to something with a specific ID.In particular, here, byclicking on the section1 link, this means, link towhatever has ID section1. And this means, link towhatever has ID section2. And this means, link to whateverhas ID section 3 such that now, if I open links1.html,you’ll see a table of contents and individual sections. And if I make the windowsmall enough such that I can’t see all of thesections all at once, you’ll see that if I go to the tableof contents and click on Section 1, for instance, it’ll automaticallyjump down to Section 1.The page didn’t change. I’m still on that same page. But it jumps me downto that first section. And if I instead click on Section2 by clicking on that link, that’ll jump me down toSection 2 on the web page. And likewise, clicking on Section3 jumps me down to Section 3. And the reason that this pageknows about all these relationships is via that ID attribute, the factthat every place I want to link to has that ID identifying it assection1, section2, section3. And then my individual links canthen use those ID names to say, here is where I want the page to linkto when I click on that individual link. Questions about linking between pages? Yeah. AUDIENCE: Is it possiblemore than one [INAUDIBLE]?? BRIAN YU: Good question. So the question is, can the sameID show up in more than one place? And the answer is no. In HTML, there is sort of a rule,which is that an individual ID can only appear once on any given page. So you should never reuse the same IDin two different spots on the same page.IDs are meant to be unique. So when I refer to somethingby ID, there should only ever be one of those things. If we want to refer to a groupof things by the same name, there’s a different attributefor that called “class.” And if you give multiple differentthings the same class name, then it’s possible to refer toa group of things all at once by referring to that class. Great question though. AUDIENCE: [INAUDIBLE] You won’t be able to–so the question is, can we link to somethingbased on its class? And the answer is that’snot quite going to work, because you imagine we might have threethings that all have the same class name.And so if I link to it, theweb page isn’t going to know, which thing do Iactually want to link to. So generally speaking,when we link to things, we’ll want to link to the samepage based on their individual IDs. Couple other notes aboutHTML– so those were links. HTML has undergone a numberof different revisions. So the latest version is HTML5. Back in HTML4, if we wanted to organizeour website into different parts, you might imagine that a morecomplicated website might have a header at the top of the website. It might have a navigation bar,whether on the left side of the website or a banner acrossthe top, for instance.It has some main content,and maybe a footer at the bottom that has copyrightnotices, or other links, or whatnot. In HTML4, you might have seen syntaxthat looks something like this in order to organize your website, where adiv, if you recall from last week, is just a verticalsection of the web page. It’s just a genericsection of the web page that has some name associated with it. And we might have added class names tothis where we said, div class=”header” such that later, I could use CSS andsay, take anything that’s a header, and give it a dark green background,and make the font size 36 points or whatnot. And we might have had a separatediv whose class was “nav” for the navigation bar, a separatediv for individual sections of the web page, and a separate div for the footer.And this is still areasonably common paradigm. But in HTML5, since this processis so frequent in web pages, there are actually newtags that are added to HTML5 that are increasinglybeing used in more modern web pages that simplify this process. Rather than just have divsthat have class names that are specific parts of the web page,some parts of the web page now, in HTML5, have their own tags suchthat if you want to better organize the header of your website intoone section, or the navigation bar of your websiteinto one section, you can use the header tag to say, thisis the header of the website, nav for, this is the navigationpart of the website.And the reason you might do thisis because, then, in your CSS, for instance, you could say,take anything inside of the nav bar of my website, and give it theseparticular stylistic properties in order to make the navigationbar render in a particular way, for instance. And so this can be a nice,simpler way of helping to organize your website ina way that’s easy to read and is easily understandable. These aren’t the only new tagsthat are introduced in HTML5. There are a whole bunch. I won’t talk about them all. But a couple that areparticularly of note are audio and video tags,which make it really easy to embed audiocontent into your web page or embed a video into your webpage, and then also, this one called datalist, which is increasinglypopular now as autocomplete on– when we’re typing on aphone or on a computer, becoming increasingly prevalent. And I’ll show you an exampleof one of these datalists just now, because it is quite a nice feature. So one thing we lookedat last week was creating a simple form where,inside of a form, we might want people to enter in theirname, and their email address, and other information thatthey would want to submit.We haven’t gotten, yet, to how we canprocess information from that form and do something meaningful with it. But we talked about how to create aweb page that just displays a form that people can enter information into. So let’s go ahead and takea look at form.html now. And what we saw before is thispart looks very similar to the form that we saw from last time wherewe have a form tag that just says, this is going to be an HTML form.And here on line 10,we have an input field. An input tag just says, thisis going to be a place where someone can input information. We named that input field, whichdoesn’t do anything for us just yet. But you can imagine that we’ve seenthe value of naming things in the past. When we name particular HTML elements,that makes them easy to refer to. And in the same way, namingparticular elements of our form is going to make it easy to referto later such that, when someone submits the form, we’re going tobe able to write code that says, get the name from the form that willget at this specific input field. Or get the user’s passwordfrom the form, which will get at that specific input field. The type attribute of thisinput field is set to “text.” This is just text that wewant the user to input. And the placeholder is “Name.” And likewise, for the password,the type is “password,” which is a slightly different type.And we’ll see what’s differentabout it in a moment. And the placeholder there isjust going to be “Password.” Here we see a different type of input. Here we’re asking for a favorite color. And the options are going tobe red, green, blue, or other. And rather than just have them typein something, this type of input is a radio input– so a radio box where there issort of a bunch of circles, and you can click on one of themto select which one you want.This is a slightlydifferent form of form input that might prove useful to youdepending on the type of form that you’re trying to create. And here we just havefour different inputs, one for each of thosedifferent radio options. And then finally, downhere, we have an input that is going to represent whatcountry the person is from. And so we named it “country.” And we associated itwith a particular list. And so this is the new feature of HTML5. I associate it withthe list “countries.” And immediately belowthat, I have a datalist, which is just going to bea list of possible options that will populate this form.And we’ll see what thatlooks like in just a moment. It’s name is “countries” so that ourinput field knows how to reference it. And now we just have awhole bunch of options, one option for all of the countries. We just got a list of countries, andput them all into individual options, and put them into form.html. So now if I open up form.html, here’swhat that ultimately looks like. I have a place whereI can type in a name. I have a place where Ican type in a password. And recall that that password fieldhad a slightly different type. The name field’s type had type=”text,”just normal text that I’m typing in.The password had type=”password.” Browsers know how tointerpret type=”password” to mean something special,to mean this is secure, sensitive informationthat they’re typing in. So when I start typing into this field,it’s just going to show up as dots. It doesn’t actuallyshow the actual text. And that I got just bysaying type=”password.” And the browser knew tointerpret that as secure password information, stuff that shouldn’t justbe displayed as text on the screen.The favorite color radio button, Ihad these for radio input options. And that shows up thisway, where I can select among these potential favorite colors. And then for country,because I had this datalist, if I start typing in”United,” for example, it’s going to automatically fillin with any matching elements from that datalist, because I providedthe list of all the countries. And now all I have to do is clickon the country that matches– in this case, United States. And that fills in thecategory appropriately. I could also click on that arrow to seeany of the matches that showed up there as well.And so datalist is one ofseveral new features in HTML5. There are a whole bunch ofnew tags, audio, and video, and datalist among them. We won’t have time tolook at all of them. But just wanted to giveyou a taste for what’s new in the latest version of HTML. And HTML continues to addnew tags and new features. But one of the problemsis that browsers need to support the latest versions of HTML. So it isn’t always the case that assoon as there is a new feature to HTML, that every web browser in theworld will suddenly support it. Oftentimes, olderbrowsers might take longer to support newer features of HTML. But HTML5 is startingto become widespread. All the major browsers now supportthe most important features of HTML5. So you can start to use things likeaudio and video embeds and datalists in the websites you designwith reasonably high confidence that whoever is looking at the webpage will be able to understand it.Question? AUDIENCE: [INAUDIBLE] BRIAN YU: Good question. So the question was, is it importantthat, in all the projects in the class, that it works on everysingle different browser? Generally speaking, thelanguages that we’re teaching, HTML5 and the latestversion of CSS, you should feel free to use even if mucholder web browsers might not support those features. We’ll talk a littlebit later in the course about how you might go about makingsure that some of the features will work even onolder browsers as well. But for the sake of project 0, Iwouldn’t worry too much about it. OK, so that’s HTML. And now what I wanted to do was moveon to talk a little bit more about CSS. So CSS, which stands forCascading Style Sheets, was the tool that we used lastweek to style up our website.In the form we just saw,everything was sort of black text. It was all in the same font. And it wasn’t particularlyaesthetically pleasing. And what CSS allowsus to do is have a lot of control over how thewebsite actually looks, over the colors, and thefonts, and the layout, and ways that things are organized. And we’re going to spend,basically, the rest of the lecture today talking about how tomake that website look good. Because there’s a lot that goesinto organizing the website and styling the websitein such a way that it’s going to be visually appealing,and that things are organized the way that we want it to look. And in particular, inthe modern day and age, where people are looking at websiteson a bunch of different platforms– looking at them on their laptops, andon their tablets, and on their phones– it’s important to think about andconsider how different websites might look on different platforms and tomake appropriate adjustments in order to make sure that if you look at thewebsite on a computer, it looks good, but it will still look good even ifyou look at the website on a phone, for example.And so we’ll explore some ofthe tools and technologies that we might use in order to do that. But let’s start by looking at someof the more advanced features of CSS to have even more controlover how it is that we want to style our website inorder to have a lot of control over that individual style. So let’s take a look at this example. So this is an example thatis similar to something we saw last week just togive you a refresher on what CSS looks like in terms of code. We see that inside thebody, we have two headings.Here’s one big headline, andhere’s a smaller headline. Recall that h1 is the biggest headline,h2 is the next biggest, all the way down to h6. And up here in the style section of thepage, we’ve included some CSS content. And so here, what Isaid is h1, comma, h2, where the comma just meansI want to apply styling to multiple different things. I want to apply stylingto the h1s and the h2s.I could have equivalentlysaid, h1s I want colored red, and h2s I want colored red. But oftentimes, if you findyourself repeating yourself, it’s a good idea to lookfor ways to simplify. And this is a paradigm that we’re goingto be returning to later on in this lecture. But to make this simplerfor now, we can just say h1, comma, h2 to mean, I want thisstyling to apply both to h1 tags, the big headlines, and h2 tags, whichare the slightly smaller headlines such that if I open upmultiple.html now, what I see is the big headline, which isred, and the smaller headline, which is red as well.But in addition to thecomma that just lets us select multipledifferent things, there are a bunch of otherCSS selectors that let us be very precise about selectingparticular parts of our website that we want to style andstyling them in particular ways. On these simple websitesthat I’m about to show you, they might seem a little bit trivial. But as your websitesstart to get more complex and start to have a bunch ofdifferent moving parts to them, it can be very helpfulto be able to be very precise in selecting particularparts of your website that you want to style inparticular ways and making sure that only those elements getstyled in a particular way as opposed to all of the elementson the web page, for instance. And so no need to worryabout memorizing all of this. All the CSS selectorsare very well-documented.And it’s easy to look them up in orderto find a particular selector that works for you. But I’ll show you thesenow just to get you a sense for what you can do with CSSand the amount of control and precision that you can have overCSS selectors such that they may serve asinspiration as you go ahead working on project 0 or otherwebsites that you want to be styling, potentially, in the future. So let’s go ahead andopen up descendant.html. And so what’s happening hereinside the body of this website is that we have acouple things going on. So inside the body of thewebsite, we have an ol, where ol stands for ordered list, whichis just a list where things, instead of being bulleted like and an unorderedlist, are numbered– thing number 1, 2, 3.And the web browser will automaticallynumber those things for us. And we have a bunch of list items,so list item one, list item two. And inside of this ordered list,we have a list inside of the list. So if you’ve sometimes seenwebsites that have nested lists, or lists that have a left side and thenan indented part that’s a list within the list, this is all this is, anotherlist inside of the ordered list that is a sublist– sublist itemone, sublist item two– and then another list item that’spart of this original ordered list.So if you think back last week to wherewe talked about the DOM, that tree that shows how different HTML elements arenested within other HTML elements, you can think of this asthe ol, the ordered list, containing four different pieces, onelist element, another list element, an ordered list, which, itself,contains two list elements, and then a final list elementin the ordered list.And so what styling dowe want to apply to this? Well, here we’re saying that wewant to apply styling to ol li. So there’s no comma here. It’s just ol li. ol stands for ordered list,and li stands for list item. And what styling the ol,space, li is going to say is, I want to style all of thelist items, the li’s, that are contained within an orderedlist, or all of the list items that are descendants of theordered list, equivalently. And so all of those list items Iwant to color red, for example. And so now, if I openup descendant.html, we see that all of the list items,including the sublist items, are all styled as red. And so why did the sublistitems get styled as well? Well, it’s because the onlyrule that this CSS is following is that if there is a list item,an li, that is a descendant of or is contained within anol, an ordered list, then it’s going to be colored red. And this list item here, even thoughit’s inside of an unordered list, is still inside of thisbroader outer ordered list.And so it’s going to bestyled as red additionally. If I add another list that’sentirely outside of the ordered list and say ul for unordered list– and I might say, here is a secondlist here, and here’s another item. So this is an unordered listthat’s outside of the ordered list. If I refresh the page now, this secondlist is not styled in that same way. Because these are, yes, listelements, or list items, li’s, but they’re notcontained within an ol. And so as a result, they don’tget styled in the same way as all of theseindividualist list items do. Questions about how that space operatorworks to select just the descend– any descendants of aparticular HTML element and specify those, specifically,as the ones to be styled? AUDIENCE: [INAUDIBLE] So the question is, if,in this case, we were to omit the li entirely and just sayol, that I want it to be styled red, would that do the same thing? In this case, yeah.Because if we style the orderedlist, everything within it is ultimately a list item. And so it’s going tobe styled red as well. But you can imaginemore complicated cases where the outside tag might have a bunchof different types of tags within it. And if we only want to specify certainelements within the outer element to be styled, that’s whenhaving a second thing after it can often be helpful. And we might take a look atcouple examples of that later. So that worked forselecting any descendants. And the way to thinkabout how this is working is that we have theselist items, which are– you can think of as children of theordered list, and these list items down here, which you canthink of as grandchildren of the ordered list, where wehave the ordered list, and then the unordered list, and within itare the individual list elements. What if I only wanted to selectthe immediate children, but not the grandchildren,the ones inside of it? And so for that case, what we wantisn’t the defendant selector that selects all of the descendants,but rather a selector that is just going to select, forus, the immediate children.And so let’s take alook at child.html now, which is going to bethe same body contents. We still have an ordered listwith individual list items and a sublist contained within it. But here’s the difference in the styletag, just a minor syntactic difference. Rather than ol, space, li, wehave ol, greater than sign, li. And not greater thansign is CSS’s syntax for specifying an immediate child. So ol greater than liis going to only select list items that areimmediate children, directly descended from any ordered list.And it’s going to color thoseas red and ignore anything else. So if we open up thatwebsite and take a look at what that looks like by opening upchild.html, this is the result, right? The immediate children of theordered list, the numbered items, all show up as red. But the sublist items,the things that are contained within the unorderedlist inside of the ordered list, those aren’t styled. Those are still coloredblack, because they’re not immediate children of the ordered list. They’re grandchildrenof the ordered list.And so I’ll show you that code againjust so you can take a look at it to get a sense forwhat’s going on there. Questions about the distinction,though, between the defendant selector and the immediate child selector? OK. There are a coupleother selectors that are useful to just see so thatyou get a sense for what you can do with which HTML and CSS styling. One is going to be in attribute.html. So in attribute.html here– and allthis source code is going to be made available after the lecture ifyou want to take a look at it– we have, here, a form where that formis very similar to the types of things we’ve already seen where we havea input field for the first name, an input field for the lastname, and an input where the person looking at the web pagecan type in their age, for example.And what you noticeis slightly different about these is that first name andlast name have a particular type. Their type is text, their textthat we want the user to input. And their age, on the otherhand, is going to be a number. The type is number. And what some web browsers will dois– when the type of a input field is a number, is– they will try to helpyou restrict the valid inputs that you can type it. Have you ever seen a HTMLinput form, for example, where they’re expecting a number, andif you type the letter, nothing happens? That’s because the web browser mightknow that the type of this input field is a number. And so I better not allow anyoneto type text into that input field. Because it should only ever be a number. And so that’s what that’s doing there. But what that allows us to do isstyle things in particular ways. And so CSS also allows for stylingthings based on individual attributes. And so before, we saw how wecould style any generic tag.But here what we’re looking at is Iwant to add styling to input fields, but only the input fields wherethe type of that input is text. And I can use any attributename and value here. It doesn’t just need to be input types. It can be any time where we’ve seenattributes added to HTML elements. So we saw, like, src forimages, or href for links. These are all attributes that we canuse the attribute selector for in order to style them in particular ways. So here we said the input type is text. And if it’s text, I want thebackground color to be red. And if the input type is number, then Iwant the background color to be yellow. So I’m delineating betweendifferent input fields based on their individualattributes to say, here is the way I expect certainattributes to behave. So if I open up attribute.htmlnow, here’s what I see, where these are all input fields. The only difference between them isparticular attributes that they have. And first name and last name arenow places where I can type in text, and their background color is red.And age, because ithas a type of number, is going to display abackground color of yellow. I have allowed myself to bemore precise about the way that I select elementsin order to style things exactly the way that Iwant them to be styled. And ultimately, that’s what CSSselectors are designed to help you do. They are designed to help yoube more specific about the way that you work with CSS and the way thatyou select individual elements to help make the process of designing aweb page that looks the way you want it to look all the easier.So couple other things to look at– let’s take a look atdifferent types of selectors that operate in different situations. In particular, CSS has the notionof what’s called a pseudo-class. And a pseudo-class is just aspecial state of an HTML element. Because a web page is notjust something that gets displayed, and the usersees it, and that’s it. The user is often interactingwith that web page. They’re hovering over things. Their cursor is moving around the page. And so we might want our web pageto respond to user interactivity– that when a user hoversover something, for example, we might want that behavior of the webpage to change in some meaningful way. So let’s take a look at exactly thatexample by taking a look at hover.html. And inside the body of hover.html,it’s actually a very simple body. There is very little happening here. I have a button tag,and it says “Click me!” And that’s it. But now let’s take alook at the styling. This is where things get interesting. So inside the style of this web pageI have a couple things going on.I’ve said, take the button. And here are the things thatI want you to know about how we should be styling this button. It should have a width of 200pixels, a height of 50 pixels. The font size will be 24 pixels. Those are just arbitrarynumbers that I chose to make the button look a little nice. And the background color of thebutton is going to be green. But here, this colon syntax is whatI call a pseudo-class representing a specific state of the HTML element. In particular, this is what happenswhen the button is hovered on, when the cursor moves over that button. And in particular,what I’m saying here is that, now, I want the backgroundcolor to be orange instead. So I went to change the styling of thewebsite based on a particular state that an element might be in. So if I now open up hover.htmland take a look at it, right now it just says “Click me!” It’s a green button. But as soon as my cursormoves over the green button, it changes to orange, right? I have that hover pseudo-classattached to this button such that it knows that when somethinghovers over it, the styling of it should change.So this allows the styling ofa website to vary depending on how the user’s interacting with it. And so you may haveseen this type of thing happen where, when you hoverover something that’s important, it changes color, or it grows,or it does something different with its styling. And oftentimes this ishow it’s working, just pseudo-classes that areplaced on CSS elements to make them behave in certain ways. In addition topseudo-classes, CSS also has what’s called pseudo-elements,which are ways of affecting particular parts of an HTML element. And so I’ll show you acouple examples of that now. These are a little bit less common,but are still things that may come up. So I’ll show you before.html right now. And so in before.html, what I havehere is an unordered list of links. Here’s one link. Here’s another link. Here’s a third link. And right now they all just link to #– in other words, don’treally do anything. We’re not linking toany external website.But for each of theselinks, these a tags, I have this pseudo-element before. And what this is saying is I wantto apply some styling that happens before the contents of the actual link. And in this case, thecontent is slash 21d2, which is a special hexvalue for a Unicode symbol. So these are symbols that you can’tjust normally type on the keyboard. But special symbols like emojis andother symbols have particular codes. This code, you’ll see in a moment. And then it says “Click here.” And the font weight ofthis contents is before.And so it might not be immediatelyclear what exactly is going on here, but I’ll show it to you. And then we’ll come backto the code so you can take a look at what’s really happening. Let’s open up before.html. And what you see is three links–one link, another link, a third link. But all of them are prepended withthis arrow sign that says “Click here.” And so how did that happenwhere all three of the links have that additional informationat the beginning of it? Well, these individual links onlysaid “one link,” “another link,” and “third link.” But all the magic ishappening inside the style tag where I’m saying, for every link,before the contents of that link, I want you to add this particularcontent– in particular, this symbol, and then the words “click here.” And I want the font weight ofthat before element to be bold.And the result of that is this, whereeach one of those individual links is prefaced with arrow sign, click here. And so if you have a bunchof different elements that you all want to begin with certaintext or a certain symbol for example, you might use colon, colon, before,as we used here, or colon, colon, after, which does the samething, but at end of the element, in order to make thosemodifications as well. One other potentially useful one– and then we’ll take a short break– is selection.html. So inside selection.html, the bodyof it is just one long paragraph. But inside the styling,I say p::selection. In other words, whensomething is selected, I want that selection tobehave in a particular way or have a particular styling. In particular, I wantits color to be red, and I want its backgroundcolor to be yellow. So if I open up selection.html,what I get is just some text. But if I highlight that text, ithighlights in a very particular way.It highlights where the textI’m highlighting is red, and the background is yellow. Because I’m specificallysaying, I want, when I highlight the contentsof this paragraph, for the styling to appearin a particular way. And so that’s somethingthat you can do as well. And so a bunch of those CSSselectors are summarized here. We have the multiple element selectorwhere a comma separates two things to say, I want styling to apply toboth of these things, the descendant selector for when I want to selecteverything contained within something else, immediate child for immediatechildren but not grandchildren or great grandchildren of an element.We didn’t see this one, butthe adjacent sibling selector lets you select something that comesimmediately after something else– so two elements that are sisters to eachother in the tree rather than one being the parent orcontaining the other. We saw the attribute selector that letus say that inputs that are numbers should be treated as different fromtext inputs, and then pseudo-class for things like when I’mhovering over an element, and then pseudo-elements for sayingbefore the contents of a page or after a contents of the page. Again, no need to memorize all of that. But these are just asample of the CSS selectors that you can use in orderto have a lot more control over the contents of your HTML page. When we come back, we’ll dive even moreinto CSS, not looking at CSS selectors specifically, but looking athow we might take a web page and make it moremobile-responsive for example, and use some more advanced CSS features.But for now, we’ll take a short break. And we’ll be back in a couple minutes. OK, welcome back. So now what we’re goingto do is take a look at how we can go about makingour web pages mobile-responsive. In particular, responsivedesign is generally the idea of trying tomake sure that our web page is going to look good regardlessof what platform we look at it on. Whether that’s a desktop machine, ora laptop, or a phone, or a tablet, or any other device, we wantthe website to look good across all of that variety of platforms. And so when we start tothink about responsive design and how to go about making thewebsite look good no matter what, what are some things wewould need to think about? What might be important to keep trackof when thinking about how things look on a computer versus a phone? Yeah? AUDIENCE: [INAUDIBLE] BRIAN YU: Making sure thetext responds right– yeah, different screen sizesmight adjust for– might require differently-sized textin order to make the text look good.Sometimes if you look at older websitesthat aren’t really designed for phones, and you try and look at iton a phone, all the text feels, like, squishedinto the center of what’s called the viewport, the area of thephone that you see web content on. We’ll talk about ways thatwe can go about fixing that. Good point. What other things mightbe relevant to consider when we think aboutgoing from bigger screens to smaller screens ordifferent platforms that websites need do exist on? AUDIENCE: [INAUDIBLE] BRIAN YU: Yeah, thingsneed to move around a bit. You might need to– it might not justbe a matter of making everything smaller in order to fit on the mobile screen. But if you’ve got adesktop website that has a bunch of different columnsworth of stuff, maybe three columns of information, and you wantto shrink that down to a mobile screen, now, suddenly, you can’t justsqueeze all three columns into the same narrowwindow on the screen. You might want to stackthe three instead rather than have all three separate. And so we’ll talk about ways that wecan go about making those considerations and making sure that ourweb pages are able to adapt to those sorts of different types ofplatforms and different screen sizes.And so the first strategy thatwe’re going to be using here– will be a number ofdifferent strategies. But one strategy that will useare what are called media queries. And so a media query is aspecific way of assigning CSS not to a particular HTMLelement, but to a particular HTML element on a particular type of media. So that type of media might beparticularly-sized computers, or particularly-sized phones, oreven the difference between how you want a website to look whenyou are writing the code for it to appear on a screenversus how you want the website to look if someone printsit out, for example, on a printer.Because maybe when someone printsyour website out on a printer, you want the content ofthe page to look different than if you were justwriting websites that were going to appear on computer screens. And you might wantthose to be different. And so let’s take thatas a first example and take a look atour first media query. And so what we’ll takea look at is print.html. And so what we have here is, in thebody of our web page, three paragraphs. So this is a paragraph. This is another paragraph. And then I have a third paragraph,and I’ve added a class to it. And that class is goingto be called screen-only. That’s just a name I madeup, but it’s useful for me to know that this is going tobe a paragraph that is only going to show up on computer screens. When I print it out, it’snot going to show up.So this paragraph won’t appearwhen you print this page. And you might want this if youhave particular instructions for, like, click on this buttonor click on that button that are relevant when someone’s lookingat your web page on a screen but aren’t very relevantif someone wants to print out the contents ofyour web page, for instance. And so how do I go about styling that? Well, this is what the styleheader looks like here. I have this @media, whichmeans, create a media query. I want to apply CSS styling, butonly in particular situations, only in particular cases. What case do I want toapply the styling in? Well, in this case, I said @media print. In other words, thisstyling, I only want to apply when the media, or the mediumby which my web page is being viewed, is it’s being printed. And then .screen-only– rememberthat dot is a way of specifying, select everything witha particular class name. Down below we had a paragraphwhose class name was screen-only. And here I’m saying, take anythingwhose class is screen-only, and said its display property to none.And if you haven’t seen this before,display property being set to none means, make it not visible. In other words, it’snot being displayed. And we’ll see other examplesof the display property later. But what’s the resultof that going to be? Well, again, I have three paragraphs. Here’s a paragraph. Here’s another paragraph. And here’s a paragraph that won’tappear when you print the page. And if I open print.html, whatI see is those three paragraphs. And on my screen, theylook totally normal. There’d be no way to tellthat this paragraph is any different from theother two paragraphs. But if I go to the File menu,and I try and print this– if I were going to printthis web page out– then the result that I see inthis preview is that I see, this is a paragraph.I see this is another paragraph. But that third paragraphisn’t there, right? That paragraph is now being printed. And in my CSS, I said,when the media that I’m trying to use when viewingthis page is a screen, I want that paragraph to havea display property of none. I don’t want thatparagraph to be visible. And by doing that, I’m ableto control how that web page appears on particular mediums. So that allows me to make surethat this paragraph doesn’t appear when I print the page. But of course, printingis just one example of a different medium on whichI might be looking at content.The more frequent casenowadays is probably that I have content being viewedon differently-sized devices, that I have a computer with a verywide screen, a tablet with a slightly narrower screen, a phone with ascreen even narrower than that. And I want to make sure that my websiteresponds to those changes as well. So how might I go about doing that? Let’s take a look at responsive0.html. And in the body of thiswebsite, it’s very simple. All it says is a headline thatsays “Welcome to My Web Page!” And that’s the only contentof the web page in the body.But now let’s look at the styling. What’s going on here, Ihave more @media queries. But this time, instead of specifying@media screen for, here’s the media for what style it should look like whensomething is being displayed on screen, or @media print for whenI’m printing something out, I have @media min-width– 500 pixels. And what that means is thatthe styling that follows is CSS styling that apply whenever thispage is being viewed in a window that’s at least 500 pixels wide.And in particular, when the windowis at least 500 pixels wide, I want the entire body of my web pageto have a background color of red. Meanwhile, for @media max-width– 499 pixels, that’s sayingthe exact opposite, that if I’m on a smaller window wherethe maximum width of the web window is 499 pixels or anythingsmaller than that, then I want the body’sbackground color to be blue. And so this allows me to changethe styling depending upon how wide or how narrow a particular web page is. So if I open up responsive0.html, whatI see is “Welcome to My Web Page!” And the web page background is red.And so that tells me that, basedon the contents of my code here, the background color of red should onlyapply when the width of my viewport, the width of my window,is at least 500 pixels. So what happens now, if Itry to shrink that website and make it less than 500– I can grab the end and justshrink down this website. And watch what happens. It’s still red. But as soon as it shrinks below 500pixels, it changes to blue, right? Above 500 pixels, it’s red. Below that, it’s blue. And that’s a first example of how wemight change the styling of our website depending on how big or small thescreen that we’re looking at it happens to be at that time.So what are some other examples of that? What’s a more practical use case? So in reality, we probablydon’t care all that much about, we want the wider screen to have ared background and the smaller screen to have a blue background. But we might care about something likethis, which is a little more involved. But I have a body. And right now my headline is empty. It’s just an h1, sortof a empty headline. But we’re going to fillit in with content.But that content is going to differbased on the size of the screen. So here I’ve said @media min-width — 500, same as before. When the width of my screen is at least500 pixels, then before the h1 tag, the first thing that shouldshow up in my heading should be the content”Welcome to My Web Page!” But on the other hand, if the size ofmy web page is 499 pixels or smaller, then I want the content of my h1tag to just be the word “Welcome!” maybe because, on a smaller screen,I don’t want a longer headline that might wrap onto two lines, for example. I just want a shorter headline that’sgoing to look a little bit better on a smaller screen. And so what would thatultimately look like? Well, it’s going to be the samething as the background color, but just instead of changingthe background color, we’re changing the contents of what’sactually displayed on the screen.So I open up responsive1.html. And right now it just says”Welcome to My Web Page!” as if I had just had h1,welcome to my web page, end h1. But if I shrink the window now,when it would have normally needed to potentially wrap onto anotherpage and I go beyond 500 pixels, the headline changes. Now it’s just “Welcome!” There’s no “to My Web Page,”because, on the smaller screen, I want the smaller headline to appear. If I go beyond 500 again, go larger,then the full headline comes back. And so again, that’s allbecause of these media queries that let me specify the min widthor the max width of the screen that I want things torender on and decide how I want the CSS styling to appeardepending upon that screen size. One other thing you’ll notice up hereon line 5 is this sort of strange line, meta name equals “viewport”content equals “width=device-width, initial-scale=1.0”– so sort of complicated line.All this line is saying– and you’llsee this line in a lot of websites nowadays– is theviewport of my web page is just the visible area on thecomputer screen, or the phone screen, or whatever screen is being used toview the contents of the web page. And oftentimes in older websites, ifyou tried to view a website on a phone, it would just pretend that you wererendering the website on a computer, and render it as a wide display, andthen shrink it down onto the phone such that all the text on the phonewas really, really small.If you’ve looked at websites on yourphone, you may have seen this before. All this is doing is a linethat’s telling the browser to adjust the viewport to makesure that we’re scaling it to the width of the actual device,that the width of the viewport should be whatever thewidth of the device is. And as a result, thatwill help to prevent text from appearing really, really smallwhen you render it on a phone as opposed to on a desktop. This line is often just a good firststep to throw into your web page when you want to makeit mobile responsive, because that will help to makesure that the sizing of things appears appropriately. But the key of what we’re doing herein order to make this responsive is these media queries that areallowing us to specify what CSS gets applied under which circumstances. And so this is just some of thebasics of how we can use CSS in order to help allow us to stylewebsites in particular ways depending on different devices. We can also use particular CSS layouts.And I’ll show you a couple of these now. Again, no need to memorizeexactly what’s happening here, but just to give you a sensefor what’s available in CSS. But before I move on, question? AUDIENCE: [INAUDIBLE] BRIAN YU: If you had both– so the question– AUDIENCE: [INAUDIBLE] BRIAN YU: Oh, if you wanted tospecify both a minimum and maximum, I think there is a CSS keyword thatallows you to combine two different media queries– so like, min-width– 300 and max-width– 500. And I think you can look to the– I’d refer you to theCSS documentation just to look at how you would go aboutstructuring that media query. What we’re looking at here is atool built into CSS called flexbox.And what flexbox isgoing to allow us to do is create a web page thatlooks something like this. So we have a wholebunch of elements here, and each one is labeled A, B, C,D, E, F, G, all the way through L. And there’s 12 of them. And what might we expectto happen if we were to shrink this web page downand view it on a smaller device? Well, what we probably want to happenis we still want to see these squares, but we don’t want to have to scrolltoo much to the left and right in order to see all four. We’d rather have these individualcells rearrange themselves as we shrink down the page. And so watch what happenswhen I shrink this page. It originally shows me four in anygiven row, and I have three rows. But after I shrink itdown a little more, it’s going to justshow three on each row. And now I’ve got four rows. And if I shrink it down more,it’s got two on every row, and now I’ve got six rows.And if I shrink downeven more, now we’ve only got one, where each thing isjust stacked on top of each other. So this is what we werealluding to a little bit before, where if we have itemsappearing in multiple columns of content across the screen, we mightwant those things to move around as we begin to resizethe window in order to make it more adaptable to differentplatforms and different devices. So what does that ultimately look like? Here’s an example of flexbox in action. I have a container that’s just going tocontain all of these individual divs.Each one is just a letterfollowed by some random text. And here’s the stylingthat makes that all happen. Inside my container, I’m settingits display property to flex. In other words, I wantthis to be a flexbox that allows the content to, inthis case, wrap around it when it reaches the end of a line. So you might imagine that it’s likeif I had all 12 in one straight line. But as I shrink down the screen,I want the individual cells to wrap onto the next line andthe line after that in order to make room for everything to showup within the width of my window.And now I have this .container,greater than sign, div. Remember, that greater thansign means immediate child. So for any div that is immediatelythe child of the container, here’s how I want it to display. And this is just arbitrary. I wanted the background to be green. I gave it a font size. I gave it some marginand padding in order to make it look the way I want it to. And I specified how wide it should be. But really, the key was this, thisdisplay, colon, flex, flex-wrap, colon, wrap. This is what allows me to get thatflexbox to wrap around just like that. One other style that I’ll show youthat’s useful when we’re laying things out is having a grid. We might want a gridsort of like a table that displays information in a grid format.And so that might looksomething like this, where I have a grid of individual cells– 1, 2, 3, 4, 5, 6, all the way up to 12. And I might have contentin each one of those. And you might imaginethat this is useful if you want some information in the leftside of the page and some information on the right side of the page. And notice, as I shrink this down,the size of that third column automatically adjusts in orderto fit the width of the page. If I go beyond it, itstarts to get cut off. But if I’m greater than a certain width,that third column will adjust itself. So how does that work? I’ll just briefly show you this. And again, this code is allavailable to you after the lecture if you want to take alook at it to get a better understanding for how it works. But inside the body of my website, Ihave a div whose class is just grid.And I call it “grid” arbitrarily. And then within that gridare individual grid items. And here is 1 through 12,all just one after the other. So how did I take those1 through 12 grid items and make it appear in agrid that looks like this? Well, here’s the CSS stylingthat made that happen. For the grid, thebackground color is green. I used display, colon, flex beforewhen I wanted things to wrap around. Here I’m using display, colon, grid. I gave it a particular padding. Remember, padding is justthe spacing on the inside. And I wanted the gridcolumn gap, or the space between individualcolumns of the grid, to be 20 pixels, and the space betweenindividual rows in the grid to be 10 pixels.And here is grid-template-columns. This is what allows me to specifyhow wide I want each column to be. And here I’ve said the firstcolumn should be 200 pixels, the second column should be 200pixels, and the third column should be automatically generated. Just however much spaceyou need to fill space, that is how much space thethird column should take up. If I instead change both thesecond and the third columns to be automaticallyfilled, then what I get is column 1 that willalways be 200 pixels, but columns 2 and 3 that willnow adjust themselves naturally in response to how I move things. And if I change all of them to auto,for example, now all three of them will just automatically respond tome changing the size of the website. And they will shrink and growaccordingly in order to fit. Question? AUDIENCE: [INAUDIBLE] BRIAN YU: Great question. So the question is, how didI get the spaces to show up between the individual grid cells? Those were two particularCSS properties.Here grid-column-gap was 20 pixels. That’s the space betweenindividual columns. And grid-row-gap isthe space between rows. If I change the row gapto, like, 50 pixels, for example, now there’s morespace in between individual rows. And so you can use thecolumn gap in the row gap to control the amountof space that shows up in between the individual cells. But ultimately, this is startingto get a little bit complicated. And realistically, it would bepretty annoying if, every time we wanted something towrap onto new pages, we needed to remember exactly howthe flexbox worked and set up the flexbox for ourselves. But luckily, nowadays thereare all these CSS libraries out there, which are ways that are– CSS written by otherpeople that we can then use them in order tomake our lives easier when it comes to making our websitesmobile-responsive, for example. And one of the most popularlibraries is called Bootstrap. And that’s the one I’m goingto be introducing you to now. You’ll get an opportunity towork with it in project 0. But Bootstrap is just an easy wayof giving you access to some CSS that lets you make your websitesstyled a little more nicely, make them a little moremobile-responsive right off the bat without you needing todo a whole lot of work.And so if I open up nobootstrap.html,this is just a simple website, just like stuff we’ve seen before,where I have a heading that says “Hello, world!” and then a paragraph of text. And if I open upnobootstrap.html, this is what it looks like, same sortof thing we’ve seen before. If I want to add Bootstrap tomy file, all I need to do is– in bootstrap.html, thisis the exact same website, but I’ve added one extra line, this linkline where I’m linking a stylesheet. I’m linking Bootstrap’s CSS file, whichis located somewhere on the internet. And if you go toBootstrap’s website, you can find this exact line thatyou can put into your web page. And now everything else aboutmy website stayed the same. All I did was add Bootstrap’s CSS. And now if I open bootstrap.html,the website looks a little bit nicer. You notice that there’s somepadding along the outside. You notice that the headline isin a slightly different font.This is Bootstrap’s default stylethat you’re welcome to change. But that is Bootstrap’sway of just making your website look a little bitnicer, look a little bit more modern. But the real power of Bootstrap comeswhen you start to look at the way that Bootstrap organizesinformation and lays things out. So Bootstrap’s layout system uses acolumn-based model where the website is divided into– or each row in thewebsite, you might think, is divided into 12 individual columns. And you can control how manycolumns different things take up, recognizing that 12 columns is sort ofthe full width of your entire website.So let’s take a look at column0.html. So inside the body of this website,here’s what we have going on. I have a div whose class is row. Row is a special class inBootstrap that just means, this is going to be arow of my page that’s ultimately divided into 12 columns. And here are my individualdivs within that row where each one has a class of col-3. And col-3, in this case, just standsfor, this is a column that’s going to take up threecolumns’ worth of space. So if I have a 12-column page, I canhave four things that each take up three columns’ worth of space. And that’s ultimately goingto make up my entire row. So this is a section, another section,a third one, and a fourth one. And I’ve added somestyling to it in order to make it look a little bit nicer. I’ve added some padding on the outside,a background color, and a border. And you’ll see what thatlooks like in just a moment.So if I open up column0.html,you can see that, now, I’ve got these four sections, these fourindividual columns that are each taking up three out of the 12 totalcolumns that are on the Bootstrap grid layout. And notice, if I shrink it down,some of the spacing goes away. You’ll notice thingsautomatically adjust a little bit. So it’s designed to be verymobile-responsive out of the bat. I didn’t write any of the codeor the CSS to help things resize and rearrange when thescreen size changes. Bootstrap’s doing that all for me. So that’s four columns. But really, what I wouldlike is for these columns to move around dependingon the size of the screen, that I don’t just wantit to be four columns. Because once it gets to a reallynarrow device, these four columns, if there’s a lot ofcontent in them, this is going to look reallysqueezed together so to speak. So what might I do about that? Well, in this case, let’stake a look at columns1.html. This is very, verysimilar, almost the same, with a couple of changes inside the row.Before every class inside these divsinside my row, we had a class of col-3 for, we want this column totake up three out of the 12 possible columns that are presentinside of the Bootstrap grid layout. In this case, I’ve done somethinga little more sophisticated. I said, “col-lg-3” and “col-sm-6.” In other words, on a largescreen where Bootstrap has defined for me whatcounts as a large screen by taking a look at what typicalcomputer displays look like, what mobile displays look like,what tablet displays look like– but on a large screen, I want this divto take up three columns out of the 12 on my screen– in other words, a quarterof the total width. But on a small device, I wouldrather it take up six out of the 12, or half of the totalwidth of the screen.And likewise, I did the same thing foreach one of these individual columns within this row. And so on a large screen, we havecol-lg-3, large 3, large 3, large 3, where each column will take upthree out of the 12 possible columns in the Bootstrap grid model,whereas on a small screen, each one will take up half of thetotal width of my Bootstrap grid. So what does that look like? What’s the impact of this when I tryand render this website and look at it? If I open up columns1.html, on a largescreen, it looks exactly the same. I’ve got one column,two, three, and four, where each column is taking up threeout of the 12 available column spaces that Bootstrap provides to me. But as I make this smaller, whatyou’ll notice is that once it gets to a certain point–in this case, here– it changes from four columns allin a row to two columns on each row where, before, here, on alarge screen, each column was taking up three out ofthe 12 possible columns that were available in Bootstrap.But on a smaller screen, eachone’s taking up half of that width. And the result of that is thatthe latter two columns, which don’t fit within the 12, get moved ontoanother line entirely of their own. So I could have done thisusing flexbox like I showed you a moment before, where thingsstart wrapping onto other lines as I start to reduce it. But Bootstrap, which isactually written using flexbox, sort of abstracts thataway and lets us just take advantage of defining howwide we want our columns to be on different size devices. And Bootstrap takes care of therest of making sure that things get rendered the way that we want them to. Question? AUDIENCE: [INAUDIBLE] BRIAN YU: Question– yeah, so Bootstrapdoes define classes within it.AUDIENCE: What happens if I [INAUDIBLE]? BRIAN YU: Great question. So the question is, Bootstrap definesa whole bunch of these classes. It defines row, and col-lg-3, andcol-sm-6, and so on and so forth. What happens if I, in my CSS files,am also using col-lg-3 or row as CSS? And generally speaking, your web browseris able to take multiple CSS files and try and reconcile them somehow byapplying all of the styling together. But if the stylingconflicts, if Bootstrap says this row should havethis width, but you say the row should have someother width, then one of them ultimately needs to take precedence. And generally speaking, theone that takes precedence is the one that is more specific. So if you had said that, Iwant the styling to apply to any row that is a child of some otherthing, then that will take precedence over just a generic, I want rowsto be styled in a particular way. But generally speaking, it’sa good idea to be mindful.And if you were definingclasses of your own, oftentimes it’s a good idea to givethem different names from the ones that Bootstrap does just to avoidhaving that conflict at all. AUDIENCE: [INAUDIBLE]class in Bootstrap. BRIAN YU: Correct, containeris a class in Bootstrap. AUDIENCE: [INAUDIBLE] BRIAN YU: Yeah, Bootstrap– AUDIENCE: [INAUDIBLE] BRIAN YU: So if you want totake the Bootstrap classes and add your own stylingto them, you can sort of override Bootstrap, so tospeak, by adding CSS code that refers to Bootstrap’s classes. But you can add additionalstyling of your own to them to make them display theway that you want them to display. And you can experimentaround with that to see how that ends up actually working. But Bootstrap, in addition toproviding this grid layout, also has a host of other features. And we’re not going have timeto go through all of them.But I’ll show you a coupleof interesting ones here. For instance, Bootstrap makes itvery easy to create alert messages. So these are some sample messages, justgeneric news, good news, and bad news. And in order to create thosealert messages, all I needed to do was apply particular classes. So the class alert and alert-primarywill automatically style something as a blue alert message. An alert alert-success willautomatically style it is a green one. And alert, dash,alert-danger automatically styles it as a red message.And so this makes it very easyto add these alerts to my code, because Bootstrap has alreadywritten the styling for how to make them display in a way that looks nice. | if you’re curious and you want touse more of Bootstrap’s elements, you can go to Bootstrap’s website,which, I believe, is getbootstrap.com. And if you go to their documentationon Bootstrap’s website, you can look at all of their components. So here, what we just sawwere Bootstrap’s alerts. You can see all of Bootstrap’s alerts. And here is the code thatyou can just copy and paste in order to create alertsthat look in a particular way. Bootstrap also has specialstyling for buttons, buttons that appear in differentcolors and different sizes. And they tell you whatclasses to add to your buttons in order to make your buttonsstyled in a particular way to make them look a little bit nicer.And there’s a whole lot ofother features and styling that Bootstrap adds. You can just scroll throughthis list and get a sense for some of the featuresthat Bootstrap gives to you. And by using some ofthese features, you can start to make yourwebsite look a lot nicer much more quickly by taking advantage ofthe work that Bootstrap’s already done. So one last topic that I wanted totalk about today with regards to CSS and how we might goabout styling our website is what happens when our stylesheetsstart to get a little more complicated and get a little more sophisticated.So I want to take a lookat variables.html here. And you’ll see why it’s called”variables” in a moment. But right now I have, inside ofvariables.html, an unordered list, a ul, and an ordered list, an ol. And let’s take a look at a sampleCSS file that I might use in order to style this variables.html file. I have ul, which is set to font-size– 14 pixels, and color is red,and ol, which is font-size– 18 pixels, and color is also red.So these two lists are going to bedisplayed in different-sized fonts, but I want their color,ultimately, to be the same. I want their color torender as red either way. What if– and maybe that’s becausethe generic style of my website is that I like the color red, and I wantmy web page to render things as red. But what if, later on down theline, I decide, well, wait a minute, I’d really rather that by listbe blue instead, instead of red. In this case, I would need togo back to two different places, to the unordered list, and change thecolor to blue, and the ordered list, and change that color to blue as well.And you can imagine, in amore complicated website, if I had dozens of different examplesof CSS styling in particular colors, I might need to go through all of themand change those individual colors. And it might not be as drasticof a change as red to blue. It might be just a slight shadeof red that you want to change, and you want to change it inmany, many different places. And having to change itindependently on each separate line is ultimately going tostart getting tedious. And remember, we talkedabout before, if you ever find yourself repeating thesame thing over, and over, and over, you should always thinkabout, is there a better way to do it.Is there something elsewe can be doing instead? And if you’re familiar withprogramming and programming languages like C, or Python, orany other language, then you might be familiarwith the concept of variables, where we assign avariable of value once, and then we can reuse it multiple times. And if we change that variable’svalue, then that variable’s value is changed everywhere, so to speak. And so what we’re going to do now isintroduce an entirely new language which is built on topof CSS called Sass. And what Sass is isit’s an extension to CSS that gives us a little more powerand a little more flexibility when it comes to designing CSS stylesheetsthat lets us programmatically generate stylesheets in a more advancedand more powerful way.But ultimately you’ll seethat the concepts here are just to make it easier togenerate the stylesheets that we want to generate. So instead of variables.css, I’mgoing to look at variables.scss, where .scss is the typicalextension for a Sass file, which is going to be some specificextension to CSS that we’re going to explore in a moment. So what’s going on in variables.scss? Well, the first thing I do online 1 is define a variable. We haven’t previously had any variablesin CSS, because CSS, out of the box, doesn’t really supportthe idea of a variable. But Sass, this extension to CSS, does. And so how does it work? On line 1, I said $color– all variables in Sassbegin with a dollar sign– $color, colon, red.So I’m defining a new variable. It’s called color. And its value is going to be red. And then, here’s what’s happening. I have my unordered list,whose font size is 14 pixels. And the color– instead ofsaying red is the color, I’m saying $color, meaning$color was this variable that I defined to be red before. Whatever color that is, that’s thecolor I want my unordered list to be. What about my ordered list? Well, the font size isgoing to be 18 pixels, and the color is alsogoing to be whatever the value of this color variable is. And so by doing this, I get thesame effect– an unordered list that’s 14 pixels in font size and red. And same is true for the ordered list– 18 pixels in size, and the color isalso going to be red– no different. But I faced a problem. Can anyone guess what the problem mightbe if I tried to just use this code and render it in the web browser? Do we think it will work? Yeah? AUDIENCE: [INAUDIBLE] BRIAN YU: Oh, is there, like, aparticular CSS property called color? That’s not going tobe a big deal for us, but that’s a good point, that we wantto be careful about naming things.But ultimately our web browsersare trained to understand CSS, and they know how CSS works. But web browsers don’t, out of the box,understand Sass, this extension to CSS, where we have variables in there. So our web browsers aregoing to start to complain if we just put this inside of a CSSfile and say we want this to render as the styling for the website. So what we need to do is takethis SCSS file, this Sass file, and convert it into a CSS file.And that’s why there’s a programcalled Sass, which does just that. And I’ll show you how it works. If I go into my variablesdirectory, what I have here is a variables.scss file. And if I run sassvariables.scss variables.css, what that is going to do is it’sgoing to take my variables.scss file, and it’s going to compileit– turn it into– a CSS file that my web browser isgoing to be able to understand. So I press Return. That compiled it. And now if I take alook at it, I see I now have a variables.css file,which I didn’t have before. And I also have thisadditional map file. You don’t need to worrytoo much about that. But if you’re curious, that’sjust a way for your browser to understand the relationshipbetween the CSS and the SCSS file in case it wants to figure out– it’s useful for debugging orfiguring out what line something came from in the original file.But let’s look at this variables.cssfile, which I didn’t create. It was generated for me by Sass. What does it look like? So it looks, ultimately, like this. And it’s exactly what myprevious CSS file looked like. But it substituted thatcolor variable with the name, or whatever value that colorvariable was actually assigned to. So color is now red. Color is now red in both theunordered list and the ordered list. The fact that the curly brace is onthe same line instead of on a new line like we’ve been doing beforeis just that stylistic choice. It doesn’t actually make a differenceon the way that the page renders.But what I’ve done is I’ve usedthe variable from the SCSS file and compiled that file into a CSS file. And now this is something that my webbrowser can ultimately understand. So now if I go back to variables.htmland open up variables.html, what I get is an ordered list wherethe unordered list items are smaller than the ordered list items. But all of the list items are red. And now, if I wanted to change this–if I wanted to change the color from red to blue, for instance, rather thanchange it in two different places– or, and you imagine, ina larger-scale program, potentially dozens or hundreds ofplaces across your web application– all I need to do is changethis $color variable. I change it from redto blue, for example. And if I open variables.html,now it’s still red. I changed it to blue, but the stylingof the list items is still red. Why is that the case? Why did that happen? AUDIENCE: [INAUDIBLE] BRIAN YU: I need to recompile it, right.Because this HTML website isonly looking for variables.css. It doesn’t know anythingabout variables.scss, which is the file I’veactually been working with. So I need to run sassvariables.scss variables.css. That’s going to recompile my CSS filesuch that when I now refresh the page, now everything is blue. Now, as you’re developingwith SCSS, you might imagine that it’s going to start toget annoying fast, where every time you make a change to aSCSS file, you’re going to need to recompile it back into CSS.So Sass has some built-in features tohelp make this a little bit easier. One is that Sass can watch a file– in other words, keep track of the file,or even a directory full of files– and any time any of them changes,automatically recompile the CSS file. So if I said sass–watch variables.scss, and any time a change ismade to variables.scss, compile it to variables.css, nowSass is watching for changes. So now if I go back here and changethe color to green, for example, and I save that, if Icheck back here, Sass has automatically detected that I’vemade a change to variables.scss. And it’s written me a newversion of variables.css. So without me needing to manuallygo in and recompile that SCSS file, I can refresh the page. And now all of the list items are green. So that’s marginallybetter, that instead of needing to recompile the Sassfile every time I make a change, I can just tell Sass,watch all of my SCSS files.And whenever any of them change,automatically compile it to CSS for me. And an additional feature is thatmany website deployment systems, GitHub Pages included, have built-insupport for Sass such that if you push an SCSS file to GitHub Pagesin project 0, for instance, GitHub will automatically take care ofthe process of compiling that Sass file from a .scss file to a .css file suchthat when someone goes to your website, they will see the resulting CSSstyle applied to your website. And so many system nowadayshave built-in support for SCSS. They make it easy foryou to use Sass in order to have a little bit morecontrol over your styling in order to make websites really lookthe way that you want them to look. Questions about Sass sofar and what we’ve seen? Yeah? AUDIENCE: [INAUDIBLE] BRIAN YU: Great question. Do you need to install anythingin order to run the sass command? Yeah, you’ll need toinstall Sass in order to make any of that– the commandline sass command work that does the compilation from SCSS files to CSS.If you never want to dothe compilation yourself– if you want to just rely on GitHubto do that compilation for you– then you don’t need to install anything. You can just push an SCSSfile to GitHub Pages. And GitHub Pages will, onits own, convert it into CSS. But if you want to testthat compilation locally to see what the resulting CSS lookslike, then you’ll want to install Sass. It’s a freely available,pretty small piece of software that you can just installonto your computer the same way you installed Git or othersoftware in order to make that easier. Other questions? Yeah. AUDIENCE: What if Ihad multiple CSS files, like if we downloaded the BootstrapCSS file and I [INAUDIBLE] from that? BRIAN YU: Great question. So the question is, howdoes Sass work when we’re dealing with multiple different files? Sass has a built-incommand that actually lets you import existing CSS froma different file into a Sass file. So there’s built-in support formulti-file stylesheets built into Sass. We won’t see any examplesof that in this lecture. But if you go to theSass website, you’ll find examples of howthey’re able to incorporate different files intothe same file in order to use variables that aredefined in a different file in a separate stylesheet.Great question though. One more question? Yeah? AUDIENCE: [INAUDIBLE] BRIAN YU: Great question. So the question is, whenyou’re linking the file, do we want to link theCSS file or the SCSS file? We always want to link the CSS file,because the CSS file is the only one that the browser actually understands. Google Chrome, out of the box,doesn’t know how to take a Sass file and understand what the variables mean.It only understands the CSS file. So what we need to do issay, reference the CSS file, and then just make sure thatsomehow, either us doing it ourselves or letting GitHubPages do it for us, get that Sass file compiled downto CSS such that we can then use it for our own purposes. Excellent question though. So those are variables in Sass. But what other featuresdoes Sass give us? How else can we make thisa little more powerful? Well, one other featurethat’s very helpful is nesting different CSSselectors within each other.And I’ll show you anexample of that now. So here is nesting.html. So inside the body of nesting.html,I have a big div, inside of which is a paragraphinside the div, and also a list inside the div, an unorderedlist with three list items that are all inside of this div. And outside of thatdivision of the site, I have a paragraph that’soutside of the div and a list that’s also outside of the div– so sort of a trivial,contrived example, but just going to show you a bunch ofdifferent hierarchies via which we might organize different HTML elements. And I want to style themin a particular way. So let’s take a look at nesting.scss. And so here’s thecontents of nesting.scss. I have div font-size– 18 pixels. And then within the div’s curlybraces, I have an additional p.And what that p isstanding for is that I want this styling to apply to anyparagraphs that are inside of a div. Now, notice that thisisn’t anything we couldn’t have done before with just regular CSS. We could have said, on adifferent line, div, space, p and then color equals blue tosay paragraphs inside of a div should be colored blue. But nesting thingswithin each other just helps to organize things a little more. Especially as our stylesheets startto get longer and more complicated, we might find it easier toorganize our code into something like this where we can say, allright, how are we styling the div.Well, the font’s going to be 18. Any paragraphs within it should be blue. And any unordered listswithin it should be green. And that just helps to organizeour styles a little more such that, as they get longer,it gets easier to look at and easier to maintain. So when I compile that usingSass, which I’ve already done, I’ll show you with theresulting nesting.css file– or actually, I’ll do it now. I’ll go into my nesting directorywhere I have a nesting.scss fild. I’ll go ahead and compilenesting.scss to nesting.css. And we’ll take a look atwhat that file looks like. And what it’s ultimatelydone, it’s done exactly what we would have done before if wedidn’t have Sass at our disposal. It said div’s fontsize is going to be 18. And then where, before, wejust had p inside of the div, it’s changed that to div, space, p.In other words, all paragraphs containedwithin a div are going to be blue, and all unordered lists withinthe div are going to be green. But instead of needing tospecify this div every time, we were just able to enter scss,have a slightly simpler, slightly easier to look at interfacethat tells us how things are going to be styled inside the div. So if I open up nesting.html, what theresult is is that the paragraphs get styled as blue, thelist items get styled as green, but only the ones thatare inside of this part, which was that original div. And anything outside of it doesn’t getstyled in that particular way at all. So that nesting feature is justanother nice to have that Sass offers. Sass offers a number ofdifferent other features. But the last one that we’ll take a lookat today is the concept of inheritance. And inheritance is something youmay be familiar with if you’ve done programming before inobject-oriented programming languages like Java or Python. But inheritance inthe context of Sass is used to refer to when youhave some general styling that you might want to apply to awhole bunch of different things, but each of thosedifferent things you might want to be styled in aslightly different way.So if you think back toBootstrap for example, where we saw those alert messagesin Bootstrap where we had– I’ll open it up– where we had a blue alert, agreen alert, and a red alert, what if we wanted to create thissort of interface for ourselves without using Bootstrap where wewanted different alert messages that were different colors? Well, you might imagine there’s alot of styling that goes into this. There is a particularfont that they’re using. There’s a particularfont size that they’re using for all of these alert messages.But also, all of these alertmessages are different. This one’s blue, this one’sgreen, this one’s red. And as a result, they needslightly different CSS styling. But they’re fundamentally very similar. So there’s a lot they share in common. If we were to writeout the CSS by hand, we might have a lot ofrepetitive styling where we have the styling for thefirst alert message that got a lot of the same stuff, thena blue information, same thing for green and red. But with SCSS, we can usethe concept of inheritance to factor out all of thosecommonalities in order to make it easier andmore efficient to generate CSS that lets us havestyling that inherits from some overarching property. And so let’s take alook at what that looks like by opening up inheritance.html. So what I have here is, without usingBootstrap, I have three different divs. This is a success message. This is a warning message. This is an error message. One’s classes is success.One’s class is warning. One’s class is error. So those are my three classesthat I have to deal with. And I want to stylethem in a particular way so they show up sort oflike the Bootstrap alerts that we were lookingat just a moment ago. So let’s look up at inheritance.scssand see what’s going on here. So what I have here is this %message. And percent isn’t somethingwe’ve seen before. It’s something specific to Sass.And it lets us define,effectively, a template, something that other things aregoing to inherit from. And this is just goingto be a generic message– whether it’s a success,of a failure, or an info message, just a generic message. And that message has aparticular font family. It’s going to be a sans-serif font. It has a particular font size, 18points, and it’s going to be bold. That message is going tohave a border around it, a 1-pixel solid blackborder around that message.And it will have certain spacing,20 pixels worth of padding, and then 20-pixel margin. And that styling, I wantit to apply to all three of my different categories of messages. Success messages, and errormessages, and info messages alike all should have that same styling. And so how do I do that? Well, this is the codethat I need, now, in Sass, in order to define those three classes. My success class, I justsay, extend message. Take all the styling from themessage before, and use it. But let’s additionally add that thebackground color is going to be green. Likewise, for the warningmessage, let’s extend the message. It’s going to have the samestyle properties as the message. But the background color is orange. And same with error, except now,the background color is red. If I now compile thatdown to CSS, the result is that I get CSS code that appliesthis generic styling to all successes, warnings, and errors, and thisspecific background color to success, and a specific backgroundcolor to warnings, and a specific background color to red– to errors.And again, none of this is stuff thatwe needed Sass to do, but using Sass makes it a little bit easier. It’s a little bit of a nicer semanticto say, here’s a generic message, here’s the styling for that message,and here are specific success, warning, and error messages thatare going to extend or inherit from thatmessage in order to add additional information,the result of which is a CSS file that we couldhave written ourselves but that gets generatedfrom the SCSS file. So if we now open upinheritance.html, this is what we get, a success message, a warningmessage, an error message. We see the spacing around each. We see the font size and the fontstyle that we wanted it to be. But the difference comesin the different classes.One is a success message,one is a warning message, one is an error message. And so those different types ofmessages have different CSS styling applied to them. And as a result, they appeara little bit differently. So questions about any ofthe Sass tools that we’ve seen so far, whether it was variables,or nesting elements within each other, or using inheritance toallow a generic style to be applied to multiple differenttypes of classes, or IDs, or elements? OK, if questions do comeup, feel free to reach out.And feel free to post inthe Slack and ask questions as you begin to dive into project 0. In project 0, you’ll havemore of an opportunity to experiment with someof this, to use Bootstrap, to make your web page mobile-responsive,and to begin to use Sass in order to create more advanced, moresophisticated stylesheets. Next week we’ll diveinto a look at Python, and how we actually create webapplications by writing in Python, and using some of the HTML and CSSwe’ve looked at in the last two weeks in order to do so. But for now, that’s it for WebProgramming with Python and JavaScript. Thank you all, andwe’ll see you next week.

digital marketing

As found on YouTube

Share this article

Leave a comment

Related Posts