So I'll just copy everything from the form to start and I'm going to comment things on and off as we
go.
OK.
So look at our form right now.
Quite Ugly.
Let's start Brian taking a look at line height is simple but border none.
What that will do if you make it bigger if you look at the form down here as refresh.
I don't know if you could see but a quarter went away.
The default border then what I'm doing is adding in a line at the bottom.
And actually what would make this easier is if I just show you the finished app just a moment.
Here you go.
So we have that white line running underneath.
So that's what they just added in.
It's very hard to tell because we still have the rest of the form there.
So the next thing let's make the background transparent.
OK.
So it's easier to see even though it's very small on the screen right now.
Now there's no white background and a couple other things.
I made the fonts.
Whoops.
Get rid of that made the font size bigger made the form or the input itself bigger and then included
a margin color and some padding.
Also I'm using a class here.
It could also just call this input.
But what's being styled is not the form itself but if you look here we have a class that equals form.
So it's the input right here.
Refresh now and we're getting closer.
Let's go back to 100.
One thing that you may notice is when I click here I get this annoying focus effect.
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.
And what this will do is say when an input with type called text is focused when someone clicks on it
there should be no outline.
So if we save now and try it I don't get that weird outline.
Also if you notice I have the text white here and then I decided to do that.
This is placeholder text.
It's what this is.
As soon as you start typing it turns white but the placeholder is dark to change placeholder text is
a bit annoying.
Hey not going to even bother spending much time on what this is but if you notice there's this fancy.
Basically it's just three browser specific way of doing this where we're targeting the input placeholder
text and I'm setting the color to be slightly see through.
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
I start typing.
There we go.
OK.
Moving on along.
That takes care of our form for the most part.
Now we've got the button the button is pretty straightforward.
Me format this a little better.
I'll just copy it all over
and save mainly what I'm doing can actually get rid of this is adding in three pixel solid border then
I'm making the font size bigger.
I'm making the color I'm all changing the color.
Adding some padding adding a background color and then so the color here is referring to text a border
radius to make it rounded and then making it slightly see through again.
So you can see that changes made.
I'm not a designer so I'm sure there are many better ways things we could do to just make this look
better.
I'm not terribly happy with it but it's good enough or I might ask you of course.
So that's pretty much it for the button.
Which then leaves us with basically positioning things and formatting them.
How did we get this to be centered vertically roughly vertically in the page which is what we did here.
What I did here and it's not too bad although we need to do is change our markup a little bit.
So we've got a basically two divs that everything is wrapped in the first one contains everything.
And then there's a second one that also wraps around everything.
First one is called Flex container and the second one gave a class of container.
I'll just copy this and pasted over into a home that Ejay us but at the same content we've got to join
us.
You got our paragraph form but now we also have these two divs on its own.
I refresh.
Nothing changes.
However if we add in this little bit of success here what this will do is help position things vertically
so we can put this in we can put it wherever we want but I'll put it towards the top.
Now if I save and refresh the page.
Now we've got everything vertically centered so this isn't a course on C Ss So it's not a course on
things like flex blocks or positioning or what these fields do.
But this is a nice and easy way to position things well relatively easy.
And so we're basically done here just to review what we did.
The first thing we did was to allow or just set up so that it was serving a public directory which was
this fancy line here.
Everything inside the public directory is now available in our views.
So what I'm going to do.
I'm actually going to close down our CSSA and markups who just focus on what we actually have.
So then in our home that yes we can link to the SS.
We do need that slash and it's referring to this app Dotsie assessed there.
OK.
So then aside from that we added a font and then our applets.
SS We added a bunch of styles which we mainly copy and pasted.
So the point of this course.
But things like changing the font adding shadow changing colors adding the background image changing
the background image size how it is positioned or how its size and taking over the whole screen but
not overwhelming it.
And then also the font weight and making our font lighter weight then we've got our form and our button
that we formatted and then also we positioned things using these two divs and styling those.
One thing that we could do to make this a little bit more kosher is to add a head and a body to it.
So if you're familiar with aged female and probably have been asking why we haven't done this.
You don't.
I mean we should have it there but we don't have to have it.
A browser will add it automatically but it's definitely an improvement to follow convention do not rely
on a browser to do that for us.
So now we've got a nice officially formatted kosher home that Ejay as file and just double check that
it still works.
All right.
And let's make sure our form still works.
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
gone up to 506 now and we could go over to my ask who will run the same query.
Select start from users ordered by created at sending this time from them at one and we get Jared at
gmail and we get the correct time stamp and we are officially done with this app.
So if you wanted to of course you could change.
You could create a second page to redirect to that said thank you or congratulations.
Or you could you know restyle this or you could collect more information if you wanted a challenge instead
of just an email collect a name or a birthday or a phone number that's more useful than an email.
If people give it away at least.
So this was a lot to section just to make this work although if we really think about it the bulk of
it was introducing things like Noad and NPM.
And you know that might ask you a package and assassinated him out.
Yes.
So much groundwork for an app for a simple web app but the minuscule part was super easy.
Hopefully you know creating a table and inserting a single thing or selecting account stuff that we've
been doing for a long time in this course.
So hopefully you feel good about that.
And this was more of just a high level survey of creating an app but I want you to feel like you know
you leave this course making something even if it is simple but you've now seen how all the parts fit
together.