HTML - set the structure

Before beginning to code any component or application for the web, we first need to have a generalised plan for it in place. Step one in developing this plan is to come up with the HTML markup for the component.

HTML sets up the structure of the component, which all other features like CSS and JavaScript rely upon. Once the structure is there, filling it up with tinier pieces of detail is no tough.

Being able to come up with a simple and concise markup is the real challenge, as it makes further development fluid and fairly straightforward.

In this regards, the developer needs to have a strong knowledge of CSS and JavaScript in order to construct the markup for the component in the simplest and most effective way.

For instance, using knowledge in CSS, the developer can reason things such as how many nestings would be required in order to float an element A, or that where an element B should be placed if it's to be positioned absolutely on the left side of another element.

Similarly, using knowledge of JavaScript, the developer can reason things like whether an element needs to have a certain class so that it could be easily selected in JavaScript, or that whether to encapsulate a piece of text within an element to be able to later on change it to some other value.

Once the HTML is set up in the best possible way, working on everything else becomes something close to a piece of cake - without troubles, without hassles.

Now before we start discussing how to construct the markup for a slider, take your time and think on how to do this yourself. It's only by doing things in programming that we learn it.

The HTML must encompass all features of the component, yet do that in the most elementary way that will be easy to work with in CSS as well as in JavaScript.

To write good HTML, it's essential to know CSS and JavaScript really well!

Try to ask questions to youself such as:

  1. How would I denote each slide?
  2. What class would I give to the main container of the slides?
  3. Shall I be using an id or a class here?

.. and so on.

Work through every step logically and gradually - no one is in a hurry! Relate everything that you do back with CSS and JavaScript.

Once again, question yourself that:

  1. Is the HTML capable of being styled easily in CSS?
  2. Will it be easy to work with the HTML in JavaScript?

What you need is only a couple of slides, a container to hold them, and two navigation buttons to navigate the slider.

Play around with classes, tags and the nesting levels of elements to draft a simple markup for the slider.

Believe it or not, at the end of this tutorial, as we continuously get you to go through this brainstorming process each and everytime we implement a new feature, you'll feel yourself a better thinker, a better problem-solver and ultimately a better programmer.

But don't take our word for it! Try it yourself and you'll see how interesting it is to make something on the web in the most effective manner.

Thinking break.....

Once you're done, continue reading below to join up in the discussion on the steps to construct the markup for a slider.

Assuming you've done the exercise, let's now solve this problem together.

We can break up a slider into individual bits and pieces in the following way:

Wireframe showcasing a simple slider's structure
Wireframe showcasing a simple slider's structure

Let's understand what's happening here...

  1. The main element that encapsulates all the content of our slider is .slider. It's a good habit to encapsulate a given component completely into an HTML tag so that all its sub-components can be accessed easily through this tag.

  2. Next, within this main element, .slider_slides-cont holds all the slides of the slider.
  3. The individual slides are represented as .slider_slide. They can contain literally anything including images, headings, paragraphs, forms, even sliders!
  4. Finally, the navigation buttons (which we'll explore in the next chapter) are given as .slider_nav, and placed directly inside .slider.
    These navigation buttons don't go in .slider_slides-cont because it is meant to only hold the slides of the slider, nothing else.

The class naming convention we're using for our slider's individual components is the BEM (Block-Element-Modifier) convention.

Let's now convert this discussion into the glyphs of real HTML markup:

<div class="slider">
    <div class="slider_slides-cont">
        <div class="slider_slide">Slide 1</div>
        <div class="slider_slide">Slide 2</div>
        <div class="slider_slide">Slide 3</div>
    </div>
    <button class="slider_nav">&lt; Back</button>
    <button class="slider_nav">Forward &gt;</button>
</div>

A quick recap: the main element is .slider - whatever is related to the slider will go inside this element; .slider_slides-cont holds all the slides of the slider; .slider_slide represents each slide; and lastly, .slider_nav represents each navigation button.

With this structural layout in place, now we can easily move on to explore the styling part of the slider.

CSS - a touch of style

At this stage, when we are concerned with a very basic slider, we don't need any special sort of CSS.

What we need is just a custom height and width for each .slider_slide so that it looks like a slide. This is accomplished below:

.slider_slide {
    width: 400px;
    height: 300px;

    /* preferential styles */
    background-color: #ddd;
    font-size: 30px;
    text-align: center
}

For now, we go with an absolute width and height for .slider_slide, but we'll change this later on to relative dimensions to make the slider responsive.

The styles specified in lines 6 - 8 are just given to make all the slides look even better. Our slides currently have text inside them, and to make this text stand out we give .slider_slide a large font size. The same goes for text-align, it makes the slides look even more appealing by giving a nice layout to the text.

The CSS above is perfect with just one thing left.

That is, currently all the slides show up on the page, however we only want the first one to show up. All the subsequent slides are to be shown by means of interaction with the slider i.e when someone clicks the Next → button, the next slide is displayed while the first one is hidden and so on.

So how to hide all slides, but the first one?

Well, just set display: none on .slider_slide to hide all the slides, and then set display: block on the first slide to show it. To select the first slide we use the :first-child pseudo class:

.slider_slide {
display: none; width: 400px; height: 300px; /* preferential styles */ background-color: #ccc; font-size: 30px; text-align: center }
.slider_slide:first-child {
display: block
}

And this completes our CSS! Wasn't difficult, was it?

At this point, this slider is uninteractive - it is just a styled box with two buttons and nothing more.

Uninteractive slider

If you are having trouble understanding the CSS above, please take our CSS course and become a pro in CSS!

JavaScript - Add interactivity

With the HTML and CSS done, we are now only left to work on the scripting part of our slider to make it interactive. We'll cover this in detail in the next chapter and go step by step in the procedure to making this slider truly interactive!