1
00:00:00,330 --> 00:00:04,710
So I'll just copy everything from the form to start and I'm going to comment things on and off as we

2
00:00:04,710 --> 00:00:05,130
go.

3
00:00:06,210 --> 00:00:08,460
So look at our form right now.

4
00:00:08,850 --> 00:00:09,720
Quite ugly.

5
00:00:10,140 --> 00:00:15,280
Let's start by taking a look at well, line height is simple, but border none.

6
00:00:15,300 --> 00:00:17,680
But that will do if you will make it bigger.

7
00:00:17,700 --> 00:00:22,220
If you look at the form down here as I refresh, I don't know if you could see, but a border went away,

8
00:00:22,230 --> 00:00:23,460
the default border.

9
00:00:23,610 --> 00:00:27,900
Then what I'm doing is adding in a line at the bottom.

10
00:00:28,680 --> 00:00:33,970
And actually what will make this easier is if I just show you the finished app.

11
00:00:33,990 --> 00:00:34,590
Just a moment.

12
00:00:34,590 --> 00:00:35,210
Here you go.

13
00:00:35,220 --> 00:00:37,170
See, we have that white line running underneath.

14
00:00:37,170 --> 00:00:38,820
So that's what I just added in.

15
00:00:38,850 --> 00:00:42,060
It's very hard to tell because we still have the rest of the form there.

16
00:00:42,090 --> 00:00:49,170
So the next thing, let's make the background transparent so it's easier to see, even though it's very

17
00:00:49,170 --> 00:00:50,670
small on the screen right now.

18
00:00:51,060 --> 00:00:53,370
Now there's no white background.

19
00:00:54,180 --> 00:00:55,230
Then a couple of other things.

20
00:00:55,230 --> 00:00:55,980
I made the font.

21
00:00:56,040 --> 00:01:04,019
Whoops, get rid of that, made the font size bigger, made the form or the input itself bigger, and

22
00:01:04,019 --> 00:01:07,720
then included a margin, a colour and some padding.

23
00:01:07,740 --> 00:01:09,810
Also, I'm using a class here.

24
00:01:09,840 --> 00:01:16,140
I could also just call this input, but what's being styled is not the form itself.

25
00:01:16,320 --> 00:01:17,550
But if you look here.

26
00:01:18,670 --> 00:01:20,410
We have a class equals form.

27
00:01:20,800 --> 00:01:22,840
So it's the input right here.

28
00:01:24,250 --> 00:01:27,400
Refresh now and we're getting closer.

29
00:01:27,430 --> 00:01:28,760
Let's go back to 100.

30
00:01:28,810 --> 00:01:33,560
One thing that you may notice is when I click here, I get this annoying focus effect.

31
00:01:33,580 --> 00:01:36,340
We can get rid of that with CSS.

32
00:01:37,440 --> 00:01:41,520
Which if we go to the bottom, we've got this input.

33
00:01:42,200 --> 00:01:44,450
Type equals text focus.

34
00:01:44,450 --> 00:01:51,560
And what this will do is say when an input with typical text is focused, when someone clicks on it,

35
00:01:51,560 --> 00:01:52,880
there should be no outline.

36
00:01:52,880 --> 00:01:56,390
So if we save now and try it, I don't get that weird outline.

37
00:01:57,740 --> 00:02:01,670
Also, if you notice, I have the text white here.

38
00:02:01,670 --> 00:02:03,160
I don't know why I decided to do that.

39
00:02:03,170 --> 00:02:05,270
This is placeholder text is what this is.

40
00:02:05,270 --> 00:02:07,490
So as soon as they start typing, it turns white.

41
00:02:07,610 --> 00:02:10,310
But the placeholder is dark to change.

42
00:02:10,310 --> 00:02:12,500
Placeholder text is a bit annoying.

43
00:02:14,600 --> 00:02:18,140
I'm not going to even bother spending much time on what this is.

44
00:02:18,140 --> 00:02:25,700
But if you notice, there's this fancy basically it's a CSS three browser specific way of doing this

45
00:02:25,700 --> 00:02:31,690
where we're targeting the input placeholder text and I'm setting the color to be slightly see through.

46
00:02:31,700 --> 00:02:34,820
So now if I do it, oh, that's not what I wanted to refresh.

