Final Project Ground Rules 0:00Alright everybody, the moment is now, the time has come, we have to start working on our final project. Oh, and by the way, you can tell it's the final project because I have a brand new spiffy wallpaper to mark the occasion. Okay, so before we get started, a couple ground rules. First up, there's no way around this, we're going to go much faster than we did in previous videos. But hopefully, if I did my job properly, it's not going to feel that fast because you've already reviewed each of these concepts. But yeah, we can't get around it.you've already reviewed each of these concepts. But yeah, we can't get around it. If I stopped after each line to explain it, we'd be here for 4 or 5 hours, and we gotta get this done. Okay, ground rule number two. With that in mind, here's your job. If you're watching a video and you didn't understand a particular piece, or why I did this or that, your job, and for the benefit of everyone else, your job is to leave a comment, mark the timestamp, and then ask your question. So it might be like, hey Jeffrey, at 3 minutes and 52 seconds, I didn't understand why youmark the timestamp, and then ask your question. So it might be like, hey Jeffrey, at 3 minutes and 52 seconds, I didn't understand why you put this return type there, can you explain more? And I'm going to monitor these comments for a long time, and I will do my best to answer each of your questions. Okay? So if you're watching a video and you don't know what's going on, well, maybe head down to the comments and somebody has already asked your question. Alright, that's it. Let's get going. Create New Laravel App 1:19Alright, that's it. Let's get going. Now, we will start like we always do. Layer of L, new. And the name of our fictional jobs platform is called Pixel Positions. So that will be the name. Alright, no starter kit in this case, even though Breeze would give us a head start. It removes some of the learning opportunities. So we will start from scratch. I will use Pest. Add Project Logo Asset 1:40So we will start from scratch. I will use Pest. Yes, I will initialize Git. I'm going to use SQLite. And let's cd in there. Alright, let's review this in the browser. And we're all set. Alright, let's head over to Zeppelin. Now here's the layout that Adrian whipped up for us. It looks pretty good and should be fairly easy to create the markup for.Now here's the layout that Adrian whipped up for us. It looks pretty good and should be fairly easy to create the markup for. Now of course, you don't have access to this, but I think the only thing we need here is the logo itself. So I will make that available within the GitHub repository, and I will also link to it within the comments for this video. Alright, I will call it logo, and I will save in SVG. Now you'll see I'm already within my project, so I have a couple choices. I could create an images directory within my public folder, or if I want Vite to automatically version and hash any images we have, and that would help with cache busting, by the way. Build Base Blade Layout 2:22I could create an images directory within my public folder, or if I want Vite to automatically version and hash any images we have, and that would help with cache busting, by the way. In that case, I could put it within a resources directory. So let's do that. Let's open this, create a new folder called images, and then I will save it here. Cool. So let's switch over to our editor. Alright, so the first thing I'm going to do is set up my general layout. So within the views directory, I will add a directory called components, and this one will be called layout or app layout.So within the views directory, I will add a directory called components, and this one will be called layout or app layout. Whatever you want. Let's do layout. Alright, let's add some initial boilerplate. We'll call it pixel positions. And then let's see, if I switch back to Zeppelin, yeah, it looks like I have a navigation area at the top, and then our main section below it. Alright, so we'll have our wrapper, a nav section at the top, and then our main section below it.Alright, so we'll have our wrapper, a nav section at the top, and then our main section below it. And for now, I will put our slot there. Okay, so now within the nav, it looks like we have three sections, right? An area for the logo, an area for the links, and then a section to post a job. So let's create three divs. First up, we'll have our logo, then our links, and then finally, post a job. Okay, so first up, if I want to reference this logo.svg file within my resources folder rather than public, we have to load it and access it a bit differently. Here's how.rather than public, we have to load it and access it a bit differently. Here's how. Open up our image tag. But first, this should be clickable, right? So let's add it within an anchor tag. And then as the source, I will open up PHP, and I'm going to reference the Vite facade. Now this is the full path, but actually it's made available globally as an alias. So I can just do this. Now I'm going to reference an asset. Okay, so now all I have to do is reference the full path to the image.Now I'm going to reference an asset. Okay, so now all I have to do is reference the full path to the image. In this case, resources, images, logo.svg. And that's it. Okay, so with that in mind, why don't we go ahead and run npm run def. npm run def. But right now we're getting Vite command not found because I haven't yet installed my npm dependencies. Let's do that now. All right, one more time.Let's do that now. All right, one more time. There we go. It's up and running. Next, I'm going to, at the very top, reference our resources.js app.js file. And now, well, let's access this in the browser. So here's what I'll do. I'll go to my routes file, and let's open welcome and delete all of this and replace it with our new layout. All right, let's switch to the browser.it with our new layout. All right, let's switch to the browser. Give it a refresh. So sure enough, it doesn't look great because of the white background, but this is our logo. And if we inspect it, sure enough, we can see it being referenced properly. All right, but here's one thing to be aware of. If I switch to the terminal and I instead build this for production, have a look. I come back, reload, and unable to locate file in Vite manifest. Okay, here's how we fix that. Go into your resources.js app.js file.Okay, here's how we fix that. Go into your resources.js app.js file. And right here, I'm basically going to tell Vite about our images directory. So I can say import.meta.glob. And I'm going to provide a regular expression here. So I'm going to say my images are within the go up a level, go into the images folder, and then grab everything within there. And I want that made available and ready for versioning. Okay, so if I come back and run this again, this time, if I come back to the browser and refresh, it works.Okay, so if I come back and run this again, this time, if I come back to the browser and refresh, it works. Okay, so that is something to be aware of, only on the condition that you need versioning and cache busting. So take a look at this. If I inspect the element, notice that it appends a unique URL to the logo. And again, this is entirely for the purposes of cache busting, so that your assets can live as long or little as they need to. Okay, just an aside. Let's head back to our layouts.Okay, just an aside. Let's head back to our layouts. For now, it's going to link back to the homepage. And then let's work on this. Switch to Zeppelin and I see links for jobs, careers, salaries, and companies. So first one is jobs. Next we have careers. Next one is salaries. And last up is companies. And we'll probably change this a little bit later. Install and Configure Tailwind 6:36And last up is companies. And we'll probably change this a little bit later. Okay, finally, we need a link to post a job. So we'll have post a job, and we'll leave it at that. All right, back to the browser, give it a refresh. All right, but now, of course, I want to line these up properly. I could use grid or I could use Flexbox. So with that in mind, I next want to pull in Tailwind, tailwindcss.com. Framework guide, Laravel. And once again, we will follow the steps.Framework guide, Laravel. And once again, we will follow the steps. I will copy this, run it. All right, next we will update tailwind.config. And that file should now be available. It is. Paste that in. And yeah, we're just providing paths to files that we want Tailwind to inspect for utility classes. This way the compiled CSS file is as small as it can be.that we want Tailwind to inspect for utility classes. This way the compiled CSS file is as small as it can be. So we're not using view here. I can remove that entirely. Cool. Reformat, and that looks good. Next, update our entry point, and then run npm run dev. Cool. So resources, app.css, paste that in. And then finally, if I go to my layout file,So resources, app.css, paste that in. And then finally, if I go to my layout file, we can reference that as well. Or like you learned, we could alternatively import our CSS directly from our app.js file. But for now, we'll keep them separate. Cool. Npm run dev, and now Tailwind is available to us. Okay. So on the nav, I'm going to set a display of flex,Okay. So on the nav, I'm going to set a display of flex, and then I will say justify between. And that should push this one all the way to the right, this one to the left, and this in the middle. Let's switch back to our project, give it a refresh, and there we go. Cool. Next, why don't we align the items to the center? Items, center.Next, why don't we align the items to the center? Items, center. All right, cool. But next, everything is right up against the edge of the window. So right up here, why don't we set some padding on the left and right of 10? And why don't we switch to a two-up layout? And yeah, that'll save us some time. All right, next on the nav itself,And yeah, that'll save us some time. All right, next on the nav itself, yeah, if I set a background of red or something, let's give it a little padding on the top and bottom, a bit of breathing room. And next on the body itself, I want it to be a black color. So I could set class of BG black, like so. And yeah, now we can at least see the logo a bit better. We'll also set the text to white. But if I switch over to Zeppelin,We'll also set the text to white. But if I switch over to Zeppelin, I believe it's not an exact black. Let's select this, and it looks like this is our black color. So here's what I'll do. I'm going to open up tailwind.config.js and extend our colors, and I'll say black should actually be this shade right here. Now, Tailwind should update behind the scenes.should actually be this shade right here. Now, Tailwind should update behind the scenes. So check this out. If I were instead to set it to red or something like that, you can see now anywhere that I referenced text black or background black, it will now use this value rather than the default. But yeah, let's bring it back. All right, anyways, back to layouts. And on the nav, there should be a border.All right, anyways, back to layouts. And on the nav, there should be a border. So I'll set border B, but that white is a little too strong. So I'll show you a little tip. You can set a border white, but then lower the opacity. And this is useful if you don't have a specific color, but you want it to be a percentage of a color. I could do something like this. And that means white, but set the opacity or the alpha to 10%.And that means white, but set the opacity or the alpha to 10%. And that's what I want in this case. All right, cool. Next on the nav links themselves, why don't we add a bit of breathing room in between them? So I can use space X six to add a bit of space between each of the items. Next, I know I want these links to be bold. And then for the main content itself,Next, I know I want these links to be bold. And then for the main content itself, I want to push it down from the nav area. So let's add a class of margin top of about 10, and that'll push it down. All right, next, let's switch to Zeppelin and see how long this should be. It looks like we have a maximum width of 986, about 1,000. So here's what I'll do. I'll say maximum width, Create Job Card Components 10:26So here's what I'll do. I'll say maximum width, and if I want to use a custom value, I can type it in here. So why don't we say the maximum width you can be is 986 pixels. All right, cool. So I have a little more work to do here for the layout, but I think we can switch over to our welcome view and get started on the main section for the homepage. Now, if I switch to Zeppelin, have a look here.and get started on the main section for the homepage. Now, if I switch to Zeppelin, have a look here. I can see a few blade components we'll need to create. For example, what you see right here, that is a repeating theme where you have a little square. It could be a certain color and then a heading. So I see it here. I see it right up here. I see it for all of the headings, actually. That's something that should probably be a component.I see it for all of the headings, actually. That's something that should probably be a component. Next, the styling for these buttons all seem to be the same. And then we have styling for a job card and then an alternate styling for like an expanded job card. Okay, so I'm filing these away in my head. All right, so let's do this. I will begin with one section at a time, top jobs. Okay, so with that in mind, let's wrap it within a section.I will begin with one section at a time, top jobs. Okay, so with that in mind, let's wrap it within a section. We'll have some kind of heading that I'll say top jobs. And then within a div, it looks like we're going to have three job cards. Okay, so we'd have something like this ultimately, but for now, I'm just going to work on the first one. So within a card, it looks like we'll have three individual sections, one for the employer name,it looks like we'll have three individual sections, one for the employer name, then a section for the title. I'll hard-code this for now, video producer, and the salary, full-time from $60,000. Finally, at the bottom, we will have a list of tags, something like this. And let's create three of those. Finally, I will have an image for the employer's logo, but with that in mind,Finally, I will have an image for the employer's logo, but with that in mind, I should probably wrap these tags within a div so that I can push them to the left and the logo to the right, like you see in the image. Now, temporarily for the image, I'm going to use a placeholder service. I think there's one called placeholder.it, and then I provide the dimensions, and it should be 42 by 42.and then I provide the dimensions, and it should be 42 by 42. All right, and that should be enough to get us going. So let's switch to the 2UP layout. Okay, so let's start by giving this some padding all around. How about P4, and then a background color? So if I make it crystal clear, you can see what we have here. Okay, but instead I'm going to make it more subtle.you can see what we have here. Okay, but instead I'm going to make it more subtle. How about a background color of white at around 5%? Yeah, just very subtle. Let's make it rounded. All right, and then I'm going to set a display of flex. Oh, but that doesn't change anything. Oh, you know what? I think I have an extra div by accident. All right, reformat.I think I have an extra div by accident. All right, reformat. There we go. Okay, so now I want to adjust the direction. Let's do flex call. So it's top to bottom. And then I want to center almost everything, excluding just a couple parts. For example, the employer should be self-start. So that should be on the far left.For example, the employer should be self-start. So that should be on the far left. And while we're here, let's make the text just a little bit smaller. Next for this section, let's give it a little bit of padding. So PY, maybe eight. I want it to be bold. And then down here, yeah, we're going to do the same thing. Let's set a class of flex and justify between.And then down here, yeah, we're going to do the same thing. Let's set a class of flex and justify between. And maybe align the items to the center. Very good. And then just to be safe, I'm going to set margin top to auto. Now I don't think it'll make a difference in this case, but in situations where maybe there's more margin to be had, it'll force this section to be at the very bottom of the card.it'll force this section to be at the very bottom of the card. Okay, next on the section heading, why don't we give it a margin bottom of six, something like that, just to push it down. And then let's do this for our tags. So I'll start with just one. I'll add a class of background white. Again, I'm just using alpha here to make it a little quicker for us, about 10%.Again, I'm just using alpha here to make it a little quicker for us, about 10%. Let's then add some padding on the left and right and the top and bottom. Let's make it rounded. And I want the text to be fairly small. So let's use extra small there. All right, but now what about when we hover over it? Well, we could say, well, when you hover, set the background to 25%, maybe.Well, we could say, well, when you hover, set the background to 25%, maybe. That looks good, I think. And by the way, a little tip, I know we don't have much breathing room here, but if you want to transition those colors a bit more cleanly, you could say transition colors and then set a duration of about 300 milliseconds. So now any colors will have more of a smooth transition. And I don't know if you can see that in the video,So now any colors will have more of a smooth transition. And I don't know if you can see that in the video, but it's definitely smoother. Okay, so now think about it. I could do three of those and that looks a little better. All right, what else? How about the employer logo? That should be rounded. And that's a little hard to see right now, but later that'll be a full image.And that's a little hard to see right now, but later that'll be a full image. Okay, so this is enough to extract a component. So let's do this. Let's open our sidebar and within our views directory, let's add a brand new component. And I'm going to call this job card. All right, so now I can select all of this and move it over. Cool, so let's swap it out. X job card, and let's create three of them.Cool, so let's swap it out. X job card, and let's create three of them. Okay, back to the browser. And yeah, now we're repeating that, but notice there's no spacing in between them. Let's fix that. We'll wrap all of these within a div. And then this time I will use a grid. We'll say for large devices, we want grid calls three. Next, I want a nice little gap in between them.We'll say for large devices, we want grid calls three. Next, I want a nice little gap in between them. So we'll set, it's basically padding in between each of the job cards. Yeah, it's starting to take shape, but now notice how everything is right up against the left edge. I think we can fix that by returning to our layouts and on the main section, let's make sure the margins are set to auto.and on the main section, let's make sure the margins are set to auto. And yeah, now that pushes it to the center. Now I know that ultimately we will pass in a specific job data, but for now we're going to leave those static. Okay, next, why don't we update this into a section heading because I know we will reuse it. So let's create one. And I called it section heading.So let's create one. And I called it section heading. That's good enough for me. Paste it in. And then this will be our slot. But now I'm not sure if I can always assume the margin there. So maybe that will be applied elsewhere. All right. So with that in mind, I can do margin top sixAll right. So with that in mind, I can do margin top six and then remove this entirely. Okay, X section heading. And this will be, what did we call it? Featured jobs. Back to the browser and that works. Okay, now I can add our little square and that should be fairly easy. So why don't we do a span hereand that should be fairly easy. So why don't we do a span here and I'll give it a width of two and a height of two. So it's a perfect square, maybe a background color of white. And then I don't want it to be an inline element. Let's do inline block and let's see how that looks. And yeah, that's okay, but maybe we should change this up. Maybe this will be wrapped within its own div and then we'll have a span followed by the H3.Maybe this will be wrapped within its own div and then we'll have a span followed by the H3. Yeah, if I take that approach, then I could do something like inline flex item center. And I can even add a little bit of a space in between the square and the heading itself. Let's have a look. Yeah, and I think that looks pretty good actually. The only tweak might be the heading should be bold and a little bit larger than the regular text.The only tweak might be the heading should be bold and a little bit larger than the regular text. And there we go, we have our section headings. Cool. So now if we switch back to welcome, yeah, we have one section for our featured jobs. We could have another section for what would this be? Our tags and then another section for our recent jobs. Switch back and there we go. Now, clearly we need a little bit of spaceSwitch back and there we go. Now, clearly we need a little bit of space in between each of these sections. So in situations like this, what you can do is wrap all of it within a root. And then I could apply something like a space Y of 10. And that way there's an equal amount of space in between each of the children, as you see here. All right, next up we have our tags. We're gonna do this very quickly.All right, next up we have our tags. We're gonna do this very quickly. So we've already created a tag. So this too should be extracted into its own component. Tag.blade.php, paste that in. This will be our slot. Okay, so now I can swap these out with X tag. Now again, keep in mind, we want these to be configurable. So ultimately I would probably pass in a tag, but we haven't gotten to that point yet.So ultimately I would probably pass in a tag, but we haven't gotten to that point yet. For now, I'm keeping this all static. All right, so now back to welcome. Yeah, right here, I could have one of these and then let's say YY9P. Let's have around 10 of them. All right, switch back and yeah, that looks okay. Now, once again, they need a bit of room to breathe. So we'll say once again, MT6.Now, once again, they need a bit of room to breathe. So we'll say once again, MT6. And I'd like to add a little space in between each tag. So how about space X1? And that's what we get. And then, yeah, these tags probably need to be a bit larger. So it sounds like we should have two different sizes of tags, maybe extra small and then a base size. Oh, and by the way, I put this in the wrong section.maybe extra small and then a base size. Oh, and by the way, I put this in the wrong section. So let's fix that. You were waiting for me to fix that, like so. All right, so I think we made pretty good progress here, but we're going a little high on time. So in the next episode, we will work on the expanded job card. And by the way, if you want, why don't you get a headstartAnd by the way, if you want, why don't you get a headstart and see how your version compares to mine? Okay, so we're going to wrap up there. Again, I know we're going fast, but that's the way it's done. In the next episode, we will finish up our layout so that we can then begin working on the architecture itself. So I'm going to take a break and I will see you in the next episode.So I'm going to take a break and I will see you in the next episode.
