Structuring the content of a course

Asked

Viewed 82 times

0

I’m a beginner in both HTML and CSS. As you can see in the image I need help to solve 3 problems:

1- Partition of the left I intend to make a kind of menu (or dividsórias) that will be the modules of my course that menu will list (Aula1, aula2) vertically..

2- I would like from the moment I click on one of the modules the contents of the module open on the right side. The page can reload or not (I do not know which is possible to do)...

3- Besides this content it is great so I would like to divide it so that it can pass with the arrow the parts as if it were a slide (I thought of making an iframe, but I do not know how to pass structure to pass the content.)

I would like help to solve these 3 problems, so I avoid using PHP or javascript because I haven’t started learning yet.inserir a descrição da imagem aqui

html css
  • 1

    Welcome! I recommend you make one Tour and read about how to ask. Your question is too wide and there is no code for a punctual help.

  • These are various questions and problems in one question.

  • You’re actually going to need to use javascript, you’re going to need a library called Slick Caroussel https://kenwheeler.github.io/slick/ , where you can get this slide, also get the slide to be displayed according to the clicked module, case over time I will answer this question, but it is good to already go studying and trying to do.

2 answers

0


Problem 1:

You can use the Bootstrap, he owns a class col that can be used for this, can already leave responsive here.

Problem 2:

No javascript gets complicated, but you can use the :hover to change the slide display (none and inline), but it won’t be very good

Problem 3:

As you are beginner I suggest using the Wowslider to create this "Powerpoint"

0

Thank you so much for the tip. However, I realized that the slide would limit my content a lot. Then I learned a little Javascript and realized that I can do exactly what I would like using a basic script:

function mostra() {
document.getElementById('introduçao').style.display = 'block';

In the div:

<div id="introd" class="hidden">
        <object data="oi.pdf" width="1000" height="550"></object>
        </div>

In the CSS:

#introd{display: none;}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.