47
00:02:35,480 --> 00:02:38,810
Now, if I do it, it's slightly transparent, but I start typing.

48
00:02:39,020 --> 00:02:39,740
There we go.

49
00:02:40,520 --> 00:02:41,060
Okay.

50
00:02:41,840 --> 00:02:42,950
Moving on along.

51
00:02:42,980 --> 00:02:45,440
That takes care of our form for the most part.

52
00:02:45,680 --> 00:02:47,030
Now we've got the button.

53
00:02:47,890 --> 00:02:50,110
The button is pretty straightforward.

54
00:02:50,740 --> 00:02:52,510
Let me format this a little better.

55
00:02:56,510 --> 00:02:57,980
I'll just copy it all over.

56
00:03:01,270 --> 00:03:07,090
And save mainly what I'm doing we can actually get rid of this is adding in a three pixel solid border.

57
00:03:07,510 --> 00:03:09,310
Then I'm making the font size bigger.

58
00:03:09,640 --> 00:03:16,480
I'm making the color while changing the color, adding some padding, adding a background color.

59
00:03:16,480 --> 00:03:21,460
And then so the color here is referring to the text, a border radius to make it rounded and then making

60
00:03:21,460 --> 00:03:23,230
it slightly see through again.

61
00:03:24,400 --> 00:03:26,590
So you can see that change is made.

62
00:03:26,590 --> 00:03:31,600
I'm not a designer, so I'm sure there are many better ways things we could do to just make this look

63
00:03:31,600 --> 00:03:31,810
better.

64
00:03:31,810 --> 00:03:36,940
I'm not terribly happy with it, but it's good enough for my escape course, so that's pretty much it

65
00:03:36,940 --> 00:03:37,960
for the button.

66
00:03:38,840 --> 00:03:43,070
Which then leaves us with basically positioning things and formatting them.

67
00:03:43,610 --> 00:03:50,240
How do we get this to be centered vertically, roughly vertically in the page, which is what we did

68
00:03:50,240 --> 00:03:51,560
here, what I did here.

69
00:03:52,100 --> 00:03:53,510
And it's not too bad.

70
00:03:54,050 --> 00:03:57,080
All that we need to do is change our markup a little bit.

71
00:03:57,080 --> 00:04:01,370
So we've got basically two divs that everything is wrapped in.

72
00:04:01,370 --> 00:04:07,280
The first one contains everything, and then there's a second one that also wraps around everything.

73
00:04:07,310 --> 00:04:11,090
The first one I just called Flex Container, and the second one give a class of container.

74
00:04:11,240 --> 00:04:15,680
I'll just copy this and paste it over into homed edges.

75
00:04:17,880 --> 00:04:19,110
But at the same content.

76
00:04:19,110 --> 00:04:19,980
We've got to join us.

77
00:04:19,990 --> 00:04:22,770
We've got our paragraph, our form.

78
00:04:23,280 --> 00:04:29,010
But now we also have these two divs and on its own, by refresh, nothing changes.

79
00:04:29,700 --> 00:04:33,600
However, if we add in this a little bit of CSS here.

80
00:04:35,690 --> 00:04:41,690
But this will do it to help position things vertically so we can put this and we can put it wherever

81
00:04:41,690 --> 00:04:41,990
we want.

82
00:04:41,990 --> 00:04:44,330
But I'll put it towards the top.

83
00:04:46,150 --> 00:04:48,820
Now if I save and I refresh the page.

84
00:04:49,560 --> 00:04:51,540
Now we've got everything vertically centered.

85
00:04:51,540 --> 00:04:56,970
So this isn't a course on CSIS, so it's not a course on things like Flexbox or positioning or what

86
00:04:56,970 --> 00:04:57,990
these fields do.

87
00:04:57,990 --> 00:05:01,800
But this is a nice and easy way to position things.

88
00:05:01,800 --> 00:05:03,540
Well, relatively easy.

89
00:05:04,230 --> 00:05:08,280
And so we're basically done here just to review what we did.

90
00:05:08,280 --> 00:05:15,390
The first thing that we did was to allow or to set up our app so that it was serving a public directory,

91
00:05:15,540 --> 00:05:17,550
which was this fancy line here.

92
00:05:18,270 --> 00:05:21,270
Everything inside the public directory is now available in our views.

