7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 27 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Markup

In the previous lesson you learned how to install Sequence.js. The next step to creating a working project is to write the markup—the HTML code. Let’s do that right now.

2.2 Markup

Hello, and welcome to lesson number two. In the previous video you learned how to install Sequence.js. Now the next step to creating a working project is to write the proper markup or HTML code. And in the case of Sequence.js, this consists of three main elements. First we have a container. And a container, it needs to have a unique id. Then we have a canvas and the canvas needs to have the class of SEQ-canvas. And the canvas will be used to store the steps. Finally we have the steps or you might call them slides. So, let's write some code. I'll start with a div of an ID of sequence. Now the ID can be anything you want. I'm choosing sequence because it's easier to remember. Inside we're gonna create the canvas and I'm gonna use a UL with a class of SEQ Counts. And inside, I'm going to create the steps as list items. Now, for the sake of styling, I'm going to add some classes to these list items. But that's entirely optional. Now in this example, I used an unordered list and list items for the Canvas and steps. But these are not the only elements you can use. For example, you can use, instead of the UL a section. And instead of the list item, articles. Sequence.js will know that the canvas is the element with the class of seq-canvas, that you can see here. And the steps are the immediate descendents or the children. Now that we have the proper structure in place, let's go ahead and add some content. And the content will be based on some quick mock ups I drew of some slides. So we have slide one, slide two and slide three. I have all of my images exported, like these two buttons and also these four icons. And based on these mockups, and based on this design, the content should look something like this. We can see that I wrapped the content in my div of class of content. Again this is not required, it's just for styling purposes and I added some of my own elements like this class of columns and then column for the individual icons, and a class of button. Now a sequence works with JavaScript but because there are some browsers that do not run JavaScript, you can provide a full back. If you don't then you won't be able to see any kind of slides. So to add the fall back, simply look at the slide that you wanna show initially and add the class of seq-in. Let's have a quick look at our page here. Of course we do not have any kind of styling just yet. But we do have all required markup. And that's it for this lesson. Next time I'll show you how to add functionality and styling to our project. See you there.

Back to the top