‫All right guys.
‫So this is a PHP course.
‫So that's what I want to focus on.
‫So what I've done is I've created the theme so that the HTML and CSS for the work Opia project.
‫And I've included the download in this lesson.
‫So go ahead and download that folder.
‫It's just called work theme.
‫And I just want to quickly go over those files.
‫So what I would suggest doing and what I'm going to do is open this work Opia theme in a separate text
‫editor window.
‫It can be VS code or another text editor.
‫What I've done is I've used Sublime Text, so if I go ahead and just open up Sublime Text, you'll see
‫I have the work of a theme and notice that it's just the HTML files CSS.
‫Now there is a PHP file here, but all this is for is for some sample data.
‫So it's just an array of job listings with the title, description, salary, all the different fields
‫that we need.
‫I think there's about 5 or 6 of them.
‫And it's just there for sample data so you can copy it and paste it in your forms.
‫When we're doing our project or when we're setting up our database, if you want to add some sample
‫data there.
‫So that's all this is for.
‫It's not being run in any way.
‫Now for the pages here we have the home page.
‫So the index.html and what I've done is I use the tailwind CLI to create this.
‫So we're including the style.css which is in this CSS folder.
‫And you can see it includes all the tailwind stuff.
‫And I'll talk a little bit about customization if you do want to customize the theme afterwards.
‫But this page let's take a look at it in the browser.
‫So I'm going to go to let's see I'm just going to open up index.html.
‫And obviously this doesn't function.
‫It's just it's just hard coded HTML.
‫But if we take a look at the page it has the header with the nav bar, the login register, links,
‫post, a job link, all pages will have this.
‫It also has a search area so you can search jobs by keywords and location.
‫Now this is going to be just about the very last thing that we do.
‫We're going to focus on routing and creating our controllers, doing all that stuff first and mainly.
‫And then we'll add the, you know, the final touches with the search and so on.
‫Then we just have a simple banner here and then we have recent jobs.
‫So the home page has the latest six jobs and a link to the listings page which I'll show you in a second.
‫And then we just have this banner at the bottom with the post job link.
‫So that's the index.html.
‫Now if I click the link here, it goes to the listings dot HTML, which is this page here.
‫And it's very similar to the home page, except it doesn't have the search.
‫And it will have all jobs, not just the latest six.
‫All right.
‫Now if I click on details that will go to the details dot HTML which is right here.
‫So if you want to take a look at the HTML you can it's just all tailwind classes.
‫And since we're using tailwind there is a lot of classes.
‫But the upside to that is we don't have a lot of custom CSS.
‫We have none really.
‫So this is the details page.
‫It has all the data for that particular job.
‫The apply now is just an email link.
‫So if you wanted to take it further and create a form and have have messages and have an inbox, of
‫course you could do that.
‫But that's a little beyond this, this course.
‫And then we also have edit and delete buttons.
‫Now ultimately these will only be visible to people that that own that listing or the person that owns
‫that listing.
‫But of course we don't have that kind of functionality here.
‫These are just HTML pages.
‫Then we have the create or post job page.
‫So it's just a form that has the job info and the company info.
‫Save and cancel buttons.
‫So that would be the post job HTML page.
‫All right.
‫And then we just have an error HTML.
‫If I open that up, you'll see that it's just it'll say 404 or 403, whatever the error is.
‫And then of course we have our login page with the email address and password.
‫And then we have our register page which has a couple more fields.
‫Okay.
‫So that's pretty much it as far as the theme goes.
‫So what I would suggest is that you just keep this open so that you can easily go to the HTML and grab
‫snippets or whatever it is that we need from it.
‫Now if you do want to customize it, then you should use the tailwind CLI.
‫That's how it was created.
‫And you can see there's a package.json here that includes tailwind CSS.
‫And it has a watch and a build command.
‫So basically you just need to open up your terminal and run npm install.
‫And that will create your node modules folder with tailwind.
‫And then you can run npm watch and it will just constantly watch the input CSS file.
‫So that's where all the tailwind stuff is included.
‫And that's where you can add any custom CSS.
‫So we do have a few things for custom CSS.
‫But that's only if you want to edit the theme.
‫It's not something you're going to have to do.
‫It's not something we do in the course.
‫It's just extra if you want to take it further.
‫All right.
‫So that's the theme.
‫I'm going to keep that sublime text open as we go along.
‫So in the next video we'll start to set up our main document folder.