1.2 The HTML Template
Welcome to the first lesson of this course. Let's kick things off by having a look at the original HTML template created by Cory.
1.Introduction2 lessons, 03:26
2.Building the Essential Files8 lessons, 1:14:42
3.Creating Custom Elements3 lessons, 22:32
4.Conclusion1 lesson, 01:15
1.2 The HTML Template
Welcome to the first lesson of this course. Let's kick things off by having a look at the original HTML template created by Cory. Cory created a pretty simple and good looking template here. So we have a header on the top which contains a logo/site name and then navigation on the right. A jumbo area here which contains a headline and a smaller headline. Then we have a filterable portfolio which you can access by using these filters on the top. And then, at the very bottom, a footer with some contact information. Now, this is the homepage. The blog page looks like this. Very similar in structure. The only thing that's actually different here is the actual content. So we have a list of posts along with a pagination control, a numbered pagination. And then on the right side we have a side bar with three widgets currently about recent posts and recent projects. Now currently there is no single post page. We'll have to create that ourselves, but it's not a big deal. Finally the contact page looks like this. The content here is actually a contact form, which currently isn't functional. But we will be adding some scripts to it and we'll actually make it validate and send emails. So this is what the template looks like. Now if we take a look behind the scenes we're gonna see the code structure. So, Cory here uses Bower to load all the packages he needs, like BootStrap, jQuery, Masonry for the filterable gallery and so on. Then we have the CSS. He uses main.css, which is the HTML5 boiler plate CSS just to start things off, and then his own styles here. Then we have in the images folder an abstract-bg.svg which is this polygon shape here in the background. And then inside js we'll find main.js which basically activates the portfolio filter that you saw on the homepage. Then we have the typical HTML files for blog, contact and index, along with some supporting files like favicons and touch icons. And yeah, this is a quick tour of the template that Cory built. Now that we know what we're working with, let's move on and start preparing the theme files. That's coming up next.