1 00:00:00,000 --> 00:00:03,479 [MUSIC PLAYING] 2 00:00:03,479 --> 00:00:15,727 3 00:00:15,727 --> 00:00:19,060 BRIAN YU: Welcome back, everyone, to Web Programming with Python and JavaScript. 4 00:00:19,060 --> 00:00:21,290 Today we're going to continue where we left off from last week. 5 00:00:21,290 --> 00:00:24,370 So last week, if you recall, we talked about Git, a version control 6 00:00:24,370 --> 00:00:27,160 tool that lets us manage different versions of our project, 7 00:00:27,160 --> 00:00:29,830 and keep track whenever we make new changes to our project, 8 00:00:29,830 --> 00:00:33,020 and let us look back at the history of changes that we made to our project. 9 00:00:33,020 --> 00:00:34,811 And then we also took a look at HTML, which 10 00:00:34,811 --> 00:00:36,730 let us lay out a website how we wanted to, 11 00:00:36,730 --> 00:00:39,130 as well as CSS, or Cascading Style Sheets, 12 00:00:39,130 --> 00:00:42,030 which allowed us to take a web page, and style it in different ways, 13 00:00:42,030 --> 00:00:45,280 and change the aesthetics of the page in order to make it look the way that we 14 00:00:45,280 --> 00:00:46,180 want it to look. 15 00:00:46,180 --> 00:00:48,763 So this week we'll dive more in-depth into all three of those, 16 00:00:48,763 --> 00:00:51,400 focusing especially on HTML and CSS, and taking a look 17 00:00:51,400 --> 00:00:53,920 at how we can leverage these tools and some other tools 18 00:00:53,920 --> 00:00:56,470 to help make our websites even more dynamic 19 00:00:56,470 --> 00:00:59,860 to help them be designed the way that we want them to be designed. 20 00:00:59,860 --> 00:01:02,739 So the first thing that we'll take a look at is go back to Git. 21 00:01:02,739 --> 00:01:04,780 So if you remember from last week, Git was a tool 22 00:01:04,780 --> 00:01:06,550 that we were using in order to keep track 23 00:01:06,550 --> 00:01:08,440 of different versions of our project. 24 00:01:08,440 --> 00:01:11,920 And in particular, as we work on a project and continue to make changes, 25 00:01:11,920 --> 00:01:15,250 the term we used in Git was to make commits to our project. 26 00:01:15,250 --> 00:01:17,320 So we might start with a first commit that 27 00:01:17,320 --> 00:01:20,830 just contains initial files that we had when we started the project. 28 00:01:20,830 --> 00:01:23,671 And as we continue to work on the project and add new features, 29 00:01:23,671 --> 00:01:26,170 it's a good idea, when working with a version control system 30 00:01:26,170 --> 00:01:29,200 like Git, to frequently make commits when we make a new change, 31 00:01:29,200 --> 00:01:31,840 save those changes such that, later, we can refer back 32 00:01:31,840 --> 00:01:34,960 to them via a commit message that describes what changed 33 00:01:34,960 --> 00:01:37,574 in this particular version so that later on, we 34 00:01:37,574 --> 00:01:39,490 have a history of all of the changes that were 35 00:01:39,490 --> 00:01:41,370 made to the project at any given time. 36 00:01:41,370 --> 00:01:43,060 So we might continue to making changes. 37 00:01:43,060 --> 00:01:46,360 And what you might imagine is that this chain of different commits 38 00:01:46,360 --> 00:01:47,800 might start to get pretty long. 39 00:01:47,800 --> 00:01:51,460 So maybe we have a working project at this stage in the program, 40 00:01:51,460 --> 00:01:55,295 and we want to add a new feature to our web application, for example. 41 00:01:55,295 --> 00:01:57,670 So at this point, we might start working on a new feature 42 00:01:57,670 --> 00:01:58,931 here by adding another commit. 43 00:01:58,931 --> 00:02:02,180 We might make more progress on that new feature, keep working on that feature. 44 00:02:02,180 --> 00:02:04,763 But what if, at this point, while we're midway through working 45 00:02:04,763 --> 00:02:07,660 on some new feature to our existing web application, 46 00:02:07,660 --> 00:02:11,380 we realized that there was some sort of bug, some bug in our web application 47 00:02:11,380 --> 00:02:15,130 that occurred way back here that we want to quickly fix, so that we can ship out 48 00:02:15,130 --> 00:02:18,610 a new fix so that people aren't sitting with that bug for a long time? 49 00:02:18,610 --> 00:02:21,700 Well, this linear structure where, every time we make changes, we just 50 00:02:21,700 --> 00:02:23,800 save those changes one after another, that 51 00:02:23,800 --> 00:02:27,580 makes it pretty challenging to say, I want to fix a bug back here. 52 00:02:27,580 --> 00:02:31,420 We could, of course, reset, and go back to this stage, and fix the bug, 53 00:02:31,420 --> 00:02:33,471 and then keep working on the new feature. 54 00:02:33,471 --> 00:02:35,970 But we've already made these new changes to the new feature. 55 00:02:35,970 --> 00:02:39,010 So it sort of starts to get a little bit messy at this point. 56 00:02:39,010 --> 00:02:41,560 So Git has this in mind when it was first designed. 57 00:02:41,560 --> 00:02:43,840 And so that's why Git has a tool called branching. 58 00:02:43,840 --> 00:02:45,940 And what branching effectively allows us to do 59 00:02:45,940 --> 00:02:48,400 is, rather than just have a single linear progression 60 00:02:48,400 --> 00:02:51,490 of the entire project where each change always follows on the change 61 00:02:51,490 --> 00:02:54,610 immediately before it, and that's the only path that we have to follow, 62 00:02:54,610 --> 00:02:57,740 branching lets us take our project in multiple different directions. 63 00:02:57,740 --> 00:03:01,270 It lets us maintain one branch that will be our "master" 64 00:03:01,270 --> 00:03:04,660 branch, the original version of our code that's supposedly the version that's 65 00:03:04,660 --> 00:03:08,050 always usable, and then lets us have other branches that allow us to work 66 00:03:08,050 --> 00:03:10,960 on different features that are still in progress, and later, 67 00:03:10,960 --> 00:03:13,600 take those branches and work them into the original code. 68 00:03:13,600 --> 00:03:17,200 So to take an example, we might start with that same first commit 69 00:03:17,200 --> 00:03:19,070 and still continue to make changes. 70 00:03:19,070 --> 00:03:22,480 But when we're in a stable place and we want to try to add a new feature 71 00:03:22,480 --> 00:03:25,270 and start working on that new feature, rather than just add 72 00:03:25,270 --> 00:03:28,900 that feature immediately after it, what we can do is we can branch off, 73 00:03:28,900 --> 00:03:30,820 begin a new branch, and say, OK, let's start 74 00:03:30,820 --> 00:03:33,019 working on this new feature in a separate branch 75 00:03:33,019 --> 00:03:34,810 from the original project, and keep working 76 00:03:34,810 --> 00:03:37,600 on that new feature on that other separate branch. 77 00:03:37,600 --> 00:03:40,870 Then, at this point, if we come to that same realization, the realization 78 00:03:40,870 --> 00:03:43,990 that, oh, way back here, there was some bug in the code, some bug 79 00:03:43,990 --> 00:03:47,509 that we would want to fix, rather than try and reset, and go back 80 00:03:47,509 --> 00:03:50,050 here, and figure out how to get back to where we were before, 81 00:03:50,050 --> 00:03:54,190 we can just switch back over to this branch, fix the bug there. 82 00:03:54,190 --> 00:03:56,215 And that way, we're in a position where we now 83 00:03:56,215 --> 00:03:58,840 have these two separate branches, this one original branch that 84 00:03:58,840 --> 00:04:01,390 has that fixed bug, and then this other branch 85 00:04:01,390 --> 00:04:03,670 whereby we started working on a new feature, 86 00:04:03,670 --> 00:04:05,380 and we kept working on a new feature. 87 00:04:05,380 --> 00:04:07,510 And this is especially helpful if it's not just you 88 00:04:07,510 --> 00:04:09,093 that's working on the web application. 89 00:04:09,093 --> 00:04:12,520 If you and multiple other teammates are also working on the same application, 90 00:04:12,520 --> 00:04:14,440 you might imagine this as saying, you are 91 00:04:14,440 --> 00:04:18,310 working on one branch going off in one direction working on the project. 92 00:04:18,310 --> 00:04:20,980 And some other person, some collaborator you're working with, 93 00:04:20,980 --> 00:04:22,896 is sort of going off in a different direction, 94 00:04:22,896 --> 00:04:25,660 working on some different feature, but also on the same project. 95 00:04:25,660 --> 00:04:28,750 And later, when you're ready, you can do what Git calls "merging"-- 96 00:04:28,750 --> 00:04:30,880 in other words, taking two separate branches 97 00:04:30,880 --> 00:04:33,100 and then combining them together. 98 00:04:33,100 --> 00:04:34,490 So we might label these branches. 99 00:04:34,490 --> 00:04:36,448 This is what we would generally call the master 100 00:04:36,448 --> 00:04:39,700 branch, which is the default branch, the original branch that we started out 101 00:04:39,700 --> 00:04:40,210 with. 102 00:04:40,210 --> 00:04:42,490 And then these other branches, you can have as many as you want. 103 00:04:42,490 --> 00:04:43,970 You can name them whatever you want. 104 00:04:43,970 --> 00:04:46,136 In this case, I've just called this branch "feature" 105 00:04:46,136 --> 00:04:48,550 to represent the fact that this is a branch that's 106 00:04:48,550 --> 00:04:51,490 representing a new feature that we would want to potentially add 107 00:04:51,490 --> 00:04:53,740 to this existing web application. 108 00:04:53,740 --> 00:04:57,030 Git also has a bit of additional terminology that's useful to know. 109 00:04:57,030 --> 00:05:01,690 Git uses the capital phrase "HEAD" to refer to where we currently 110 00:05:01,690 --> 00:05:03,240 are in the repository. 111 00:05:03,240 --> 00:05:06,490 So if you're working on the project and you're currently working on the master 112 00:05:06,490 --> 00:05:09,850 branch, then HEAD points to master. 113 00:05:09,850 --> 00:05:12,430 In other words, where you are in the repository right now 114 00:05:12,430 --> 00:05:13,371 is the master branch. 115 00:05:13,371 --> 00:05:14,870 That's the code you're working with. 116 00:05:14,870 --> 00:05:17,910 But Git makes it very easy to change where HEAD is. 117 00:05:17,910 --> 00:05:20,160 If you wanted to go to the feature branch, 118 00:05:20,160 --> 00:05:23,670 or "check out" the feature branch, as Git would use with its terminology, 119 00:05:23,670 --> 00:05:25,800 you could very easily check out the feature branch 120 00:05:25,800 --> 00:05:27,383 moving the HEAD to the feature branch. 121 00:05:27,383 --> 00:05:29,571 And now you can continue working on that feature. 122 00:05:29,571 --> 00:05:32,070 And so only when you feel comfortable with the feature, when 123 00:05:32,070 --> 00:05:36,210 you feel comfortable with the bug fixes can you then merge the two together 124 00:05:36,210 --> 00:05:40,350 by having another commit that combines two previous branches and merges 125 00:05:40,350 --> 00:05:42,090 them back together into one. 126 00:05:42,090 --> 00:05:44,310 And so this concept of Git branching is very helpful 127 00:05:44,310 --> 00:05:47,370 whether you are working on different parts of your own web application 128 00:05:47,370 --> 00:05:49,619 and have different features that are happening at once 129 00:05:49,619 --> 00:05:52,680 that you want to develop separately but then combine together later, 130 00:05:52,680 --> 00:05:55,560 or if you and collaborators are working together on a project 131 00:05:55,560 --> 00:05:58,440 where it's very easy for you to work without having to worry 132 00:05:58,440 --> 00:05:59,820 about what someone else is doing. 133 00:05:59,820 --> 00:06:02,310 And only when you're both ready with your separate features 134 00:06:02,310 --> 00:06:04,710 do you then want to merge them together and figure out 135 00:06:04,710 --> 00:06:07,230 how to resolve any conflicts that might come about where 136 00:06:07,230 --> 00:06:09,180 you and another collaborator have potentially 137 00:06:09,180 --> 00:06:12,054 edited the same line of the same file, for example, that you can then 138 00:06:12,054 --> 00:06:15,512 deal with by resolving those merge conflicts like we saw last week. 139 00:06:15,512 --> 00:06:17,970 So we'll take a look at an example of that just to give you 140 00:06:17,970 --> 00:06:20,520 a sense for how this would actually work on the command line 141 00:06:20,520 --> 00:06:22,350 and how we would actually do branching. 142 00:06:22,350 --> 00:06:25,720 So I have, here, a Lecture 1 repository. 143 00:06:25,720 --> 00:06:33,900 And right now, inside of Lecture 1 is just a file called index.html. 144 00:06:33,900 --> 00:06:38,847 So index.html is, right now, just a test website that has title as "Test." 145 00:06:38,847 --> 00:06:40,680 And inside the body is just the word "test." 146 00:06:40,680 --> 00:06:42,900 This is just a sample website that we're going to use 147 00:06:42,900 --> 00:06:45,900 to demonstrate the idea of branching. 148 00:06:45,900 --> 00:06:49,562 So maybe I'm going to make a commit to this file. 149 00:06:49,562 --> 00:06:52,770 Instead of saying "test" in the body, let's say something a little bit nicer. 150 00:06:52,770 --> 00:06:55,500 Let's say "Hello, world!" 151 00:06:55,500 --> 00:06:57,690 So I've changed the message in the body. 152 00:06:57,690 --> 00:07:02,730 And now, on the command line, I'm going to git add index.html. 153 00:07:02,730 --> 00:07:04,950 I've made changes to index.html. 154 00:07:04,950 --> 00:07:08,130 These are changes that I want to track the next time that I make a commit. 155 00:07:08,130 --> 00:07:11,400 And now I can say git commit -m. 156 00:07:11,400 --> 00:07:13,530 I want to leave a message when I make this commit. 157 00:07:13,530 --> 00:07:18,667 And in this case, I want to say I changed the body message. 158 00:07:18,667 --> 00:07:20,250 So that's the change that I just made. 159 00:07:20,250 --> 00:07:22,830 Again, Git counts that as one insertion, one deletion. 160 00:07:22,830 --> 00:07:25,160 And so that commit is now made to this repository. 161 00:07:25,160 --> 00:07:27,660 But now say I want to test something a little bit different. 162 00:07:27,660 --> 00:07:29,785 I want to try something different, and I don't want 163 00:07:29,785 --> 00:07:31,830 to mess up my original master branch. 164 00:07:31,830 --> 00:07:37,620 Well, if I type "git branch" right now and press Return, what you'll see 165 00:07:37,620 --> 00:07:41,370 is a listing of all of the branches that are currently on my repository. 166 00:07:41,370 --> 00:07:44,610 And right now it's just this one branch, master. 167 00:07:44,610 --> 00:07:46,320 So that's the only branch that I have. 168 00:07:46,320 --> 00:07:48,070 But if I want to create a new branch, it's 169 00:07:48,070 --> 00:07:51,071 as simple as saying "git branch" followed by the name of some new branch 170 00:07:51,071 --> 00:07:51,861 that I want to add. 171 00:07:51,861 --> 00:07:53,790 So I want to add a new feature to my website. 172 00:07:53,790 --> 00:07:56,940 I might call that branch the feature branch, for example. 173 00:07:56,940 --> 00:07:57,900 So I press Return. 174 00:07:57,900 --> 00:08:00,410 And nothing seems to happen. 175 00:08:00,410 --> 00:08:03,660 But if I type "git branch" again to say, OK, let's take a look at the branches 176 00:08:03,660 --> 00:08:06,120 that I currently have in this repository, what are they, 177 00:08:06,120 --> 00:08:10,814 I'll see that we have a master branch, and we also have this feature branch. 178 00:08:10,814 --> 00:08:13,980 And the fact that the master branch is highlighted in green and has the star 179 00:08:13,980 --> 00:08:17,310 next to it tells me that this is the current branch that I'm currently on, 180 00:08:17,310 --> 00:08:19,450 and this feature branch is some other branch. 181 00:08:19,450 --> 00:08:21,840 So let's say I now want to move to the feature branch 182 00:08:21,840 --> 00:08:23,910 and start working on that. 183 00:08:23,910 --> 00:08:27,160 So I might say "git checkout," where "checkout" is the term that Git 184 00:08:27,160 --> 00:08:29,820 uses for saying, I want to move where I currently 185 00:08:29,820 --> 00:08:31,692 am in the repository to somewhere else. 186 00:08:31,692 --> 00:08:33,150 Right now I'm on the master branch. 187 00:08:33,150 --> 00:08:36,514 I want to move to the feature branch, for example. 188 00:08:36,514 --> 00:08:40,200 And so if I press Return here, it says "Switched to branch 'feature.'" And 189 00:08:40,200 --> 00:08:44,101 if I type "git branch" again here, you'll see that, now, 190 00:08:44,101 --> 00:08:46,350 feature branch is the one that's highlighted in green. 191 00:08:46,350 --> 00:08:47,933 It's the one with the star next to it. 192 00:08:47,933 --> 00:08:50,040 That is now the branch that I'm currently on. 193 00:08:50,040 --> 00:08:53,640 If I go back to the index.html file, nothing really seems to have changed. 194 00:08:53,640 --> 00:08:56,500 But now I can start to say, OK, let's add in a new feature. 195 00:08:56,500 --> 00:09:01,780 So here is a new feature, just another line to the website in this case. 196 00:09:01,780 --> 00:09:03,970 But I can go ahead and add and commit that. 197 00:09:03,970 --> 00:09:07,200 And a quick trick that we talked about briefly last week 198 00:09:07,200 --> 00:09:13,660 is that you can say "git commit -am" to combine the git add step and the git 199 00:09:13,660 --> 00:09:18,407 commit step into one step. git commit -am just says, add all of the files 200 00:09:18,407 --> 00:09:20,490 that I've changed that I've already been tracking, 201 00:09:20,490 --> 00:09:21,964 and commit them at the same time. 202 00:09:21,964 --> 00:09:23,880 Just combines those two steps into one in case 203 00:09:23,880 --> 00:09:25,504 you want to be a little more efficient. 204 00:09:25,504 --> 00:09:29,757 And now I added another line. 205 00:09:29,757 --> 00:09:31,590 So that's the change that I just made there. 206 00:09:31,590 --> 00:09:35,160 And that's now on my feature branch, right, where I have "Hello, world!" 207 00:09:35,160 --> 00:09:36,870 and "Here is a new feature." 208 00:09:36,870 --> 00:09:38,340 If I were to-- 209 00:09:38,340 --> 00:09:40,650 now, if my current branches are feature and master, 210 00:09:40,650 --> 00:09:44,250 if I were to check out the master branch again, go back to the master branch 211 00:09:44,250 --> 00:09:48,570 before, what you'll notice is that, now that I'm back on branch master 212 00:09:48,570 --> 00:09:50,970 and I go back to index.html, this file now 213 00:09:50,970 --> 00:09:54,630 shows me the version of the file that is on the master branch that only has this 214 00:09:54,630 --> 00:09:59,490 "Hello, world!" line and doesn't have that second line that I added, 215 00:09:59,490 --> 00:10:02,430 which means that that other change isn't on the master branch. 216 00:10:02,430 --> 00:10:04,350 It's only on the feature branch. 217 00:10:04,350 --> 00:10:07,080 And as a result, it's not going to be represented here. 218 00:10:07,080 --> 00:10:09,450 I can see that even more clearly using a command 219 00:10:09,450 --> 00:10:11,420 that we learned last week, git log, which 220 00:10:11,420 --> 00:10:13,170 shows me the history of all of the commits 221 00:10:13,170 --> 00:10:14,870 that I've made on a particular branch. 222 00:10:14,870 --> 00:10:19,310 If I, here, now, on the master branch, type in "git log" for example, 223 00:10:19,310 --> 00:10:20,900 you'll see, here was my first file. 224 00:10:20,900 --> 00:10:22,610 And here I changed the body message. 225 00:10:22,610 --> 00:10:26,330 But those are the only two changes that I made on this particular branch. 226 00:10:26,330 --> 00:10:31,460 If I checkout the feature branch instead, switch to that branch, 227 00:10:31,460 --> 00:10:33,956 and type "git log" again, you'll see that now there 228 00:10:33,956 --> 00:10:35,330 are three commits on this branch. 229 00:10:35,330 --> 00:10:38,330 There was the first file, the change to the body message, and the fact 230 00:10:38,330 --> 00:10:41,230 that I added another line there as well. 231 00:10:41,230 --> 00:10:43,710 And so this goes to show that different branches can 232 00:10:43,710 --> 00:10:45,460 have different commits working on them, so 233 00:10:45,460 --> 00:10:47,810 to touch that you can be working on different features 234 00:10:47,810 --> 00:10:49,370 separately without needing to worry about what's 235 00:10:49,370 --> 00:10:50,974 happening on a different branch. 236 00:10:50,974 --> 00:10:52,890 So now we've been working on these separately. 237 00:10:52,890 --> 00:10:54,900 Now we want to combine them back together. 238 00:10:54,900 --> 00:10:57,907 So let me go ahead and switch back to the masker branch. 239 00:10:57,907 --> 00:11:00,740 And remember now, in the master branch, it just says "Hello, world!" 240 00:11:00,740 --> 00:11:02,000 just the simple message. 241 00:11:02,000 --> 00:11:05,390 If I now want to take what was previously on the feature branch 242 00:11:05,390 --> 00:11:09,080 and merge it into the master branch, while on the master branch, 243 00:11:09,080 --> 00:11:12,551 I'm going to type "git merge" followed by the name of the branch 244 00:11:12,551 --> 00:11:13,550 that I want to merge in. 245 00:11:13,550 --> 00:11:15,440 In this case, that's the feature branch. 246 00:11:15,440 --> 00:11:18,315 And that's saying, take those commits that are on the feature branch, 247 00:11:18,315 --> 00:11:21,840 and let's merge them into the master branch. 248 00:11:21,840 --> 00:11:23,180 So git merge feature-- 249 00:11:23,180 --> 00:11:24,350 one file changed. 250 00:11:24,350 --> 00:11:25,580 There was one insertion. 251 00:11:25,580 --> 00:11:26,600 That makes sense. 252 00:11:26,600 --> 00:11:31,070 And now, even though I'm on my master branch, if I check the file, 253 00:11:31,070 --> 00:11:33,684 I see that second additional line that was added there. 254 00:11:33,684 --> 00:11:35,600 And so different branches can work separately. 255 00:11:35,600 --> 00:11:38,120 But when I'm ready, I can merge those changes together. 256 00:11:38,120 --> 00:11:39,590 In this case, it was a very simple change. 257 00:11:39,590 --> 00:11:41,798 But sometimes those changes could be more complicated 258 00:11:41,798 --> 00:11:44,030 and might require resolving those merge conflicts. 259 00:11:44,030 --> 00:11:46,521 But that allows you to assist yourself in the development 260 00:11:46,521 --> 00:11:49,520 process whether you're working alone or with collaborators, just to make 261 00:11:49,520 --> 00:11:51,560 that process a little bit easier. 262 00:11:51,560 --> 00:11:53,660 Questions about branching or merging? 263 00:11:53,660 --> 00:11:54,570 Yeah. 264 00:11:54,570 --> 00:11:56,450 AUDIENCE: [INAUDIBLE] 265 00:11:56,450 --> 00:12:00,950 266 00:12:00,950 --> 00:12:01,700 BRIAN YU: Correct. 267 00:12:01,700 --> 00:12:02,340 Great question. 268 00:12:02,340 --> 00:12:05,450 So the question is, if I create a branch on my computer, what 269 00:12:05,450 --> 00:12:10,460 happens to the GitHub repository where I originally cloned the code from? 270 00:12:10,460 --> 00:12:13,370 So the answer to that question is, when I create a branch locally 271 00:12:13,370 --> 00:12:16,370 on my own computer, it only exists on my computer. 272 00:12:16,370 --> 00:12:19,880 It doesn't yet exist on GitHub until I push it to GitHub in order 273 00:12:19,880 --> 00:12:22,390 to tell GitHub that that new branch exists. 274 00:12:22,390 --> 00:12:24,147 And in fact, we can show you that. 275 00:12:24,147 --> 00:12:25,730 I'll show you that right now actually. 276 00:12:25,730 --> 00:12:27,350 So if I-- 277 00:12:27,350 --> 00:12:29,570 I'm going to go ahead and reset what I did before. 278 00:12:29,570 --> 00:12:32,950 I'm just going to remove the lecture1 repository. 279 00:12:32,950 --> 00:12:35,450 And we'll just restart it, just to give you a demonstration. 280 00:12:35,450 --> 00:12:40,140 If I go to github.com/student50/lecture1, 281 00:12:40,140 --> 00:12:42,380 this is the GitHub page for this repository. 282 00:12:42,380 --> 00:12:44,070 And I want to clone this repository. 283 00:12:44,070 --> 00:12:45,740 I'm just starting from scratch here. 284 00:12:45,740 --> 00:12:47,570 I'll go to the Clone or Download button. 285 00:12:47,570 --> 00:12:53,370 I'll take this link, copy it, and then say "git clone" followed by that link. 286 00:12:53,370 --> 00:12:55,762 That's going to clone the lecture1 repository. 287 00:12:55,762 --> 00:12:57,470 And if I go into the lecture1 repository, 288 00:12:57,470 --> 00:12:59,660 I only have a master branch. 289 00:12:59,660 --> 00:13:02,660 But now let's say I want to add a new branch. 290 00:13:02,660 --> 00:13:05,480 Let's add a feature branch. 291 00:13:05,480 --> 00:13:08,740 And on this feature branch, I'm going to first checkout the feature branch 292 00:13:08,740 --> 00:13:11,280 so that I'm on the feature branch. 293 00:13:11,280 --> 00:13:15,170 And now I'm going to say-- 294 00:13:15,170 --> 00:13:17,640 let's go ahead and open up index.html. 295 00:13:17,640 --> 00:13:18,890 Right now it just says "Test." 296 00:13:18,890 --> 00:13:21,380 This was the original contents of that repository. 297 00:13:21,380 --> 00:13:26,540 I'm going to change that to say "Here is the new branch contents." 298 00:13:26,540 --> 00:13:30,380 So this is the new version that I want to add to this feature branch. 299 00:13:30,380 --> 00:13:34,880 And I'll go ahead and git add index.html and commit that change-- 300 00:13:34,880 --> 00:13:38,690 so "New branch contents." 301 00:13:38,690 --> 00:13:41,094 And now if I try to git push-- 302 00:13:41,094 --> 00:13:43,010 remember, before, that git push is the command 303 00:13:43,010 --> 00:13:45,530 that I use to take the changes that I made on my computer 304 00:13:45,530 --> 00:13:47,194 and make them reflect on GitHub-- 305 00:13:47,194 --> 00:13:49,610 you'll notice that what I get is this strange message that 306 00:13:49,610 --> 00:13:54,080 says "The current branch feature has no upstream branch." 307 00:13:54,080 --> 00:13:58,130 And what that means is that I've created a new branch, feature, on my computer. 308 00:13:58,130 --> 00:14:02,540 But there is no corresponding branch on GitHub that I can push to yet, right? 309 00:14:02,540 --> 00:14:04,400 GitHub only has a master branch. 310 00:14:04,400 --> 00:14:07,730 And on my computer, I have both a master branch and a feature branch. 311 00:14:07,730 --> 00:14:11,030 So if I want to push to GitHub and say, all right, push to GitHub, 312 00:14:11,030 --> 00:14:13,730 but push to a new branch on GitHub called feature, 313 00:14:13,730 --> 00:14:18,500 then I'll run this command here, git push --set-upstream. 314 00:14:18,500 --> 00:14:22,670 So when I push up to GitHub, what branch do I want to push it to? 315 00:14:22,670 --> 00:14:25,140 And I want to push it to the feature branch. 316 00:14:25,140 --> 00:14:27,830 So that's just copying this command right here. 317 00:14:27,830 --> 00:14:31,876 And so when I do that, I have now pushed that new branch up to GitHub. 318 00:14:31,876 --> 00:14:34,250 And if I refresh this page-- or even if I don't refresh-- 319 00:14:34,250 --> 00:14:36,740 it tells me that I've pushed a new branch, feature. 320 00:14:36,740 --> 00:14:40,280 And I can click on that feature branch to see that, on the feature branch, 321 00:14:40,280 --> 00:14:42,380 I have the new branch contents. 322 00:14:42,380 --> 00:14:46,400 But if I switch from the feature branch back to the master branch, 323 00:14:46,400 --> 00:14:48,387 this just has the original test contents. 324 00:14:48,387 --> 00:14:50,970 So you can take your existing branches and push them to GitHub 325 00:14:50,970 --> 00:14:55,130 as well such that GitHub can help manage all of those branches too. 326 00:14:55,130 --> 00:14:58,519 Other questions about Git, branching, or merging? 327 00:14:58,519 --> 00:15:00,435 AUDIENCE: [INAUDIBLE] 328 00:15:00,435 --> 00:15:02,955 329 00:15:02,955 --> 00:15:03,580 BRIAN YU: Yeah. 330 00:15:03,580 --> 00:15:07,180 So if you look at the URL here in GitHub, 331 00:15:07,180 --> 00:15:09,700 it tells you the name of the person who owns 332 00:15:09,700 --> 00:15:12,440 the repository, the name of the repository itself. 333 00:15:12,440 --> 00:15:16,960 And then, here is master, which is just the name of the branch 334 00:15:16,960 --> 00:15:17,885 that I'm currently on. 335 00:15:17,885 --> 00:15:20,260 And so when you navigate through GitHub's user interface, 336 00:15:20,260 --> 00:15:24,272 you will see the different names of the branches show up in the URL 337 00:15:24,272 --> 00:15:25,480 as you go to different pages. 338 00:15:25,480 --> 00:15:26,875 AUDIENCE: On the front page. 339 00:15:26,875 --> 00:15:27,852 340 00:15:27,852 --> 00:15:30,560 BRIAN YU: Oh, so the question is, what happens on the front page? 341 00:15:30,560 --> 00:15:33,759 On the front page, by default, there's a default branch that GitHub uses. 342 00:15:33,759 --> 00:15:35,300 And usually that's the master branch. 343 00:15:35,300 --> 00:15:39,350 You have the ability to change what that default original branch is. 344 00:15:39,350 --> 00:15:41,942 But generally speaking, it will be the master branch. 345 00:15:41,942 --> 00:15:43,910 AUDIENCE: [INAUDIBLE] 346 00:15:43,910 --> 00:15:57,532 347 00:15:57,532 --> 00:15:58,240 BRIAN YU: Oh, OK. 348 00:15:58,240 --> 00:16:02,620 So the question is, in project 0, we're working with GitHub Pages, which 349 00:16:02,620 --> 00:16:05,020 lets us take websites and deploy them to the internet 350 00:16:05,020 --> 00:16:07,239 just by pushing them to a GitHub repository. 351 00:16:07,239 --> 00:16:09,280 The way that GitHub Pages works is that it's only 352 00:16:09,280 --> 00:16:12,520 deploying to the internet from a particular branch. 353 00:16:12,520 --> 00:16:15,970 So when you set up GitHub Pages in the Settings page of your repository, 354 00:16:15,970 --> 00:16:18,910 you had to tell GitHub, I want to upload files 355 00:16:18,910 --> 00:16:22,480 to the internet based on the contents of the master branch, for example. 356 00:16:22,480 --> 00:16:25,600 Or you could specify which branch you wanted. 357 00:16:25,600 --> 00:16:27,910 And so as a result, anything that's on any other branch 358 00:16:27,910 --> 00:16:30,820 isn't going to be reflected on the internet 359 00:16:30,820 --> 00:16:32,920 if you just go to the GitHub Pages website. 360 00:16:32,920 --> 00:16:35,920 What you'll need to do is test the changes on your own 361 00:16:35,920 --> 00:16:36,970 on your own computer. 362 00:16:36,970 --> 00:16:38,290 And when you feel comfortable with them, when 363 00:16:38,290 --> 00:16:40,873 those are the changes that you want to deploy to the internet, 364 00:16:40,873 --> 00:16:43,000 then you can merge them into the master branch. 365 00:16:43,000 --> 00:16:47,500 And that will be what ultimately gets deployed to the internet. 366 00:16:47,500 --> 00:16:52,510 Other questions about Git, or GitHub, or branches? 367 00:16:52,510 --> 00:16:53,165 OK. 368 00:16:53,165 --> 00:16:56,360 A couple other topics just to talk about briefly-- 369 00:16:56,360 --> 00:16:58,480 so these were sort of the key commands that we 370 00:16:58,480 --> 00:17:02,075 were using when regarding to branching in Git. git branch, If we don't 371 00:17:02,075 --> 00:17:04,450 have anything after it, just shows us all of the branches 372 00:17:04,450 --> 00:17:05,548 that we currently have. 373 00:17:05,548 --> 00:17:07,839 If we have git branch followed by the name of a branch, 374 00:17:07,839 --> 00:17:09,190 that creates a new branch. 375 00:17:09,190 --> 00:17:12,291 git checkout lets us change where we currently are in the repository. 376 00:17:12,291 --> 00:17:14,290 We can change from one branch to another branch, 377 00:17:14,290 --> 00:17:16,060 or even one commit to another commit. 378 00:17:16,060 --> 00:17:19,270 And then, git merge allows us to take two separate branches 379 00:17:19,270 --> 00:17:22,680 and combine them back together. 380 00:17:22,680 --> 00:17:24,970 OK, so a couple other things to talk about-- 381 00:17:24,970 --> 00:17:26,530 next is the concept of remotes. 382 00:17:26,530 --> 00:17:28,450 This is something we've already been using. 383 00:17:28,450 --> 00:17:31,900 But we haven't really looked at how exactly it's working. 384 00:17:31,900 --> 00:17:33,700 The concept of Git remotes is just the idea 385 00:17:33,700 --> 00:17:36,280 that we can have a version of the repository that's 386 00:17:36,280 --> 00:17:39,460 stored somewhere else on the computer, in particular-- or stored somewhere 387 00:17:39,460 --> 00:17:41,500 else on the internet, in particular-- on GitHub, 388 00:17:41,500 --> 00:17:44,140 for instance, if we're cloning the repository from GitHub. 389 00:17:44,140 --> 00:17:47,282 And so if you've been working with GitHub in project 0, for example, 390 00:17:47,282 --> 00:17:49,240 and you keep seeing the word "origin" show up-- 391 00:17:49,240 --> 00:17:52,040 it showed up just a moment ago when I was trying to push to a new branch, 392 00:17:52,040 --> 00:17:52,810 for example-- 393 00:17:52,810 --> 00:17:55,340 that origin is just the name of a remote, 394 00:17:55,340 --> 00:17:58,180 a version of the repository that lives somewhere else. 395 00:17:58,180 --> 00:18:00,610 I have one version of the repository on my computer, 396 00:18:00,610 --> 00:18:02,890 and the remote is some version of the repository that 397 00:18:02,890 --> 00:18:05,210 exists on GitHub, for example. 398 00:18:05,210 --> 00:18:07,279 And so how does that work? 399 00:18:07,279 --> 00:18:09,070 Well, I have some version of the repository 400 00:18:09,070 --> 00:18:10,570 that, maybe, has four commits on it. 401 00:18:10,570 --> 00:18:12,819 And this is the remote version, the version on GitHub, 402 00:18:12,819 --> 00:18:14,440 that might be a little bit later. 403 00:18:14,440 --> 00:18:17,102 And both my version of the repository and the remote 404 00:18:17,102 --> 00:18:18,310 both have their own branches. 405 00:18:18,310 --> 00:18:21,610 We saw before that I might have two branches even though GitHub might only 406 00:18:21,610 --> 00:18:22,990 have one branch going on. 407 00:18:22,990 --> 00:18:26,200 And this branch might be further along in terms of the commit history 408 00:18:26,200 --> 00:18:28,030 than my current branch is. 409 00:18:28,030 --> 00:18:33,040 And so if I wanted to work with this remote version of the repository, what 410 00:18:33,040 --> 00:18:36,190 I might do is run a command called git fetch, which just means, 411 00:18:36,190 --> 00:18:39,520 go to the remote, this online version of the repository, 412 00:18:39,520 --> 00:18:41,860 and download all of the latest commits. 413 00:18:41,860 --> 00:18:43,990 And so when I run git fetch, it's going to take 414 00:18:43,990 --> 00:18:47,620 those commits from the origin, this version of the repository stored 415 00:18:47,620 --> 00:18:50,770 on GitHub, and download them locally so that, now, I 416 00:18:50,770 --> 00:18:56,110 have this origin/master branch, the master branch from my origin remote. 417 00:18:56,110 --> 00:18:59,440 And I have my current master branch, which is still here. 418 00:18:59,440 --> 00:19:02,080 So master is where I am in my repository. 419 00:19:02,080 --> 00:19:06,280 And so if, now, I want my master branch to be updated to reflect the latest 420 00:19:06,280 --> 00:19:08,830 changes, the command to do that is to sort of 421 00:19:08,830 --> 00:19:14,050 say I want to merge where I am with where origin master is. 422 00:19:14,050 --> 00:19:17,000 And so if you do git merge origin/master, 423 00:19:17,000 --> 00:19:19,690 that causes your master branch to be updated to reflect 424 00:19:19,690 --> 00:19:21,220 the latest version of the origin. 425 00:19:21,220 --> 00:19:25,480 But this process is so frequent-- the process of, download the latest commits 426 00:19:25,480 --> 00:19:28,510 and move myself to the latest commit based on the master branch 427 00:19:28,510 --> 00:19:29,410 of the origin-- 428 00:19:29,410 --> 00:19:32,860 that these two commands can be simplified into just the command git 429 00:19:32,860 --> 00:19:33,559 pull. 430 00:19:33,559 --> 00:19:36,100 But if you're ever wondering what git pull is actually doing, 431 00:19:36,100 --> 00:19:36,850 this is what's happening. 432 00:19:36,850 --> 00:19:39,760 It's downloading, or fetching, the latest commits from the origin. 433 00:19:39,760 --> 00:19:43,240 And then it's sort of fast-forwarding yourself on the master branch 434 00:19:43,240 --> 00:19:47,114 to match up with the latest commit on the origin master branch. 435 00:19:47,114 --> 00:19:48,530 But that's what git pull is doing. 436 00:19:48,530 --> 00:19:51,820 And that's what allows you to manage that remote repository 437 00:19:51,820 --> 00:19:54,820 and move yourself to the latest version. 438 00:19:54,820 --> 00:19:57,540 OK, couple other concepts that are sort of specific to GitHub 439 00:19:57,540 --> 00:20:00,498 that may prove useful to you as you start to work on the projects-- one 440 00:20:00,498 --> 00:20:01,750 is the concept of forks. 441 00:20:01,750 --> 00:20:05,350 So a fork of a repository is just an entirely separate version 442 00:20:05,350 --> 00:20:08,300 of that repository that gets copied based off an original. 443 00:20:08,300 --> 00:20:11,680 So what you saw in project 0, if you started-- or if you haven't started, 444 00:20:11,680 --> 00:20:13,180 you'll take a look at it this week-- 445 00:20:13,180 --> 00:20:16,960 is that we create a new repository for you that's going 446 00:20:16,960 --> 00:20:19,020 to store the contents of project 0. 447 00:20:19,020 --> 00:20:22,270 And the first thing that you'll want to do is create a fork of that repository 448 00:20:22,270 --> 00:20:25,284 where we have a version of the repository that belongs to us, 449 00:20:25,284 --> 00:20:27,200 and you are going to fork it-- in other words, 450 00:20:27,200 --> 00:20:31,210 create an entirely separate version of that repository that belongs to you. 451 00:20:31,210 --> 00:20:34,510 And so on that fork that you own, you can do whatever you want to it. 452 00:20:34,510 --> 00:20:37,750 You can add new branches, you can push to it, you can pull from it, 453 00:20:37,750 --> 00:20:39,340 and you can manage it entirely. 454 00:20:39,340 --> 00:20:43,850 And all of that won't affect the original version of the repository. 455 00:20:43,850 --> 00:20:46,180 So if you ever look at open source projects, projects 456 00:20:46,180 --> 00:20:48,640 that many people on the internet are contributing to, 457 00:20:48,640 --> 00:20:51,610 very frequently there will be one version of the repository that's 458 00:20:51,610 --> 00:20:53,190 the version of the repository. 459 00:20:53,190 --> 00:20:55,690 And different people that want to contribute to that project 460 00:20:55,690 --> 00:20:58,180 will each independently fork that repository-- 461 00:20:58,180 --> 00:21:00,250 take their own version of the repository, 462 00:21:00,250 --> 00:21:02,050 make their necessary changes to it. 463 00:21:02,050 --> 00:21:04,883 And when they like their changes, when they'd like for those changes 464 00:21:04,883 --> 00:21:07,780 to be merged back into the original version of the code, 465 00:21:07,780 --> 00:21:09,760 they'll submit what's called a pull request. 466 00:21:09,760 --> 00:21:12,100 And a pull request is just a fancy way of saying 467 00:21:12,100 --> 00:21:14,590 that you would like for your changes to be brought 468 00:21:14,590 --> 00:21:18,790 in from one branch of some repository to some other branch 469 00:21:18,790 --> 00:21:21,850 of the same repository, or even a different repository. 470 00:21:21,850 --> 00:21:24,860 So when you submit project 0 for instance, 471 00:21:24,860 --> 00:21:28,000 you'll do that via submitting a pull request to the original version 472 00:21:28,000 --> 00:21:28,791 of the repository. 473 00:21:28,791 --> 00:21:30,790 And you'll often see pull requests as a good way 474 00:21:30,790 --> 00:21:33,439 of getting feedback or comments from other people 475 00:21:33,439 --> 00:21:35,230 that you're collaborating with on projects. 476 00:21:35,230 --> 00:21:38,137 They're an easy way of saying, I've made these changes. 477 00:21:38,137 --> 00:21:39,970 I would like someone to review those changes 478 00:21:39,970 --> 00:21:45,030 before we merge them into the master branch of a repository, for example. 479 00:21:45,030 --> 00:21:46,780 They're are a good sanity check, in a way, 480 00:21:46,780 --> 00:21:48,738 to take a step back and take a look at the code 481 00:21:48,738 --> 00:21:51,524 that you're about to merge before you actually perform that merge. 482 00:21:51,524 --> 00:21:53,190 So I'll show you an example of that now. 483 00:21:53,190 --> 00:21:56,100 484 00:21:56,100 --> 00:22:01,590 So over here, we set up a-- 485 00:22:01,590 --> 00:22:05,624 we had, on the lecture1 repository, a master branch and a feature branch 486 00:22:05,624 --> 00:22:08,040 where, on the feature branch, I had added some new changes 487 00:22:08,040 --> 00:22:09,480 and added some new code. 488 00:22:09,480 --> 00:22:12,660 And now if I want to submit a pull request-- in other words, 489 00:22:12,660 --> 00:22:14,280 say, I like this new feature branch. 490 00:22:14,280 --> 00:22:17,230 I would like for it to be merged into the master branch-- 491 00:22:17,230 --> 00:22:19,830 I'll just click the Compare & Pull Request button 492 00:22:19,830 --> 00:22:22,260 on the right side of the feature branch. 493 00:22:22,260 --> 00:22:25,680 And I'll just go ahead and click the Create Pull Request button. 494 00:22:25,680 --> 00:22:28,680 And so this is a GitHub-specific feature that 495 00:22:28,680 --> 00:22:32,280 lets whoever owns this repository see that I am proposing 496 00:22:32,280 --> 00:22:33,720 to make these changes to the code. 497 00:22:33,720 --> 00:22:35,810 You can see what changes I'm proposing to make-- 498 00:22:35,810 --> 00:22:38,430 remove this line, add that line. 499 00:22:38,430 --> 00:22:43,200 And what this allows us to do is to have a conversation about the changes 500 00:22:43,200 --> 00:22:44,370 that I'm proposing to make. 501 00:22:44,370 --> 00:22:46,927 It allows for people to request that new changes get made. 502 00:22:46,927 --> 00:22:49,010 And this is a common paradigm, if you see projects 503 00:22:49,010 --> 00:22:52,050 on GitHub, where people will use the pull request 504 00:22:52,050 --> 00:22:55,320 feature as a way of getting feedback and working together collaboratively 505 00:22:55,320 --> 00:22:56,460 on projects. 506 00:22:56,460 --> 00:22:59,002 And so you'll get an opportunity to play around with forks 507 00:22:59,002 --> 00:23:00,960 and pull requests over the course of project 0. 508 00:23:00,960 --> 00:23:03,510 And you'll find more information about that in the instructions. 509 00:23:03,510 --> 00:23:05,301 But just wanted to give you a look at it so 510 00:23:05,301 --> 00:23:08,070 that you can get a sense for what the interface looks like, 511 00:23:08,070 --> 00:23:10,461 and ultimately, how that works. 512 00:23:10,461 --> 00:23:12,960 But now let's take a step away from Git and start going back 513 00:23:12,960 --> 00:23:16,140 to actually designing web pages, and structuring our web pages, 514 00:23:16,140 --> 00:23:19,560 and organizing them, in particular, by taking another look at HTML. 515 00:23:19,560 --> 00:23:22,440 So last week we took a look at the basics of HTML, 516 00:23:22,440 --> 00:23:25,260 how we might structure a website using nested tags. 517 00:23:25,260 --> 00:23:28,830 If you remember, those tags took the form of an open angled bracket, then 518 00:23:28,830 --> 00:23:31,920 the name of the tag that we wanted, and then a closing angle bracket. 519 00:23:31,920 --> 00:23:35,010 And using just that simple syntax, we were able to create lists, 520 00:23:35,010 --> 00:23:38,520 we were able to add images into the content of our web page. 521 00:23:38,520 --> 00:23:41,400 But thus far, we've only been interacting with a single page. 522 00:23:41,400 --> 00:23:45,450 We had one something.html document where we put in a bunch of tags. 523 00:23:45,450 --> 00:23:48,970 And that rendered a web page that displayed some contents. 524 00:23:48,970 --> 00:23:51,360 But modern websites and modern web pages nowadays 525 00:23:51,360 --> 00:23:53,952 don't just display content, and that's it, on one page. 526 00:23:53,952 --> 00:23:56,160 They'll very often need to interact with other pages, 527 00:23:56,160 --> 00:23:59,820 in particular, by linking to other pages such that you click on a button, 528 00:23:59,820 --> 00:24:02,170 or click on a link, and that takes you somewhere else. 529 00:24:02,170 --> 00:24:04,044 So let's take a look at how we might actually 530 00:24:04,044 --> 00:24:06,500 do that if we wanted to write HTML code to connect 531 00:24:06,500 --> 00:24:09,810 multiple different websites together. 532 00:24:09,810 --> 00:24:21,090 So what we'll take a look now is we will look at links0.html. 533 00:24:21,090 --> 00:24:25,500 And so what we see in links0.html is just a standard HTML web page. 534 00:24:25,500 --> 00:24:30,120 As we remember from before, !DOCTYPE html just means this is an HTML5 535 00:24:30,120 --> 00:24:33,660 document, a document written in the latest version of HTML. 536 00:24:33,660 --> 00:24:37,680 This html says this is the beginning of the HTML content of the website. 537 00:24:37,680 --> 00:24:40,110 Here is the header of the website, the Information 538 00:24:40,110 --> 00:24:41,820 that's sort of metadata to the page-- 539 00:24:41,820 --> 00:24:45,246 not stuff that's going to be displayed in the main contents of the web page, 540 00:24:45,246 --> 00:24:47,370 but information that's helpful for the web browser. 541 00:24:47,370 --> 00:24:49,180 In particular here, we specified a title. 542 00:24:49,180 --> 00:24:51,240 The title of this page is "My Web Page!" 543 00:24:51,240 --> 00:24:53,160 And then, inside the body of the web page, 544 00:24:53,160 --> 00:24:58,930 we have this contents, which is how we're going to be creating a link. 545 00:24:58,930 --> 00:25:02,680 So here we have a, or anchor, and then href. 546 00:25:02,680 --> 00:25:05,760 And href just stands for, what is the hyperlink 547 00:25:05,760 --> 00:25:09,620 that we want to link to when someone clicks on the contents of whatever 548 00:25:09,620 --> 00:25:10,920 is inside that tag. 549 00:25:10,920 --> 00:25:12,750 So right now it says, "Click here!" 550 00:25:12,750 --> 00:25:17,850 And href="hello.html" means, when someone clicks on Click here! 551 00:25:17,850 --> 00:25:20,820 we should take the user to hello.html. 552 00:25:20,820 --> 00:25:23,490 And so if we open up hello.html and see what's in there, 553 00:25:23,490 --> 00:25:27,300 that's just a web page that says "Hello, world!" for example. 554 00:25:27,300 --> 00:25:32,850 So now if I open up links0.html, what you'll see 555 00:25:32,850 --> 00:25:35,890 is, right now, just has a big, blue link that says "Click here!" 556 00:25:35,890 --> 00:25:39,120 And if I click on that link, where I'm taken to is-- 557 00:25:39,120 --> 00:25:42,720 if you look in the URL, the URL changes to hello.html. 558 00:25:42,720 --> 00:25:47,280 And the contents of that page is "Hello, world!" 559 00:25:47,280 --> 00:25:51,330 And so by using that tag, we were able to link to a different page that 560 00:25:51,330 --> 00:25:52,680 was located in the same folder. 561 00:25:52,680 --> 00:25:57,150 I had a links0.html file, and also, a hello.html file. 562 00:25:57,150 --> 00:26:00,060 And a href was my way of saying, when I click here, 563 00:26:00,060 --> 00:26:03,990 I want to link and go to that other page instead. 564 00:26:03,990 --> 00:26:06,600 And this hello.html file doesn't just have 565 00:26:06,600 --> 00:26:11,100 to be a file that's located on my computer in the same folder. 566 00:26:11,100 --> 00:26:14,640 It could be an external URL if I want to link to an entirely different website, 567 00:26:14,640 --> 00:26:15,240 for instance. 568 00:26:15,240 --> 00:26:20,160 So if I want to link to https://google.com for example, 569 00:26:20,160 --> 00:26:22,320 and say click here, and take that to Google, 570 00:26:22,320 --> 00:26:26,310 now, if I refresh my links0.html page and I click here, 571 00:26:26,310 --> 00:26:27,940 now I'm taken to Google's home page. 572 00:26:27,940 --> 00:26:31,150 And so I can link not only to a file located on my system, 573 00:26:31,150 --> 00:26:34,290 but I can also link to elsewhere on the internet as well. 574 00:26:34,290 --> 00:26:36,840 And in addition to linking to a different file 575 00:26:36,840 --> 00:26:38,960 or to an entirely different web page, you 576 00:26:38,960 --> 00:26:43,935 can even use these a href tags to link to different places on the same web 577 00:26:43,935 --> 00:26:44,740 page. 578 00:26:44,740 --> 00:26:46,980 And this is becoming increasingly popular 579 00:26:46,980 --> 00:26:49,235 as more and more content gets put on the same page. 580 00:26:49,235 --> 00:26:51,360 And oftentimes when you click on links, they're not 581 00:26:51,360 --> 00:26:53,610 taking you to different pages, they're just taking you 582 00:26:53,610 --> 00:26:55,780 to different places on the same page. 583 00:26:55,780 --> 00:26:58,200 So we'll take a look at an example of that as well. 584 00:26:58,200 --> 00:27:00,930 Here is links1.html. 585 00:27:00,930 --> 00:27:05,440 So what you'll see is, in links1.html, I have a whole bunch of sections. 586 00:27:05,440 --> 00:27:10,890 So each section starts with a heading, h2, for a reasonably large heading. 587 00:27:10,890 --> 00:27:12,210 And each one has an ID. 588 00:27:12,210 --> 00:27:15,990 And recall from last week that the ID attribute of an HTML element 589 00:27:15,990 --> 00:27:18,960 is just an easy way to give an HTML element a name. 590 00:27:18,960 --> 00:27:23,700 So I want to give this header the name "section1" such that, later, 591 00:27:23,700 --> 00:27:27,860 as we'll soon see, I can refer to this h2 tag as section1, 592 00:27:27,860 --> 00:27:29,670 the thing whose name is section1. 593 00:27:29,670 --> 00:27:31,460 I have a paragraph that has some text. 594 00:27:31,460 --> 00:27:34,800 I have a second section that's called section2, another paragraph, 595 00:27:34,800 --> 00:27:39,550 and then section3, with a heading, and then contents underneath that as well. 596 00:27:39,550 --> 00:27:43,590 So how do I now link to different parts of this document? 597 00:27:43,590 --> 00:27:45,520 Well, if we notice up here, I have what-- 598 00:27:45,520 --> 00:27:50,100 I just called it a table of contents, and then ul for unordered list. 599 00:27:50,100 --> 00:27:52,680 And remember, li are the elements contained 600 00:27:52,680 --> 00:27:56,569 within an unordered list or an ordered list, li standing for "list element." 601 00:27:56,569 --> 00:27:58,860 And each one of these list elements is, itself, a link. 602 00:27:58,860 --> 00:28:02,010 We have that same a ref syntax in that tag. 603 00:28:02,010 --> 00:28:04,890 But the link, instead of being a .html file, 604 00:28:04,890 --> 00:28:08,490 starts with this pound symbol where the pound symbol just means, 605 00:28:08,490 --> 00:28:12,960 rather than link to an individual page, link to something with a specific ID. 606 00:28:12,960 --> 00:28:16,110 In particular, here, by clicking on the section1 link, 607 00:28:16,110 --> 00:28:19,770 this means, link to whatever has ID section1. 608 00:28:19,770 --> 00:28:22,560 And this means, link to whatever has ID section2. 609 00:28:22,560 --> 00:28:27,690 And this means, link to whatever has ID section 3 such that now, 610 00:28:27,690 --> 00:28:33,570 if I open links1.html, you'll see a table 611 00:28:33,570 --> 00:28:35,840 of contents and individual sections. 612 00:28:35,840 --> 00:28:38,460 And if I make the window small enough such that I 613 00:28:38,460 --> 00:28:42,090 can't see all of the sections all at once, 614 00:28:42,090 --> 00:28:45,750 you'll see that if I go to the table of contents and click on Section 1, 615 00:28:45,750 --> 00:28:48,810 for instance, it'll automatically jump down to Section 1. 616 00:28:48,810 --> 00:28:49,990 The page didn't change. 617 00:28:49,990 --> 00:28:51,300 I'm still on that same page. 618 00:28:51,300 --> 00:28:53,580 But it jumps me down to that first section. 619 00:28:53,580 --> 00:28:57,880 And if I instead click on Section 2 by clicking on that link, 620 00:28:57,880 --> 00:29:00,120 that'll jump me down to Section 2 on the web page. 621 00:29:00,120 --> 00:29:03,000 And likewise, clicking on Section 3 jumps me down to Section 3. 622 00:29:03,000 --> 00:29:06,360 And the reason that this page knows about all these relationships 623 00:29:06,360 --> 00:29:10,680 is via that ID attribute, the fact that every place I want to link to 624 00:29:10,680 --> 00:29:14,310 has that ID identifying it as section1, section2, section3. 625 00:29:14,310 --> 00:29:19,070 And then my individual links can then use those ID names to say, 626 00:29:19,070 --> 00:29:23,870 here is where I want the page to link to when I click on that individual link. 627 00:29:23,870 --> 00:29:25,920 Questions about linking between pages? 628 00:29:25,920 --> 00:29:26,486 Yeah. 629 00:29:26,486 --> 00:29:28,866 AUDIENCE: Is it possible more than one [INAUDIBLE]?? 630 00:29:28,866 --> 00:29:32,670 631 00:29:32,670 --> 00:29:33,670 BRIAN YU: Good question. 632 00:29:33,670 --> 00:29:36,860 So the question is, can the same ID show up in more than one place? 633 00:29:36,860 --> 00:29:37,750 And the answer is no. 634 00:29:37,750 --> 00:29:41,680 In HTML, there is sort of a rule, which is that an individual ID can only 635 00:29:41,680 --> 00:29:43,570 appear once on any given page. 636 00:29:43,570 --> 00:29:47,620 So you should never reuse the same ID in two different spots on the same page. 637 00:29:47,620 --> 00:29:48,774 IDs are meant to be unique. 638 00:29:48,774 --> 00:29:51,190 So when I refer to something by ID, there should only ever 639 00:29:51,190 --> 00:29:52,570 be one of those things. 640 00:29:52,570 --> 00:29:56,680 If we want to refer to a group of things by the same name, 641 00:29:56,680 --> 00:29:59,260 there's a different attribute for that called "class." 642 00:29:59,260 --> 00:30:02,540 And if you give multiple different things the same class name, 643 00:30:02,540 --> 00:30:05,470 then it's possible to refer to a group of things all at once 644 00:30:05,470 --> 00:30:07,030 by referring to that class. 645 00:30:07,030 --> 00:30:08,016 Great question though. 646 00:30:08,016 --> 00:30:09,721 AUDIENCE: [INAUDIBLE] 647 00:30:09,721 --> 00:30:11,470 You won't be able to-- so the question is, 648 00:30:11,470 --> 00:30:13,869 can we link to something based on its class? 649 00:30:13,869 --> 00:30:15,910 And the answer is that's not quite going to work, 650 00:30:15,910 --> 00:30:19,330 because you imagine we might have three things that all have the same class 651 00:30:19,330 --> 00:30:19,836 name. 652 00:30:19,836 --> 00:30:22,210 And so if I link to it, the web page isn't going to know, 653 00:30:22,210 --> 00:30:24,230 which thing do I actually want to link to. 654 00:30:24,230 --> 00:30:26,830 So generally speaking, when we link to things, 655 00:30:26,830 --> 00:30:31,690 we'll want to link to the same page based on their individual IDs. 656 00:30:31,690 --> 00:30:34,870 Couple other notes about HTML-- so those were links. 657 00:30:34,870 --> 00:30:37,400 HTML has undergone a number of different revisions. 658 00:30:37,400 --> 00:30:39,460 So the latest version is HTML5. 659 00:30:39,460 --> 00:30:43,600 Back in HTML4, if we wanted to organize our website into different parts, 660 00:30:43,600 --> 00:30:46,540 you might imagine that a more complicated website might have 661 00:30:46,540 --> 00:30:48,040 a header at the top of the website. 662 00:30:48,040 --> 00:30:51,040 It might have a navigation bar, whether on the left side of the website 663 00:30:51,040 --> 00:30:52,777 or a banner across the top, for instance. 664 00:30:52,777 --> 00:30:54,610 It has some main content, and maybe a footer 665 00:30:54,610 --> 00:30:58,390 at the bottom that has copyright notices, or other links, or whatnot. 666 00:30:58,390 --> 00:31:01,990 In HTML4, you might have seen syntax that looks something like this in order 667 00:31:01,990 --> 00:31:06,160 to organize your website, where a div, if you recall from last week, 668 00:31:06,160 --> 00:31:08,980 is just a vertical section of the web page. 669 00:31:08,980 --> 00:31:11,590 It's just a generic section of the web page 670 00:31:11,590 --> 00:31:14,590 that has some name associated with it. 671 00:31:14,590 --> 00:31:18,760 And we might have added class names to this where we said, div class="header" 672 00:31:18,760 --> 00:31:22,780 such that later, I could use CSS and say, take anything that's a header, 673 00:31:22,780 --> 00:31:27,430 and give it a dark green background, and make the font size 36 points 674 00:31:27,430 --> 00:31:28,210 or whatnot. 675 00:31:28,210 --> 00:31:31,060 And we might have had a separate div whose class was "nav" 676 00:31:31,060 --> 00:31:34,255 for the navigation bar, a separate div for individual sections of the web 677 00:31:34,255 --> 00:31:36,152 page, and a separate div for the footer. 678 00:31:36,152 --> 00:31:38,110 And this is still a reasonably common paradigm. 679 00:31:38,110 --> 00:31:42,630 But in HTML5, since this process is so frequent in web pages, 680 00:31:42,630 --> 00:31:44,440 there are actually new tags that are added 681 00:31:44,440 --> 00:31:47,965 to HTML5 that are increasingly being used in more modern web 682 00:31:47,965 --> 00:31:50,110 pages that simplify this process. 683 00:31:50,110 --> 00:31:52,450 Rather than just have divs that have class names that 684 00:31:52,450 --> 00:31:55,780 are specific parts of the web page, some parts of the web page now, 685 00:31:55,780 --> 00:32:00,100 in HTML5, have their own tags such that if you want to better organize 686 00:32:00,100 --> 00:32:02,980 the header of your website into one section, or the navigation 687 00:32:02,980 --> 00:32:05,200 bar of your website into one section, you 688 00:32:05,200 --> 00:32:09,220 can use the header tag to say, this is the header of the website, nav for, 689 00:32:09,220 --> 00:32:11,410 this is the navigation part of the website. 690 00:32:11,410 --> 00:32:15,550 And the reason you might do this is because, then, in your CSS, 691 00:32:15,550 --> 00:32:20,260 for instance, you could say, take anything inside of the nav 692 00:32:20,260 --> 00:32:23,440 bar of my website, and give it these particular stylistic properties 693 00:32:23,440 --> 00:32:26,290 in order to make the navigation bar render in a particular way, 694 00:32:26,290 --> 00:32:27,350 for instance. 695 00:32:27,350 --> 00:32:30,790 And so this can be a nice, simpler way of helping 696 00:32:30,790 --> 00:32:33,910 to organize your website in a way that's easy to read 697 00:32:33,910 --> 00:32:35,590 and is easily understandable. 698 00:32:35,590 --> 00:32:38,480 These aren't the only new tags that are introduced in HTML5. 699 00:32:38,480 --> 00:32:39,480 There are a whole bunch. 700 00:32:39,480 --> 00:32:40,390 I won't talk about them all. 701 00:32:40,390 --> 00:32:42,250 But a couple that are particularly of note 702 00:32:42,250 --> 00:32:44,980 are audio and video tags, which make it really 703 00:32:44,980 --> 00:32:47,650 easy to embed audio content into your web page 704 00:32:47,650 --> 00:32:50,410 or embed a video into your web page, and then also, this one 705 00:32:50,410 --> 00:32:55,394 called datalist, which is increasingly popular now as autocomplete on-- 706 00:32:55,394 --> 00:32:57,310 when we're typing on a phone or on a computer, 707 00:32:57,310 --> 00:32:59,322 becoming increasingly prevalent. 708 00:32:59,322 --> 00:33:01,780 And I'll show you an example of one of these datalists just 709 00:33:01,780 --> 00:33:04,630 now, because it is quite a nice feature. 710 00:33:04,630 --> 00:33:07,090 So one thing we looked at last week was creating 711 00:33:07,090 --> 00:33:09,040 a simple form where, inside of a form, we 712 00:33:09,040 --> 00:33:12,712 might want people to enter in their name, and their email address, 713 00:33:12,712 --> 00:33:14,920 and other information that they would want to submit. 714 00:33:14,920 --> 00:33:17,950 We haven't gotten, yet, to how we can process information from that form 715 00:33:17,950 --> 00:33:19,450 and do something meaningful with it. 716 00:33:19,450 --> 00:33:22,390 But we talked about how to create a web page that just displays a form 717 00:33:22,390 --> 00:33:24,910 that people can enter information into. 718 00:33:24,910 --> 00:33:28,630 So let's go ahead and take a look at form.html now. 719 00:33:28,630 --> 00:33:33,280 And what we saw before is this part looks very similar to the form 720 00:33:33,280 --> 00:33:36,790 that we saw from last time where we have a form tag that just says, 721 00:33:36,790 --> 00:33:39,140 this is going to be an HTML form. 722 00:33:39,140 --> 00:33:42,000 And here on line 10, we have an input field. 723 00:33:42,000 --> 00:33:44,470 An input tag just says, this is going to be a place where 724 00:33:44,470 --> 00:33:46,300 someone can input information. 725 00:33:46,300 --> 00:33:49,540 We named that input field, which doesn't do anything for us just yet. 726 00:33:49,540 --> 00:33:52,840 But you can imagine that we've seen the value of naming things in the past. 727 00:33:52,840 --> 00:33:56,980 When we name particular HTML elements, that makes them easy to refer to. 728 00:33:56,980 --> 00:33:59,860 And in the same way, naming particular elements of our form 729 00:33:59,860 --> 00:34:02,650 is going to make it easy to refer to later such that, when someone 730 00:34:02,650 --> 00:34:05,650 submits the form, we're going to be able to write code that says, 731 00:34:05,650 --> 00:34:09,489 get the name from the form that will get at this specific input field. 732 00:34:09,489 --> 00:34:11,800 Or get the user's password from the form, which 733 00:34:11,800 --> 00:34:14,030 will get at that specific input field. 734 00:34:14,030 --> 00:34:17,199 The type attribute of this input field is set to "text." 735 00:34:17,199 --> 00:34:19,330 This is just text that we want the user to input. 736 00:34:19,330 --> 00:34:20,830 And the placeholder is "Name." 737 00:34:20,830 --> 00:34:23,402 And likewise, for the password, the type is "password," 738 00:34:23,402 --> 00:34:24,860 which is a slightly different type. 739 00:34:24,860 --> 00:34:27,026 And we'll see what's different about it in a moment. 740 00:34:27,026 --> 00:34:29,949 And the placeholder there is just going to be "Password." 741 00:34:29,949 --> 00:34:32,850 Here we see a different type of input. 742 00:34:32,850 --> 00:34:34,620 Here we're asking for a favorite color. 743 00:34:34,620 --> 00:34:38,159 And the options are going to be red, green, blue, or other. 744 00:34:38,159 --> 00:34:41,639 And rather than just have them type in something, this type of input 745 00:34:41,639 --> 00:34:42,804 is a radio input-- 746 00:34:42,804 --> 00:34:45,179 so a radio box where there is sort of a bunch of circles, 747 00:34:45,179 --> 00:34:47,781 and you can click on one of them to select which one you want. 748 00:34:47,781 --> 00:34:49,739 This is a slightly different form of form input 749 00:34:49,739 --> 00:34:52,239 that might prove useful to you depending on the type of form 750 00:34:52,239 --> 00:34:53,610 that you're trying to create. 751 00:34:53,610 --> 00:34:56,250 And here we just have four different inputs, 752 00:34:56,250 --> 00:34:59,310 one for each of those different radio options. 753 00:34:59,310 --> 00:35:03,090 And then finally, down here, we have an input 754 00:35:03,090 --> 00:35:06,880 that is going to represent what country the person is from. 755 00:35:06,880 --> 00:35:08,520 And so we named it "country." 756 00:35:08,520 --> 00:35:11,160 And we associated it with a particular list. 757 00:35:11,160 --> 00:35:13,500 And so this is the new feature of HTML5. 758 00:35:13,500 --> 00:35:16,050 I associate it with the list "countries." 759 00:35:16,050 --> 00:35:19,470 And immediately below that, I have a datalist, 760 00:35:19,470 --> 00:35:22,650 which is just going to be a list of possible options 761 00:35:22,650 --> 00:35:24,120 that will populate this form. 762 00:35:24,120 --> 00:35:26,286 And we'll see what that looks like in just a moment. 763 00:35:26,286 --> 00:35:29,594 It's name is "countries" so that our input field knows how to reference it. 764 00:35:29,594 --> 00:35:31,510 And now we just have a whole bunch of options, 765 00:35:31,510 --> 00:35:33,960 one option for all of the countries. 766 00:35:33,960 --> 00:35:37,290 We just got a list of countries, and put them all into individual options, 767 00:35:37,290 --> 00:35:40,470 and put them into form.html. 768 00:35:40,470 --> 00:35:45,780 So now if I open up form.html, here's what that ultimately looks like. 769 00:35:45,780 --> 00:35:49,430 I have a place where I can type in a name. 770 00:35:49,430 --> 00:35:51,451 I have a place where I can type in a password. 771 00:35:51,451 --> 00:35:54,200 And recall that that password field had a slightly different type. 772 00:35:54,200 --> 00:36:00,330 The name field's type had type="text," just normal text that I'm typing in. 773 00:36:00,330 --> 00:36:02,280 The password had type="password." 774 00:36:02,280 --> 00:36:04,590 Browsers know how to interpret type="password" 775 00:36:04,590 --> 00:36:07,690 to mean something special, to mean this is secure, 776 00:36:07,690 --> 00:36:09,566 sensitive information that they're typing in. 777 00:36:09,566 --> 00:36:12,690 So when I start typing into this field, it's just going to show up as dots. 778 00:36:12,690 --> 00:36:14,400 It doesn't actually show the actual text. 779 00:36:14,400 --> 00:36:16,890 And that I got just by saying type="password." 780 00:36:16,890 --> 00:36:19,590 And the browser knew to interpret that as secure password 781 00:36:19,590 --> 00:36:24,120 information, stuff that shouldn't just be displayed as text on the screen. 782 00:36:24,120 --> 00:36:28,140 The favorite color radio button, I had these for radio input options. 783 00:36:28,140 --> 00:36:30,600 And that shows up this way, where I can select 784 00:36:30,600 --> 00:36:33,300 among these potential favorite colors. 785 00:36:33,300 --> 00:36:35,730 And then for country, because I had this datalist, 786 00:36:35,730 --> 00:36:38,760 if I start typing in "United," for example, 787 00:36:38,760 --> 00:36:42,120 it's going to automatically fill in with any matching elements 788 00:36:42,120 --> 00:36:45,210 from that datalist, because I provided the list of all the countries. 789 00:36:45,210 --> 00:36:49,230 And now all I have to do is click on the country that matches-- 790 00:36:49,230 --> 00:36:50,730 in this case, United States. 791 00:36:50,730 --> 00:36:53,400 And that fills in the category appropriately. 792 00:36:53,400 --> 00:36:57,420 I could also click on that arrow to see any of the matches that showed up there 793 00:36:57,420 --> 00:36:58,700 as well. 794 00:36:58,700 --> 00:37:02,260 And so datalist is one of several new features in HTML5. 795 00:37:02,260 --> 00:37:04,530 There are a whole bunch of new tags, audio, and video, 796 00:37:04,530 --> 00:37:05,601 and datalist among them. 797 00:37:05,601 --> 00:37:07,350 We won't have time to look at all of them. 798 00:37:07,350 --> 00:37:09,510 But just wanted to give you a taste for what's new 799 00:37:09,510 --> 00:37:11,400 in the latest version of HTML. 800 00:37:11,400 --> 00:37:14,560 And HTML continues to add new tags and new features. 801 00:37:14,560 --> 00:37:17,070 But one of the problems is that browsers need 802 00:37:17,070 --> 00:37:19,230 to support the latest versions of HTML. 803 00:37:19,230 --> 00:37:22,890 So it isn't always the case that as soon as there is a new feature to HTML, 804 00:37:22,890 --> 00:37:25,730 that every web browser in the world will suddenly support it. 805 00:37:25,730 --> 00:37:28,770 Oftentimes, older browsers might take longer 806 00:37:28,770 --> 00:37:32,030 to support newer features of HTML. 807 00:37:32,030 --> 00:37:34,200 But HTML5 is starting to become widespread. 808 00:37:34,200 --> 00:37:38,430 All the major browsers now support the most important features of HTML5. 809 00:37:38,430 --> 00:37:41,910 So you can start to use things like audio and video embeds and datalists 810 00:37:41,910 --> 00:37:45,940 in the websites you design with reasonably high confidence 811 00:37:45,940 --> 00:37:49,620 that whoever is looking at the web page will be able to understand it. 812 00:37:49,620 --> 00:37:50,430 Question? 813 00:37:50,430 --> 00:37:52,005 AUDIENCE: [INAUDIBLE] 814 00:37:52,005 --> 00:37:57,130 815 00:37:57,130 --> 00:37:58,310 BRIAN YU: Good question. 816 00:37:58,310 --> 00:38:01,476 So the question was, is it important that, in all the projects in the class, 817 00:38:01,476 --> 00:38:03,490 that it works on every single different browser? 818 00:38:03,490 --> 00:38:07,540 Generally speaking, the languages that we're teaching, 819 00:38:07,540 --> 00:38:09,970 HTML5 and the latest version of CSS, you should 820 00:38:09,970 --> 00:38:13,510 feel free to use even if much older web browsers might not 821 00:38:13,510 --> 00:38:14,800 support those features. 822 00:38:14,800 --> 00:38:16,591 We'll talk a little bit later in the course 823 00:38:16,591 --> 00:38:20,680 about how you might go about making sure that some of the features 824 00:38:20,680 --> 00:38:22,670 will work even on older browsers as well. 825 00:38:22,670 --> 00:38:26,650 But for the sake of project 0, I wouldn't worry too much about it. 826 00:38:26,650 --> 00:38:30,290 OK, so that's HTML. 827 00:38:30,290 --> 00:38:35,050 And now what I wanted to do was move on to talk a little bit more about CSS. 828 00:38:35,050 --> 00:38:37,780 So CSS, which stands for Cascading Style Sheets, 829 00:38:37,780 --> 00:38:40,280 was the tool that we used last week to style up our website. 830 00:38:40,280 --> 00:38:42,738 In the form we just saw, everything was sort of black text. 831 00:38:42,738 --> 00:38:44,080 It was all in the same font. 832 00:38:44,080 --> 00:38:46,270 And it wasn't particularly aesthetically pleasing. 833 00:38:46,270 --> 00:38:49,480 And what CSS allows us to do is have a lot 834 00:38:49,480 --> 00:38:51,620 of control over how the website actually looks, 835 00:38:51,620 --> 00:38:53,662 over the colors, and the fonts, and the layout, 836 00:38:53,662 --> 00:38:55,120 and ways that things are organized. 837 00:38:55,120 --> 00:38:57,220 And we're going to spend, basically, the rest of the lecture 838 00:38:57,220 --> 00:38:59,810 today talking about how to make that website look good. 839 00:38:59,810 --> 00:39:02,590 Because there's a lot that goes into organizing the website 840 00:39:02,590 --> 00:39:04,690 and styling the website in such a way that it's 841 00:39:04,690 --> 00:39:06,940 going to be visually appealing, and that things are organized 842 00:39:06,940 --> 00:39:08,273 the way that we want it to look. 843 00:39:08,273 --> 00:39:10,691 And in particular, in the modern day and age, 844 00:39:10,691 --> 00:39:13,690 where people are looking at websites on a bunch of different platforms-- 845 00:39:13,690 --> 00:39:16,898 looking at them on their laptops, and on their tablets, and on their phones-- 846 00:39:16,898 --> 00:39:19,870 it's important to think about and consider how different websites might 847 00:39:19,870 --> 00:39:23,117 look on different platforms and to make appropriate adjustments in order 848 00:39:23,117 --> 00:39:26,200 to make sure that if you look at the website on a computer, it looks good, 849 00:39:26,200 --> 00:39:29,158 but it will still look good even if you look at the website on a phone, 850 00:39:29,158 --> 00:39:30,140 for example. 851 00:39:30,140 --> 00:39:32,700 And so we'll explore some of the tools and technologies 852 00:39:32,700 --> 00:39:34,552 that we might use in order to do that. 853 00:39:34,552 --> 00:39:37,510 But let's start by looking at some of the more advanced features of CSS 854 00:39:37,510 --> 00:39:40,720 to have even more control over how it is that we 855 00:39:40,720 --> 00:39:45,010 want to style our website in order to have a lot of control 856 00:39:45,010 --> 00:39:47,000 over that individual style. 857 00:39:47,000 --> 00:39:50,570 So let's take a look at this example. 858 00:39:50,570 --> 00:39:53,140 So this is an example that is similar to something 859 00:39:53,140 --> 00:39:55,820 we saw last week just to give you a refresher on what 860 00:39:55,820 --> 00:39:57,940 CSS looks like in terms of code. 861 00:39:57,940 --> 00:40:01,200 We see that inside the body, we have two headings. 862 00:40:01,200 --> 00:40:03,730 Here's one big headline, and here's a smaller headline. 863 00:40:03,730 --> 00:40:07,270 Recall that h1 is the biggest headline, h2 is the next biggest, all the way 864 00:40:07,270 --> 00:40:08,620 down to h6. 865 00:40:08,620 --> 00:40:13,150 And up here in the style section of the page, we've included some CSS content. 866 00:40:13,150 --> 00:40:17,410 And so here, what I said is h1, comma, h2, 867 00:40:17,410 --> 00:40:19,810 where the comma just means I want to apply styling 868 00:40:19,810 --> 00:40:21,730 to multiple different things. 869 00:40:21,730 --> 00:40:25,570 I want to apply styling to the h1s and the h2s. 870 00:40:25,570 --> 00:40:28,890 I could have equivalently said, h1s I want colored red, 871 00:40:28,890 --> 00:40:31,300 and h2s I want colored red. 872 00:40:31,300 --> 00:40:33,640 But oftentimes, if you find yourself repeating yourself, 873 00:40:33,640 --> 00:40:36,186 it's a good idea to look for ways to simplify. 874 00:40:36,186 --> 00:40:39,310 And this is a paradigm that we're going to be returning to later on in this 875 00:40:39,310 --> 00:40:40,552 lecture. 876 00:40:40,552 --> 00:40:42,760 But to make this simpler for now, we can just say h1, 877 00:40:42,760 --> 00:40:48,130 comma, h2 to mean, I want this styling to apply both to h1 tags, 878 00:40:48,130 --> 00:40:52,960 the big headlines, and h2 tags, which are the slightly smaller headlines such 879 00:40:52,960 --> 00:40:56,890 that if I open up multiple.html now, what I see 880 00:40:56,890 --> 00:41:00,260 is the big headline, which is red, and the smaller headline, 881 00:41:00,260 --> 00:41:01,339 which is red as well. 882 00:41:01,339 --> 00:41:03,130 But in addition to the comma that just lets 883 00:41:03,130 --> 00:41:04,880 us select multiple different things, there 884 00:41:04,880 --> 00:41:06,880 are a bunch of other CSS selectors that let 885 00:41:06,880 --> 00:41:10,750 us be very precise about selecting particular parts of our website 886 00:41:10,750 --> 00:41:13,324 that we want to style and styling them in particular ways. 887 00:41:13,324 --> 00:41:15,490 On these simple websites that I'm about to show you, 888 00:41:15,490 --> 00:41:16,900 they might seem a little bit trivial. 889 00:41:16,900 --> 00:41:18,700 But as your websites start to get more complex 890 00:41:18,700 --> 00:41:21,200 and start to have a bunch of different moving parts to them, 891 00:41:21,200 --> 00:41:23,470 it can be very helpful to be able to be very 892 00:41:23,470 --> 00:41:26,710 precise in selecting particular parts of your website 893 00:41:26,710 --> 00:41:29,260 that you want to style in particular ways and making sure 894 00:41:29,260 --> 00:41:32,110 that only those elements get styled in a particular way 895 00:41:32,110 --> 00:41:35,500 as opposed to all of the elements on the web page, for instance. 896 00:41:35,500 --> 00:41:38,290 And so no need to worry about memorizing all of this. 897 00:41:38,290 --> 00:41:40,990 All the CSS selectors are very well-documented. 898 00:41:40,990 --> 00:41:44,290 And it's easy to look them up in order to find a particular selector that 899 00:41:44,290 --> 00:41:44,874 works for you. 900 00:41:44,874 --> 00:41:46,665 But I'll show you these now just to get you 901 00:41:46,665 --> 00:41:50,150 a sense for what you can do with CSS and the amount of control and precision 902 00:41:50,150 --> 00:41:52,750 that you can have over CSS selectors such 903 00:41:52,750 --> 00:41:55,180 that they may serve as inspiration as you go ahead 904 00:41:55,180 --> 00:41:59,110 working on project 0 or other websites that you want to be styling, 905 00:41:59,110 --> 00:42:00,740 potentially, in the future. 906 00:42:00,740 --> 00:42:07,270 So let's go ahead and open up descendant.html. 907 00:42:07,270 --> 00:42:11,012 And so what's happening here inside the body of this website 908 00:42:11,012 --> 00:42:12,720 is that we have a couple things going on. 909 00:42:12,720 --> 00:42:15,060 So inside the body of the website, we have an ol, 910 00:42:15,060 --> 00:42:18,444 where ol stands for ordered list, which is just a list where things, instead 911 00:42:18,444 --> 00:42:21,610 of being bulleted like and an unordered list, are numbered-- thing number 1, 912 00:42:21,610 --> 00:42:22,150 2, 3. 913 00:42:22,150 --> 00:42:25,300 And the web browser will automatically number those things for us. 914 00:42:25,300 --> 00:42:28,460 And we have a bunch of list items, so list item one, list item two. 915 00:42:28,460 --> 00:42:32,680 And inside of this ordered list, we have a list inside of the list. 916 00:42:32,680 --> 00:42:35,260 So if you've sometimes seen websites that have nested lists, 917 00:42:35,260 --> 00:42:38,710 or lists that have a left side and then an indented part that's a list within 918 00:42:38,710 --> 00:42:43,120 the list, this is all this is, another list inside of the ordered list that is 919 00:42:43,120 --> 00:42:46,030 a sublist-- sublist item one, sublist item two-- 920 00:42:46,030 --> 00:42:50,300 and then another list item that's part of this original ordered list. 921 00:42:50,300 --> 00:42:53,920 So if you think back last week to where we talked about the DOM, that tree that 922 00:42:53,920 --> 00:42:58,490 shows how different HTML elements are nested within other HTML elements, 923 00:42:58,490 --> 00:43:01,480 you can think of this as the ol, the ordered list, 924 00:43:01,480 --> 00:43:05,730 containing four different pieces, one list element, another list element, 925 00:43:05,730 --> 00:43:09,100 an ordered list, which, itself, contains two list elements, and then 926 00:43:09,100 --> 00:43:12,320 a final list element in the ordered list. 927 00:43:12,320 --> 00:43:15,070 And so what styling do we want to apply to this? 928 00:43:15,070 --> 00:43:23,600 Well, here we're saying that we want to apply styling to ol li. 929 00:43:23,600 --> 00:43:24,740 So there's no comma here. 930 00:43:24,740 --> 00:43:26,470 It's just ol li. 931 00:43:26,470 --> 00:43:30,340 ol stands for ordered list, and li stands for list item. 932 00:43:30,340 --> 00:43:34,420 And what styling the ol, space, li is going to say is, 933 00:43:34,420 --> 00:43:37,780 I want to style all of the list items, the li's, that 934 00:43:37,780 --> 00:43:41,650 are contained within an ordered list, or all of the list items 935 00:43:41,650 --> 00:43:45,070 that are descendants of the ordered list, equivalently. 936 00:43:45,070 --> 00:43:49,465 And so all of those list items I want to color red, for example. 937 00:43:49,465 --> 00:43:55,120 And so now, if I open up descendant.html, 938 00:43:55,120 --> 00:43:58,600 we see that all of the list items, including the sublist items, 939 00:43:58,600 --> 00:44:01,110 are all styled as red. 940 00:44:01,110 --> 00:44:03,790 And so why did the sublist items get styled as well? 941 00:44:03,790 --> 00:44:07,330 Well, it's because the only rule that this CSS is following 942 00:44:07,330 --> 00:44:11,290 is that if there is a list item, an li, that is a descendant of 943 00:44:11,290 --> 00:44:15,190 or is contained within an ol, an ordered list, then 944 00:44:15,190 --> 00:44:17,020 it's going to be colored red. 945 00:44:17,020 --> 00:44:20,530 And this list item here, even though it's inside of an unordered list, 946 00:44:20,530 --> 00:44:23,770 is still inside of this broader outer ordered list. 947 00:44:23,770 --> 00:44:27,220 And so it's going to be styled as red additionally. 948 00:44:27,220 --> 00:44:30,520 If I add another list that's entirely outside of the ordered list 949 00:44:30,520 --> 00:44:33,040 and say ul for unordered list-- 950 00:44:33,040 --> 00:44:39,950 and I might say, here is a second list here, and here's another item. 951 00:44:39,950 --> 00:44:43,870 So this is an unordered list that's outside of the ordered list. 952 00:44:43,870 --> 00:44:48,610 If I refresh the page now, this second list is not styled in that same way. 953 00:44:48,610 --> 00:44:51,580 Because these are, yes, list elements, or list items, 954 00:44:51,580 --> 00:44:54,080 li's, but they're not contained within an ol. 955 00:44:54,080 --> 00:44:56,590 And so as a result, they don't get styled in the same way 956 00:44:56,590 --> 00:45:00,040 as all of these individualist list items do. 957 00:45:00,040 --> 00:45:04,360 Questions about how that space operator works to select just the descend-- 958 00:45:04,360 --> 00:45:07,420 any descendants of a particular HTML element 959 00:45:07,420 --> 00:45:10,060 and specify those, specifically, as the ones to be styled? 960 00:45:10,060 --> 00:45:12,028 AUDIENCE: [INAUDIBLE] 961 00:45:12,028 --> 00:45:17,126 962 00:45:17,126 --> 00:45:19,000 So the question is, if, in this case, we were 963 00:45:19,000 --> 00:45:22,382 to omit the li entirely and just say ol, that I want it to be styled red, 964 00:45:22,382 --> 00:45:23,590 would that do the same thing? 965 00:45:23,590 --> 00:45:24,400 In this case, yeah. 966 00:45:24,400 --> 00:45:28,330 Because if we style the ordered list, everything within it 967 00:45:28,330 --> 00:45:29,970 is ultimately a list item. 968 00:45:29,970 --> 00:45:32,950 And so it's going to be styled red as well. 969 00:45:32,950 --> 00:45:35,500 But you can imagine more complicated cases 970 00:45:35,500 --> 00:45:40,810 where the outside tag might have a bunch of different types of tags within it. 971 00:45:40,810 --> 00:45:45,640 And if we only want to specify certain elements within the outer element 972 00:45:45,640 --> 00:45:50,770 to be styled, that's when having a second thing after it 973 00:45:50,770 --> 00:45:52,020 can often be helpful. 974 00:45:52,020 --> 00:45:55,520 And we might take a look at couple examples of that later. 975 00:45:55,520 --> 00:45:59,170 So that worked for selecting any descendants. 976 00:45:59,170 --> 00:46:01,510 And the way to think about how this is working 977 00:46:01,510 --> 00:46:05,200 is that we have these list items, which are-- 978 00:46:05,200 --> 00:46:08,740 you can think of as children of the ordered list, and these list items 979 00:46:08,740 --> 00:46:11,209 down here, which you can think of as grandchildren 980 00:46:11,209 --> 00:46:13,750 of the ordered list, where we have the ordered list, and then 981 00:46:13,750 --> 00:46:17,500 the unordered list, and within it are the individual list elements. 982 00:46:17,500 --> 00:46:22,930 What if I only wanted to select the immediate children, but not 983 00:46:22,930 --> 00:46:25,350 the grandchildren, the ones inside of it? 984 00:46:25,350 --> 00:46:28,510 And so for that case, what we want isn't the defendant selector that 985 00:46:28,510 --> 00:46:31,900 selects all of the descendants, but rather a selector that 986 00:46:31,900 --> 00:46:35,880 is just going to select, for us, the immediate children. 987 00:46:35,880 --> 00:46:38,740 And so let's take a look at child.html now, 988 00:46:38,740 --> 00:46:40,840 which is going to be the same body contents. 989 00:46:40,840 --> 00:46:43,780 We still have an ordered list with individual list items 990 00:46:43,780 --> 00:46:45,580 and a sublist contained within it. 991 00:46:45,580 --> 00:46:49,030 But here's the difference in the style tag, just a minor syntactic difference. 992 00:46:49,030 --> 00:46:53,800 Rather than ol, space, li, we have ol, greater than sign, li. 993 00:46:53,800 --> 00:46:57,640 And not greater than sign is CSS's syntax 994 00:46:57,640 --> 00:46:59,920 for specifying an immediate child. 995 00:46:59,920 --> 00:47:03,730 So ol greater than li is going to only select 996 00:47:03,730 --> 00:47:06,760 list items that are immediate children, directly 997 00:47:06,760 --> 00:47:09,070 descended from any ordered list. 998 00:47:09,070 --> 00:47:12,776 And it's going to color those as red and ignore anything else. 999 00:47:12,776 --> 00:47:14,650 So if we open up that website and take a look 1000 00:47:14,650 --> 00:47:19,690 at what that looks like by opening up child.html, this is the result, right? 1001 00:47:19,690 --> 00:47:22,720 The immediate children of the ordered list, the numbered items, 1002 00:47:22,720 --> 00:47:24,280 all show up as red. 1003 00:47:24,280 --> 00:47:26,440 But the sublist items, the things that are 1004 00:47:26,440 --> 00:47:29,920 contained within the unordered list inside of the ordered list, 1005 00:47:29,920 --> 00:47:31,077 those aren't styled. 1006 00:47:31,077 --> 00:47:33,160 Those are still colored black, because they're not 1007 00:47:33,160 --> 00:47:34,930 immediate children of the ordered list. 1008 00:47:34,930 --> 00:47:37,180 They're grandchildren of the ordered list. 1009 00:47:37,180 --> 00:47:40,240 And so I'll show you that code again just so you can take a look at it 1010 00:47:40,240 --> 00:47:42,790 to get a sense for what's going on there. 1011 00:47:42,790 --> 00:47:45,940 Questions about the distinction, though, between the defendant selector 1012 00:47:45,940 --> 00:47:47,576 and the immediate child selector? 1013 00:47:47,576 --> 00:47:50,324 1014 00:47:50,324 --> 00:47:51,039 OK. 1015 00:47:51,039 --> 00:47:52,830 There are a couple other selectors that are 1016 00:47:52,830 --> 00:47:55,470 useful to just see so that you get a sense for what you 1017 00:47:55,470 --> 00:47:58,530 can do with which HTML and CSS styling. 1018 00:47:58,530 --> 00:48:02,180 One is going to be in attribute.html. 1019 00:48:02,180 --> 00:48:05,310 So in attribute.html here-- and all this source code is going to be made 1020 00:48:05,310 --> 00:48:07,893 available after the lecture if you want to take a look at it-- 1021 00:48:07,893 --> 00:48:11,140 we have, here, a form where that form is very similar to the types of things 1022 00:48:11,140 --> 00:48:14,040 we've already seen where we have a input field for the first name, 1023 00:48:14,040 --> 00:48:17,730 an input field for the last name, and an input where 1024 00:48:17,730 --> 00:48:21,120 the person looking at the web page can type in their age, for example. 1025 00:48:21,120 --> 00:48:23,880 And what you notice is slightly different 1026 00:48:23,880 --> 00:48:27,480 about these is that first name and last name have a particular type. 1027 00:48:27,480 --> 00:48:31,214 Their type is text, their text that we want the user to input. 1028 00:48:31,214 --> 00:48:33,630 And their age, on the other hand, is going to be a number. 1029 00:48:33,630 --> 00:48:34,680 The type is number. 1030 00:48:34,680 --> 00:48:37,920 And what some web browsers will do is-- when the type of a input field 1031 00:48:37,920 --> 00:48:42,090 is a number, is-- they will try to help you restrict the valid inputs that you 1032 00:48:42,090 --> 00:48:42,600 can type it. 1033 00:48:42,600 --> 00:48:45,690 Have you ever seen a HTML input form, for example, 1034 00:48:45,690 --> 00:48:48,990 where they're expecting a number, and if you type the letter, nothing happens? 1035 00:48:48,990 --> 00:48:52,200 That's because the web browser might know that the type of this input field 1036 00:48:52,200 --> 00:48:53,080 is a number. 1037 00:48:53,080 --> 00:48:55,980 And so I better not allow anyone to type text into that input field. 1038 00:48:55,980 --> 00:48:58,050 Because it should only ever be a number. 1039 00:48:58,050 --> 00:48:59,940 And so that's what that's doing there. 1040 00:48:59,940 --> 00:49:03,690 But what that allows us to do is style things in particular ways. 1041 00:49:03,690 --> 00:49:08,930 And so CSS also allows for styling things based on individual attributes. 1042 00:49:08,930 --> 00:49:12,420 And so before, we saw how we could style any generic tag. 1043 00:49:12,420 --> 00:49:17,400 But here what we're looking at is I want to add styling to input fields, 1044 00:49:17,400 --> 00:49:22,140 but only the input fields where the type of that input is text. 1045 00:49:22,140 --> 00:49:24,575 And I can use any attribute name and value here. 1046 00:49:24,575 --> 00:49:26,200 It doesn't just need to be input types. 1047 00:49:26,200 --> 00:49:30,220 It can be any time where we've seen attributes added to HTML elements. 1048 00:49:30,220 --> 00:49:33,710 So we saw, like, src for images, or href for links. 1049 00:49:33,710 --> 00:49:37,350 These are all attributes that we can use the attribute selector for in order 1050 00:49:37,350 --> 00:49:39,700 to style them in particular ways. 1051 00:49:39,700 --> 00:49:42,180 So here we said the input type is text. 1052 00:49:42,180 --> 00:49:45,070 And if it's text, I want the background color to be red. 1053 00:49:45,070 --> 00:49:49,530 And if the input type is number, then I want the background color to be yellow. 1054 00:49:49,530 --> 00:49:52,500 So I'm delineating between different input fields based 1055 00:49:52,500 --> 00:49:54,580 on their individual attributes to say, here 1056 00:49:54,580 --> 00:49:58,390 is the way I expect certain attributes to behave. 1057 00:49:58,390 --> 00:50:01,950 So if I open up attribute.html now, here's what I see, 1058 00:50:01,950 --> 00:50:03,880 where these are all input fields. 1059 00:50:03,880 --> 00:50:07,320 The only difference between them is particular attributes that they have. 1060 00:50:07,320 --> 00:50:10,560 And first name and last name are now places where I can type in text, 1061 00:50:10,560 --> 00:50:12,120 and their background color is red. 1062 00:50:12,120 --> 00:50:14,430 And age, because it has a type of number, 1063 00:50:14,430 --> 00:50:17,050 is going to display a background color of yellow. 1064 00:50:17,050 --> 00:50:20,160 I have allowed myself to be more precise about the way 1065 00:50:20,160 --> 00:50:22,890 that I select elements in order to style things 1066 00:50:22,890 --> 00:50:24,834 exactly the way that I want them to be styled. 1067 00:50:24,834 --> 00:50:27,750 And ultimately, that's what CSS selectors are designed to help you do. 1068 00:50:27,750 --> 00:50:31,191 They are designed to help you be more specific about the way 1069 00:50:31,191 --> 00:50:34,440 that you work with CSS and the way that you select individual elements to help 1070 00:50:34,440 --> 00:50:37,230 make the process of designing a web page that looks the way you 1071 00:50:37,230 --> 00:50:39,570 want it to look all the easier. 1072 00:50:39,570 --> 00:50:41,940 So couple other things to look at-- 1073 00:50:41,940 --> 00:50:44,730 let's take a look at different types of selectors 1074 00:50:44,730 --> 00:50:46,920 that operate in different situations. 1075 00:50:46,920 --> 00:50:50,750 In particular, CSS has the notion of what's called a pseudo-class. 1076 00:50:50,750 --> 00:50:54,660 And a pseudo-class is just a special state of an HTML element. 1077 00:50:54,660 --> 00:50:56,962 Because a web page is not just something that gets 1078 00:50:56,962 --> 00:50:58,920 displayed, and the user sees it, and that's it. 1079 00:50:58,920 --> 00:51:01,110 The user is often interacting with that web page. 1080 00:51:01,110 --> 00:51:02,790 They're hovering over things. 1081 00:51:02,790 --> 00:51:04,830 Their cursor is moving around the page. 1082 00:51:04,830 --> 00:51:08,790 And so we might want our web page to respond to user interactivity-- 1083 00:51:08,790 --> 00:51:11,740 that when a user hovers over something, for example, 1084 00:51:11,740 --> 00:51:16,270 we might want that behavior of the web page to change in some meaningful way. 1085 00:51:16,270 --> 00:51:21,480 So let's take a look at exactly that example by taking a look at hover.html. 1086 00:51:21,480 --> 00:51:25,080 And inside the body of hover.html, it's actually a very simple body. 1087 00:51:25,080 --> 00:51:26,610 There is very little happening here. 1088 00:51:26,610 --> 00:51:28,860 I have a button tag, and it says "Click me!" 1089 00:51:28,860 --> 00:51:30,392 And that's it. 1090 00:51:30,392 --> 00:51:32,100 But now let's take a look at the styling. 1091 00:51:32,100 --> 00:51:33,660 This is where things get interesting. 1092 00:51:33,660 --> 00:51:36,990 So inside the style of this web page I have a couple things going on. 1093 00:51:36,990 --> 00:51:38,470 I've said, take the button. 1094 00:51:38,470 --> 00:51:40,920 And here are the things that I want you to know about how 1095 00:51:40,920 --> 00:51:42,294 we should be styling this button. 1096 00:51:42,294 --> 00:51:45,060 It should have a width of 200 pixels, a height of 50 pixels. 1097 00:51:45,060 --> 00:51:46,545 The font size will be 24 pixels. 1098 00:51:46,545 --> 00:51:48,420 Those are just arbitrary numbers that I chose 1099 00:51:48,420 --> 00:51:50,040 to make the button look a little nice. 1100 00:51:50,040 --> 00:51:53,670 And the background color of the button is going to be green. 1101 00:51:53,670 --> 00:51:57,180 But here, this colon syntax is what I call a pseudo-class representing 1102 00:51:57,180 --> 00:51:59,550 a specific state of the HTML element. 1103 00:51:59,550 --> 00:52:03,360 In particular, this is what happens when the button is hovered on, 1104 00:52:03,360 --> 00:52:05,810 when the cursor moves over that button. 1105 00:52:05,810 --> 00:52:07,560 And in particular, what I'm saying here is 1106 00:52:07,560 --> 00:52:10,830 that, now, I want the background color to be orange instead. 1107 00:52:10,830 --> 00:52:14,880 So I went to change the styling of the website based on a particular state 1108 00:52:14,880 --> 00:52:16,710 that an element might be in. 1109 00:52:16,710 --> 00:52:20,994 So if I now open up hover.html and take a look at it, 1110 00:52:20,994 --> 00:52:22,410 right now it just says "Click me!" 1111 00:52:22,410 --> 00:52:23,490 It's a green button. 1112 00:52:23,490 --> 00:52:26,370 But as soon as my cursor moves over the green button, 1113 00:52:26,370 --> 00:52:27,810 it changes to orange, right? 1114 00:52:27,810 --> 00:52:30,389 I have that hover pseudo-class attached to this button such 1115 00:52:30,389 --> 00:52:33,180 that it knows that when something hovers over it, the styling of it 1116 00:52:33,180 --> 00:52:33,990 should change. 1117 00:52:33,990 --> 00:52:36,867 So this allows the styling of a website to vary depending 1118 00:52:36,867 --> 00:52:38,450 on how the user's interacting with it. 1119 00:52:38,450 --> 00:52:39,840 And so you may have seen this type of thing 1120 00:52:39,840 --> 00:52:42,600 happen where, when you hover over something that's important, 1121 00:52:42,600 --> 00:52:45,810 it changes color, or it grows, or it does something different 1122 00:52:45,810 --> 00:52:46,710 with its styling. 1123 00:52:46,710 --> 00:52:48,584 And oftentimes this is how it's working, just 1124 00:52:48,584 --> 00:52:51,300 pseudo-classes that are placed on CSS elements 1125 00:52:51,300 --> 00:52:54,270 to make them behave in certain ways. 1126 00:52:54,270 --> 00:52:56,880 In addition to pseudo-classes, CSS also has 1127 00:52:56,880 --> 00:53:00,180 what's called pseudo-elements, which are ways of affecting 1128 00:53:00,180 --> 00:53:02,790 particular parts of an HTML element. 1129 00:53:02,790 --> 00:53:04,920 And so I'll show you a couple examples of that now. 1130 00:53:04,920 --> 00:53:08,950 These are a little bit less common, but are still things that may come up. 1131 00:53:08,950 --> 00:53:12,510 So I'll show you before.html right now. 1132 00:53:12,510 --> 00:53:17,524 And so in before.html, what I have here is an unordered list of links. 1133 00:53:17,524 --> 00:53:18,190 Here's one link. 1134 00:53:18,190 --> 00:53:19,230 Here's another link. 1135 00:53:19,230 --> 00:53:20,310 Here's a third link. 1136 00:53:20,310 --> 00:53:22,190 And right now they all just link to #-- 1137 00:53:22,190 --> 00:53:23,920 in other words, don't really do anything. 1138 00:53:23,920 --> 00:53:27,180 We're not linking to any external website. 1139 00:53:27,180 --> 00:53:30,270 But for each of these links, these a tags, 1140 00:53:30,270 --> 00:53:33,690 I have this pseudo-element before. 1141 00:53:33,690 --> 00:53:37,740 And what this is saying is I want to apply some styling that happens 1142 00:53:37,740 --> 00:53:41,590 before the contents of the actual link. 1143 00:53:41,590 --> 00:53:46,020 And in this case, the content is slash 21d2, 1144 00:53:46,020 --> 00:53:49,950 which is a special hex value for a Unicode symbol. 1145 00:53:49,950 --> 00:53:53,310 So these are symbols that you can't just normally type on the keyboard. 1146 00:53:53,310 --> 00:53:57,024 But special symbols like emojis and other symbols have particular codes. 1147 00:53:57,024 --> 00:53:58,440 This code, you'll see in a moment. 1148 00:53:58,440 --> 00:54:00,400 And then it says "Click here." 1149 00:54:00,400 --> 00:54:03,162 And the font weight of this contents is before. 1150 00:54:03,162 --> 00:54:06,120 And so it might not be immediately clear what exactly is going on here, 1151 00:54:06,120 --> 00:54:06,780 but I'll show it to you. 1152 00:54:06,780 --> 00:54:08,040 And then we'll come back to the code so you can 1153 00:54:08,040 --> 00:54:09,664 take a look at what's really happening. 1154 00:54:09,664 --> 00:54:11,790 Let's open up before.html. 1155 00:54:11,790 --> 00:54:16,380 And what you see is three links-- one link, another link, a third link. 1156 00:54:16,380 --> 00:54:20,329 But all of them are prepended with this arrow sign that says "Click here." 1157 00:54:20,329 --> 00:54:22,620 And so how did that happen where all three of the links 1158 00:54:22,620 --> 00:54:26,250 have that additional information at the beginning of it? 1159 00:54:26,250 --> 00:54:29,220 Well, these individual links only said "one link," "another link," 1160 00:54:29,220 --> 00:54:30,690 and "third link." 1161 00:54:30,690 --> 00:54:33,240 But all the magic is happening inside the style tag 1162 00:54:33,240 --> 00:54:37,080 where I'm saying, for every link, before the contents of that link, 1163 00:54:37,080 --> 00:54:40,860 I want you to add this particular content-- in particular, this symbol, 1164 00:54:40,860 --> 00:54:42,900 and then the words "click here." 1165 00:54:42,900 --> 00:54:47,430 And I want the font weight of that before element to be bold. 1166 00:54:47,430 --> 00:54:50,850 And the result of that is this, where each one of those individual links 1167 00:54:50,850 --> 00:54:53,230 is prefaced with arrow sign, click here. 1168 00:54:53,230 --> 00:54:55,230 And so if you have a bunch of different elements 1169 00:54:55,230 --> 00:54:59,410 that you all want to begin with certain text or a certain symbol for example, 1170 00:54:59,410 --> 00:55:02,820 you might use colon, colon, before, as we used here, or colon, colon, 1171 00:55:02,820 --> 00:55:05,550 after, which does the same thing, but at end of the element, 1172 00:55:05,550 --> 00:55:09,270 in order to make those modifications as well. 1173 00:55:09,270 --> 00:55:10,890 One other potentially useful one-- 1174 00:55:10,890 --> 00:55:12,360 and then we'll take a short break-- 1175 00:55:12,360 --> 00:55:14,490 is selection.html. 1176 00:55:14,490 --> 00:55:18,840 So inside selection.html, the body of it is just one long paragraph. 1177 00:55:18,840 --> 00:55:23,890 But inside the styling, I say p::selection. 1178 00:55:23,890 --> 00:55:25,835 In other words, when something is selected, 1179 00:55:25,835 --> 00:55:27,960 I want that selection to behave in a particular way 1180 00:55:27,960 --> 00:55:29,550 or have a particular styling. 1181 00:55:29,550 --> 00:55:31,830 In particular, I want its color to be red, 1182 00:55:31,830 --> 00:55:35,290 and I want its background color to be yellow. 1183 00:55:35,290 --> 00:55:41,940 So if I open up selection.html, what I get is just some text. 1184 00:55:41,940 --> 00:55:44,880 But if I highlight that text, it highlights in a very particular way. 1185 00:55:44,880 --> 00:55:47,302 It highlights where the text I'm highlighting is red, 1186 00:55:47,302 --> 00:55:48,510 and the background is yellow. 1187 00:55:48,510 --> 00:55:51,540 Because I'm specifically saying, I want, when 1188 00:55:51,540 --> 00:55:53,580 I highlight the contents of this paragraph, 1189 00:55:53,580 --> 00:55:55,581 for the styling to appear in a particular way. 1190 00:55:55,581 --> 00:55:57,580 And so that's something that you can do as well. 1191 00:55:57,580 --> 00:56:00,480 And so a bunch of those CSS selectors are summarized here. 1192 00:56:00,480 --> 00:56:03,480 We have the multiple element selector where a comma separates two things 1193 00:56:03,480 --> 00:56:06,961 to say, I want styling to apply to both of these things, the descendant 1194 00:56:06,961 --> 00:56:09,960 selector for when I want to select everything contained within something 1195 00:56:09,960 --> 00:56:13,920 else, immediate child for immediate children but not grandchildren 1196 00:56:13,920 --> 00:56:15,930 or great grandchildren of an element. 1197 00:56:15,930 --> 00:56:18,690 We didn't see this one, but the adjacent sibling selector 1198 00:56:18,690 --> 00:56:21,810 lets you select something that comes immediately after something else-- so 1199 00:56:21,810 --> 00:56:26,040 two elements that are sisters to each other in the tree rather than one 1200 00:56:26,040 --> 00:56:28,970 being the parent or containing the other. 1201 00:56:28,970 --> 00:56:32,520 We saw the attribute selector that let us say that inputs that are numbers 1202 00:56:32,520 --> 00:56:35,550 should be treated as different from text inputs, and then pseudo-class 1203 00:56:35,550 --> 00:56:37,950 for things like when I'm hovering over an element, 1204 00:56:37,950 --> 00:56:40,980 and then pseudo-elements for saying before the contents of a page 1205 00:56:40,980 --> 00:56:42,416 or after a contents of the page. 1206 00:56:42,416 --> 00:56:44,040 Again, no need to memorize all of that. 1207 00:56:44,040 --> 00:56:46,050 But these are just a sample of the CSS selectors 1208 00:56:46,050 --> 00:56:49,170 that you can use in order to have a lot more control 1209 00:56:49,170 --> 00:56:51,960 over the contents of your HTML page. 1210 00:56:51,960 --> 00:56:55,460 When we come back, we'll dive even more into CSS, not looking at CSS selectors 1211 00:56:55,460 --> 00:56:59,400 specifically, but looking at how we might take a web page 1212 00:56:59,400 --> 00:57:01,930 and make it more mobile-responsive for example, 1213 00:57:01,930 --> 00:57:03,840 and use some more advanced CSS features. 1214 00:57:03,840 --> 00:57:05,423 But for now, we'll take a short break. 1215 00:57:05,423 --> 00:57:07,770 And we'll be back in a couple minutes. 1216 00:57:07,770 --> 00:57:08,890 OK, welcome back. 1217 00:57:08,890 --> 00:57:10,920 So now what we're going to do is take a look 1218 00:57:10,920 --> 00:57:15,090 at how we can go about making our web pages mobile-responsive. 1219 00:57:15,090 --> 00:57:17,160 In particular, responsive design is generally 1220 00:57:17,160 --> 00:57:19,110 the idea of trying to make sure that our web 1221 00:57:19,110 --> 00:57:22,109 page is going to look good regardless of what platform we look at it on. 1222 00:57:22,109 --> 00:57:26,052 Whether that's a desktop machine, or a laptop, or a phone, or a tablet, 1223 00:57:26,052 --> 00:57:28,260 or any other device, we want the website to look good 1224 00:57:28,260 --> 00:57:30,460 across all of that variety of platforms. 1225 00:57:30,460 --> 00:57:32,790 And so when we start to think about responsive design 1226 00:57:32,790 --> 00:57:35,580 and how to go about making the website look good no matter what, 1227 00:57:35,580 --> 00:57:37,890 what are some things we would need to think about? 1228 00:57:37,890 --> 00:57:41,190 What might be important to keep track of when thinking about how things 1229 00:57:41,190 --> 00:57:42,732 look on a computer versus a phone? 1230 00:57:42,732 --> 00:57:43,232 Yeah? 1231 00:57:43,232 --> 00:57:45,120 AUDIENCE: [INAUDIBLE] 1232 00:57:45,120 --> 00:57:49,132 1233 00:57:49,132 --> 00:57:51,340 BRIAN YU: Making sure the text responds right-- yeah, 1234 00:57:51,340 --> 00:57:54,280 different screen sizes might adjust for-- 1235 00:57:54,280 --> 00:57:57,850 might require differently-sized text in order to make the text look good. 1236 00:57:57,850 --> 00:58:01,270 Sometimes if you look at older websites that aren't really designed for phones, 1237 00:58:01,270 --> 00:58:02,800 and you try and look at it on a phone, all the text 1238 00:58:02,800 --> 00:58:05,170 feels, like, squished into the center of what's 1239 00:58:05,170 --> 00:58:08,699 called the viewport, the area of the phone that you see web content on. 1240 00:58:08,699 --> 00:58:10,990 We'll talk about ways that we can go about fixing that. 1241 00:58:10,990 --> 00:58:11,489 Good point. 1242 00:58:11,489 --> 00:58:14,740 What other things might be relevant to consider 1243 00:58:14,740 --> 00:58:17,080 when we think about going from bigger screens 1244 00:58:17,080 --> 00:58:19,480 to smaller screens or different platforms 1245 00:58:19,480 --> 00:58:21,358 that websites need do exist on? 1246 00:58:21,358 --> 00:58:23,350 AUDIENCE: [INAUDIBLE] 1247 00:58:23,350 --> 00:58:29,269 1248 00:58:29,269 --> 00:58:31,310 BRIAN YU: Yeah, things need to move around a bit. 1249 00:58:31,310 --> 00:58:34,250 You might need to-- it might not just be a matter of making everything smaller 1250 00:58:34,250 --> 00:58:35,791 in order to fit on the mobile screen. 1251 00:58:35,791 --> 00:58:38,427 But if you've got a desktop website that has 1252 00:58:38,427 --> 00:58:40,760 a bunch of different columns worth of stuff, maybe three 1253 00:58:40,760 --> 00:58:43,940 columns of information, and you want to shrink that down to a mobile screen, 1254 00:58:43,940 --> 00:58:46,850 now, suddenly, you can't just squeeze all three columns 1255 00:58:46,850 --> 00:58:48,720 into the same narrow window on the screen. 1256 00:58:48,720 --> 00:58:50,870 You might want to stack the three instead rather 1257 00:58:50,870 --> 00:58:52,100 than have all three separate. 1258 00:58:52,100 --> 00:58:55,370 And so we'll talk about ways that we can go about making those considerations 1259 00:58:55,370 --> 00:58:58,100 and making sure that our web pages are able to adapt 1260 00:58:58,100 --> 00:59:02,399 to those sorts of different types of platforms and different screen sizes. 1261 00:59:02,399 --> 00:59:04,940 And so the first strategy that we're going to be using here-- 1262 00:59:04,940 --> 00:59:06,648 will be a number of different strategies. 1263 00:59:06,648 --> 00:59:09,470 But one strategy that will use are what are called media queries. 1264 00:59:09,470 --> 00:59:13,460 And so a media query is a specific way of assigning CSS 1265 00:59:13,460 --> 00:59:16,940 not to a particular HTML element, but to a particular HTML 1266 00:59:16,940 --> 00:59:20,300 element on a particular type of media. 1267 00:59:20,300 --> 00:59:23,600 So that type of media might be particularly-sized computers, 1268 00:59:23,600 --> 00:59:26,510 or particularly-sized phones, or even the difference between how 1269 00:59:26,510 --> 00:59:29,600 you want a website to look when you are writing the code for it 1270 00:59:29,600 --> 00:59:31,490 to appear on a screen versus how you want 1271 00:59:31,490 --> 00:59:34,670 the website to look if someone prints it out, for example, on a printer. 1272 00:59:34,670 --> 00:59:37,010 Because maybe when someone prints your website out on a printer, 1273 00:59:37,010 --> 00:59:39,093 you want the content of the page to look different 1274 00:59:39,093 --> 00:59:41,510 than if you were just writing websites that were 1275 00:59:41,510 --> 00:59:43,410 going to appear on computer screens. 1276 00:59:43,410 --> 00:59:45,255 And you might want those to be different. 1277 00:59:45,255 --> 00:59:47,780 And so let's take that as a first example 1278 00:59:47,780 --> 00:59:49,940 and take a look at our first media query. 1279 00:59:49,940 --> 00:59:53,180 And so what we'll take a look at is print.html. 1280 00:59:53,180 --> 00:59:58,550 And so what we have here is, in the body of our web page, three paragraphs. 1281 00:59:58,550 --> 00:59:59,540 So this is a paragraph. 1282 00:59:59,540 --> 01:00:00,860 This is another paragraph. 1283 01:00:00,860 --> 01:00:04,190 And then I have a third paragraph, and I've added a class to it. 1284 01:00:04,190 --> 01:00:06,434 And that class is going to be called screen-only. 1285 01:00:06,434 --> 01:00:08,600 That's just a name I made up, but it's useful for me 1286 01:00:08,600 --> 01:00:11,090 to know that this is going to be a paragraph that is only 1287 01:00:11,090 --> 01:00:13,070 going to show up on computer screens. 1288 01:00:13,070 --> 01:00:15,028 When I print it out, it's not going to show up. 1289 01:00:15,028 --> 01:00:17,900 So this paragraph won't appear when you print this page. 1290 01:00:17,900 --> 01:00:20,840 And you might want this if you have particular instructions for, 1291 01:00:20,840 --> 01:00:22,790 like, click on this button or click on that button that 1292 01:00:22,790 --> 01:00:25,340 are relevant when someone's looking at your web page on a screen 1293 01:00:25,340 --> 01:00:27,048 but aren't very relevant if someone wants 1294 01:00:27,048 --> 01:00:29,640 to print out the contents of your web page, for instance. 1295 01:00:29,640 --> 01:00:32,450 And so how do I go about styling that? 1296 01:00:32,450 --> 01:00:34,910 Well, this is what the style header looks like here. 1297 01:00:34,910 --> 01:00:38,310 I have this @media, which means, create a media query. 1298 01:00:38,310 --> 01:00:41,750 I want to apply CSS styling, but only in particular situations, 1299 01:00:41,750 --> 01:00:43,430 only in particular cases. 1300 01:00:43,430 --> 01:00:45,680 What case do I want to apply the styling in? 1301 01:00:45,680 --> 01:00:48,170 Well, in this case, I said @media print. 1302 01:00:48,170 --> 01:00:50,480 In other words, this styling, I only want 1303 01:00:50,480 --> 01:00:55,550 to apply when the media, or the medium by which my web page is being viewed, 1304 01:00:55,550 --> 01:00:57,230 is it's being printed. 1305 01:00:57,230 --> 01:01:00,770 And then .screen-only-- remember that dot is a way of specifying, 1306 01:01:00,770 --> 01:01:03,320 select everything with a particular class name. 1307 01:01:03,320 --> 01:01:06,290 Down below we had a paragraph whose class name was screen-only. 1308 01:01:06,290 --> 01:01:09,140 And here I'm saying, take anything whose class is screen-only, 1309 01:01:09,140 --> 01:01:11,870 and said its display property to none. 1310 01:01:11,870 --> 01:01:15,130 And if you haven't seen this before, display property being set to none 1311 01:01:15,130 --> 01:01:16,700 means, make it not visible. 1312 01:01:16,700 --> 01:01:18,560 In other words, it's not being displayed. 1313 01:01:18,560 --> 01:01:21,020 And we'll see other examples of the display property later. 1314 01:01:21,020 --> 01:01:23,400 But what's the result of that going to be? 1315 01:01:23,400 --> 01:01:24,989 Well, again, I have three paragraphs. 1316 01:01:24,989 --> 01:01:25,780 Here's a paragraph. 1317 01:01:25,780 --> 01:01:26,960 Here's another paragraph. 1318 01:01:26,960 --> 01:01:30,140 And here's a paragraph that won't appear when you print the page. 1319 01:01:30,140 --> 01:01:34,830 And if I open print.html, what I see is those three paragraphs. 1320 01:01:34,830 --> 01:01:37,520 And on my screen, they look totally normal. 1321 01:01:37,520 --> 01:01:39,650 There'd be no way to tell that this paragraph is 1322 01:01:39,650 --> 01:01:41,487 any different from the other two paragraphs. 1323 01:01:41,487 --> 01:01:43,820 But if I go to the File menu, and I try and print this-- 1324 01:01:43,820 --> 01:01:45,680 if I were going to print this web page out-- 1325 01:01:45,680 --> 01:01:49,047 then the result that I see in this preview is that I see, 1326 01:01:49,047 --> 01:01:49,880 this is a paragraph. 1327 01:01:49,880 --> 01:01:50,990 I see this is another paragraph. 1328 01:01:50,990 --> 01:01:52,823 But that third paragraph isn't there, right? 1329 01:01:52,823 --> 01:01:55,610 That paragraph is now being printed. 1330 01:01:55,610 --> 01:01:58,280 And in my CSS, I said, when the media that I'm 1331 01:01:58,280 --> 01:02:01,700 trying to use when viewing this page is a screen, 1332 01:02:01,700 --> 01:02:04,280 I want that paragraph to have a display property of none. 1333 01:02:04,280 --> 01:02:06,230 I don't want that paragraph to be visible. 1334 01:02:06,230 --> 01:02:09,260 And by doing that, I'm able to control how that web 1335 01:02:09,260 --> 01:02:11,600 page appears on particular mediums. 1336 01:02:11,600 --> 01:02:14,450 So that allows me to make sure that this paragraph doesn't 1337 01:02:14,450 --> 01:02:16,280 appear when I print the page. 1338 01:02:16,280 --> 01:02:18,170 But of course, printing is just one example 1339 01:02:18,170 --> 01:02:20,849 of a different medium on which I might be looking at content. 1340 01:02:20,849 --> 01:02:22,640 The more frequent case nowadays is probably 1341 01:02:22,640 --> 01:02:26,330 that I have content being viewed on differently-sized devices, 1342 01:02:26,330 --> 01:02:29,360 that I have a computer with a very wide screen, a tablet with a slightly 1343 01:02:29,360 --> 01:02:32,450 narrower screen, a phone with a screen even narrower than that. 1344 01:02:32,450 --> 01:02:37,260 And I want to make sure that my website responds to those changes as well. 1345 01:02:37,260 --> 01:02:39,540 So how might I go about doing that? 1346 01:02:39,540 --> 01:02:44,800 Let's take a look at responsive0.html. 1347 01:02:44,800 --> 01:02:47,000 And in the body of this website, it's very simple. 1348 01:02:47,000 --> 01:02:50,490 All it says is a headline that says "Welcome to My Web Page!" 1349 01:02:50,490 --> 01:02:52,940 And that's the only content of the web page in the body. 1350 01:02:52,940 --> 01:02:54,590 But now let's look at the styling. 1351 01:02:54,590 --> 01:02:57,860 What's going on here, I have more @media queries. 1352 01:02:57,860 --> 01:03:01,280 But this time, instead of specifying @media screen for, here's the media 1353 01:03:01,280 --> 01:03:04,640 for what style it should look like when something is being displayed on screen, 1354 01:03:04,640 --> 01:03:07,010 or @media print for when I'm printing something out, 1355 01:03:07,010 --> 01:03:09,370 I have @media min-width-- 1356 01:03:09,370 --> 01:03:11,060 500 pixels. 1357 01:03:11,060 --> 01:03:13,930 And what that means is that the styling that follows 1358 01:03:13,930 --> 01:03:19,790 is CSS styling that apply whenever this page is being viewed in a window that's 1359 01:03:19,790 --> 01:03:22,370 at least 500 pixels wide. 1360 01:03:22,370 --> 01:03:25,640 And in particular, when the window is at least 500 pixels wide, 1361 01:03:25,640 --> 01:03:29,690 I want the entire body of my web page to have a background color of red. 1362 01:03:29,690 --> 01:03:32,960 Meanwhile, for @media max-width-- 1363 01:03:32,960 --> 01:03:36,220 499 pixels, that's saying the exact opposite, 1364 01:03:36,220 --> 01:03:41,210 that if I'm on a smaller window where the maximum width of the web window 1365 01:03:41,210 --> 01:03:44,240 is 499 pixels or anything smaller than that, 1366 01:03:44,240 --> 01:03:47,160 then I want the body's background color to be blue. 1367 01:03:47,160 --> 01:03:50,750 And so this allows me to change the styling depending upon how wide 1368 01:03:50,750 --> 01:03:55,100 or how narrow a particular web page is. 1369 01:03:55,100 --> 01:04:00,652 So if I open up responsive0.html, what I see is "Welcome to My Web Page!" 1370 01:04:00,652 --> 01:04:02,110 And the web page background is red. 1371 01:04:02,110 --> 01:04:06,110 And so that tells me that, based on the contents of my code here, 1372 01:04:06,110 --> 01:04:11,960 the background color of red should only apply when the width of my viewport, 1373 01:04:11,960 --> 01:04:16,304 the width of my window, is at least 500 pixels. 1374 01:04:16,304 --> 01:04:18,470 So what happens now, if I try to shrink that website 1375 01:04:18,470 --> 01:04:20,000 and make it less than 500-- 1376 01:04:20,000 --> 01:04:22,250 I can grab the end and just shrink down this website. 1377 01:04:22,250 --> 01:04:22,780 And watch what happens. 1378 01:04:22,780 --> 01:04:23,720 It's still red. 1379 01:04:23,720 --> 01:04:27,440 But as soon as it shrinks below 500 pixels, it changes to blue, right? 1380 01:04:27,440 --> 01:04:29,090 Above 500 pixels, it's red. 1381 01:04:29,090 --> 01:04:30,360 Below that, it's blue. 1382 01:04:30,360 --> 01:04:33,930 And that's a first example of how we might change the styling of our website 1383 01:04:33,930 --> 01:04:36,710 depending on how big or small the screen that we're looking at it 1384 01:04:36,710 --> 01:04:38,584 happens to be at that time. 1385 01:04:38,584 --> 01:04:40,250 So what are some other examples of that? 1386 01:04:40,250 --> 01:04:41,624 What's a more practical use case? 1387 01:04:41,624 --> 01:04:44,250 So in reality, we probably don't care all that much about, 1388 01:04:44,250 --> 01:04:47,250 we want the wider screen to have a red background and the smaller screen 1389 01:04:47,250 --> 01:04:48,540 to have a blue background. 1390 01:04:48,540 --> 01:04:52,670 But we might care about something like this, which is a little more involved. 1391 01:04:52,670 --> 01:04:54,200 But I have a body. 1392 01:04:54,200 --> 01:04:55,700 And right now my headline is empty. 1393 01:04:55,700 --> 01:04:57,950 It's just an h1, sort of a empty headline. 1394 01:04:57,950 --> 01:05:00,010 But we're going to fill it in with content. 1395 01:05:00,010 --> 01:05:03,720 But that content is going to differ based on the size of the screen. 1396 01:05:03,720 --> 01:05:05,900 So here I've said @media min-width -- 1397 01:05:05,900 --> 01:05:07,490 500, same as before. 1398 01:05:07,490 --> 01:05:12,410 When the width of my screen is at least 500 pixels, then before the h1 tag, 1399 01:05:12,410 --> 01:05:14,720 the first thing that should show up in my heading 1400 01:05:14,720 --> 01:05:17,780 should be the content "Welcome to My Web Page!" 1401 01:05:17,780 --> 01:05:22,190 But on the other hand, if the size of my web page is 499 pixels or smaller, 1402 01:05:22,190 --> 01:05:26,792 then I want the content of my h1 tag to just be the word "Welcome!" 1403 01:05:26,792 --> 01:05:29,750 maybe because, on a smaller screen, I don't want a longer headline that 1404 01:05:29,750 --> 01:05:31,610 might wrap onto two lines, for example. 1405 01:05:31,610 --> 01:05:33,710 I just want a shorter headline that's going to look a little bit better 1406 01:05:33,710 --> 01:05:35,080 on a smaller screen. 1407 01:05:35,080 --> 01:05:37,250 And so what would that ultimately look like? 1408 01:05:37,250 --> 01:05:39,440 Well, it's going to be the same thing as the background color, 1409 01:05:39,440 --> 01:05:41,523 but just instead of changing the background color, 1410 01:05:41,523 --> 01:05:45,080 we're changing the contents of what's actually displayed on the screen. 1411 01:05:45,080 --> 01:05:46,804 So I open up responsive1.html. 1412 01:05:46,804 --> 01:05:48,970 And right now it just says "Welcome to My Web Page!" 1413 01:05:48,970 --> 01:05:53,380 as if I had just had h1, welcome to my web page, end h1. 1414 01:05:53,380 --> 01:05:56,600 But if I shrink the window now, when it would have normally 1415 01:05:56,600 --> 01:06:01,070 needed to potentially wrap onto another page and I go beyond 500 pixels, 1416 01:06:01,070 --> 01:06:01,970 the headline changes. 1417 01:06:01,970 --> 01:06:03,140 Now it's just "Welcome!" 1418 01:06:03,140 --> 01:06:05,810 There's no "to My Web Page," because, on the smaller screen, 1419 01:06:05,810 --> 01:06:07,710 I want the smaller headline to appear. 1420 01:06:07,710 --> 01:06:12,380 If I go beyond 500 again, go larger, then the full headline comes back. 1421 01:06:12,380 --> 01:06:14,690 And so again, that's all because of these media queries 1422 01:06:14,690 --> 01:06:21,440 that let me specify the min width or the max width of the screen 1423 01:06:21,440 --> 01:06:23,210 that I want things to render on and decide 1424 01:06:23,210 --> 01:06:26,840 how I want the CSS styling to appear depending upon that screen size. 1425 01:06:26,840 --> 01:06:31,420 One other thing you'll notice up here on line 5 is this sort of strange line, 1426 01:06:31,420 --> 01:06:35,240 meta name equals "viewport" content equals "width=device-width, 1427 01:06:35,240 --> 01:06:37,220 initial-scale=1.0"-- 1428 01:06:37,220 --> 01:06:38,522 so sort of complicated line. 1429 01:06:38,522 --> 01:06:41,480 All this line is saying-- and you'll see this line in a lot of websites 1430 01:06:41,480 --> 01:06:44,660 nowadays-- is the viewport of my web page 1431 01:06:44,660 --> 01:06:48,980 is just the visible area on the computer screen, or the phone screen, 1432 01:06:48,980 --> 01:06:52,430 or whatever screen is being used to view the contents of the web page. 1433 01:06:52,430 --> 01:06:58,830 And oftentimes in older websites, if you tried to view a website on a phone, 1434 01:06:58,830 --> 01:07:02,570 it would just pretend that you were rendering the website on a computer, 1435 01:07:02,570 --> 01:07:06,440 and render it as a wide display, and then shrink it down onto the phone such 1436 01:07:06,440 --> 01:07:08,937 that all the text on the phone was really, really small. 1437 01:07:08,937 --> 01:07:12,020 If you've looked at websites on your phone, you may have seen this before. 1438 01:07:12,020 --> 01:07:15,260 All this is doing is a line that's telling the browser 1439 01:07:15,260 --> 01:07:19,880 to adjust the viewport to make sure that we're scaling it 1440 01:07:19,880 --> 01:07:23,000 to the width of the actual device, that the width of the viewport 1441 01:07:23,000 --> 01:07:25,010 should be whatever the width of the device is. 1442 01:07:25,010 --> 01:07:27,994 And as a result, that will help to prevent text 1443 01:07:27,994 --> 01:07:31,160 from appearing really, really small when you render it on a phone as opposed 1444 01:07:31,160 --> 01:07:32,120 to on a desktop. 1445 01:07:32,120 --> 01:07:35,120 This line is often just a good first step to throw into your web page 1446 01:07:35,120 --> 01:07:36,911 when you want to make it mobile responsive, 1447 01:07:36,911 --> 01:07:39,620 because that will help to make sure that the sizing of things 1448 01:07:39,620 --> 01:07:41,750 appears appropriately. 1449 01:07:41,750 --> 01:07:44,720 But the key of what we're doing here in order to make this responsive 1450 01:07:44,720 --> 01:07:48,170 is these media queries that are allowing us to specify what CSS 1451 01:07:48,170 --> 01:07:51,200 gets applied under which circumstances. 1452 01:07:51,200 --> 01:07:54,890 And so this is just some of the basics of how we can use CSS in order 1453 01:07:54,890 --> 01:07:59,060 to help allow us to style websites in particular ways 1454 01:07:59,060 --> 01:08:00,500 depending on different devices. 1455 01:08:00,500 --> 01:08:03,200 We can also use particular CSS layouts. 1456 01:08:03,200 --> 01:08:04,905 And I'll show you a couple of these now. 1457 01:08:04,905 --> 01:08:07,280 Again, no need to memorize exactly what's happening here, 1458 01:08:07,280 --> 01:08:10,450 but just to give you a sense for what's available in CSS. 1459 01:08:10,450 --> 01:08:12,082 But before I move on, question? 1460 01:08:12,082 --> 01:08:14,010 AUDIENCE: [INAUDIBLE] 1461 01:08:14,010 --> 01:08:16,910 1462 01:08:16,910 --> 01:08:18,321 BRIAN YU: If you had both-- 1463 01:08:18,321 --> 01:08:19,029 so the question-- 1464 01:08:19,029 --> 01:08:20,961 AUDIENCE: [INAUDIBLE] 1465 01:08:20,961 --> 01:08:23,970 1466 01:08:23,970 --> 01:08:27,170 BRIAN YU: Oh, if you wanted to specify both a minimum and maximum, 1467 01:08:27,170 --> 01:08:32,779 I think there is a CSS keyword that allows you to combine two different 1468 01:08:32,779 --> 01:08:34,580 media queries-- so like, min-width-- 1469 01:08:34,580 --> 01:08:36,774 300 and max-width-- 500. 1470 01:08:36,774 --> 01:08:38,149 And I think you can look to the-- 1471 01:08:38,149 --> 01:08:40,069 I'd refer you to the CSS documentation just 1472 01:08:40,069 --> 01:08:44,210 to look at how you would go about structuring that media query. 1473 01:08:44,210 --> 01:08:50,149 What we're looking at here is a tool built into CSS called flexbox. 1474 01:08:50,149 --> 01:08:52,430 And what flexbox is going to allow us to do 1475 01:08:52,430 --> 01:08:55,350 is create a web page that looks something like this. 1476 01:08:55,350 --> 01:08:57,300 So we have a whole bunch of elements here, 1477 01:08:57,300 --> 01:09:00,290 and each one is labeled A, B, C, D, E, F, G, all the way through L. 1478 01:09:00,290 --> 01:09:01,640 And there's 12 of them. 1479 01:09:01,640 --> 01:09:03,740 And what might we expect to happen if we were 1480 01:09:03,740 --> 01:09:07,834 to shrink this web page down and view it on a smaller device? 1481 01:09:07,834 --> 01:09:11,000 Well, what we probably want to happen is we still want to see these squares, 1482 01:09:11,000 --> 01:09:14,330 but we don't want to have to scroll too much to the left and right in order 1483 01:09:14,330 --> 01:09:15,500 to see all four. 1484 01:09:15,500 --> 01:09:19,189 We'd rather have these individual cells rearrange themselves 1485 01:09:19,189 --> 01:09:21,029 as we shrink down the page. 1486 01:09:21,029 --> 01:09:23,180 And so watch what happens when I shrink this page. 1487 01:09:23,180 --> 01:09:27,470 It originally shows me four in any given row, and I have three rows. 1488 01:09:27,470 --> 01:09:29,300 But after I shrink it down a little more, 1489 01:09:29,300 --> 01:09:31,049 it's going to just show three on each row. 1490 01:09:31,049 --> 01:09:32,736 And now I've got four rows. 1491 01:09:32,736 --> 01:09:35,069 And if I shrink it down more, it's got two on every row, 1492 01:09:35,069 --> 01:09:36,450 and now I've got six rows. 1493 01:09:36,450 --> 01:09:38,646 And if I shrink down even more, now we've 1494 01:09:38,646 --> 01:09:41,479 only got one, where each thing is just stacked on top of each other. 1495 01:09:41,479 --> 01:09:43,479 So this is what we were alluding to a little bit 1496 01:09:43,479 --> 01:09:48,500 before, where if we have items appearing in multiple columns of content 1497 01:09:48,500 --> 01:09:51,140 across the screen, we might want those things to move around 1498 01:09:51,140 --> 01:09:53,240 as we begin to resize the window in order 1499 01:09:53,240 --> 01:09:56,400 to make it more adaptable to different platforms and different devices. 1500 01:09:56,400 --> 01:09:59,340 So what does that ultimately look like? 1501 01:09:59,340 --> 01:10:02,210 Here's an example of flexbox in action. 1502 01:10:02,210 --> 01:10:05,660 I have a container that's just going to contain all of these individual divs. 1503 01:10:05,660 --> 01:10:09,150 Each one is just a letter followed by some random text. 1504 01:10:09,150 --> 01:10:11,360 And here's the styling that makes that all happen. 1505 01:10:11,360 --> 01:10:15,050 Inside my container, I'm setting its display property to flex. 1506 01:10:15,050 --> 01:10:18,680 In other words, I want this to be a flexbox that 1507 01:10:18,680 --> 01:10:23,412 allows the content to, in this case, wrap around it when 1508 01:10:23,412 --> 01:10:24,620 it reaches the end of a line. 1509 01:10:24,620 --> 01:10:28,130 So you might imagine that it's like if I had all 12 in one straight line. 1510 01:10:28,130 --> 01:10:32,090 But as I shrink down the screen, I want the individual cells 1511 01:10:32,090 --> 01:10:34,670 to wrap onto the next line and the line after that in order 1512 01:10:34,670 --> 01:10:38,810 to make room for everything to show up within the width of my window. 1513 01:10:38,810 --> 01:10:42,979 And now I have this .container, greater than sign, div. 1514 01:10:42,979 --> 01:10:45,270 Remember, that greater than sign means immediate child. 1515 01:10:45,270 --> 01:10:48,277 So for any div that is immediately the child of the container, 1516 01:10:48,277 --> 01:10:49,610 here's how I want it to display. 1517 01:10:49,610 --> 01:10:50,890 And this is just arbitrary. 1518 01:10:50,890 --> 01:10:52,520 I wanted the background to be green. 1519 01:10:52,520 --> 01:10:54,070 I gave it a font size. 1520 01:10:54,070 --> 01:10:55,820 I gave it some margin and padding in order 1521 01:10:55,820 --> 01:10:57,530 to make it look the way I want it to. 1522 01:10:57,530 --> 01:10:59,270 And I specified how wide it should be. 1523 01:10:59,270 --> 01:11:03,260 But really, the key was this, this display, colon, flex, flex-wrap, colon, 1524 01:11:03,260 --> 01:11:03,950 wrap. 1525 01:11:03,950 --> 01:11:10,359 This is what allows me to get that flexbox to wrap around just like that. 1526 01:11:10,359 --> 01:11:13,400 One other style that I'll show you that's useful when we're laying things 1527 01:11:13,400 --> 01:11:14,724 out is having a grid. 1528 01:11:14,724 --> 01:11:16,640 We might want a grid sort of like a table that 1529 01:11:16,640 --> 01:11:18,980 displays information in a grid format. 1530 01:11:18,980 --> 01:11:21,890 And so that might look something like this, where 1531 01:11:21,890 --> 01:11:24,740 I have a grid of individual cells-- 1532 01:11:24,740 --> 01:11:26,784 1, 2, 3, 4, 5, 6, all the way up to 12. 1533 01:11:26,784 --> 01:11:28,700 And I might have content in each one of those. 1534 01:11:28,700 --> 01:11:30,110 And you might imagine that this is useful 1535 01:11:30,110 --> 01:11:33,359 if you want some information in the left side of the page and some information 1536 01:11:33,359 --> 01:11:34,920 on the right side of the page. 1537 01:11:34,920 --> 01:11:39,170 And notice, as I shrink this down, the size of that third column 1538 01:11:39,170 --> 01:11:42,210 automatically adjusts in order to fit the width of the page. 1539 01:11:42,210 --> 01:11:44,420 If I go beyond it, it starts to get cut off. 1540 01:11:44,420 --> 01:11:49,200 But if I'm greater than a certain width, that third column will adjust itself. 1541 01:11:49,200 --> 01:11:50,420 So how does that work? 1542 01:11:50,420 --> 01:11:51,753 I'll just briefly show you this. 1543 01:11:51,753 --> 01:11:54,410 And again, this code is all available to you after the lecture 1544 01:11:54,410 --> 01:11:55,790 if you want to take a look at it to get a better 1545 01:11:55,790 --> 01:11:57,470 understanding for how it works. 1546 01:11:57,470 --> 01:12:02,750 But inside the body of my website, I have a div whose class is just grid. 1547 01:12:02,750 --> 01:12:04,244 And I call it "grid" arbitrarily. 1548 01:12:04,244 --> 01:12:06,410 And then within that grid are individual grid items. 1549 01:12:06,410 --> 01:12:09,600 And here is 1 through 12, all just one after the other. 1550 01:12:09,600 --> 01:12:12,140 So how did I take those 1 through 12 grid items 1551 01:12:12,140 --> 01:12:15,400 and make it appear in a grid that looks like this? 1552 01:12:15,400 --> 01:12:18,290 Well, here's the CSS styling that made that happen. 1553 01:12:18,290 --> 01:12:21,320 For the grid, the background color is green. 1554 01:12:21,320 --> 01:12:24,650 I used display, colon, flex before when I wanted things to wrap around. 1555 01:12:24,650 --> 01:12:27,200 Here I'm using display, colon, grid. 1556 01:12:27,200 --> 01:12:28,550 I gave it a particular padding. 1557 01:12:28,550 --> 01:12:31,250 Remember, padding is just the spacing on the inside. 1558 01:12:31,250 --> 01:12:33,275 And I wanted the grid column gap, or the space 1559 01:12:33,275 --> 01:12:35,150 between individual columns of the grid, to be 1560 01:12:35,150 --> 01:12:38,840 20 pixels, and the space between individual rows in the grid 1561 01:12:38,840 --> 01:12:40,280 to be 10 pixels. 1562 01:12:40,280 --> 01:12:42,020 And here is grid-template-columns. 1563 01:12:42,020 --> 01:12:46,340 This is what allows me to specify how wide I want each column to be. 1564 01:12:46,340 --> 01:12:49,790 And here I've said the first column should be 200 pixels, 1565 01:12:49,790 --> 01:12:52,970 the second column should be 200 pixels, and the third column 1566 01:12:52,970 --> 01:12:54,570 should be automatically generated. 1567 01:12:54,570 --> 01:12:56,900 Just however much space you need to fill space, 1568 01:12:56,900 --> 01:12:59,480 that is how much space the third column should take up. 1569 01:12:59,480 --> 01:13:03,410 If I instead change both the second and the third columns 1570 01:13:03,410 --> 01:13:06,020 to be automatically filled, then what I get 1571 01:13:06,020 --> 01:13:09,110 is column 1 that will always be 200 pixels, 1572 01:13:09,110 --> 01:13:12,650 but columns 2 and 3 that will now adjust themselves naturally 1573 01:13:12,650 --> 01:13:14,780 in response to how I move things. 1574 01:13:14,780 --> 01:13:18,800 And if I change all of them to auto, for example, now all three of them 1575 01:13:18,800 --> 01:13:23,200 will just automatically respond to me changing the size of the website. 1576 01:13:23,200 --> 01:13:26,080 And they will shrink and grow accordingly in order to fit. 1577 01:13:26,080 --> 01:13:26,580 Question? 1578 01:13:26,580 --> 01:13:28,524 AUDIENCE: [INAUDIBLE] 1579 01:13:28,524 --> 01:13:35,399 1580 01:13:35,399 --> 01:13:36,440 BRIAN YU: Great question. 1581 01:13:36,440 --> 01:13:38,800 So the question is, how did I get the spaces to show up 1582 01:13:38,800 --> 01:13:40,690 between the individual grid cells? 1583 01:13:40,690 --> 01:13:42,930 Those were two particular CSS properties. 1584 01:13:42,930 --> 01:13:45,170 Here grid-column-gap was 20 pixels. 1585 01:13:45,170 --> 01:13:47,230 That's the space between individual columns. 1586 01:13:47,230 --> 01:13:49,520 And grid-row-gap is the space between rows. 1587 01:13:49,520 --> 01:13:51,640 If I change the row gap to, like, 50 pixels, 1588 01:13:51,640 --> 01:13:54,950 for example, now there's more space in between individual rows. 1589 01:13:54,950 --> 01:13:56,950 And so you can use the column gap in the row gap 1590 01:13:56,950 --> 01:13:59,830 to control the amount of space that shows up 1591 01:13:59,830 --> 01:14:02,162 in between the individual cells. 1592 01:14:02,162 --> 01:14:04,870 But ultimately, this is starting to get a little bit complicated. 1593 01:14:04,870 --> 01:14:07,810 And realistically, it would be pretty annoying if, every time we 1594 01:14:07,810 --> 01:14:09,601 wanted something to wrap onto new pages, we 1595 01:14:09,601 --> 01:14:12,220 needed to remember exactly how the flexbox worked and set up 1596 01:14:12,220 --> 01:14:13,660 the flexbox for ourselves. 1597 01:14:13,660 --> 01:14:16,420 But luckily, nowadays there are all these CSS libraries 1598 01:14:16,420 --> 01:14:18,220 out there, which are ways that are-- 1599 01:14:18,220 --> 01:14:20,290 CSS written by other people that we can then 1600 01:14:20,290 --> 01:14:22,240 use them in order to make our lives easier 1601 01:14:22,240 --> 01:14:25,600 when it comes to making our websites mobile-responsive, for example. 1602 01:14:25,600 --> 01:14:28,017 And one of the most popular libraries is called Bootstrap. 1603 01:14:28,017 --> 01:14:30,433 And that's the one I'm going to be introducing you to now. 1604 01:14:30,433 --> 01:14:32,920 You'll get an opportunity to work with it in project 0. 1605 01:14:32,920 --> 01:14:37,459 But Bootstrap is just an easy way of giving you access to some CSS 1606 01:14:37,459 --> 01:14:40,000 that lets you make your websites styled a little more nicely, 1607 01:14:40,000 --> 01:14:42,458 make them a little more mobile-responsive right off the bat 1608 01:14:42,458 --> 01:14:44,960 without you needing to do a whole lot of work. 1609 01:14:44,960 --> 01:14:51,276 And so if I open up nobootstrap.html, this is just a simple website, 1610 01:14:51,276 --> 01:14:54,400 just like stuff we've seen before, where I have a heading that says "Hello, 1611 01:14:54,400 --> 01:14:55,120 world!" 1612 01:14:55,120 --> 01:14:57,010 and then a paragraph of text. 1613 01:14:57,010 --> 01:14:59,920 And if I open up nobootstrap.html, this is 1614 01:14:59,920 --> 01:15:02,470 what it looks like, same sort of thing we've seen before. 1615 01:15:02,470 --> 01:15:07,450 If I want to add Bootstrap to my file, all I need to do is-- 1616 01:15:07,450 --> 01:15:10,480 in bootstrap.html, this is the exact same website, 1617 01:15:10,480 --> 01:15:15,400 but I've added one extra line, this link line where I'm linking a stylesheet. 1618 01:15:15,400 --> 01:15:18,932 I'm linking Bootstrap's CSS file, which is located somewhere on the internet. 1619 01:15:18,932 --> 01:15:20,640 And if you go to Bootstrap's website, you 1620 01:15:20,640 --> 01:15:23,406 can find this exact line that you can put into your web page. 1621 01:15:23,406 --> 01:15:25,780 And now everything else about my website stayed the same. 1622 01:15:25,780 --> 01:15:28,090 All I did was add Bootstrap's CSS. 1623 01:15:28,090 --> 01:15:32,500 And now if I open bootstrap.html, the website looks a little bit nicer. 1624 01:15:32,500 --> 01:15:34,859 You notice that there's some padding along the outside. 1625 01:15:34,859 --> 01:15:37,400 You notice that the headline is in a slightly different font. 1626 01:15:37,400 --> 01:15:40,066 This is Bootstrap's default style that you're welcome to change. 1627 01:15:40,066 --> 01:15:42,040 But that is Bootstrap's way of just making 1628 01:15:42,040 --> 01:15:45,370 your website look a little bit nicer, look a little bit more modern. 1629 01:15:45,370 --> 01:15:48,520 But the real power of Bootstrap comes when you start to look at the way 1630 01:15:48,520 --> 01:15:51,700 that Bootstrap organizes information and lays things out. 1631 01:15:51,700 --> 01:15:56,260 So Bootstrap's layout system uses a column-based model where the website is 1632 01:15:56,260 --> 01:15:57,210 divided into-- 1633 01:15:57,210 --> 01:15:59,680 or each row in the website, you might think, 1634 01:15:59,680 --> 01:16:02,440 is divided into 12 individual columns. 1635 01:16:02,440 --> 01:16:05,600 And you can control how many columns different things take up, 1636 01:16:05,600 --> 01:16:10,360 recognizing that 12 columns is sort of the full width of your entire website. 1637 01:16:10,360 --> 01:16:16,190 So let's take a look at column0.html. 1638 01:16:16,190 --> 01:16:19,560 So inside the body of this website, here's what we have going on. 1639 01:16:19,560 --> 01:16:21,880 I have a div whose class is row. 1640 01:16:21,880 --> 01:16:24,400 Row is a special class in Bootstrap that just means, 1641 01:16:24,400 --> 01:16:26,800 this is going to be a row of my page that's 1642 01:16:26,800 --> 01:16:29,200 ultimately divided into 12 columns. 1643 01:16:29,200 --> 01:16:32,620 And here are my individual divs within that row 1644 01:16:32,620 --> 01:16:36,130 where each one has a class of col-3. 1645 01:16:36,130 --> 01:16:39,760 And col-3, in this case, just stands for, this is a column that's going 1646 01:16:39,760 --> 01:16:42,890 to take up three columns' worth of space. 1647 01:16:42,890 --> 01:16:47,770 So if I have a 12-column page, I can have four things that each take up 1648 01:16:47,770 --> 01:16:49,510 three columns' worth of space. 1649 01:16:49,510 --> 01:16:51,770 And that's ultimately going to make up my entire row. 1650 01:16:51,770 --> 01:16:54,490 So this is a section, another section, a third one, and a fourth one. 1651 01:16:54,490 --> 01:16:56,239 And I've added some styling to it in order 1652 01:16:56,239 --> 01:16:57,770 to make it look a little bit nicer. 1653 01:16:57,770 --> 01:17:01,690 I've added some padding on the outside, a background color, and a border. 1654 01:17:01,690 --> 01:17:04,100 And you'll see what that looks like in just a moment. 1655 01:17:04,100 --> 01:17:08,620 So if I open up column0.html, you can see that, now, I've 1656 01:17:08,620 --> 01:17:12,190 got these four sections, these four individual columns that are each 1657 01:17:12,190 --> 01:17:18,220 taking up three out of the 12 total columns that are on the Bootstrap grid 1658 01:17:18,220 --> 01:17:19,250 layout. 1659 01:17:19,250 --> 01:17:22,079 And notice, if I shrink it down, some of the spacing goes away. 1660 01:17:22,079 --> 01:17:24,370 You'll notice things automatically adjust a little bit. 1661 01:17:24,370 --> 01:17:26,911 So it's designed to be very mobile-responsive out of the bat. 1662 01:17:26,911 --> 01:17:30,100 I didn't write any of the code or the CSS to help things resize 1663 01:17:30,100 --> 01:17:32,040 and rearrange when the screen size changes. 1664 01:17:32,040 --> 01:17:34,540 Bootstrap's doing that all for me. 1665 01:17:34,540 --> 01:17:35,980 So that's four columns. 1666 01:17:35,980 --> 01:17:39,130 But really, what I would like is for these columns 1667 01:17:39,130 --> 01:17:42,250 to move around depending on the size of the screen, 1668 01:17:42,250 --> 01:17:44,319 that I don't just want it to be four columns. 1669 01:17:44,319 --> 01:17:47,110 Because once it gets to a really narrow device, these four columns, 1670 01:17:47,110 --> 01:17:48,818 if there's a lot of content in them, this 1671 01:17:48,818 --> 01:17:51,830 is going to look really squeezed together so to speak. 1672 01:17:51,830 --> 01:17:54,230 So what might I do about that? 1673 01:17:54,230 --> 01:17:58,720 Well, in this case, let's take a look at columns1.html. 1674 01:17:58,720 --> 01:18:00,940 This is very, very similar, almost the same, 1675 01:18:00,940 --> 01:18:02,980 with a couple of changes inside the row. 1676 01:18:02,980 --> 01:18:09,100 Before every class inside these divs inside my row, we had a class of col-3 1677 01:18:09,100 --> 01:18:12,820 for, we want this column to take up three out of the 12 1678 01:18:12,820 --> 01:18:17,437 possible columns that are present inside of the Bootstrap grid layout. 1679 01:18:17,437 --> 01:18:20,020 In this case, I've done something a little more sophisticated. 1680 01:18:20,020 --> 01:18:26,180 I said, "col-lg-3" and "col-sm-6." 1681 01:18:26,180 --> 01:18:29,150 In other words, on a large screen where Bootstrap 1682 01:18:29,150 --> 01:18:31,160 has defined for me what counts as a large screen 1683 01:18:31,160 --> 01:18:33,954 by taking a look at what typical computer displays look like, 1684 01:18:33,954 --> 01:18:36,620 what mobile displays look like, what tablet displays look like-- 1685 01:18:36,620 --> 01:18:41,900 but on a large screen, I want this div to take up three columns out of the 12 1686 01:18:41,900 --> 01:18:43,160 on my screen-- 1687 01:18:43,160 --> 01:18:45,380 in other words, a quarter of the total width. 1688 01:18:45,380 --> 01:18:49,070 But on a small device, I would rather it take up six out of the 12, 1689 01:18:49,070 --> 01:18:51,650 or half of the total width of the screen. 1690 01:18:51,650 --> 01:18:56,210 And likewise, I did the same thing for each one of these individual columns 1691 01:18:56,210 --> 01:18:57,620 within this row. 1692 01:18:57,620 --> 01:19:01,760 And so on a large screen, we have col-lg-3, large 3, large 3, large 3, 1693 01:19:01,760 --> 01:19:05,510 where each column will take up three out of the 12 possible columns 1694 01:19:05,510 --> 01:19:08,060 in the Bootstrap grid model, whereas on a small screen, 1695 01:19:08,060 --> 01:19:12,004 each one will take up half of the total width of my Bootstrap grid. 1696 01:19:12,004 --> 01:19:13,170 So what does that look like? 1697 01:19:13,170 --> 01:19:16,336 What's the impact of this when I try and render this website and look at it? 1698 01:19:16,336 --> 01:19:21,480 If I open up columns1.html, on a large screen, it looks exactly the same. 1699 01:19:21,480 --> 01:19:23,420 I've got one column, two, three, and four, 1700 01:19:23,420 --> 01:19:27,140 where each column is taking up three out of the 12 available column spaces 1701 01:19:27,140 --> 01:19:29,029 that Bootstrap provides to me. 1702 01:19:29,029 --> 01:19:31,820 But as I make this smaller, what you'll notice is that once it gets 1703 01:19:31,820 --> 01:19:33,860 to a certain point-- in this case, here-- 1704 01:19:33,860 --> 01:19:38,950 it changes from four columns all in a row to two columns on each row 1705 01:19:38,950 --> 01:19:42,380 where, before, here, on a large screen, each column 1706 01:19:42,380 --> 01:19:46,190 was taking up three out of the 12 possible columns that 1707 01:19:46,190 --> 01:19:47,802 were available in Bootstrap. 1708 01:19:47,802 --> 01:19:50,510 But on a smaller screen, each one's taking up half of that width. 1709 01:19:50,510 --> 01:19:53,270 And the result of that is that the latter two columns, which 1710 01:19:53,270 --> 01:19:56,985 don't fit within the 12, get moved onto another line entirely of their own. 1711 01:19:56,985 --> 01:19:59,360 So I could have done this using flexbox like I showed you 1712 01:19:59,360 --> 01:20:02,600 a moment before, where things start wrapping onto other lines 1713 01:20:02,600 --> 01:20:03,830 as I start to reduce it. 1714 01:20:03,830 --> 01:20:06,650 But Bootstrap, which is actually written using flexbox, 1715 01:20:06,650 --> 01:20:08,990 sort of abstracts that away and lets us just 1716 01:20:08,990 --> 01:20:12,050 take advantage of defining how wide we want our columns to be 1717 01:20:12,050 --> 01:20:13,369 on different size devices. 1718 01:20:13,369 --> 01:20:16,160 And Bootstrap takes care of the rest of making sure that things get 1719 01:20:16,160 --> 01:20:18,335 rendered the way that we want them to. 1720 01:20:18,335 --> 01:20:19,139 Question? 1721 01:20:19,139 --> 01:20:21,135 AUDIENCE: [INAUDIBLE] 1722 01:20:21,135 --> 01:20:24,674 1723 01:20:24,674 --> 01:20:27,590 BRIAN YU: Question-- yeah, so Bootstrap does define classes within it. 1724 01:20:27,590 --> 01:20:29,526 AUDIENCE: What happens if I [INAUDIBLE]? 1725 01:20:29,526 --> 01:20:33,459 1726 01:20:33,459 --> 01:20:34,500 BRIAN YU: Great question. 1727 01:20:34,500 --> 01:20:37,375 So the question is, Bootstrap defines a whole bunch of these classes. 1728 01:20:37,375 --> 01:20:41,640 It defines row, and col-lg-3, and col-sm-6, and so on and so forth. 1729 01:20:41,640 --> 01:20:49,490 What happens if I, in my CSS files, am also using col-lg-3 or row as CSS? 1730 01:20:49,490 --> 01:20:53,660 And generally speaking, your web browser is able to take multiple CSS files 1731 01:20:53,660 --> 01:20:58,010 and try and reconcile them somehow by applying all of the styling together. 1732 01:20:58,010 --> 01:21:00,860 But if the styling conflicts, if Bootstrap says 1733 01:21:00,860 --> 01:21:02,960 this row should have this width, but you say 1734 01:21:02,960 --> 01:21:05,990 the row should have some other width, then one of them 1735 01:21:05,990 --> 01:21:07,670 ultimately needs to take precedence. 1736 01:21:07,670 --> 01:21:09,980 And generally speaking, the one that takes precedence 1737 01:21:09,980 --> 01:21:12,270 is the one that is more specific. 1738 01:21:12,270 --> 01:21:14,810 So if you had said that, I want the styling to apply 1739 01:21:14,810 --> 01:21:20,270 to any row that is a child of some other thing, then that will take precedence 1740 01:21:20,270 --> 01:21:23,709 over just a generic, I want rows to be styled in a particular way. 1741 01:21:23,709 --> 01:21:26,000 But generally speaking, it's a good idea to be mindful. 1742 01:21:26,000 --> 01:21:28,160 And if you were defining classes of your own, 1743 01:21:28,160 --> 01:21:31,160 oftentimes it's a good idea to give them different names from the ones 1744 01:21:31,160 --> 01:21:34,193 that Bootstrap does just to avoid having that conflict at all. 1745 01:21:34,193 --> 01:21:37,312 AUDIENCE: [INAUDIBLE] class in Bootstrap. 1746 01:21:37,312 --> 01:21:39,520 BRIAN YU: Correct, container is a class in Bootstrap. 1747 01:21:39,520 --> 01:21:41,300 AUDIENCE: [INAUDIBLE] 1748 01:21:41,300 --> 01:21:41,675 1749 01:21:41,675 --> 01:21:42,800 BRIAN YU: Yeah, Bootstrap-- 1750 01:21:42,800 --> 01:21:44,688 AUDIENCE: [INAUDIBLE] 1751 01:21:44,688 --> 01:21:49,410 1752 01:21:49,410 --> 01:21:52,960 BRIAN YU: So if you want to take the Bootstrap classes 1753 01:21:52,960 --> 01:21:56,080 and add your own styling to them, you can sort of 1754 01:21:56,080 --> 01:22:00,490 override Bootstrap, so to speak, by adding CSS code that 1755 01:22:00,490 --> 01:22:02,140 refers to Bootstrap's classes. 1756 01:22:02,140 --> 01:22:04,420 But you can add additional styling of your own 1757 01:22:04,420 --> 01:22:07,874 to them to make them display the way that you want them to display. 1758 01:22:07,874 --> 01:22:09,790 And you can experiment around with that to see 1759 01:22:09,790 --> 01:22:11,916 how that ends up actually working. 1760 01:22:11,916 --> 01:22:14,290 But Bootstrap, in addition to providing this grid layout, 1761 01:22:14,290 --> 01:22:15,820 also has a host of other features. 1762 01:22:15,820 --> 01:22:18,153 And we're not going have time to go through all of them. 1763 01:22:18,153 --> 01:22:20,410 But I'll show you a couple of interesting ones here. 1764 01:22:20,410 --> 01:22:24,170 For instance, Bootstrap makes it very easy to create alert messages. 1765 01:22:24,170 --> 01:22:28,490 So these are some sample messages, just generic news, good news, and bad news. 1766 01:22:28,490 --> 01:22:31,600 And in order to create those alert messages, all I needed to do 1767 01:22:31,600 --> 01:22:34,540 was apply particular classes. 1768 01:22:34,540 --> 01:22:39,640 So the class alert and alert-primary will automatically style something 1769 01:22:39,640 --> 01:22:41,290 as a blue alert message. 1770 01:22:41,290 --> 01:22:44,790 An alert alert-success will automatically style it is a green one. 1771 01:22:44,790 --> 01:22:46,870 And alert, dash, alert-danger automatically 1772 01:22:46,870 --> 01:22:48,520 styles it as a red message. 1773 01:22:48,520 --> 01:22:53,342 And so this makes it very easy to add these alerts to my code, 1774 01:22:53,342 --> 01:22:56,050 because Bootstrap has already written the styling for how to make 1775 01:22:56,050 --> 01:22:58,240 them display in a way that looks nice. 1776 01:22:58,240 --> 01:23:01,120 | if you're curious and you want to use more of Bootstrap's elements, 1777 01:23:01,120 --> 01:23:06,610 you can go to Bootstrap's website, which, I believe, is getbootstrap.com. 1778 01:23:06,610 --> 01:23:09,940 And if you go to their documentation on Bootstrap's website, 1779 01:23:09,940 --> 01:23:11,990 you can look at all of their components. 1780 01:23:11,990 --> 01:23:14,200 So here, what we just saw were Bootstrap's alerts. 1781 01:23:14,200 --> 01:23:15,580 You can see all of Bootstrap's alerts. 1782 01:23:15,580 --> 01:23:17,788 And here is the code that you can just copy and paste 1783 01:23:17,788 --> 01:23:20,620 in order to create alerts that look in a particular way. 1784 01:23:20,620 --> 01:23:23,050 Bootstrap also has special styling for buttons, 1785 01:23:23,050 --> 01:23:25,630 buttons that appear in different colors and different sizes. 1786 01:23:25,630 --> 01:23:28,247 And they tell you what classes to add to your buttons 1787 01:23:28,247 --> 01:23:30,580 in order to make your buttons styled in a particular way 1788 01:23:30,580 --> 01:23:32,140 to make them look a little bit nicer. 1789 01:23:32,140 --> 01:23:35,260 And there's a whole lot of other features and styling 1790 01:23:35,260 --> 01:23:36,172 that Bootstrap adds. 1791 01:23:36,172 --> 01:23:38,380 You can just scroll through this list and get a sense 1792 01:23:38,380 --> 01:23:40,960 for some of the features that Bootstrap gives to you. 1793 01:23:40,960 --> 01:23:43,709 And by using some of these features, you can 1794 01:23:43,709 --> 01:23:45,500 start to make your website look a lot nicer 1795 01:23:45,500 --> 01:23:50,410 much more quickly by taking advantage of the work that Bootstrap's already done. 1796 01:23:50,410 --> 01:23:55,120 So one last topic that I wanted to talk about today with regards to CSS 1797 01:23:55,120 --> 01:23:57,040 and how we might go about styling our website 1798 01:23:57,040 --> 01:24:00,280 is what happens when our stylesheets start to get a little more complicated 1799 01:24:00,280 --> 01:24:02,210 and get a little more sophisticated. 1800 01:24:02,210 --> 01:24:05,519 So I want to take a look at variables.html here. 1801 01:24:05,519 --> 01:24:07,810 And you'll see why it's called "variables" in a moment. 1802 01:24:07,810 --> 01:24:11,500 But right now I have, inside of variables.html, an unordered list, 1803 01:24:11,500 --> 01:24:14,370 a ul, and an ordered list, an ol. 1804 01:24:14,370 --> 01:24:18,640 And let's take a look at a sample CSS file that I might use in order 1805 01:24:18,640 --> 01:24:21,790 to style this variables.html file. 1806 01:24:21,790 --> 01:24:25,150 I have ul, which is set to font-size-- 1807 01:24:25,150 --> 01:24:29,110 14 pixels, and color is red, and ol, which is font-size-- 1808 01:24:29,110 --> 01:24:31,000 18 pixels, and color is also red. 1809 01:24:31,000 --> 01:24:33,980 So these two lists are going to be displayed in different-sized fonts, 1810 01:24:33,980 --> 01:24:36,104 but I want their color, ultimately, to be the same. 1811 01:24:36,104 --> 01:24:38,560 I want their color to render as red either way. 1812 01:24:38,560 --> 01:24:41,500 What if-- and maybe that's because the generic style of my website 1813 01:24:41,500 --> 01:24:44,830 is that I like the color red, and I want my web page to render things as red. 1814 01:24:44,830 --> 01:24:47,621 But what if, later on down the line, I decide, well, wait a minute, 1815 01:24:47,621 --> 01:24:50,707 I'd really rather that by list be blue instead, instead of red. 1816 01:24:50,707 --> 01:24:53,290 In this case, I would need to go back to two different places, 1817 01:24:53,290 --> 01:24:56,710 to the unordered list, and change the color to blue, and the ordered list, 1818 01:24:56,710 --> 01:24:58,630 and change that color to blue as well. 1819 01:24:58,630 --> 01:25:00,820 And you can imagine, in a more complicated website, 1820 01:25:00,820 --> 01:25:05,710 if I had dozens of different examples of CSS styling in particular colors, 1821 01:25:05,710 --> 01:25:09,130 I might need to go through all of them and change those individual colors. 1822 01:25:09,130 --> 01:25:11,810 And it might not be as drastic of a change as red to blue. 1823 01:25:11,810 --> 01:25:14,496 It might be just a slight shade of red that you want to change, 1824 01:25:14,496 --> 01:25:16,870 and you want to change it in many, many different places. 1825 01:25:16,870 --> 01:25:19,496 And having to change it independently on each separate line 1826 01:25:19,496 --> 01:25:21,370 is ultimately going to start getting tedious. 1827 01:25:21,370 --> 01:25:23,411 And remember, we talked about before, if you ever 1828 01:25:23,411 --> 01:25:25,840 find yourself repeating the same thing over, and over, 1829 01:25:25,840 --> 01:25:28,840 and over, you should always think about, is there a better way to do it. 1830 01:25:28,840 --> 01:25:30,872 Is there something else we can be doing instead? 1831 01:25:30,872 --> 01:25:33,580 And if you're familiar with programming and programming languages 1832 01:25:33,580 --> 01:25:35,900 like C, or Python, or any other language, 1833 01:25:35,900 --> 01:25:38,320 then you might be familiar with the concept of variables, 1834 01:25:38,320 --> 01:25:40,480 where we assign a variable of value once, 1835 01:25:40,480 --> 01:25:42,290 and then we can reuse it multiple times. 1836 01:25:42,290 --> 01:25:45,430 And if we change that variable's value, then that variable's value 1837 01:25:45,430 --> 01:25:48,170 is changed everywhere, so to speak. 1838 01:25:48,170 --> 01:25:52,960 And so what we're going to do now is introduce an entirely new language 1839 01:25:52,960 --> 01:25:55,960 which is built on top of CSS called Sass. 1840 01:25:55,960 --> 01:25:58,977 And what Sass is is it's an extension to CSS 1841 01:25:58,977 --> 01:26:01,810 that gives us a little more power and a little more flexibility when 1842 01:26:01,810 --> 01:26:05,550 it comes to designing CSS stylesheets that lets us programmatically generate 1843 01:26:05,550 --> 01:26:08,030 stylesheets in a more advanced and more powerful way. 1844 01:26:08,030 --> 01:26:10,030 But ultimately you'll see that the concepts here 1845 01:26:10,030 --> 01:26:13,390 are just to make it easier to generate the stylesheets that we 1846 01:26:13,390 --> 01:26:15,050 want to generate. 1847 01:26:15,050 --> 01:26:21,306 So instead of variables.css, I'm going to look at variables.scss, 1848 01:26:21,306 --> 01:26:25,930 where .scss is the typical extension for a Sass file, 1849 01:26:25,930 --> 01:26:29,830 which is going to be some specific extension to CSS that we're going 1850 01:26:29,830 --> 01:26:31,520 to explore in a moment. 1851 01:26:31,520 --> 01:26:34,210 So what's going on in variables.scss? 1852 01:26:34,210 --> 01:26:36,820 Well, the first thing I do on line 1 is define a variable. 1853 01:26:36,820 --> 01:26:41,260 We haven't previously had any variables in CSS, because CSS, out of the box, 1854 01:26:41,260 --> 01:26:43,480 doesn't really support the idea of a variable. 1855 01:26:43,480 --> 01:26:46,041 But Sass, this extension to CSS, does. 1856 01:26:46,041 --> 01:26:47,040 And so how does it work? 1857 01:26:47,040 --> 01:26:49,800 On line 1, I said $color-- 1858 01:26:49,800 --> 01:26:52,590 all variables in Sass begin with a dollar sign-- 1859 01:26:52,590 --> 01:26:54,770 $color, colon, red. 1860 01:26:54,770 --> 01:26:56,400 So I'm defining a new variable. 1861 01:26:56,400 --> 01:26:57,570 It's called color. 1862 01:26:57,570 --> 01:27:00,600 And its value is going to be red. 1863 01:27:00,600 --> 01:27:02,970 And then, here's what's happening. 1864 01:27:02,970 --> 01:27:06,300 I have my unordered list, whose font size is 14 pixels. 1865 01:27:06,300 --> 01:27:08,880 And the color-- instead of saying red is the color, 1866 01:27:08,880 --> 01:27:13,140 I'm saying $color, meaning $color was this variable that I 1867 01:27:13,140 --> 01:27:14,460 defined to be red before. 1868 01:27:14,460 --> 01:27:18,300 Whatever color that is, that's the color I want my unordered list to be. 1869 01:27:18,300 --> 01:27:19,456 What about my ordered list? 1870 01:27:19,456 --> 01:27:21,330 Well, the font size is going to be 18 pixels, 1871 01:27:21,330 --> 01:27:23,490 and the color is also going to be whatever 1872 01:27:23,490 --> 01:27:25,945 the value of this color variable is. 1873 01:27:25,945 --> 01:27:28,570 And so by doing this, I get the same effect-- an unordered list 1874 01:27:28,570 --> 01:27:31,015 that's 14 pixels in font size and red. 1875 01:27:31,015 --> 01:27:32,640 And same is true for the ordered list-- 1876 01:27:32,640 --> 01:27:36,030 18 pixels in size, and the color is also going to be red-- no different. 1877 01:27:36,030 --> 01:27:37,046 But I faced a problem. 1878 01:27:37,046 --> 01:27:40,170 Can anyone guess what the problem might be if I tried to just use this code 1879 01:27:40,170 --> 01:27:43,930 and render it in the web browser? 1880 01:27:43,930 --> 01:27:45,410 Do we think it will work? 1881 01:27:45,410 --> 01:27:46,128 Yeah? 1882 01:27:46,128 --> 01:27:48,000 AUDIENCE: [INAUDIBLE] 1883 01:27:48,000 --> 01:27:48,880 1884 01:27:48,880 --> 01:27:52,512 BRIAN YU: Oh, is there, like, a particular CSS property called color? 1885 01:27:52,512 --> 01:27:54,220 That's not going to be a big deal for us, 1886 01:27:54,220 --> 01:27:57,400 but that's a good point, that we want to be careful about naming things. 1887 01:27:57,400 --> 01:28:01,570 But ultimately our web browsers are trained to understand CSS, 1888 01:28:01,570 --> 01:28:03,220 and they know how CSS works. 1889 01:28:03,220 --> 01:28:07,180 But web browsers don't, out of the box, understand Sass, this extension to CSS, 1890 01:28:07,180 --> 01:28:08,787 where we have variables in there. 1891 01:28:08,787 --> 01:28:10,870 So our web browsers are going to start to complain 1892 01:28:10,870 --> 01:28:16,300 if we just put this inside of a CSS file and say we want this to render 1893 01:28:16,300 --> 01:28:18,370 as the styling for the website. 1894 01:28:18,370 --> 01:28:22,450 So what we need to do is take this SCSS file, this Sass file, 1895 01:28:22,450 --> 01:28:25,180 and convert it into a CSS file. 1896 01:28:25,180 --> 01:28:28,190 And that's why there's a program called Sass, which does just that. 1897 01:28:28,190 --> 01:28:29,720 And I'll show you how it works. 1898 01:28:29,720 --> 01:28:34,630 If I go into my variables directory, what I have here is 1899 01:28:34,630 --> 01:28:37,370 a variables.scss file. 1900 01:28:37,370 --> 01:28:44,170 And if I run sass variables.scss variables.css, 1901 01:28:44,170 --> 01:28:48,190 what that is going to do is it's going to take my variables.scss file, 1902 01:28:48,190 --> 01:28:50,980 and it's going to compile it-- turn it into-- 1903 01:28:50,980 --> 01:28:54,550 a CSS file that my web browser is going to be able to understand. 1904 01:28:54,550 --> 01:28:55,492 So I press Return. 1905 01:28:55,492 --> 01:28:56,200 That compiled it. 1906 01:28:56,200 --> 01:28:58,060 And now if I take a look at it, I see I now 1907 01:28:58,060 --> 01:29:01,180 have a variables.css file, which I didn't have before. 1908 01:29:01,180 --> 01:29:02,990 And I also have this additional map file. 1909 01:29:02,990 --> 01:29:04,150 You don't need to worry too much about that. 1910 01:29:04,150 --> 01:29:06,525 But if you're curious, that's just a way for your browser 1911 01:29:06,525 --> 01:29:10,240 to understand the relationship between the CSS and the SCSS file 1912 01:29:10,240 --> 01:29:12,500 in case it wants to figure out-- 1913 01:29:12,500 --> 01:29:15,250 it's useful for debugging or figuring out what line something came 1914 01:29:15,250 --> 01:29:16,990 from in the original file. 1915 01:29:16,990 --> 01:29:20,320 But let's look at this variables.css file, which I didn't create. 1916 01:29:20,320 --> 01:29:22,420 It was generated for me by Sass. 1917 01:29:22,420 --> 01:29:25,420 What does it look like? 1918 01:29:25,420 --> 01:29:27,580 So it looks, ultimately, like this. 1919 01:29:27,580 --> 01:29:30,940 And it's exactly what my previous CSS file looked like. 1920 01:29:30,940 --> 01:29:34,196 But it substituted that color variable with the name, 1921 01:29:34,196 --> 01:29:36,820 or whatever value that color variable was actually assigned to. 1922 01:29:36,820 --> 01:29:38,220 So color is now red. 1923 01:29:38,220 --> 01:29:41,027 Color is now red in both the unordered list and the ordered list. 1924 01:29:41,027 --> 01:29:44,110 The fact that the curly brace is on the same line instead of on a new line 1925 01:29:44,110 --> 01:29:46,180 like we've been doing before is just that stylistic choice. 1926 01:29:46,180 --> 01:29:49,420 It doesn't actually make a difference on the way that the page renders. 1927 01:29:49,420 --> 01:29:52,930 But what I've done is I've used the variable from the SCSS file 1928 01:29:52,930 --> 01:29:55,570 and compiled that file into a CSS file. 1929 01:29:55,570 --> 01:29:59,600 And now this is something that my web browser can ultimately understand. 1930 01:29:59,600 --> 01:30:07,990 So now if I go back to variables.html and open up variables.html, what I get 1931 01:30:07,990 --> 01:30:10,480 is an ordered list where the unordered list items are 1932 01:30:10,480 --> 01:30:12,220 smaller than the ordered list items. 1933 01:30:12,220 --> 01:30:14,230 But all of the list items are red. 1934 01:30:14,230 --> 01:30:18,400 And now, if I wanted to change this-- if I wanted to change the color from red 1935 01:30:18,400 --> 01:30:21,520 to blue, for instance, rather than change it in two different places-- 1936 01:30:21,520 --> 01:30:23,620 or, and you imagine, in a larger-scale program, 1937 01:30:23,620 --> 01:30:27,310 potentially dozens or hundreds of places across your web application-- 1938 01:30:27,310 --> 01:30:30,430 all I need to do is change this $color variable. 1939 01:30:30,430 --> 01:30:33,950 I change it from red to blue, for example. 1940 01:30:33,950 --> 01:30:40,300 And if I open variables.html, now it's still red. 1941 01:30:40,300 --> 01:30:43,235 I changed it to blue, but the styling of the list items is still red. 1942 01:30:43,235 --> 01:30:44,110 Why is that the case? 1943 01:30:44,110 --> 01:30:45,137 Why did that happen? 1944 01:30:45,137 --> 01:30:46,330 AUDIENCE: [INAUDIBLE] 1945 01:30:46,330 --> 01:30:47,996 BRIAN YU: I need to recompile it, right. 1946 01:30:47,996 --> 01:30:52,120 Because this HTML website is only looking for variables.css. 1947 01:30:52,120 --> 01:30:54,610 It doesn't know anything about variables.scss, 1948 01:30:54,610 --> 01:30:56,740 which is the file I've actually been working with. 1949 01:30:56,740 --> 01:31:01,930 So I need to run sass variables.scss variables.css. 1950 01:31:01,930 --> 01:31:06,170 That's going to recompile my CSS file such that when I now refresh the page, 1951 01:31:06,170 --> 01:31:07,720 now everything is blue. 1952 01:31:07,720 --> 01:31:09,910 Now, as you're developing with SCSS, you might 1953 01:31:09,910 --> 01:31:13,034 imagine that it's going to start to get annoying fast, where every time you 1954 01:31:13,034 --> 01:31:15,720 make a change to a SCSS file, you're going 1955 01:31:15,720 --> 01:31:17,740 to need to recompile it back into CSS. 1956 01:31:17,740 --> 01:31:21,160 So Sass has some built-in features to help make this a little bit easier. 1957 01:31:21,160 --> 01:31:23,560 One is that Sass can watch a file-- 1958 01:31:23,560 --> 01:31:27,130 in other words, keep track of the file, or even a directory full of files-- 1959 01:31:27,130 --> 01:31:31,460 and any time any of them changes, automatically recompile the CSS file. 1960 01:31:31,460 --> 01:31:37,060 So if I said sass --watch variables.scss, 1961 01:31:37,060 --> 01:31:40,350 and any time a change is made to variables.scss, 1962 01:31:40,350 --> 01:31:45,260 compile it to variables.css, now Sass is watching for changes. 1963 01:31:45,260 --> 01:31:49,840 So now if I go back here and change the color to green, for example, 1964 01:31:49,840 --> 01:31:53,660 and I save that, if I check back here, Sass 1965 01:31:53,660 --> 01:31:57,400 has automatically detected that I've made a change to variables.scss. 1966 01:31:57,400 --> 01:32:00,230 And it's written me a new version of variables.css. 1967 01:32:00,230 --> 01:32:03,850 So without me needing to manually go in and recompile that SCSS file, 1968 01:32:03,850 --> 01:32:05,120 I can refresh the page. 1969 01:32:05,120 --> 01:32:07,092 And now all of the list items are green. 1970 01:32:07,092 --> 01:32:08,800 So that's marginally better, that instead 1971 01:32:08,800 --> 01:32:12,190 of needing to recompile the Sass file every time I make a change, 1972 01:32:12,190 --> 01:32:15,790 I can just tell Sass, watch all of my SCSS files. 1973 01:32:15,790 --> 01:32:19,550 And whenever any of them change, automatically compile it to CSS for me. 1974 01:32:19,550 --> 01:32:22,840 And an additional feature is that many website deployment systems, 1975 01:32:22,840 --> 01:32:27,010 GitHub Pages included, have built-in support for Sass such that if you push 1976 01:32:27,010 --> 01:32:30,430 an SCSS file to GitHub Pages in project 0, for instance, 1977 01:32:30,430 --> 01:32:34,570 GitHub will automatically take care of the process of compiling that Sass file 1978 01:32:34,570 --> 01:32:40,210 from a .scss file to a .css file such that when someone goes to your website, 1979 01:32:40,210 --> 01:32:44,710 they will see the resulting CSS style applied to your website. 1980 01:32:44,710 --> 01:32:48,560 And so many system nowadays have built-in support for SCSS. 1981 01:32:48,560 --> 01:32:51,170 They make it easy for you to use Sass in order 1982 01:32:51,170 --> 01:32:53,900 to have a little bit more control over your styling 1983 01:32:53,900 --> 01:32:56,990 in order to make websites really look the way that you want them to look. 1984 01:32:56,990 --> 01:33:00,331 Questions about Sass so far and what we've seen? 1985 01:33:00,331 --> 01:33:00,830 Yeah? 1986 01:33:00,830 --> 01:33:02,770 AUDIENCE: [INAUDIBLE] 1987 01:33:02,770 --> 01:33:03,309 1988 01:33:03,309 --> 01:33:04,350 BRIAN YU: Great question. 1989 01:33:04,350 --> 01:33:06,650 Do you need to install anything in order to run the sass command? 1990 01:33:06,650 --> 01:33:08,660 Yeah, you'll need to install Sass in order 1991 01:33:08,660 --> 01:33:13,070 to make any of that-- the command line sass command work that does 1992 01:33:13,070 --> 01:33:16,145 the compilation from SCSS files to CSS. 1993 01:33:16,145 --> 01:33:18,710 If you never want to do the compilation yourself-- 1994 01:33:18,710 --> 01:33:21,530 if you want to just rely on GitHub to do that compilation for you-- 1995 01:33:21,530 --> 01:33:23,196 then you don't need to install anything. 1996 01:33:23,196 --> 01:33:25,910 You can just push an SCSS file to GitHub Pages. 1997 01:33:25,910 --> 01:33:29,340 And GitHub Pages will, on its own, convert it into CSS. 1998 01:33:29,340 --> 01:33:31,340 But if you want to test that compilation locally 1999 01:33:31,340 --> 01:33:34,830 to see what the resulting CSS looks like, then you'll want to install Sass. 2000 01:33:34,830 --> 01:33:37,240 It's a freely available, pretty small piece of software 2001 01:33:37,240 --> 01:33:39,073 that you can just install onto your computer 2002 01:33:39,073 --> 01:33:43,854 the same way you installed Git or other software in order to make that easier. 2003 01:33:43,854 --> 01:33:44,520 Other questions? 2004 01:33:44,520 --> 01:33:45,020 Yeah. 2005 01:33:45,020 --> 01:33:49,630 AUDIENCE: What if I had multiple CSS files, 2006 01:33:49,630 --> 01:34:00,729 like if we downloaded the Bootstrap CSS file and I [INAUDIBLE] from that? 2007 01:34:00,729 --> 01:34:01,770 BRIAN YU: Great question. 2008 01:34:01,770 --> 01:34:04,280 So the question is, how does Sass work when we're 2009 01:34:04,280 --> 01:34:05,990 dealing with multiple different files? 2010 01:34:05,990 --> 01:34:07,698 Sass has a built-in command that actually 2011 01:34:07,698 --> 01:34:11,870 lets you import existing CSS from a different file into a Sass file. 2012 01:34:11,870 --> 01:34:16,850 So there's built-in support for multi-file stylesheets built into Sass. 2013 01:34:16,850 --> 01:34:19,050 We won't see any examples of that in this lecture. 2014 01:34:19,050 --> 01:34:20,990 But if you go to the Sass website, you'll 2015 01:34:20,990 --> 01:34:23,330 find examples of how they're able to incorporate 2016 01:34:23,330 --> 01:34:25,280 different files into the same file in order 2017 01:34:25,280 --> 01:34:28,610 to use variables that are defined in a different file 2018 01:34:28,610 --> 01:34:30,980 in a separate stylesheet. 2019 01:34:30,980 --> 01:34:31,940 Great question though. 2020 01:34:31,940 --> 01:34:32,470 One more question? 2021 01:34:32,470 --> 01:34:32,970 Yeah? 2022 01:34:32,970 --> 01:34:34,320 AUDIENCE: [INAUDIBLE] 2023 01:34:34,320 --> 01:34:41,739 2024 01:34:41,739 --> 01:34:42,780 BRIAN YU: Great question. 2025 01:34:42,780 --> 01:34:44,880 So the question is, when you're linking the file, 2026 01:34:44,880 --> 01:34:47,570 do we want to link the CSS file or the SCSS file? 2027 01:34:47,570 --> 01:34:51,327 We always want to link the CSS file, because the CSS file is the only one 2028 01:34:51,327 --> 01:34:52,910 that the browser actually understands. 2029 01:34:52,910 --> 01:34:56,900 Google Chrome, out of the box, doesn't know how to take a Sass file 2030 01:34:56,900 --> 01:34:59,300 and understand what the variables mean. 2031 01:34:59,300 --> 01:35:01,340 It only understands the CSS file. 2032 01:35:01,340 --> 01:35:04,141 So what we need to do is say, reference the CSS file, 2033 01:35:04,141 --> 01:35:06,890 and then just make sure that somehow, either us doing it ourselves 2034 01:35:06,890 --> 01:35:09,080 or letting GitHub Pages do it for us, get 2035 01:35:09,080 --> 01:35:12,410 that Sass file compiled down to CSS such that we can then 2036 01:35:12,410 --> 01:35:14,000 use it for our own purposes. 2037 01:35:14,000 --> 01:35:16,059 Excellent question though. 2038 01:35:16,059 --> 01:35:17,350 So those are variables in Sass. 2039 01:35:17,350 --> 01:35:19,130 But what other features does Sass give us? 2040 01:35:19,130 --> 01:35:21,171 How else can we make this a little more powerful? 2041 01:35:21,171 --> 01:35:23,060 Well, one other feature that's very helpful 2042 01:35:23,060 --> 01:35:26,950 is nesting different CSS selectors within each other. 2043 01:35:26,950 --> 01:35:28,970 And I'll show you an example of that now. 2044 01:35:28,970 --> 01:35:31,400 So here is nesting.html. 2045 01:35:31,400 --> 01:35:35,390 So inside the body of nesting.html, I have a big div, inside 2046 01:35:35,390 --> 01:35:38,270 of which is a paragraph inside the div, and also 2047 01:35:38,270 --> 01:35:41,030 a list inside the div, an unordered list with three list items 2048 01:35:41,030 --> 01:35:43,700 that are all inside of this div. 2049 01:35:43,700 --> 01:35:45,890 And outside of that division of the site, 2050 01:35:45,890 --> 01:35:49,020 I have a paragraph that's outside of the div and a list 2051 01:35:49,020 --> 01:35:50,419 that's also outside of the div-- 2052 01:35:50,419 --> 01:35:52,460 so sort of a trivial, contrived example, but just 2053 01:35:52,460 --> 01:35:55,730 going to show you a bunch of different hierarchies via which we 2054 01:35:55,730 --> 01:35:58,250 might organize different HTML elements. 2055 01:35:58,250 --> 01:36:00,960 And I want to style them in a particular way. 2056 01:36:00,960 --> 01:36:03,836 So let's take a look at nesting.scss. 2057 01:36:03,836 --> 01:36:06,830 And so here's the contents of nesting.scss. 2058 01:36:06,830 --> 01:36:08,870 I have div font-size-- 2059 01:36:08,870 --> 01:36:10,040 18 pixels. 2060 01:36:10,040 --> 01:36:14,030 And then within the div's curly braces, I have an additional p. 2061 01:36:14,030 --> 01:36:16,040 And what that p is standing for is that I 2062 01:36:16,040 --> 01:36:21,001 want this styling to apply to any paragraphs that are inside of a div. 2063 01:36:21,001 --> 01:36:23,000 Now, notice that this isn't anything we couldn't 2064 01:36:23,000 --> 01:36:24,860 have done before with just regular CSS. 2065 01:36:24,860 --> 01:36:29,570 We could have said, on a different line, div, space, p 2066 01:36:29,570 --> 01:36:32,480 and then color equals blue to say paragraphs inside of a div 2067 01:36:32,480 --> 01:36:33,712 should be colored blue. 2068 01:36:33,712 --> 01:36:35,420 But nesting things within each other just 2069 01:36:35,420 --> 01:36:37,190 helps to organize things a little more. 2070 01:36:37,190 --> 01:36:40,160 Especially as our stylesheets start to get longer and more complicated, 2071 01:36:40,160 --> 01:36:43,070 we might find it easier to organize our code into something 2072 01:36:43,070 --> 01:36:46,490 like this where we can say, all right, how are we styling the div. 2073 01:36:46,490 --> 01:36:48,080 Well, the font's going to be 18. 2074 01:36:48,080 --> 01:36:49,970 Any paragraphs within it should be blue. 2075 01:36:49,970 --> 01:36:52,250 And any unordered lists within it should be green. 2076 01:36:52,250 --> 01:36:55,137 And that just helps to organize our styles a little more 2077 01:36:55,137 --> 01:36:57,470 such that, as they get longer, it gets easier to look at 2078 01:36:57,470 --> 01:36:59,220 and easier to maintain. 2079 01:36:59,220 --> 01:37:02,240 So when I compile that using Sass, which I've already done, 2080 01:37:02,240 --> 01:37:04,700 I'll show you with the resulting nesting.css file-- 2081 01:37:04,700 --> 01:37:06,980 or actually, I'll do it now. 2082 01:37:06,980 --> 01:37:12,090 I'll go into my nesting directory where I have a nesting.scss fild. 2083 01:37:12,090 --> 01:37:17,000 I'll go ahead and compile nesting.scss to nesting.css. 2084 01:37:17,000 --> 01:37:20,072 And we'll take a look at what that file looks like. 2085 01:37:20,072 --> 01:37:22,280 And what it's ultimately done, it's done exactly what 2086 01:37:22,280 --> 01:37:25,290 we would have done before if we didn't have Sass at our disposal. 2087 01:37:25,290 --> 01:37:27,770 It said div's font size is going to be 18. 2088 01:37:27,770 --> 01:37:31,340 And then where, before, we just had p inside of the div, 2089 01:37:31,340 --> 01:37:33,590 it's changed that to div, space, p. 2090 01:37:33,590 --> 01:37:37,319 In other words, all paragraphs contained within a div are going to be blue, 2091 01:37:37,319 --> 01:37:39,860 and all unordered lists within the div are going to be green. 2092 01:37:39,860 --> 01:37:43,070 But instead of needing to specify this div every time, 2093 01:37:43,070 --> 01:37:46,370 we were just able to enter scss, have a slightly simpler, slightly 2094 01:37:46,370 --> 01:37:49,070 easier to look at interface that tells us how things 2095 01:37:49,070 --> 01:37:51,980 are going to be styled inside the div. 2096 01:37:51,980 --> 01:37:56,660 So if I open up nesting.html, what the result is is that the paragraphs get 2097 01:37:56,660 --> 01:37:58,820 styled as blue, the list items get styled 2098 01:37:58,820 --> 01:38:02,120 as green, but only the ones that are inside of this part, which 2099 01:38:02,120 --> 01:38:03,440 was that original div. 2100 01:38:03,440 --> 01:38:07,370 And anything outside of it doesn't get styled in that particular way at all. 2101 01:38:07,370 --> 01:38:10,649 So that nesting feature is just another nice to have that Sass offers. 2102 01:38:10,649 --> 01:38:12,690 Sass offers a number of different other features. 2103 01:38:12,690 --> 01:38:16,086 But the last one that we'll take a look at today is the concept of inheritance. 2104 01:38:16,086 --> 01:38:18,710 And inheritance is something you may be familiar with if you've 2105 01:38:18,710 --> 01:38:20,959 done programming before in object-oriented programming 2106 01:38:20,959 --> 01:38:23,150 languages like Java or Python. 2107 01:38:23,150 --> 01:38:25,550 But inheritance in the context of Sass is 2108 01:38:25,550 --> 01:38:29,570 used to refer to when you have some general styling 2109 01:38:29,570 --> 01:38:32,340 that you might want to apply to a whole bunch of different things, 2110 01:38:32,340 --> 01:38:34,173 but each of those different things you might 2111 01:38:34,173 --> 01:38:36,320 want to be styled in a slightly different way. 2112 01:38:36,320 --> 01:38:38,460 So if you think back to Bootstrap for example, 2113 01:38:38,460 --> 01:38:43,290 where we saw those alert messages in Bootstrap where we had-- 2114 01:38:43,290 --> 01:38:44,554 I'll open it up-- 2115 01:38:44,554 --> 01:38:46,970 where we had a blue alert, a green alert, and a red alert, 2116 01:38:46,970 --> 01:38:49,910 what if we wanted to create this sort of interface for ourselves 2117 01:38:49,910 --> 01:38:52,820 without using Bootstrap where we wanted different alert messages that 2118 01:38:52,820 --> 01:38:54,080 were different colors? 2119 01:38:54,080 --> 01:38:56,360 Well, you might imagine there's a lot of styling that goes into this. 2120 01:38:56,360 --> 01:38:58,370 There is a particular font that they're using. 2121 01:38:58,370 --> 01:39:00,161 There's a particular font size that they're 2122 01:39:00,161 --> 01:39:01,764 using for all of these alert messages. 2123 01:39:01,764 --> 01:39:03,930 But also, all of these alert messages are different. 2124 01:39:03,930 --> 01:39:06,110 This one's blue, this one's green, this one's red. 2125 01:39:06,110 --> 01:39:09,506 And as a result, they need slightly different CSS styling. 2126 01:39:09,506 --> 01:39:11,130 But they're fundamentally very similar. 2127 01:39:11,130 --> 01:39:12,830 So there's a lot they share in common. 2128 01:39:12,830 --> 01:39:14,710 If we were to write out the CSS by hand, we 2129 01:39:14,710 --> 01:39:17,240 might have a lot of repetitive styling where 2130 01:39:17,240 --> 01:39:20,000 we have the styling for the first alert message that 2131 01:39:20,000 --> 01:39:23,240 got a lot of the same stuff, then a blue information, same thing 2132 01:39:23,240 --> 01:39:24,310 for green and red. 2133 01:39:24,310 --> 01:39:27,320 But with SCSS, we can use the concept of inheritance 2134 01:39:27,320 --> 01:39:30,260 to factor out all of those commonalities in order 2135 01:39:30,260 --> 01:39:33,310 to make it easier and more efficient to generate 2136 01:39:33,310 --> 01:39:37,160 CSS that lets us have styling that inherits 2137 01:39:37,160 --> 01:39:38,969 from some overarching property. 2138 01:39:38,969 --> 01:39:40,760 And so let's take a look at what that looks 2139 01:39:40,760 --> 01:39:44,690 like by opening up inheritance.html. 2140 01:39:44,690 --> 01:39:49,320 So what I have here is, without using Bootstrap, I have three different divs. 2141 01:39:49,320 --> 01:39:51,020 This is a success message. 2142 01:39:51,020 --> 01:39:52,340 This is a warning message. 2143 01:39:52,340 --> 01:39:53,860 This is an error message. 2144 01:39:53,860 --> 01:39:55,410 One's classes is success. 2145 01:39:55,410 --> 01:39:56,750 One's class is warning. 2146 01:39:56,750 --> 01:39:57,800 One's class is error. 2147 01:39:57,800 --> 01:40:00,147 So those are my three classes that I have to deal with. 2148 01:40:00,147 --> 01:40:01,980 And I want to style them in a particular way 2149 01:40:01,980 --> 01:40:04,021 so they show up sort of like the Bootstrap alerts 2150 01:40:04,021 --> 01:40:06,450 that we were looking at just a moment ago. 2151 01:40:06,450 --> 01:40:12,180 So let's look up at inheritance.scss and see what's going on here. 2152 01:40:12,180 --> 01:40:16,554 So what I have here is this %message. 2153 01:40:16,554 --> 01:40:18,470 And percent isn't something we've seen before. 2154 01:40:18,470 --> 01:40:19,850 It's something specific to Sass. 2155 01:40:19,850 --> 01:40:22,520 And it lets us define, effectively, a template, something 2156 01:40:22,520 --> 01:40:24,740 that other things are going to inherit from. 2157 01:40:24,740 --> 01:40:26,970 And this is just going to be a generic message-- 2158 01:40:26,970 --> 01:40:28,970 whether it's a success, of a failure, or an info 2159 01:40:28,970 --> 01:40:30,894 message, just a generic message. 2160 01:40:30,894 --> 01:40:32,810 And that message has a particular font family. 2161 01:40:32,810 --> 01:40:34,520 It's going to be a sans-serif font. 2162 01:40:34,520 --> 01:40:37,809 It has a particular font size, 18 points, and it's going to be bold. 2163 01:40:37,809 --> 01:40:39,850 That message is going to have a border around it, 2164 01:40:39,850 --> 01:40:43,100 a 1-pixel solid black border around that message. 2165 01:40:43,100 --> 01:40:45,800 And it will have certain spacing, 20 pixels worth of padding, 2166 01:40:45,800 --> 01:40:47,720 and then 20-pixel margin. 2167 01:40:47,720 --> 01:40:50,420 And that styling, I want it to apply to all three 2168 01:40:50,420 --> 01:40:52,050 of my different categories of messages. 2169 01:40:52,050 --> 01:40:55,610 Success messages, and error messages, and info messages 2170 01:40:55,610 --> 01:40:57,810 alike all should have that same styling. 2171 01:40:57,810 --> 01:40:59,820 And so how do I do that? 2172 01:40:59,820 --> 01:41:02,990 Well, this is the code that I need, now, in Sass, 2173 01:41:02,990 --> 01:41:05,330 in order to define those three classes. 2174 01:41:05,330 --> 01:41:08,330 My success class, I just say, extend message. 2175 01:41:08,330 --> 01:41:12,050 Take all the styling from the message before, and use it. 2176 01:41:12,050 --> 01:41:15,320 But let's additionally add that the background color is going to be green. 2177 01:41:15,320 --> 01:41:17,510 Likewise, for the warning message, let's extend the message. 2178 01:41:17,510 --> 01:41:20,010 It's going to have the same style properties as the message. 2179 01:41:20,010 --> 01:41:21,650 But the background color is orange. 2180 01:41:21,650 --> 01:41:25,350 And same with error, except now, the background color is red. 2181 01:41:25,350 --> 01:41:28,670 If I now compile that down to CSS, the result 2182 01:41:28,670 --> 01:41:35,750 is that I get CSS code that applies this generic styling to all successes, 2183 01:41:35,750 --> 01:41:39,950 warnings, and errors, and this specific background color to success, 2184 01:41:39,950 --> 01:41:41,960 and a specific background color to warnings, 2185 01:41:41,960 --> 01:41:44,040 and a specific background color to red-- 2186 01:41:44,040 --> 01:41:45,660 to errors. 2187 01:41:45,660 --> 01:41:49,302 And again, none of this is stuff that we needed Sass to do, but using Sass 2188 01:41:49,302 --> 01:41:50,510 makes it a little bit easier. 2189 01:41:50,510 --> 01:41:53,580 It's a little bit of a nicer semantic to say, here's a generic message, 2190 01:41:53,580 --> 01:41:57,509 here's the styling for that message, and here are specific success, warning, 2191 01:41:57,509 --> 01:41:59,300 and error messages that are going to extend 2192 01:41:59,300 --> 01:42:01,430 or inherit from that message in order to add 2193 01:42:01,430 --> 01:42:03,530 additional information, the result of which 2194 01:42:03,530 --> 01:42:06,110 is a CSS file that we could have written ourselves 2195 01:42:06,110 --> 01:42:09,650 but that gets generated from the SCSS file. 2196 01:42:09,650 --> 01:42:15,530 So if we now open up inheritance.html, this is what we get, 2197 01:42:15,530 --> 01:42:17,900 a success message, a warning message, an error message. 2198 01:42:17,900 --> 01:42:19,220 We see the spacing around each. 2199 01:42:19,220 --> 01:42:22,590 We see the font size and the font style that we wanted it to be. 2200 01:42:22,590 --> 01:42:24,750 But the difference comes in the different classes. 2201 01:42:24,750 --> 01:42:27,350 One is a success message, one is a warning message, 2202 01:42:27,350 --> 01:42:29,150 one is an error message. 2203 01:42:29,150 --> 01:42:32,930 And so those different types of messages have different CSS styling 2204 01:42:32,930 --> 01:42:33,810 applied to them. 2205 01:42:33,810 --> 01:42:36,590 And as a result, they appear a little bit differently. 2206 01:42:36,590 --> 01:42:39,080 So questions about any of the Sass tools that we've 2207 01:42:39,080 --> 01:42:43,310 seen so far, whether it was variables, or nesting elements within each other, 2208 01:42:43,310 --> 01:42:45,770 or using inheritance to allow a generic style 2209 01:42:45,770 --> 01:42:51,160 to be applied to multiple different types of classes, or IDs, or elements? 2210 01:42:51,160 --> 01:42:53,850 OK, if questions do come up, feel free to reach out. 2211 01:42:53,850 --> 01:42:56,460 And feel free to post in the Slack and ask questions 2212 01:42:56,460 --> 01:42:58,180 as you begin to dive into project 0. 2213 01:42:58,180 --> 01:43:00,180 In project 0, you'll have more of an opportunity 2214 01:43:00,180 --> 01:43:02,280 to experiment with some of this, to use Bootstrap, 2215 01:43:02,280 --> 01:43:05,460 to make your web page mobile-responsive, and to begin to use Sass in order 2216 01:43:05,460 --> 01:43:08,820 to create more advanced, more sophisticated stylesheets. 2217 01:43:08,820 --> 01:43:10,882 Next week we'll dive into a look at Python, 2218 01:43:10,882 --> 01:43:13,590 and how we actually create web applications by writing in Python, 2219 01:43:13,590 --> 01:43:16,980 and using some of the HTML and CSS we've looked at in the last two weeks 2220 01:43:16,980 --> 01:43:17,820 in order to do so. 2221 01:43:17,820 --> 01:43:20,940 But for now, that's it for Web Programming with Python and JavaScript. 2222 01:43:20,940 --> 01:43:23,990 Thank you all, and we'll see you next week. 2223 01:43:23,990 --> 01:43:26,158