93
00:05:21,420 --> 00:05:26,130
So what I'm going to do, I'm actually going to close down our CSS and markup.

94
00:05:26,130 --> 00:05:27,960
So we just focus on what we actually have.

95
00:05:28,740 --> 00:05:32,630
So then in our home edges we can link to APTS.

96
00:05:32,700 --> 00:05:34,080
We do need that slash.

97
00:05:34,980 --> 00:05:37,320
And it's referring to this access there.

98
00:05:38,000 --> 00:05:38,410
Okay.

99
00:05:38,430 --> 00:05:44,460
So then aside from that, we added a font and then in our CSS, we added a bunch of styles which we

100
00:05:44,460 --> 00:05:45,900
mainly copy and pasted.

101
00:05:46,320 --> 00:05:50,580
It's not the point of this course, but things like changing the font, adding a text shadow, changing

102
00:05:50,580 --> 00:05:56,370
colours, adding the background image, changing the background image size, how it's positioned or

103
00:05:56,370 --> 00:06:00,450
how it size taking up the whole screen but not overwhelming it.

104
00:06:00,900 --> 00:06:05,130
And then also the font weight, making our font lighter weight.

105
00:06:06,150 --> 00:06:12,240
Then we've got our form and our button that we formatted and then also we position things using these

106
00:06:12,240 --> 00:06:14,420
two divs and styling those.

107
00:06:14,430 --> 00:06:20,940
One thing that we could do to make this a little bit more kosher is to add a head and a body to it.

108
00:06:21,540 --> 00:06:24,840
So if you're familiar with HTML, you've probably been asking why we haven't done this.

109
00:06:24,840 --> 00:06:25,440
You don't.

110
00:06:25,680 --> 00:06:28,950
I mean, we should have it there, but we don't have to have it a browser.

111
00:06:28,950 --> 00:06:35,490
We'll add it automatically, but it's definitely an improvement to follow convention, to do to not

112
00:06:35,700 --> 00:06:37,690
rely on a browser to do that for us.

113
00:06:37,710 --> 00:06:46,320
So now we've got a nice officially formatted kosher home file and just double check that it still works.

114
00:06:46,950 --> 00:06:47,640
All right.

115
00:06:47,640 --> 00:06:49,980
And let's make sure our form still works.

116
00:06:50,010 --> 00:06:51,000
No reason it shouldn't.

117
00:06:51,000 --> 00:07:01,500
But let's add in a Jared at gmail.com and we hit join now and we see we've gotten up to 506 now and

118
00:07:01,500 --> 00:07:07,590
we could go over to my SQL run the same query select star from users order by created at descending

119
00:07:07,590 --> 00:07:13,020
this time limit one and we get Jared at Gmail and we get the correct timestamp and we're officially

120
00:07:13,020 --> 00:07:13,950
done with this app.

121
00:07:14,130 --> 00:07:19,320
So if you wanted to, of course you could change, you could create a second page to redirect you that

122
00:07:19,320 --> 00:07:26,700
said thank you or congratulations, or you could restyle this, or you could collect more information

123
00:07:26,700 --> 00:07:32,190
if you wanted a challenge instead of just an email, collect a name or a birthday or a phone number

124
00:07:32,220 --> 00:07:35,490
that's more useful than an email if people will give it away at least.

125
00:07:36,060 --> 00:07:39,690
So this was a lot two sections just to make this work.

126
00:07:39,690 --> 00:07:46,470
Although if we really think about it, the bulk of it was introducing things like Node and NPM, and

127
00:07:46,650 --> 00:07:53,550
then my SQL package in CSS and HTML is so much groundwork for for a simple web app.

128
00:07:53,550 --> 00:07:56,700
But the MySQL part was super easy.

129
00:07:56,730 --> 00:08:03,360
Hopefully creating a table and inserting a single thing or selecting account stuff that we've been doing

130
00:08:03,360 --> 00:08:04,710
for a long time in this course.

131
00:08:04,710 --> 00:08:06,420
So hopefully you feel good about that.

132
00:08:06,420 --> 00:08:10,740
And this was more of just a high level survey of creating an app, but I wanted you to feel like you

133
00:08:10,740 --> 00:08:13,950
leave this course making something, even if it is simple.

134
00:08:13,950 --> 00:08:16,440
But you've now seen how all the parts fit together.