Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So now we've learned some XHTML and some CSS, and let's put it to use. What we have here is a website that has been provided for us. It's been designed, all the assets have been created, all the images have been built, and they are all sitting in folders in our Exercise Files. Our task is to build a website that looks exactly like this using the techniques that we have learned. So this website is small. It has four pages. They all have this basic layout, with main content on the left and sidebar content on the right.
This page here has got some products on it, and this page here is about the surfing lifestyle. This page here has an embedded YouTube video on it. So our task is to duplicate this website with what we've been given. So we've been given all of these images. We've been given all of this text, and we've been given an example of what it looks like. So this is not unlike how oftentimes I'll get a job where the designers have done their bit and now they want me to put all of this together and make it work. So let's take a look at the Exercise Files folder and see how this is organized.
Here we have in Chapter 09 of our Exercise Files, we have a number of different folders. The complete-site is in folder number 01, and so that is with Chapter 09, Lesson 01, which is this one here. So that has the complete-site, which we're looking at right here, with all of these pages and links and such in it. Then each of the other lessons has its own Exercise Files, so there is Lesson 02, which is where we'll begin building the header, Lesson 03, we'll build the Contact menu, lesson 04, we'll build the main menu. So each of these has its own purpose.
Each of these has a beginning place and an ending place, like here we have this beginning-html. So what you'll do is you'll save this as heading.html, and then by the time you're done with the lesson, it should match the ending.html. Likewise, in the CSS folder you'll have a beginning and an ending. You'll save the beginning as main.css. In the lesson, I'll tell you all of this so you don't have to memorize it or write it down right now. I'll guide you along. I'll say okay, now we're going to save as main.css. So the idea is for you to follow along with me, and by the time this is all done, at the end of the chapter, you will have built this website in your machine, with your own text editor and your own tools.
I want to thank James Williamson who designed the original version of this website and wrote the clever copy you see here. So we can put that into practical use and see how it all goes together to build a complete website.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100120 Viewers
56 Video lessons · 113149 Viewers
71 Video lessons · 82016 Viewers
131 Video lessons · 39348 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.