Before you get started building your layouts, go over using HTML tags when building single-page layouts, and learn a bit about how this project is put together and where you can get the exercise files.
So let's go over some of those concepts. One of the things that I do in creating websites is to use HTML tags in a particular way so let's talk about that. For example I like to use the article tag for a standalone element. That means that items that can stand on their own receive an article tag. This is sort of like what you refer to as an article of clothing and an entire outfit. In my single page layouts each layout receives a separate article tag. Now whenever I need to place a series of items inside other element I usually use section tags.
I always place custom class names first and I use classes in a layout whenever I want to create an element that I may want to style in CSS as a whole. So you'll see names for classes that start with keywords like title, layout, image and others. If I'm using Bootstrap classes then I place them after my own custom classes. It makes things easier to find them in the long run. In addition to that let's talk about how you can get access to all the files in this project.
All of the files for this course are freely available for all users at this GitHub repo. Now in GitHub you'll see that the project is organized into different branches. Each branch corresponds to a video in the course. They are named according to the video they correspond to. If you see a branch name like 01_03 that means that the branch corresponds to the first chapter and refers to the third video in that chapter. Also if you see a b at the end of the name those are how the files look at the beginning of each video.
And if you see an e at the end of a name it means that's how the files look at the end of the video. In this project we'll be working with three different files. All those files will be inside this builds folder. You can see the index.html file right here and if we click on CSS you'll see the style.css document there and inside the js folder you'll see the script.js file. Those are the three only files that change throughout this course. The master branch has the finished version of the project and you can download the finished version of the files by clicking on this download ZIP button.
For advanced users the repo includes a server you can run for live reloads. You can follow the instructions in the repo for installation and if you want to you can even download all the branches. I've recorded a special course that shows you the advanced features of GitHub and how to download and work with multiple branches from a course. You can take a look at it at this url. So if you're comfortable with these requirements let's get started working on the project.
- Building a header and footer
- Adding styles to your project
- Making your navigation responsive
- Bootstrap layout components
- Using a multicolumn format
- Creating carousels
- Adding interactivity
- Creating animations