Laravel API Development & Vue JS SPA [COURSE]

Laravel API Development & Vue JS SPA – e04 – Login View 1

welcome to level API development with view Jas single page application from scratch the following episode is going to be an

excerpt from the full course now available on udemy if you are interested in developing robust laravel api's with a front-end built on view and tailed when CSS then this is the course for you

we go into great detail talking about things like authentication testing tailwind CSS view j/s levo PHP unit and so much more so I hope you'll join me for the full course go ahead and click

on the link in the description to get sent to the udemy page where you can purchase the full course I hope you enjoy this episode if you browse through the exercise files you'll find a section

for screen shots and what I've done here is I've just simply opened the login view and this is the view that we're going to be implementing using tailwind now the logo here for our project is

also included as part of your exercise files so you'll be able to follow along and recreate this login view exactly the same so why don't we get started let's go back to phpstorm

i've got the log in that blade file you can find that inside resources views authorization and then log in that blade dot PHP now this is the file that we added that BG read 400 in right now to

be honest of course it doesn't look very pretty mostly to do with the fact that we erased all of bootstrap but it's still referencing those bootstrap classes so

let's go back to phpstorm and I'm gonna undo the BG read 400 because we don't really want to do that so what is the first thing that we need to tackle well if you notice this bar

here this whole section is centered vertically and horizontally so why don't we start with that let's go back to phpstorm and then this container right here we'll

keep using it as a container for our form so this is wrapping the entire design so we need to add MX auto and that will Center it from left to right but then we need to do H full so then

this section here needs to take up the entire height of the browser then we can use flex that way everything inside of this will actually flex and take up all of the room that we need and we can

justify Center and then we can use items Center that way the entire thing is centered on the browser let's take a look refresh and sure enough we are centered vertically and

horizontally however this still needs a whiff because right now it's just whatever the width is of the content so if we take a look at this you see is just the width of this forgot your

password section because that's what it's doing let's try a width of 64 let's get rid of all of this and try a width of 64 and just to see it we do need some sort of background color that's going to

help us so how about BG blue 900 okay so now we have that centered and we do see that we have a little bit more breathing room now we do need a little bit more it feels like it's still a little tight if

we zoomed in just a little bit I think this is more of the size that we'd be looking for so this is still too small now as a default 64 is the maximum there is nothing bigger than 64 so we're gonna

have to do something custom for that and that's where the Tailwind config file comes into play let's pull that open right now tell when config and we can add an extension here to our theme and

we can extend it and let's go ahead and extend the width to include a new figure of 96 and this will represent 24 REM if you take 96 and you divide it by 4 that's where we get to 24 so a width of

64 divided by 4 is 16 rents so a width of 96 divided by 4 equals 24 reps and that's where we get that figure from so let's go back here and now we're gonna have with of 96 it's our new 96

with that we added ok let's go back to the browser hit refresh and sure enough it is now wider so this is the way that you would add your custom configs and your custom width for your particular

design so in this case this is more of what I'm looking for where we add a background here of gray 300 and let's check that out now we have that man

background check it out in the preview here you see how the background is not totally white and now we will take care of the fact that this is supposed to be the full entire screen but right now we

are still inside this confined because we still have this laravel and login and register will clean that up in just a second these corners are supposed to be rounded and maybe add a little bit of

shadow check it out in the preview you see these are rounded you can tell right here and we do have a small shadow going all the way around so let's add that now back to phpstorm so we'll go ahead and

add rounded LG it's a little bit bigger than just your regular grounded and let's add a shadow of Excel this one right here refresh and that's looking better so why don't we take care of this

right here and the fact that this is not full height just yet so to do that let's jump into our layouts and of course right now this is still riddled with all of this navigation so why don't we

comment this out for now altogether and so what we'll need to do with this main content is we need to give it a height of screen basically go ahead and take up the entire screen let's go back to

Chrome hit refresh and sure enough okay so this is looking much much better that is way closer to our preview right here great let's keep going so now all of our content is still butting up against the

