WEBVTT 00:00.480 --> 00:04.680 So I'll just copy everything from the form to start and I'm going to comment things on and off as we 00:04.680 --> 00:05.440 go. 00:05.940 --> 00:06.190 OK. 00:06.190 --> 00:08.730 So look at our form right now. 00:08.910 --> 00:09.830 Quite Ugly. 00:10.170 --> 00:15.340 Let's start Brian taking a look at line height is simple but border none. 00:15.360 --> 00:20.210 What that will do if you make it bigger if you look at the form down here as refresh. 00:20.220 --> 00:22.260 I don't know if you could see but a quarter went away. 00:22.260 --> 00:28.150 The default border then what I'm doing is adding in a line at the bottom. 00:28.860 --> 00:34.560 And actually what would make this easier is if I just show you the finished app just a moment. 00:34.560 --> 00:35.270 Here you go. 00:35.330 --> 00:37.150 So we have that white line running underneath. 00:37.260 --> 00:38.800 So that's what they just added in. 00:38.820 --> 00:42.010 It's very hard to tell because we still have the rest of the form there. 00:42.270 --> 00:46.030 So the next thing let's make the background transparent. 00:46.920 --> 00:47.380 OK. 00:47.400 --> 00:51.180 So it's easier to see even though it's very small on the screen right now. 00:51.180 --> 00:55.230 Now there's no white background and a couple other things. 00:55.230 --> 00:55.990 I made the fonts. 00:56.010 --> 00:56.440 Whoops. 00:56.580 --> 01:05.550 Get rid of that made the font size bigger made the form or the input itself bigger and then included 01:05.670 --> 01:07.670 a margin color and some padding. 01:07.860 --> 01:09.890 Also I'm using a class here. 01:09.900 --> 01:12.350 It could also just call this input. 01:13.180 --> 01:20.810 But what's being styled is not the form itself but if you look here we have a class that equals form. 01:20.950 --> 01:23.720 So it's the input right here. 01:24.310 --> 01:27.320 Refresh now and we're getting closer. 01:27.430 --> 01:28.980 Let's go back to 100. 01:28.990 --> 01:33.610 One thing that you may notice is when I click here I get this annoying focus effect. 01:33.730 --> 01:44.430 You can get rid of that with a C S S which if you go to the bottom you got this input type text focus. 01:44.540 --> 01:51.290 And what this will do is say when an input with type called text is focused when someone clicks on it 01:51.710 --> 01:52.830 there should be no outline. 01:52.940 --> 01:57.710 So if we save now and try it I don't get that weird outline. 01:57.800 --> 02:03.190 Also if you notice I have the text white here and then I decided to do that. 02:03.290 --> 02:04.700 This is placeholder text. 02:04.700 --> 02:05.360 It's what this is. 02:05.360 --> 02:11.390 As soon as you start typing it turns white but the placeholder is dark to change placeholder text is 02:11.390 --> 02:12.490 a bit annoying. 02:14.030 --> 02:20.790 Hey not going to even bother spending much time on what this is but if you notice there's this fancy. 02:20.800 --> 02:28.690 Basically it's just three browser specific way of doing this where we're targeting the input placeholder 02:28.690 --> 02:31.660 text and I'm setting the color to be slightly see through. 02:31.700 --> 02:37.810 So now if I do it oh that's not what I wanted to refresh now for I do it it's slightly transparent but 02:37.810 --> 02:39.130 I start typing. 02:39.130 --> 02:40.090 There we go. 02:40.530 --> 02:41.310 OK. 02:41.890 --> 02:43.010 Moving on along. 02:43.120 --> 02:45.830 That takes care of our form for the most part. 02:45.850 --> 02:50.490 Now we've got the button the button is pretty straightforward. 02:50.770 --> 02:52.440 Me format this a little better. 02:56.520 --> 02:57.720 I'll just copy it all over 03:01.300 --> 03:07.750 and save mainly what I'm doing can actually get rid of this is adding in three pixel solid border then 03:07.810 --> 03:09.750 I'm making the font size bigger. 03:09.760 --> 03:12.570 I'm making the color I'm all changing the color. 03:12.730 --> 03:19.480 Adding some padding adding a background color and then so the color here is referring to text a border 03:19.480 --> 03:23.540 radius to make it rounded and then making it slightly see through again. 03:24.430 --> 03:26.640 So you can see that changes made. 03:26.650 --> 03:31.570 I'm not a designer so I'm sure there are many better ways things we could do to just make this look 03:31.570 --> 03:31.810 better. 03:31.810 --> 03:36.190 I'm not terribly happy with it but it's good enough or I might ask you of course. 03:36.190 --> 03:37.990 So that's pretty much it for the button. 03:38.960 --> 03:43.220 Which then leaves us with basically positioning things and formatting them. 03:43.670 --> 03:50.620 How did we get this to be centered vertically roughly vertically in the page which is what we did here. 03:50.690 --> 03:57.140 What I did here and it's not too bad although we need to do is change our markup a little bit. 03:57.260 --> 04:03.890 So we've got a basically two divs that everything is wrapped in the first one contains everything. 04:04.070 --> 04:07.310 And then there's a second one that also wraps around everything. 04:07.370 --> 04:11.140 First one is called Flex container and the second one gave a class of container. 04:11.360 --> 04:19.770 I'll just copy this and pasted over into a home that Ejay us but at the same content we've got to join 04:19.770 --> 04:20.000 us. 04:20.000 --> 04:27.070 You got our paragraph form but now we also have these two divs on its own. 04:27.180 --> 04:27.840 I refresh. 04:27.840 --> 04:29.760 Nothing changes. 04:29.790 --> 04:39.080 However if we add in this little bit of success here what this will do is help position things vertically 04:39.830 --> 04:46.200 so we can put this in we can put it wherever we want but I'll put it towards the top. 04:46.270 --> 04:49.330 Now if I save and refresh the page. 04:49.560 --> 04:54.960 Now we've got everything vertically centered so this isn't a course on C Ss So it's not a course on 04:54.960 --> 04:57.930 things like flex blocks or positioning or what these fields do. 04:58.170 --> 05:03.790 But this is a nice and easy way to position things well relatively easy. 05:04.250 --> 05:08.370 And so we're basically done here just to review what we did. 05:08.370 --> 05:16.080 The first thing we did was to allow or just set up so that it was serving a public directory which was 05:16.080 --> 05:17.810 this fancy line here. 05:18.330 --> 05:21.340 Everything inside the public directory is now available in our views. 05:21.600 --> 05:22.430 So what I'm going to do. 05:22.430 --> 05:28.290 I'm actually going to close down our CSSA and markups who just focus on what we actually have. 05:28.830 --> 05:32.720 So then in our home that yes we can link to the SS. 05:32.730 --> 05:37.490 We do need that slash and it's referring to this app Dotsie assessed there. 05:37.860 --> 05:38.400 OK. 05:38.580 --> 05:42.390 So then aside from that we added a font and then our applets. 05:42.430 --> 05:46.370 SS We added a bunch of styles which we mainly copy and pasted. 05:46.370 --> 05:47.440 So the point of this course. 05:47.460 --> 05:53.550 But things like changing the font adding shadow changing colors adding the background image changing 05:53.550 --> 05:58.290 the background image size how it is positioned or how its size and taking over the whole screen but 05:58.290 --> 06:00.990 not overwhelming it. 06:00.990 --> 06:08.310 And then also the font weight and making our font lighter weight then we've got our form and our button 06:08.310 --> 06:14.560 that we formatted and then also we positioned things using these two divs and styling those. 06:14.580 --> 06:21.540 One thing that we could do to make this a little bit more kosher is to add a head and a body to it. 06:21.630 --> 06:24.820 So if you're familiar with aged female and probably have been asking why we haven't done this. 06:24.830 --> 06:25.530 You don't. 06:25.780 --> 06:28.470 I mean we should have it there but we don't have to have it. 06:28.470 --> 06:35.970 A browser will add it automatically but it's definitely an improvement to follow convention do not rely 06:35.970 --> 06:37.870 on a browser to do that for us. 06:37.870 --> 06:45.370 So now we've got a nice officially formatted kosher home that Ejay as file and just double check that 06:45.370 --> 06:47.020 it still works. 06:47.040 --> 06:47.630 All right. 06:47.850 --> 06:50.150 And let's make sure our form still works. 06:50.160 --> 06:58.860 No reason it shouldn't but let's add in a Jared at gmail dot com and we're joined now and we see we've 06:58.860 --> 07:04.300 gone up to 506 now and we could go over to my ask who will run the same query. 07:04.740 --> 07:09.630 Select start from users ordered by created at sending this time from them at one and we get Jared at 07:09.660 --> 07:14.260 gmail and we get the correct time stamp and we are officially done with this app. 07:14.310 --> 07:16.890 So if you wanted to of course you could change. 07:16.890 --> 07:21.750 You could create a second page to redirect to that said thank you or congratulations. 07:22.170 --> 07:27.780 Or you could you know restyle this or you could collect more information if you wanted a challenge instead 07:27.780 --> 07:33.990 of just an email collect a name or a birthday or a phone number that's more useful than an email. 07:34.010 --> 07:36.120 If people give it away at least. 07:36.120 --> 07:42.750 So this was a lot to section just to make this work although if we really think about it the bulk of 07:42.750 --> 07:45.970 it was introducing things like Noad and NPM. 07:46.050 --> 07:49.260 And you know that might ask you a package and assassinated him out. 07:49.430 --> 07:49.720 Yes. 07:49.770 --> 07:56.680 So much groundwork for an app for a simple web app but the minuscule part was super easy. 07:56.820 --> 08:02.850 Hopefully you know creating a table and inserting a single thing or selecting account stuff that we've 08:02.850 --> 08:04.800 been doing for a long time in this course. 08:04.800 --> 08:06.380 So hopefully you feel good about that. 08:06.570 --> 08:10.590 And this was more of just a high level survey of creating an app but I want you to feel like you know 08:10.590 --> 08:15.780 you leave this course making something even if it is simple but you've now seen how all the parts fit 08:15.780 --> 08:16.430 together.