1 00:00:00,000 --> 00:00:09,298 [MUSIC] 2 00:00:09,298 --> 00:00:10,480 Hey, whats up, everyone? 3 00:00:10,480 --> 00:00:14,604 Are you ready to build out the Facebook Reactions UI? 4 00:00:14,604 --> 00:00:20,607 I know I'm ready, so if you want to follow along just go to 5 00:00:20,607 --> 00:00:26,250 github.com/treehouse/facebook-reactions. 6 00:00:26,250 --> 00:00:28,494 When you get to the repo for the project, 7 00:00:28,494 --> 00:00:31,861 the first thing you'll see in the README is this big mockup. 8 00:00:31,861 --> 00:00:33,602 This is what we'll be building out. 9 00:00:33,602 --> 00:00:37,309 It's basically just one instance of a Facebook post or 10 00:00:37,309 --> 00:00:42,492 social media post with just a little bit of info in there, nothing crazy. 11 00:00:42,492 --> 00:00:44,999 But the real magic is this Like button. 12 00:00:44,999 --> 00:00:49,633 We'll write some code so that when we hover over this Like button, 13 00:00:49,633 --> 00:00:55,111 this menu with all these reactions will pop up, and we can hover over each one. 14 00:00:55,111 --> 00:00:58,141 And it'll have a little bit of a animation. 15 00:00:58,141 --> 00:01:02,710 And this will be done with just HTML and CSS, so no JavaScript needed. 16 00:01:04,030 --> 00:01:07,169 Underneath the mockup you will see some CSS variables, and 17 00:01:07,169 --> 00:01:10,390 these are just what we're gonna be using to style up this UI. 18 00:01:11,410 --> 00:01:16,090 So if you wanna follow along, let's just grab this big green Code button, 19 00:01:16,090 --> 00:01:19,970 click copy, and you can use GitHub desktop or your terminal. 20 00:01:19,970 --> 00:01:24,470 I'm gonna use my terminal, and I'm gonna clone down this project. 21 00:01:24,470 --> 00:01:28,500 So I'm gonna cd to my desktop, and I'm gonna git clone and paste in that link. 22 00:01:30,360 --> 00:01:32,980 And now I have the project on my desktop. 23 00:01:32,980 --> 00:01:36,914 I'm gonna drag it to VS Code, and let's take a look at the files and 24 00:01:36,914 --> 00:01:38,970 directories that we have in here. 25 00:01:41,170 --> 00:01:43,330 So the first thing you'll see is master. 26 00:01:43,330 --> 00:01:47,094 So if at any point your code just doesn't work or doesn't look like mine, 27 00:01:47,094 --> 00:01:50,670 you can hop into master and see all the finished code. 28 00:01:50,670 --> 00:01:55,407 So if we view the index.html file inside the master directory in our browser, 29 00:01:55,407 --> 00:01:59,600 this is a finished product of what we'll be building. 30 00:01:59,600 --> 00:02:02,877 So it just looks like a standard social media post, and 31 00:02:02,877 --> 00:02:07,579 if you hover over this Like button, you'll have these emojis that kinda mimic 32 00:02:07,579 --> 00:02:10,950 the way Facebook does their reactions for their posts. 33 00:02:12,950 --> 00:02:17,158 But the only thing is clicking on them won't do anything, cuz we're not gonna 34 00:02:17,158 --> 00:02:21,960 write any JavaScript, we're just gonna get this functionality working with just CSS. 35 00:02:23,050 --> 00:02:25,180 So let's close out of this. 36 00:02:25,180 --> 00:02:28,816 And everything that we'll be doing is going to be inside of this starter 37 00:02:28,816 --> 00:02:29,490 directory. 38 00:02:30,880 --> 00:02:32,650 So let's take a look at what we have in here. 39 00:02:33,690 --> 00:02:37,769 Inside the index.html, it is basically empty, 40 00:02:37,769 --> 00:02:42,633 just our boilerplate code that links to our app.css file. 41 00:02:42,633 --> 00:02:49,338 And we have an empty title which we'll just call Facebook Reactions UI. 42 00:02:51,931 --> 00:03:00,076 Also, in the styles, there is an app.scss file as well as an app.css file. 43 00:03:00,076 --> 00:03:04,988 I will be writing everything in SCSS, and I won't be doing anything complex with it, 44 00:03:04,988 --> 00:03:07,960 I'll just be using it for nesting. 45 00:03:07,960 --> 00:03:09,490 But if you'd like to follow along, 46 00:03:09,490 --> 00:03:12,450 there's really no learning curve to how I'll be using it. 47 00:03:12,450 --> 00:03:18,612 Just go to your Extensions panel, type in sass compiler, 48 00:03:18,612 --> 00:03:22,888 and you'll wanna click on this third one 49 00:03:22,888 --> 00:03:28,270 called Live Sass Compiler by Glenn Marks. 50 00:03:28,270 --> 00:03:30,280 This is what I use. 51 00:03:30,280 --> 00:03:35,359 All you need to do is install it, and whenever you're inside of a directory 52 00:03:35,359 --> 00:03:40,274 with an app.scss file, all you need to do is hit this Watch Sass button at 53 00:03:40,274 --> 00:03:45,273 the bottom and it'll compile everything we write into an app.css file, 54 00:03:45,273 --> 00:03:48,360 which is what our index.html file is using. 55 00:03:49,740 --> 00:03:53,258 If you do not wanna use SCSS, you can still follow along, 56 00:03:53,258 --> 00:03:56,407 you just won't be able to nest the way that I do, and 57 00:03:56,407 --> 00:04:00,310 you can just write your code directly into your app.css file. 58 00:04:01,650 --> 00:04:04,941 But if you want to follow along with me, there's no learning curve, 59 00:04:04,941 --> 00:04:09,640 like I mentioned, to writing SCSS, the way that I'm gonna be using it here. 60 00:04:09,640 --> 00:04:12,330 And I'll try to explain how I use it as we go. 61 00:04:13,650 --> 00:04:17,780 So first things first, let's start building out our UI. 62 00:04:18,890 --> 00:04:22,280 And the easiest way to do this would be to pull up the mock-up on the right. 63 00:04:23,830 --> 00:04:28,400 Or actually, let's bring the HTML on the right and the mock-up on the left. 64 00:04:30,490 --> 00:04:33,190 Sweet, so let's start building this out. 65 00:04:34,680 --> 00:04:37,586 First thing I'll do is inside of our HTML, 66 00:04:37,586 --> 00:04:41,400 I'm just going to create one element for our entire UI. 67 00:04:41,400 --> 00:04:44,190 And I'll just call that facebook-post. 68 00:04:45,960 --> 00:04:48,500 Now, let's break down this entire post. 69 00:04:48,500 --> 00:04:51,965 It looks like we have somewhat of a post header up here with 70 00:04:51,965 --> 00:04:54,190 a little bit of content. 71 00:04:54,190 --> 00:04:58,710 We have our post itself, and then we have this group of buttons. 72 00:04:58,710 --> 00:05:03,246 So let's create three separate child elements inside of our facebook-post 73 00:05:03,246 --> 00:05:04,020 container. 74 00:05:05,050 --> 00:05:06,330 For now let's put some comments. 75 00:05:06,330 --> 00:05:12,379 I'll put post header cuz we'll need a post header, we'll need the post itself, 76 00:05:12,379 --> 00:05:17,040 and also we need our post interactions, which is our buttons. 77 00:05:18,490 --> 00:05:19,710 So let's start off with the header. 78 00:05:21,220 --> 00:05:25,564 We have a user image, we have a little bit of content right here, and 79 00:05:25,564 --> 00:05:28,780 then we have a couple of more buttons on the right. 80 00:05:29,840 --> 00:05:33,659 So I think for the image for just this project's sake, 81 00:05:33,659 --> 00:05:36,850 I'll just leave that as a empty div. 82 00:05:36,850 --> 00:05:40,121 You can come back and add in your own image if you want, 83 00:05:40,121 --> 00:05:44,657 but I'll just create an empty div for this and I'll call it user-image. 84 00:05:44,657 --> 00:05:49,150 Actually, we need to create the post header first, so 85 00:05:49,150 --> 00:05:53,559 post-header, and I'll now create the user image. 86 00:05:53,559 --> 00:05:57,339 And then, like I said, we'll leave this empty, and 87 00:05:57,339 --> 00:06:01,660 then the next item in this header will be this info group. 88 00:06:01,660 --> 00:06:02,670 We'll call it info-group. 89 00:06:04,500 --> 00:06:08,060 And inside of this I'll have a span for the name. 90 00:06:08,060 --> 00:06:10,570 So I'll write John Smith. 91 00:06:10,570 --> 00:06:13,435 Feel free to use your own name or another name. 92 00:06:13,435 --> 00:06:18,190 I'm gonna create another span for the publishing time, which was 19 hours ago. 93 00:06:19,870 --> 00:06:23,990 And then outside of our info group, I'm just gonna lay out our images. 94 00:06:25,710 --> 00:06:30,123 So you'll notice I forgot to go over the Assets folder, but 95 00:06:30,123 --> 00:06:33,850 the Assets folder has all of our images in it. 96 00:06:33,850 --> 00:06:38,990 It has our mock-up, our background that we're gonna be using, 97 00:06:38,990 --> 00:06:42,633 our two SVGs for our close and ellipsis icons, 98 00:06:42,633 --> 00:06:47,690 which we will use as just regular images instead of inline SVGs. 99 00:06:48,740 --> 00:06:53,758 And in our reactions directory, we have our angry, 100 00:06:53,758 --> 00:06:59,790 heart, laugh, like, sad, and our wow reactions. 101 00:06:59,790 --> 00:07:06,900 So, let's go back into the HTML, and we want to use this ellipsis icon. 102 00:07:06,900 --> 00:07:12,470 So we will go to assets, and we'll click ellipsis.svg. 103 00:07:13,650 --> 00:07:17,157 And we can delete the alt attribute, we're not going to need that for 104 00:07:17,157 --> 00:07:18,680 this project specifically. 105 00:07:20,390 --> 00:07:26,351 And then I will toggle our close.svg. 106 00:07:26,351 --> 00:07:31,191 I can't type, svg, and I'll delete the alt attribute. 107 00:07:31,191 --> 00:07:36,830 So let's save, and we're not viewing the page live yet, so no worries. 108 00:07:37,940 --> 00:07:41,650 Once we finish writing out the markup, we'll take a look at what that looks like. 109 00:07:42,970 --> 00:07:45,540 So I think that's it for the header. 110 00:07:45,540 --> 00:07:49,265 So I'll close off the header, and now we have the post itself, 111 00:07:49,265 --> 00:07:53,560 which I'm just going to leave as an empty div called post. 112 00:07:53,560 --> 00:07:56,847 You can come back and add in an image or some text if you'd like, 113 00:07:56,847 --> 00:07:58,850 whatever you wanna do. 114 00:07:58,850 --> 00:08:01,900 But for the sake of this demonstration, we'll just leave this empty. 115 00:08:03,020 --> 00:08:08,134 And for our post interactions, we'll create a div called post-interactions, 116 00:08:08,134 --> 00:08:10,900 and inside we'll have three buttons. 117 00:08:10,900 --> 00:08:16,038 So I'll do button*3, and if you're unfamiliar with what I just did, 118 00:08:16,038 --> 00:08:18,070 that's an Emmet shortcut. 119 00:08:19,340 --> 00:08:23,650 So just type in button*3 and it'll create three buttons. 120 00:08:23,650 --> 00:08:28,780 We got Like, we have Comment, and we have Share. 121 00:08:30,550 --> 00:08:35,538 Now, one thing to note, that this menu right here with the reactions 122 00:08:35,538 --> 00:08:39,610 will actually live inside of our Like button. 123 00:08:39,610 --> 00:08:44,360 So let's go into the markup and adjust this just a little bit. 124 00:08:45,360 --> 00:08:48,915 So what I'll do is I'll create a div called reactions, 125 00:08:48,915 --> 00:08:54,220 and in here will be a span, we'll do six of them, so we'll do span*6. 126 00:08:54,220 --> 00:08:59,340 And in each one of these, we will pop in our reaction images. 127 00:08:59,340 --> 00:09:01,900 So, let's put each one of these spans on their own line. 128 00:09:03,930 --> 00:09:08,037 Sweet, and let's write img, and 129 00:09:08,037 --> 00:09:13,430 we'll do assets, and we'll do reactions. 130 00:09:13,430 --> 00:09:16,330 And the first one is like.png. 131 00:09:17,650 --> 00:09:23,300 And what I'll do is we'll also remove the alt attribute, we won't need these. 132 00:09:23,300 --> 00:09:27,287 I'm gonna copy this and I'm gonna paste this into all the spans, and 133 00:09:27,287 --> 00:09:29,570 then we'll just update the path name. 134 00:09:30,730 --> 00:09:34,226 So, looks like the first one is the like button, 135 00:09:34,226 --> 00:09:39,060 then we have the heart, so we'll change the second one to heart. 136 00:09:39,060 --> 00:09:45,020 The third one looks like it's wow, so we'll change it to wow. 137 00:09:46,100 --> 00:09:48,298 The fourth one is laugh. 138 00:09:49,911 --> 00:09:53,736 I'm not sure why my mock-up keeps moving like that, 139 00:09:53,736 --> 00:09:56,372 it's kind of annoying, but sorry. 140 00:09:56,372 --> 00:09:58,630 So the second to last one is sad. 141 00:10:00,730 --> 00:10:04,718 And the last one is angry. 142 00:10:04,718 --> 00:10:06,122 All right, so we'll hit Save. 143 00:10:06,122 --> 00:10:08,140 And believe it or not, 144 00:10:08,140 --> 00:10:13,885 I think that is actually everything we'll need for the markup. 145 00:10:16,670 --> 00:10:18,651 Yep, so we have our facebook-post. 146 00:10:18,651 --> 00:10:22,737 And inside of our post we have our header, we have the post itself, and 147 00:10:22,737 --> 00:10:25,150 then we have our three buttons. 148 00:10:25,150 --> 00:10:31,080 And inside of the first button holds our container with all of our reactions. 149 00:10:31,080 --> 00:10:33,752 So I'll close out of the mockup for now. 150 00:10:33,752 --> 00:10:35,810 Let's view this in the browser. 151 00:10:38,361 --> 00:10:40,390 So I'll open this up with Live Server. 152 00:10:40,390 --> 00:10:46,612 And yeah, so it looks like we have our three buttons, we have all six reactions, 153 00:10:46,612 --> 00:10:52,580 we have our really, really big SVGs, and we have our content for the header. 154 00:10:54,150 --> 00:10:56,794 Sweet, so, let's open this up on the side, and 155 00:10:56,794 --> 00:11:00,880 we'll get the Visual Studio Code opened up on the other side. 156 00:11:00,880 --> 00:11:05,486 And now, we need to start styling this up a little bit. 157 00:11:05,486 --> 00:11:11,009 So, Let me open up the mockup, 158 00:11:11,009 --> 00:11:16,302 just so that we can try to style it up accordingly. 159 00:11:16,302 --> 00:11:18,919 And I'll also open up our style sheet. 160 00:11:21,419 --> 00:11:23,031 I'll put the style sheet over here. 161 00:11:23,031 --> 00:11:25,250 I'll close this. 162 00:11:25,250 --> 00:11:28,459 Let me make this a little bit smaller so I can get to this Watch Sass button. 163 00:11:28,459 --> 00:11:32,525 So if you are following along with me and you wanna use the SCSS, 164 00:11:32,525 --> 00:11:36,518 make sure you download the Live Sass compiler extension, and 165 00:11:36,518 --> 00:11:41,480 then click on this Watch Sass button when you have your app.scss file open. 166 00:11:41,480 --> 00:11:46,320 So I'm gonna click it, and you should have this panel that comes up. 167 00:11:46,320 --> 00:11:48,389 Unfortunately, you can't close it. 168 00:11:48,389 --> 00:11:49,490 I like to put it at the bottom. 169 00:11:50,690 --> 00:11:52,001 If you do try to close it, 170 00:11:52,001 --> 00:11:55,571 it's just gonna pop up as soon as you make a change to your SCSS file. 171 00:11:55,571 --> 00:11:59,349 But I just normally put it all the way at the bottom when I'm working 172 00:11:59,349 --> 00:12:01,726 with limited space like we are right now. 173 00:12:01,726 --> 00:12:08,170 So I will zoom in just a tad, On the mockup. 174 00:12:08,170 --> 00:12:10,350 Well, it won't let me, so let me reopen it. 175 00:12:12,840 --> 00:12:14,631 There we go. Open this up on the right. 176 00:12:18,362 --> 00:12:19,640 Awesome. 177 00:12:19,640 --> 00:12:24,512 All right, so let's get started with building out the UI. 178 00:12:24,512 --> 00:12:28,884 You can either go back to the repository or go to the readme and 179 00:12:28,884 --> 00:12:31,218 copy down these CSS variables. 180 00:12:31,218 --> 00:12:33,797 But these are the variables I mentioned earlier that we'll be using to 181 00:12:33,797 --> 00:12:34,610 build out the UI. 182 00:12:34,610 --> 00:12:39,580 So the first thing I wanna do in my SCSS file is create a route. 183 00:12:42,090 --> 00:12:43,360 And paste those in. 184 00:12:44,610 --> 00:12:49,477 I'm gonna move the mockup to the bottom so we can see everything a little bit bigger. 185 00:12:54,354 --> 00:12:56,085 There we go. 186 00:12:58,604 --> 00:12:59,104 All right. 187 00:13:00,970 --> 00:13:04,397 This should work for now. 188 00:13:04,397 --> 00:13:05,950 So let's make the code a little bit bigger. 189 00:13:07,040 --> 00:13:08,230 Awesome. 190 00:13:08,230 --> 00:13:11,710 So we have our root and we pasteed in all of our CSS variables. 191 00:13:11,710 --> 00:13:16,770 And if you're unsure how to use CSS variables, we'll use the first one now. 192 00:13:16,770 --> 00:13:18,390 We'll target the body. 193 00:13:18,390 --> 00:13:21,530 And we'll give it a background-image. 194 00:13:23,480 --> 00:13:26,230 Actually, we will use the variables in a bit. 195 00:13:26,230 --> 00:13:29,736 Let's set up the background-image first. 196 00:13:29,736 --> 00:13:33,013 So, we'll do background-image URL and 197 00:13:33,013 --> 00:13:38,310 we'll navigate to our assets folder and then to thbg.png. 198 00:13:38,310 --> 00:13:43,653 Hit save and we'll see our new background in the browser. 199 00:13:43,653 --> 00:13:50,472 We wanna give a min-height to the browser window, we'll do 100 view height. 200 00:13:50,472 --> 00:13:55,561 Also we wanna center this in the page, 201 00:13:55,561 --> 00:13:59,863 so we'll use Flexbox for that. 202 00:13:59,863 --> 00:14:03,943 We can do a display of flex will align items center and 203 00:14:03,943 --> 00:14:07,200 we'll justify the content center also. 204 00:14:09,270 --> 00:14:11,185 I'll hit Save and you won't notice anything yet 205 00:14:11,185 --> 00:14:12,500 because we have a lot of content. 206 00:14:12,500 --> 00:14:15,790 So I think that might be it for the body. 207 00:14:15,790 --> 00:14:24,100 So, let's start tackling, Let's start tackling the Facebook post itself. 208 00:14:24,100 --> 00:14:28,095 So I'll create a facebook-post rule. 209 00:14:28,095 --> 00:14:29,050 I need to spell it right. 210 00:14:31,600 --> 00:14:32,660 There we go. 211 00:14:32,660 --> 00:14:35,410 And now we'll use a CSS variable. 212 00:14:35,410 --> 00:14:38,520 All right, background-color. 213 00:14:38,520 --> 00:14:43,690 And to use a CSS variable, you just write the var keyword with a set of parentheses. 214 00:14:43,690 --> 00:14:45,980 And then you grab the variable that you want. 215 00:14:45,980 --> 00:14:48,637 And all your variables start with two dashes. 216 00:14:48,637 --> 00:14:51,387 So we'll grab the --fb-post-bg variable, and 217 00:14:51,387 --> 00:14:54,670 we'll paste it inside of those parentheses. 218 00:14:54,670 --> 00:15:02,275 Let's save, and now you should see that darker color for our actual post. 219 00:15:02,275 --> 00:15:03,718 I'm gonna close this up. 220 00:15:06,112 --> 00:15:11,060 So let's give our post a width of 80% so that we have a little 221 00:15:11,060 --> 00:15:16,103 bit of spacing, which works fine but if we had a wider browser it 222 00:15:16,103 --> 00:15:21,170 would also just get way bigger, so let's also set a max width. 223 00:15:23,050 --> 00:15:25,710 And we can do a max-width of 500 pixels. 224 00:15:27,300 --> 00:15:29,230 And it should keep it small. 225 00:15:29,230 --> 00:15:29,850 Awesome, there we go. 226 00:15:32,510 --> 00:15:38,640 So the next thing, let's start with the border radius and this border. 227 00:15:38,640 --> 00:15:41,420 So we'll do a border-radius of 2rem. 228 00:15:42,710 --> 00:15:44,030 I think that looks okay. 229 00:15:44,030 --> 00:15:49,934 We'll add some padding also, we can do maybe 1rem top and 230 00:15:49,934 --> 00:15:53,199 bottom, 2rem left and right. 231 00:15:53,199 --> 00:15:57,580 And we'll add a border of .85 rem solid. 232 00:15:57,580 --> 00:16:00,690 And for the color, we'll set this up in a variable as well. 233 00:16:02,150 --> 00:16:05,023 We have --fb-post-border. 234 00:16:05,023 --> 00:16:08,560 So I'll copy that, I'll paste it in there. 235 00:16:09,740 --> 00:16:12,021 Sweet. And it's a little hard to see, 236 00:16:12,021 --> 00:16:15,510 but we can also add some box-shadow that can help. 237 00:16:15,510 --> 00:16:18,314 We can do 0 12px 12px. 238 00:16:18,314 --> 00:16:20,350 We'll do rgba. 239 00:16:20,350 --> 00:16:23,910 We'll do black with a 0.15 opacity. 240 00:16:25,040 --> 00:16:26,950 And it's a little bit more visible. 241 00:16:26,950 --> 00:16:29,390 It's not meant to be super in-your-face. 242 00:16:29,390 --> 00:16:30,610 So this looks pretty good. 243 00:16:31,900 --> 00:16:35,032 All right, so I think for now that might be everything we need for 244 00:16:35,032 --> 00:16:37,170 our Facebook post itself. 245 00:16:37,170 --> 00:16:44,164 So now let's work on the first item in our facebook-post container. 246 00:16:46,466 --> 00:16:52,131 So inside of our facebook-post, 247 00:16:53,964 --> 00:16:58,460 We have Facebook header, the post, and then the interactions. 248 00:16:58,460 --> 00:17:00,930 So let's work on the Facebook header. 249 00:17:03,340 --> 00:17:05,890 So in the mock up, it looks like everything is in a row. 250 00:17:05,890 --> 00:17:07,660 So this will be perfect for Flexbox. 251 00:17:08,760 --> 00:17:11,790 And this is also where I'll be starting to nest. 252 00:17:11,790 --> 00:17:18,300 So with SCSS we can stay in the same rule and just write post-header. 253 00:17:18,300 --> 00:17:20,811 And this is the same as saying, 254 00:17:20,811 --> 00:17:26,610 this is the same as writing facebook-post post-header. 255 00:17:26,610 --> 00:17:30,895 But we don't have to create a new rule, we can nest it within 256 00:17:30,895 --> 00:17:35,980 the initial rule because post-header is a child of facebook-post. 257 00:17:37,430 --> 00:17:42,265 So in the header we'll give it a display of flex and by default the direction 258 00:17:42,265 --> 00:17:47,125 will be row, so you can see it kinda shifts some things around a little bit. 259 00:17:47,125 --> 00:17:54,020 We'll align the items center, and we'll justify the content. 260 00:17:54,020 --> 00:17:56,170 Actually, we'll keep the content as is. 261 00:17:58,460 --> 00:18:01,850 So let's first tackle the user image. 262 00:18:01,850 --> 00:18:05,579 So because user-image is a child of post-header, 263 00:18:05,579 --> 00:18:09,130 we can also nest that in there as well. 264 00:18:09,130 --> 00:18:10,890 And like I said you can come back and 265 00:18:10,890 --> 00:18:14,899 add an image in here if you want, for this demonstration I'm just gonna create 266 00:18:14,899 --> 00:18:18,050 an empty div that has that white background-color. 267 00:18:18,050 --> 00:18:24,060 So we'll do background-color, and we can reuse a another variable for this. 268 00:18:24,060 --> 00:18:29,617 So we got --fb-post-color, we'll just copy that cuz it's also a white color. 269 00:18:31,943 --> 00:18:33,910 So I'll put that in there. 270 00:18:33,910 --> 00:18:39,800 I'll give it a height of, let's do 40 pixels, 271 00:18:39,800 --> 00:18:44,582 a width of 40 pixels, we'll save it. 272 00:18:44,582 --> 00:18:47,220 And we'll do a border-radius of 50%. 273 00:18:47,220 --> 00:18:50,948 Now, we can't see it yet because there's a ton of content in this header and 274 00:18:50,948 --> 00:18:52,240 it's getting squished. 275 00:18:53,260 --> 00:18:57,779 So let's jump ahead a bit and target the actual images that we use for 276 00:18:57,779 --> 00:19:00,007 the ellipsis and the close icon. 277 00:19:00,007 --> 00:19:03,620 So I'll close down this little code block for our user-image. 278 00:19:03,620 --> 00:19:06,650 And we're staying inside the post-header. 279 00:19:06,650 --> 00:19:07,850 And we're just going to target image. 280 00:19:07,850 --> 00:19:13,500 And we're gonna give each image a width of, let's say, let's just do 1rem. 281 00:19:14,810 --> 00:19:15,399 Sweet. 282 00:19:15,399 --> 00:19:17,303 Now we can see our user image again, 283 00:19:17,303 --> 00:19:19,980 because we made these icons a little bit smaller. 284 00:19:21,710 --> 00:19:26,373 And you might be wondering how we're gonna get those icons white since they are SVGs, 285 00:19:26,373 --> 00:19:28,662 and we're not using them as inline SVGs. 286 00:19:28,662 --> 00:19:32,304 And one really neat trick since they're black icons, 287 00:19:32,304 --> 00:19:37,140 we can just write filter and we can invert them a full invert. 288 00:19:37,140 --> 00:19:38,370 So we'll do invert(1). 289 00:19:38,370 --> 00:19:41,470 We'll hit save, and now the icons are inverted, they're white. 290 00:19:43,200 --> 00:19:47,412 So let's get away from the images for a little bit, I only wanted 291 00:19:47,412 --> 00:19:52,326 to tackle that really fast and jump ahead so that we can start seeing the UI. 292 00:19:52,326 --> 00:19:55,540 So let's go back to our user-image. 293 00:19:55,540 --> 00:20:01,760 So in the mockup, we get some space between the user image and the user info. 294 00:20:01,760 --> 00:20:08,950 So let's give it a margin-right of 1.25rem, sweet. 295 00:20:08,950 --> 00:20:11,202 Now, if we go back to the HTML, 296 00:20:11,202 --> 00:20:17,840 we have this div right here with the class of info-group that holds our spans. 297 00:20:17,840 --> 00:20:24,620 So now, let's close this user image block and type in, what was it called? 298 00:20:24,620 --> 00:20:26,180 info-group. 299 00:20:26,180 --> 00:20:28,879 So we'll do info-group. 300 00:20:28,879 --> 00:20:31,790 And in here, we want to set the color and 301 00:20:31,790 --> 00:20:35,950 we'll do that same variable we used for the user image. 302 00:20:35,950 --> 00:20:37,350 We'll just do --fb-post-color. 303 00:20:39,200 --> 00:20:41,960 We'll hit save, and you see it's white. 304 00:20:41,960 --> 00:20:45,430 Now, it looks like name is above the published time. 305 00:20:45,430 --> 00:20:49,156 So since we're using spans and these are inline elements, 306 00:20:49,156 --> 00:20:54,160 we can target the span inside of that info-group and give it a display of block. 307 00:20:55,690 --> 00:20:57,360 This will put them right on top of each other. 308 00:20:58,590 --> 00:21:01,777 So there is a little bit of spacing. 309 00:21:01,777 --> 00:21:06,758 There's actually less spacing in the mockup than there is in the Live Server, 310 00:21:06,758 --> 00:21:08,500 above the published time. 311 00:21:08,500 --> 00:21:12,350 So let's toggle, let's target that second span. 312 00:21:12,350 --> 00:21:15,440 We can do an ampersand, and this is the same as just saying span. 313 00:21:16,800 --> 00:21:21,560 So, I'll do ampersand or span, and target the last-of-type. 314 00:21:21,560 --> 00:21:25,839 So we're targeting that last span and 315 00:21:25,839 --> 00:21:29,983 we wanna put a font size of .7rem and 316 00:21:29,983 --> 00:21:34,138 a margin-top of negative .5rem. 317 00:21:34,138 --> 00:21:38,110 Sweet, let's do -.33rem instead. 318 00:21:38,110 --> 00:21:39,532 Okay, that looks a little better. 319 00:21:39,532 --> 00:21:44,090 So now we have a little bit of spacing between the name and the published time. 320 00:21:45,930 --> 00:21:49,230 So let's close the info group, because I'm pretty sure we're finished with that now. 321 00:21:50,310 --> 00:21:56,919 And then the only other element inside of our post header are those two images. 322 00:21:56,919 --> 00:22:01,532 So what we could do is target the very first image, which is the ellipsis. 323 00:22:01,532 --> 00:22:05,563 And give it a margin-left of auto because the post-header, 324 00:22:05,563 --> 00:22:09,450 which is the parent of these images, has a display of flex. 325 00:22:09,450 --> 00:22:13,080 And doing that we'll just push it all the way to the opposite corner. 326 00:22:14,180 --> 00:22:18,827 So we'll do the ampersand again, which is the same as saying image. 327 00:22:18,827 --> 00:22:22,450 I'll do the ampersand and target the last-of-type. 328 00:22:22,450 --> 00:22:24,356 Because we wanna, actually I'm sorry, 329 00:22:24,356 --> 00:22:26,870 first-of-type cuz we wanna target the first image. 330 00:22:28,740 --> 00:22:32,610 And, we'll do a margin-left of auto. 331 00:22:34,270 --> 00:22:37,518 And, as you can see, it pushed the images all the way to the right, 332 00:22:37,518 --> 00:22:38,450 which is perfect. 333 00:22:40,010 --> 00:22:43,463 While we're also targeting this first image, let's do it a margin, 334 00:22:43,463 --> 00:22:45,640 let's give it a margin-right, of 1rem. 335 00:22:47,190 --> 00:22:52,165 And now, we got a little bit of spacing between both of these icons. 336 00:22:52,165 --> 00:22:56,852 And to be honest, I think that might be all we need for the header, 337 00:22:56,852 --> 00:22:58,300 at least for now. 338 00:22:58,300 --> 00:23:01,600 So, let's close up this header block and 339 00:23:01,600 --> 00:23:07,647 let's start working on the next item inside of our HTML, which is the post. 340 00:23:07,647 --> 00:23:12,647 And this won't be anything fancy, this will be just one big block. 341 00:23:12,647 --> 00:23:17,216 But you can go back and add in an image or some text or anything you'd like. 342 00:23:17,216 --> 00:23:19,170 So I'll target post. 343 00:23:19,170 --> 00:23:24,253 And again, we're still inside of our facebook-post rule, 344 00:23:24,253 --> 00:23:29,053 because this is a child of the facebook-post container. 345 00:23:29,053 --> 00:23:34,711 So what we'll do is, we'll just give it a margin top and bottom of 1.5rem and we 346 00:23:34,711 --> 00:23:40,302 can just do auto for the right and left, and sweet, we have a little bit spacing. 347 00:23:40,302 --> 00:23:47,837 Let's give it a width of 100% and a height of 350 pixels, awesome. 348 00:23:47,837 --> 00:23:50,370 Now, it doesn't have, we can't see it yet 349 00:23:50,370 --> 00:23:55,040 because there's no background color, so let's give it a background-color. 350 00:23:55,040 --> 00:24:00,000 And we'll set it to a variable because we do have this named, just fb-post. 351 00:24:01,200 --> 00:24:03,120 I'll copy that and I'll paste it inside. 352 00:24:04,140 --> 00:24:06,338 And now we see our post. 353 00:24:06,338 --> 00:24:10,405 So, I think the only other thing we need to do is just give it a little bit of 354 00:24:10,405 --> 00:24:11,492 border-radius. 355 00:24:11,492 --> 00:24:14,708 We can do 1.5rem, and I think that looks pretty good. 356 00:24:14,708 --> 00:24:15,830 And that's it for the post. 357 00:24:15,830 --> 00:24:17,520 There's really not much to that one. 358 00:24:17,520 --> 00:24:20,570 Like I said, you can go add in your own content if you want afterwards. 359 00:24:21,570 --> 00:24:24,870 So now let's toggle the post-interactions, 360 00:24:24,870 --> 00:24:29,416 which if you remember is just a container holding three buttons. 361 00:24:31,587 --> 00:24:37,420 And one of the buttons has a bunch of icons in it, which you can see here. 362 00:24:37,420 --> 00:24:44,114 So, let's go inside of here and it looks like in the mockup. 363 00:24:44,114 --> 00:24:46,670 These buttons are in one row. 364 00:24:46,670 --> 00:24:51,420 So, we'll use and display of flex on the parent again. 365 00:24:51,420 --> 00:24:54,492 So we'll do display, flex and it does default to row, so 366 00:24:54,492 --> 00:24:57,210 we don't have to specify that. 367 00:24:57,210 --> 00:25:00,210 And sweet, now you can see they're kind of all on in one row. 368 00:25:01,830 --> 00:25:05,645 What we'll do is, let's target the button, and then, 369 00:25:05,645 --> 00:25:09,464 target the div with the class of reactions on the inside. 370 00:25:09,464 --> 00:25:11,480 And we'll just set it to a display of none. 371 00:25:12,680 --> 00:25:16,310 Really quickly. 372 00:25:16,310 --> 00:25:18,400 Reactions, okay, sweet. 373 00:25:18,400 --> 00:25:20,812 I just wanted to do that just temporarily so 374 00:25:20,812 --> 00:25:23,160 that we can kind of style out our buttons. 375 00:25:24,290 --> 00:25:28,410 So let's go back into the button rule, we'll give them a width of 100%. 376 00:25:28,410 --> 00:25:31,995 And because flex is by default set to no-wrap, 377 00:25:31,995 --> 00:25:35,160 these will not wrap on another line. 378 00:25:35,160 --> 00:25:38,240 So they're all gonna stay within their own line. 379 00:25:38,240 --> 00:25:43,364 If we gave our display flex-wrap, I mean, if we gave our post interactions 380 00:25:43,364 --> 00:25:48,746 a flex-wrap of wrap, they'll each be on their online taking up the 100%. 381 00:25:48,746 --> 00:25:50,890 But it's defaulted to no-wrap. 382 00:25:52,550 --> 00:25:58,485 So let's actually give them a gap of .25 rem, so you got a little bit of spacing. 383 00:25:58,485 --> 00:25:59,960 And now let's add some padding. 384 00:25:59,960 --> 00:26:02,757 We can do padding 1rem, 385 00:26:02,757 --> 00:26:08,416 maybe do a border-radius of, let's do 2rem. 386 00:26:08,416 --> 00:26:09,660 That's way too much radius. 387 00:26:09,660 --> 00:26:11,060 Let's do .5rem. 388 00:26:12,470 --> 00:26:14,430 I think it looks pretty good. 389 00:26:14,430 --> 00:26:15,920 Let's do a border of none. 390 00:26:17,010 --> 00:26:20,771 And let's now set the background-color and color. 391 00:26:20,771 --> 00:26:26,462 So if we go up to our variables, we'll see we have --fb-post-btn-bg. 392 00:26:26,462 --> 00:26:32,452 We have a --fb-post-btn-color and then we have the --fb-post-btn-bg-hover. 393 00:26:32,452 --> 00:26:35,662 So, let's grab the --fb-post-btn-bg and 394 00:26:35,662 --> 00:26:39,660 inside of our button, we'll give it a background-color. 395 00:26:40,740 --> 00:26:42,750 I use the var keyword and paste that in. 396 00:26:44,380 --> 00:26:46,720 And now we'll do color. 397 00:26:46,720 --> 00:26:55,430 And we'll type in --fb-post-btn-color, awesome. 398 00:26:55,430 --> 00:26:58,580 So pretty much our UI is complete. 399 00:26:59,860 --> 00:27:03,210 Let's actually add a hover state to these buttons real fast. 400 00:27:04,260 --> 00:27:09,545 We can do a cursor of pointer to get that pointed cursor. 401 00:27:09,545 --> 00:27:14,770 And on hover, and I'm gonna use the ampersand again. 402 00:27:14,770 --> 00:27:18,691 This is basically the same as just saying "button." It basically gives a reference 403 00:27:18,691 --> 00:27:20,440 to the element that you're styling. 404 00:27:22,000 --> 00:27:24,860 But I'll do &, and I'll do the hover. 405 00:27:26,910 --> 00:27:29,330 And what we'll do is we'll just update the background-color. 406 00:27:31,090 --> 00:27:38,290 And we have that variable, --fb-post-btn-bg-hover. 407 00:27:39,620 --> 00:27:41,691 So let's see if that worked. 408 00:27:41,691 --> 00:27:42,520 Awesome, it does. 409 00:27:42,520 --> 00:27:44,030 Let's give it a little bit of a transition. 410 00:27:46,210 --> 00:27:50,962 We can give the button a transition of 411 00:27:50,962 --> 00:27:56,182 background-color .3 seconds ease. 412 00:27:56,182 --> 00:27:58,290 There we go. It's a little bit more subtle. 413 00:27:58,290 --> 00:28:01,100 All right, sweet, so the UI for this is done. 414 00:28:01,100 --> 00:28:07,792 Now we need to work on the reactions, which are these guys down here. 415 00:28:07,792 --> 00:28:08,910 This should be pretty simple. 416 00:28:08,910 --> 00:28:14,181 So, what we'll do is we wanna grab just this first button on hover, 417 00:28:14,181 --> 00:28:17,170 not any of the other ones. 418 00:28:17,170 --> 00:28:22,342 So, if we look, we have our button rule right here, 419 00:28:22,342 --> 00:28:30,090 and what we can do is, let's do this underneath the reactions nest. 420 00:28:30,090 --> 00:28:35,015 We'll write & we'll do first-child, or 421 00:28:35,015 --> 00:28:39,680 I'm sorry, first-of-type:hover. 422 00:28:40,760 --> 00:28:44,166 And for now, let's give this a background-color of red just to see if 423 00:28:44,166 --> 00:28:46,030 we're toggling the correct button. 424 00:28:47,620 --> 00:28:51,400 Okay, so comment and share still look gray and sweet. 425 00:28:51,400 --> 00:28:53,987 Like is turning red when we hover over it. 426 00:28:53,987 --> 00:28:55,970 So we have access to the right button. 427 00:28:55,970 --> 00:28:56,800 So what do we wanna do? 428 00:28:58,210 --> 00:29:02,670 Well, first off, let's go and turn the display: none on these reactions off, so 429 00:29:02,670 --> 00:29:03,830 that we can see them. 430 00:29:06,160 --> 00:29:11,801 Now, we wanna position this menu absolutely relative to its parent, 431 00:29:11,801 --> 00:29:14,880 which is this like button. 432 00:29:14,880 --> 00:29:18,760 So in order to do that, we'll give the button a position of relative. 433 00:29:20,000 --> 00:29:25,340 And we'll give the reactions menu a position of absolute. 434 00:29:25,340 --> 00:29:26,950 We'll do left: zero. 435 00:29:29,090 --> 00:29:31,804 And because everything is in a column, 436 00:29:31,804 --> 00:29:37,350 let's give it a display of flex, it'll default to row, awesome. 437 00:29:37,350 --> 00:29:41,856 And now, let's target each image inside, we can nest that by writing img, and 438 00:29:41,856 --> 00:29:44,019 we'll just do a width of 50 pixels. 439 00:29:45,810 --> 00:29:50,058 It's a little small, maybe 60 pixels. 440 00:29:50,058 --> 00:29:51,300 I think that looks pretty good. 441 00:29:52,610 --> 00:29:57,106 So the reactions menu, let's give that a background-color, 442 00:29:57,106 --> 00:30:00,460 cuz it looks like we have one in the mockup. 443 00:30:00,460 --> 00:30:02,640 We'll do a background-color. 444 00:30:03,800 --> 00:30:06,330 And of course, we do have a CSS variable for it. 445 00:30:08,200 --> 00:30:10,070 --fb-reactions-bg. 446 00:30:11,460 --> 00:30:16,060 So we'll go up there, copy that, and where were we? 447 00:30:16,060 --> 00:30:22,340 Line 100, we'll paste that in, and now you see the subtle background color. 448 00:30:22,340 --> 00:30:26,400 Let's give it a padding of .25rem, something pretty small. 449 00:30:27,920 --> 00:30:32,005 And now let's do a border-radius, and 450 00:30:32,005 --> 00:30:39,110 we can do something like 50 pixels, I think that looks pretty good. 451 00:30:39,110 --> 00:30:42,843 Let's adjust the top, we're gonna leave it at 0. 452 00:30:42,843 --> 00:30:47,574 We're gonna leave it here by default, but while we have it visible, 453 00:30:47,574 --> 00:30:50,194 let's see if we can't style this up. 454 00:30:50,194 --> 00:30:57,810 Let's do like -140%, looks pretty good. 455 00:30:57,810 --> 00:31:04,680 Let's do a little bit higher, maybe -142 or -143. 456 00:31:04,680 --> 00:31:07,470 You can come in here and play with this as much as you need. 457 00:31:07,470 --> 00:31:11,683 The only thing I'm noticing, it's pretty subtle, but 458 00:31:11,683 --> 00:31:15,650 it does not look like the images are centered in here. 459 00:31:16,850 --> 00:31:24,254 And because we did a display of flex, we can also align the items center, 460 00:31:24,254 --> 00:31:29,210 And justify the content center. 461 00:31:30,850 --> 00:31:32,460 Actually that's not working. 462 00:31:32,460 --> 00:31:39,691 Let's see if there's some extra margin or padding going on. 463 00:31:43,674 --> 00:31:46,490 Okay, so what I think's going on is the, yeah, 464 00:31:46,490 --> 00:31:49,680 there's some extra spacing in the span. 465 00:31:49,680 --> 00:31:55,170 So what we can do is give a display of flex to the span. 466 00:31:57,130 --> 00:32:01,868 So we'll do span, and we'll nest this image in the span because 467 00:32:01,868 --> 00:32:06,430 that's where it lives, and we'll just do a display of flex, 468 00:32:06,430 --> 00:32:11,190 align the item center, and justify the content center as well. 469 00:32:12,290 --> 00:32:15,080 There we go, now it looks a lot more uniform. 470 00:32:16,850 --> 00:32:21,717 I do want to give a little bit of a gap to the, 471 00:32:23,854 --> 00:32:27,229 Images, let's do like .25rem. 472 00:32:27,229 --> 00:32:31,540 Actually, this would go on the reactions container. 473 00:32:32,910 --> 00:32:35,038 So let's paste that, okay, nice, 474 00:32:35,038 --> 00:32:38,000 we have a little bit of a space between each one now. 475 00:32:39,810 --> 00:32:43,170 Let's also make the images just a tiny bit smaller. 476 00:32:43,170 --> 00:32:48,580 Let's do like 57 pixels, there we go, it looks a little better. 477 00:32:48,580 --> 00:32:49,574 Let's do 58. 478 00:32:52,067 --> 00:32:56,080 Awesome, and since we updated that, let's also make this a little bit smaller. 479 00:32:56,080 --> 00:33:02,402 We'll set the top to -135% or -25%, 480 00:33:02,402 --> 00:33:08,710 -35, I think -35 looks pretty good. 481 00:33:08,710 --> 00:33:12,495 Let's do -133, okay, sweet. 482 00:33:12,495 --> 00:33:16,706 Okay, so remember that -133%, 483 00:33:16,706 --> 00:33:20,390 cuz I'm gonna set this to 0 now, 484 00:33:20,390 --> 00:33:25,010 and I'm going to give it an opacity of 0. 485 00:33:25,010 --> 00:33:29,500 And I'm gonna set the pointer-events to none. 486 00:33:29,500 --> 00:33:32,578 And if you're unfamiliar with pointer events, 487 00:33:32,578 --> 00:33:36,105 it basically just removes the events that your cursor or 488 00:33:36,105 --> 00:33:40,020 your pointer is gonna trigger when it hovers over something. 489 00:33:40,020 --> 00:33:41,930 So it's basically gonna act like it doesn't exist. 490 00:33:43,190 --> 00:33:49,110 So what we wanna do is go back to our button hover. 491 00:33:49,110 --> 00:33:52,240 So when we hover this button, what do we wanna do? 492 00:33:52,240 --> 00:33:57,296 Well, we can target the reactions container 493 00:33:57,296 --> 00:34:03,690 inside of this button, and we wanna say top -133%. 494 00:34:03,690 --> 00:34:07,384 We want to bump the opacity back up to 1, and we wanna give it access to all 495 00:34:07,384 --> 00:34:10,850 the pointer-events again, so we can do pointer-events, auto. 496 00:34:12,440 --> 00:34:16,150 So now if we hover over sweet, it comes back and it goes away. 497 00:34:17,200 --> 00:34:20,458 But if you are familiar with how Facebook works, 498 00:34:20,458 --> 00:34:26,360 we have to hover over this for a few milliseconds before this menu pops up. 499 00:34:26,360 --> 00:34:27,190 So how can we do that? 500 00:34:28,390 --> 00:34:32,920 Well, first off, there's no animation to this, it's just happening instantly. 501 00:34:32,920 --> 00:34:35,780 So we can go ahead and fix that. 502 00:34:36,830 --> 00:34:42,808 If we go back to our initial reactions rule, we can give it a transition, 503 00:34:42,808 --> 00:34:49,374 we can do the top .3 seconds ease, we can do opacity .3 seconds ease as well, 504 00:34:49,374 --> 00:34:55,360 and this should give us a little bit of an animation, sweet. 505 00:34:55,360 --> 00:34:57,770 Now, we wanna delay that animation, right? 506 00:34:57,770 --> 00:35:02,704 So after our animation timing of .3 seconds, we can do .3 seconds again for 507 00:35:02,704 --> 00:35:04,140 the animation delay. 508 00:35:05,640 --> 00:35:09,580 So I'll do that for both the top and opacity. 509 00:35:09,580 --> 00:35:16,250 And now, we have our hover after a subtle .3 second delay, our animation pops up. 510 00:35:17,750 --> 00:35:24,326 Let's also change the opacity a little bit faster. 511 00:35:25,908 --> 00:35:27,237 Okay, sweet, I like that. 512 00:35:29,955 --> 00:35:35,089 So now we want to have somewhat of a scale animation as 513 00:35:35,089 --> 00:35:41,210 well as pushing the emoji up whenever we hover over it. 514 00:35:41,210 --> 00:35:43,540 And that's also pretty easy to do. 515 00:35:43,540 --> 00:35:49,780 We can just target the image that's inside of our span and do a hover state on it. 516 00:35:49,780 --> 00:35:54,377 And what we'll do is we want to transform, 517 00:35:54,377 --> 00:35:58,092 we wanna scale up to maybe 1.2. 518 00:35:58,092 --> 00:36:04,906 And we want to translateY maybe -25 or maybe let's do -30%, 519 00:36:04,906 --> 00:36:09,100 or I'm sorry pixels and we'll hit Save. 520 00:36:10,780 --> 00:36:13,530 Let's actually give it a transition now. 521 00:36:13,530 --> 00:36:20,220 So in the initial image rule, I'll write transition can do .3 seconds. 522 00:36:20,220 --> 00:36:25,920 Actually, we'll write transform .3 seconds ease, sweet. 523 00:36:25,920 --> 00:36:28,662 So let's see if that worked, all right? 524 00:36:28,662 --> 00:36:32,398 So our menu comes up, Awesome, 525 00:36:32,398 --> 00:36:35,430 it looks like it somewhat works, it's going a little high. 526 00:36:35,430 --> 00:36:39,100 So if we have our cursor down it almost looks like it bounces. 527 00:36:39,100 --> 00:36:45,238 So let's take this -30 and maybe do -20. 528 00:36:49,069 --> 00:36:52,890 Sweet, I think this looks pretty good, awesome. 529 00:36:52,890 --> 00:36:57,582 So that's about it, we just basically rebuilt the way 530 00:36:57,582 --> 00:37:02,176 that Facebook reactions look with just HTML and CSS. 531 00:37:02,176 --> 00:37:07,344 I do think it'd be pretty neat to have a little bit more functionality in here with 532 00:37:07,344 --> 00:37:12,284 some JavaScript to where if maybe we click this heart, it'll show that a user 533 00:37:12,284 --> 00:37:18,230 has hearted the post, which can be done through some simple DOM manipulation. 534 00:37:18,230 --> 00:37:22,097 You could even make this comment section work where you can have a form field pop 535 00:37:22,097 --> 00:37:26,160 up if you click this, or maybe even added a little bit more UI for the Share button. 536 00:37:27,840 --> 00:37:30,994 But if these are things that you'd like to see in the future, just let us know, and 537 00:37:30,994 --> 00:37:32,685 maybe we can make a part two to this webinar, 538 00:37:32,685 --> 00:37:34,870 where we add a little bit of JavaScript to this project. 539 00:37:35,880 --> 00:37:38,260 But I hope you had fun, and I hope you learned a lot and 540 00:37:38,260 --> 00:37:39,900 we'll see you guys in the next one. 541 00:37:39,900 --> 00:37:41,920 So have fun and happy coding.