edges so of course we need to give it a little bit of breathing room within this box so what do we do that with a padding back to our login view we want some padding inside our container so why

don't we do that inside this with right here we want that to have a padding let's try a padding of four all the way around and see what that looks like back to Chrome refresh okay let's check out

the preview I think I got a little bit more than that so why don't we try six maybe padding of six refresh yeah that's looking better so now we have that logo this logo right here that I designed for

the course so why don't we pull that up that's an SVG and it's going to be inside your exercise file so let's browse to our finder and let's go back up one directory into SVG's and inside

of here of course we have this dot dash logo dot SVG now we could pull it in as a single file but I feel like copying and pasting the actual SVG right into it would be a better choice so

let's go ahead and pop this open in phpstorm and there it is so this entire thing we're just going to copy this out of here and let's paste it right over the top of this right here hit paste and

let's just take a look at what it does back to Chrome refresh and sure enough our logo is in so a pretty cool way to have a really high quality basically infinite quality really logo with a very

low overhead because SVG's their text they're not images and they're fantastic for things like logos so that's the way that you would do that now notice here that included I've included three CSS

classes right inside the SVG SVG is a typical HTML tag so you can add any classes these three classes here are classes that come with tailwind so we have fill current and then we have text

white if you change this if you wanted the logo to be a different color for example we can say text read 400 for example and let's check that out in the browser hit refresh we can change the

color of that SVG but for now of course we want it to be white and then we have a width of 16 if you want to make that bigger we could do a width of 32 for example and it makes it much much bigger

great so that is the nice thing with bringing in an SVG what's next so we have this welcome back and enter your credentials below so why don't we add those right underneath the SVG we'll

do an h1 for welcome back and then we'll do an h2 for enter your credentials below right that's what it says right here enter your credentials below okay so now let's take care of formatting

those two things refresh of course it doesn't look great right away and right off the bat we see that there is quite a bit of padding between the logo and this section right

here so one thing you can do is you can add padding to this element which would push this section down however it makes more sense to add padding to this element instead because this padding

right here is not affecting the logo but it's affecting this welcome back text so it makes more sense to have the padding this and this is part of the learning process of using a utility based CSS

like tailwind is you kind of have to get used to how things are structured now at first it seems like you're adding a lot of classes but at the end of the day this ends up being much cleaner than a

big CSS file so let's add some classes to our h1 here starting with the text white because that is text white and then let's look at the size of the text so we'll just estimate to be maybe text

to excel and finally let's add that padding let's try a padding top of 8 something quite large let's go back to Chrome refresh okay so that's looking good I think it's still a little small

I think this text is a little bit bigger so maybe let's try three excel instead safe back to Chrome yeah that's looking better all right now enter your credentials below it's kind of a blue

tone it's kind of muted and it does have a little bit of padding there so let's take care of that so let's add some classes to this h2 right here start with the color maybe text blue let's try 300

so text blue 300 yeah that's close let's check it out yeah I think that's dead-on so we still just need a little bit of padding over the top as we see here maybe not it might be okay

so up next of course we have this whole entire section here so we have two input tags and they are formatted nicely now ideally of course this is the section that you would type into and this up

here is just a label so for part two of this let's go ahead and handle these input fields

In part 1 of 3, let’s try to follow the screenshot mock to implement the login screen.

Buy the full course at https://www.udemy.com/laravel-api-development-vue-js-spa-from-scratch/

In this episode, we cover:

Recreating designs from a screenshot using Tailwind classes

Positioning of elements on the screen

Adding a custom width in Tailwind using the config file

Using svg tags directly in views

About the course
Learn how to develop a robust API with Laravel and a Single-Page Application in Vue JS from Scratch

What you’ll learn
– RESTful API Development with Laravel
– Vue JS Single Page Application Methodology
– Front-End Design Using Tailwind CSS
– Implementing Search Functionality Using Laravel Scout
– Build a Complete SPA from Scratch