Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So we just finished up the HTML and the complete CSS styling for our homepage. In my workflow this is usually where I stop and move on to creating an actual WordPress theme. It's similar to what we did in Photoshop where we just mocked up the homepage. We could've kept on going in Photoshop and created the designs for all the different pages, but we decided that the homepage was enough for now and decided to move forward. So a lot of times that's what I'll do here too. I have this homepage completed in the HTML and CSS and I'll move into creating the actual theme.
But bear in mind that you don't have to stop here if you don't want to. You might want to press on and mock up additional pages. In fact that's what we've done here. I've mocked up a number of additional pages for other areas of this site, doing it this way is going to save us a little bit of time when move into theming in the next chapter. So let's take a look at these pages and the final HTML and CSS code. Now this is the exact file that we're going to be working from when we were creating the themes. So we're looking at the index.html file. Now we just finished up theming this.
It's just slightly different than where I left you guys off. There is the Search form at the top. I've added a home link and there is a little bit of content here to fill out this column, this Web Special of the Week. So let's take a look at this project in TextMate. We'll look at that index.html file and at the top of our sidebar is this form that's that search form, in case you're following along and want a search form on your site as well. I've added this Home link and I've added just another up here.
I got another h2 tag with this coupon below it. So that's just the only thing that's different on the homepage, this index.html page. There is a few other pages that I've mocked up though. One of them would be the homepage of the blog. So if you click on The Grind here and go to the blog, The Grind is going to have this kind of big bold identity and then recent blogpost and that's what that's going to look like. A single blog article like if you were to click on this article and go read this individual article, is this file called blog single.html.
It looks like this. This is the design for an individual blog post. Then inside the store there are category pages. We're hoping they look like this with the different categories here and individual products below those category headers. This is what we want an individual product to look like, a big image for the product and this kind of design here. So these are the exact files that we're going to be working from as we move forward with our WordPress theme.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102042 Viewers
61 Video lessons · 88764 Viewers
71 Video lessons · 72577 Viewers
56 Video lessons · 104221 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.
Your file was successfully uploaded.