I went through a research for getting some examples on how to start on the journey of creating this step by step instructive you want to achieve. There is a JS library we have been using and this is completely achievable with it. It's called GSAP: Green Sock documentation

I will say you can use the Timeline feature to manage the step by step operation and even give the capability to go back if the user needs to. Here is an example: Step previous and next example with Timeline GSAP

Here the code example of the JS section using GSAP:

var master = new TimelineLite({paused: true});

function getFirst() {
  var tl = new TimelineLite();
  tl.from("#a", 1, {autoAlpha:0, ease: Power1.easeOut})
  return tl;
}

function getSecond() {
  var tl = new TimelineLite();
  tl.from("#b", 1, {autoAlpha:0, ease: Power1.easeOut})
  return tl;
}

function getThird() {
  var tl = new TimelineLite();
  tl.from("#c", 1, {autoAlpha:0, ease: Power1.easeOut})
  return tl;
}

master.add(getFirst());
master.add(getSecond());
master.add(getThird());

document.getElementById("next").onclick = function(){master.play()};

document.getElementById("prev").onclick = function(){master.reverse()};

Checking on the documentation there is a lot more that you can do with it. Here is the link directly to the Timeline feature documentation: Timeline GSAP. This will give you a clear idea of what you can accomplish.

This is a good start for your needs, and after researching on the implementation and capabilities of this Library you will be capable of fully implementing the step by step training/instructive. After that the rest would be just a matter of being creative and play around with CSS and the proper JS code to give it the style and animation you want.