Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have our work area set up, and we've created a couple of placeholder templates for our pages. We're ready to actually create and style our first page. And the first page that I want us to tackle is just going to be the simplest page of the entire site. And it's that Admin menu, which is just simply text. Just a text and some basic links that allow us to click to other places. Let's create that page first. So, that file is going to be admin.php so we're going to open that up. I'm just going to paste in some HTML here. You can pause and copy it down if you want. Here's the body tag that existed before. Let me just show you here's the other body tag. So, everything between here is what I just added and I've got a header at the top.
What I'm thinking is this will stretch across the top of the page. That's ID header. It says the name of the company Widget Corp in h1 tags. Then, I've got a block here called Main. We'll come back to that in a second. That's going to be most of the site content. And then at the bottom will be a footer, which we'll also stretch all the way across the bottom. It just has copyright information. And inside the main block, we're going to have a couple of other divs. The navigation, which I would like to float to the left. And then the page which will be on the right. So, we'll have navigation on the left and the page content on the right. And the Page Content here. It's just going to have our menu in it.
So, that's going to be just an unordered list, and each list item is going to have a link in it. And those links then are going to go to the PHP pages that we're going to create later for managing the website content. Managing the admin users, and logging out. So, let's just bring this up in a browser, let's save it and let's go to Firefox Localhost. And for me, that's Kevin Skoglund. And then instead of being in Sandbox now, it's going to be in my new folder for My Project. And remember, I also added Public. And so, inside the Public folder then, admin.php.
Now when we actually deploy it, we would have our web server send the users directly to the public folder. But we're still in development. So, we're specifying the entire path to get there, starting with localhost, okay? So, you would set-up your web server differently. And you can actually do it locally if you wanted, but there's just not as much point. Usually, in development, we go ahead and just supply the whole URL. And we set it up in production to be more secure. Alright, so let's take a look and there we go. We get what we expected, except that it's not very pretty. So, let's move directly to adding some styles to this.
So, I'm going to just Paste in a style reference. This is just basic HTML CSS in the head and I'm going to link to stylesheets public.css. So, let's take a look here. That's going to be right in this folder. So from admin.php, I'm going to go into the Style Sheets folder, and then I need to have a file called public.css that goes in there. Now I'm just going to drag in a copy of that file so that you don't have to watch me type it. But I'm going to bring it up so that you can pause the movie and copy if down if you need to.
It's also going to be included in your Excercise files. You can just grab it from there. Or you can create your own, what I've done is pretty simple stuff. So, I've got just some basic declarations here for HTML, body, images, the links. Then, I've got the main structure here, header, main and footer. And then the navigation is all right here. Notice that I've got float left on that. And then for page content, and I've also got float left on that, so that'll make those go side by side. Again, you can pause the movie if you want to copy all this down or you can grab it from the exercise files. I'm going to save it, close it.
Let's make sure we've saved this one as well. Let's go back and reload our page. And there you go, looks a lot better already. It's not the world's most beautiful site, but it's a big improvement over what we had before. Now, you could have different style sheets for different parts of your site. The public side, the admin side. I'm just going to have one because this tutorial is not about CSS, I think just having one will suffice. It'll just give us something that looks a little bit better, something we can work with. I think even if you're going to be working with designers who are going to do most of the designing. As a developer, it's still important for you to have some basic design skills so that you can still at least create a mock-up for yourself. It's a lot easier to work with a mock-up where things are sort of in the right place even though a designer may come back and make a lot of improvements to it later.
We can at least work with something that feels like it's going to be a website. Now, we haven't used any PHP in this yet. We have a webpage we can look at, it has .php at the end, but it has no PHP in it, just HTML and CSS. So, the next movie let's see how we can use PHP to make some of our page assets reusable.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105121 Viewers
56 Video lessons · 116895 Viewers
71 Video lessons · 86111 Viewers
131 Video lessons · 41178 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.