4.1 HTML: Header and Slider
In this lesson we’ll begin writing the HTML for the header and the homepage slider.
1.Introduction1 lesson, 01:35
2.From Beginner to Pro7 lessons, 38:33
3.Creating a PSD Design4 lessons, 35:36
4.Rewriting the Code14 lessons, 1:42:32
5.Conclusion1 lesson, 00:57
4.1 HTML: Header and Slider
Welcome back. In the previous lesson, I finished all three PSD's for our portfolio website. Now the next step is to take all of the images that you need to use and export them as PNGs or JPEGs. So, the first thing you would do, is of course grab the logo. So select that. And using the actions that I showed you in the previous lessons, I can press F2 select PNG from here, and save this in my images folder. Do the same for this background. Do the same for these images right here, and these images are 354 by 354 pixels each. Scrolling down, we can see that there are no more images, because we used icon fonts. So, the envelope here, the Twitter and Facebook icons, all of those will be rendered using an icon font. Export these images, then go to the portfolio page. Export this banner. This image we already have from the homepage. And the About, well we don't have any images here. Now I've already done that. I have my images folder right here. As you can see, there's the About banner and the Portfolio, the logo. I have some different thumbnails for the portfolio images, so I just exported those to, to save a bit of time. And also some different backgrounds for the slide images, these three right here. Cool. So, once you do that, you can jump into your code editor. I'm using Sublime Text 2, and if you're on your road to becoming a professional web designer, go ahead and use Sublime Text 2, because it offers a bunch of useful tools that will help you write code very fast. In my working folder I have the Images folder, of course. And I'm going to create my index.html. Now, I start every project with this bit of code. So we have the DOCTYPE, the language, the head section with the meta, the title, so let's say Portfolio Theme. The description meta, which is basically a description of your website. So I'm just gonna say, an HTML portfolio theme built for a Tuts+ course. For the author, I'm gonna put my own name. Mobile-specific meta. This is useful for mobile devices. When you're viewing your website on a mobile device, it gives the browser information about how it should handle the rotation, the scaling and so on. So keep this in place. And then we have the style sheets, which right now I'm loading a style sheet which doesn't exist yet. But we'll cover that in the CSS section. Now, onto the HTML. We'll first start with the header. And I'm just gonna go back and forth between Photoshop and the code editor, so that I know what I'm doing. I'm gonna have a header with the class of main-header and inside I have the logo and the navigation, which are centered in the page and are contained within my grid. So for that I'm gonna use a div with a class of container. And this is a bootstrap three class. I'm gonna use that grid. Make sure you add proper comments after each div. And then I'm gonna have a row, and a row will hold the columns, basically. And then I'm gonna have a div with a class of col-lg-4, which basically means I'm grabbing four grid columns. And inside, I'm gonna put my logo. So I'm gonna have an a, that goes to index.html, and the image is gonna be imageslogo.png. Next, I'm gonna have a div with a class of col-lg-8. And you might ask, well, why col-lg-8? Well, it's simple. Our grid has 12 columns. Four of them, I allocate for my logo. And the rest of eight I allocate for my menu. And of course, you can make different combinations. In my case, you can have only two columns for the logo and ten columns for the navigation, or three columns for navigation, and the rest of nine columns for the logo. It's really up to you but, I'm gonna use four and eight. Now for the navigation, I'm gonna use the nav tag with a class of main-nav, and inside I'm gonna have an unordered list, with three list items, each containing an anchor tag. And href is gonna be .html. So, the first one is gonna go to index, second is gonna go to portfolio, and third is gonna go to about. And inside the links, I'm gonna say Home, Portfolio, and About and that's basically it for the header. Nothing else there. Next up is the slider. For the slider I'm gonna start with a section, just to, to write the code as semantic as I can and I'm actually gonna use an external plugin for this. It's a jQuery plugin called Cycle2 and it's made by Mike Alsup, and you can find him on Twitter. And you can also find the plug-in address in the lesson notes. So this is a very simple but very effective slider. It has a bunch of a bunch of options. And it's actually really easy to use. You need to start with a div with a class of cycle-slideshow, and add a couple of options to this div. And I'm gonna use the data attribute. So I'm gonna start with data-cycle-fx. Fx stands for effects. So basically, you're telling the slider how it should move the images. In my case, it's gonna be scroll horizontally. The next attribute will be data-cycle-timeout, and this will be set to zero. Now the timeout refers to the interval at which the slides will change automatically. By setting it to zero, I'm telling it that I wanna change the slides manually. The last attribute would be data-cycle-slides. Now, this will tell the plug-in which elements should be slided, so I'm just gonna say div with a class of slide. And finally I'm just gonna add an id called homepage-slider. And this is necessary because there is also a slider in the portfolio page. Okay, now inside this one, I'm gonna have a div with a class of slide and an id of slide-1. Inside, let's see. We have the project title with a description and the button. What I'm gonna do is add a class of container to center all my content inside the grid. And then I'm gonna do a header with a class of fancy-box.fancy-red. Now, the fancy-box refers to this box right here because it has that drop shadow. And the fancy red refers to the color. Okay, now inside it, I'm just gonna put an h1 that says Project name. After that, we have a div with a class of slide-contents, which will basically have a paragraph. So let's copy this and then it's gonna have another paragraph with an anchor tag to portfolio.html and let's give it a class of btn because it's a button. And I'm gonna say See details. Now, I'm gonna add another slide. And I'm gonna change this to fancy-yellow. Great. So now we have the slides. But we don't have the navigation yet. Well, adding the navigation is really simple actually. You need to create a div with a class of cycle-prev, and inside an anchor tag. And now let me just clean this up for a sec. The href you can just put a hash sign, and for these two arrows I'm gonna use an i with a class of fa, and fa-chevron-left. So that's for previous and this is for next. [BLANK_AUDIO] And this is gonna be chevron-right. Okay now, let's open this in the browser and see what we got. So we have the logo, we have the navigation. We have these two slides, which of course, are not slides yet because I didn't include the plugin. But everything we wrote is here. Now in the next lesson I'll take care of the Recent Projects area. So, I'll see you there.