1 00:00:00,510 --> 00:00:05,280 In the last section we install materialize as an NPM module and hooked it up to our project through 2 00:00:05,280 --> 00:00:06,390 web pack. 3 00:00:06,390 --> 00:00:07,750 Now it's kind of subtle. 4 00:00:07,770 --> 00:00:13,710 When you look at the browser but if you look very closely the fonts that are used for the div and the 5 00:00:13,710 --> 00:00:17,280 H-2 right here are now distinctly different than what we had before. 6 00:00:17,550 --> 00:00:19,490 So I have a pretty good feeling. 7 00:00:19,500 --> 00:00:25,530 I feel like it's likely that the materialize hooked up the materialize wire up work correctly but to 8 00:00:25,530 --> 00:00:29,980 make sure that that is really the case I think that we should continue putting together the header. 9 00:00:30,240 --> 00:00:35,070 Once we add on a couple of class names that correctly style the header will then have a really good 10 00:00:35,070 --> 00:00:37,850 sense as to whether or not materialized work properly. 11 00:00:38,220 --> 00:00:43,680 So time to finish up the initial design of the header before we do so. 12 00:00:43,680 --> 00:00:47,880 I want to flip back over to materialize docs and we're going to pull up the documentation they have 13 00:00:47,880 --> 00:00:51,370 over here on how to create a better looking component. 14 00:00:51,630 --> 00:00:58,130 So in the components section right here I'll scroll on down until I see nav bar. 15 00:00:58,320 --> 00:01:04,190 OK so this right here is essentially what we want to have one how something looks like this. 16 00:01:04,400 --> 00:01:10,040 So if we essentially use this structure right here it will give us something that looks like this right 17 00:01:10,040 --> 00:01:10,910 here. 18 00:01:11,000 --> 00:01:16,370 So let's bring this markup over and then we'll have a better sense of whether or not everything is working 19 00:01:16,370 --> 00:01:17,470 the way we expect. 20 00:01:17,780 --> 00:01:21,630 So I'm going to flip back over to my head or component. 21 00:01:22,280 --> 00:01:27,710 Now I have some notes over here that essentially tell me the structure but basically we're going to 22 00:01:27,710 --> 00:01:28,750 use this structure right here. 23 00:01:28,760 --> 00:01:33,370 I'm just not going to be referencing back to this exact stuff as we type this out. 24 00:01:33,770 --> 00:01:38,480 So inside the header and we plot my notes Speaking of which. 25 00:01:38,480 --> 00:01:44,210 So we're going to replace the existing return statement in here or there or the existing div with a 26 00:01:44,210 --> 00:01:47,540 couple other components or a couple other elements. 27 00:01:47,540 --> 00:01:49,010 First off we're going to place a nav 28 00:01:52,080 --> 00:01:53,020 inside of there. 29 00:01:53,040 --> 00:02:02,190 We're going to put a div with a class name of NAV dash wrapper and then inside of that div we're going 30 00:02:02,190 --> 00:02:07,710 to place an anchor tag which is going to serve as the sort of Logo to our head or that kind of thing 31 00:02:07,710 --> 00:02:12,300 on the big top left that a user can click on to go back to the home page. 32 00:02:12,300 --> 00:02:18,690 So we will say give me an anchor tag will give it the name of our application which right now we're 33 00:02:18,690 --> 00:02:20,930 just using as email. 34 00:02:21,420 --> 00:02:29,540 I'm going to give the anchor tag a class name of left and brand dash logo. 35 00:02:30,540 --> 00:02:34,140 And then as a sibling to the anchor tag right here. 36 00:02:34,140 --> 00:02:39,710 So right next to it we're going to place a UL that has a couple of lines inside of it and that's us 37 00:02:39,730 --> 00:02:44,990 with allies are going to form the right hand elements of the right hand buttons on the screen. 38 00:02:45,480 --> 00:02:58,330 So I'll put down a UL with a class name of right and then inside of there one ally that contains an 39 00:02:58,330 --> 00:02:59,940 anchor tag. 40 00:03:01,280 --> 00:03:06,290 I will give it the text log in with Google for it now. 41 00:03:06,590 --> 00:03:06,960 OK. 42 00:03:07,000 --> 00:03:10,030 So this is definitely enough to test out inside the browser. 43 00:03:10,090 --> 00:03:15,190 Now as a quick reminder remember that whenever we are working with reactive components we do not pass 44 00:03:15,190 --> 00:03:19,910 in CSSA classes as the class property we instead use class name. 45 00:03:20,140 --> 00:03:22,630 And that's why you see a class name over here. 46 00:03:22,630 --> 00:03:24,830 But class over here. 47 00:03:24,910 --> 00:03:26,340 So just keep that in mind. 48 00:03:26,830 --> 00:03:31,870 OK so let's flip back on over to our application and yup sure enough everything was looking pretty darn 49 00:03:31,870 --> 00:03:32,410 good. 50 00:03:32,710 --> 00:03:35,770 So I've got the logo on the left. 51 00:03:35,770 --> 00:03:39,190 It's not actually clickable so I can actually go back to the home page just yet. 52 00:03:39,310 --> 00:03:43,450 But I definitely have like a highlight of a link over here on the right hand side which is definitely 53 00:03:43,450 --> 00:03:45,370 working the way I expect. 54 00:03:45,380 --> 00:03:46,830 OK this is looking pretty good. 55 00:03:46,930 --> 00:03:48,800 Now as we're looking at the header right here. 56 00:03:48,820 --> 00:03:53,680 One thing I want to remind you about and this is going to be relevant throughout the rest of the course 57 00:03:54,040 --> 00:03:59,680 as we are working on the front and remember that whenever I show you content inside the browser I always 58 00:03:59,680 --> 00:04:04,580 run with the screen really zoomed in so that you can very easily see what I'm doing. 59 00:04:04,600 --> 00:04:08,200 So you probably see something that looks a little bit more like this right here. 60 00:04:08,350 --> 00:04:08,900 Right. 61 00:04:08,920 --> 00:04:10,400 This is probably what you see. 62 00:04:10,450 --> 00:04:15,370 So whenever you see my stuff like looking really large or significantly bigger than yours it's just 63 00:04:15,370 --> 00:04:18,770 because I always run with everything very much zoomed in. 64 00:04:19,320 --> 00:04:19,660 OK. 65 00:04:19,700 --> 00:04:21,750 So this is a pretty good place to start. 66 00:04:21,760 --> 00:04:25,390 We've got at least a little bit of styling here and we can see the logo. 67 00:04:25,400 --> 00:04:27,250 Blah blah blah all that of good stuff. 68 00:04:27,250 --> 00:04:31,900 So I think we've got probably enough on the styling and it's time to focus a little bit more on what 69 00:04:31,900 --> 00:04:37,000 the log in with Google button does and how we're going to swap out some of the content inside the head 70 00:04:37,000 --> 00:04:39,630 or whenever the user is actually logged in. 71 00:04:39,640 --> 00:04:45,760 So let's continue in the next section and figure out how are we going to approach the internal implementation 72 00:04:45,820 --> 00:04:46,920 of the header.