Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Funciona según lo pedido. OK 

A lo mejor no estés familiarizado con las consolas de los navegadores pero será otro paso que tendrás que tomar. En temas posteriores al curso aprenderas sobre ellas. Mientras tanto, cuando tengas código y no sepas donde está el fallo yo te recomiendo que vayas poniendo código como si fueran comentarios o que vayas poniendo alert('algo'), entre los procesos para ir viendo donde el desarrollo de tu código se queda estancado.
Del ejercicio 1, vuelve a repasar el apartado p
alert('p) Valor de verdad para A > 3 && B >= 3 && C < -3 es: ' + (A>3 && B>=3 C<3));Mira en la expresión si te falta algo.(A>3 && B>=3 C<3)

Comprueba la dirección donde indicas que está tu archivo.
Busca información sobre url relativas y url absolutas.

Lo he mirado por encima, pero para qué pones ese margin-botton tan exagerado, quitalo, y ya tendrás cada ficha pegada una a la otra.
Luego la medida de la ficha la puedes variar con height.
Deberías repasar conceptos básicos de CSS.
https://www.aprenderaprogramar.es/index.php?option=com_content&view=category&id=75&Itemid=203
Saludos.

Perdona denx,
no había visto tu mensaje hasta hace un rato. Mira el codepen a ver si te así te vale.
Saludos
Te dejo aquí el css
html, body {
  margin: 0;
  padding:0;
  background: #ccc;
}
ul.acordeon * {
  font-family: Arial, sans-serif;
  -webkit-transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  transition: all .6s ease-in-out;
}
/* Contenedor general */
ul.acordeon {
  width: 100%;
  overflow: hidden;
  padding: 0;
  background: #8F2250;
  text-align: center;
  list-style: none;
  font-size: 0;
  box-shadow: 0 0 10px #333;
  position:absolute;
  top:20%;
}
/* Cada elemento */
ul.acordeon li {
  position: relative;
  display: inline-block;
  *display: inline; zoom: 1; /* IE7 */
  width: 10%;
  height:0;
  padding-bottom: 40%; /* Ratio aspecto imagen = (height*X)/width */
  background: #eee;
  text-align: center;
  box-shadow: -2px 0px 8px #999;
}
ul.acordeon li:first-of-type{
    background-image: url('http://www.lorempixel.com/1200/1000/animals/');
    background-size: cover;
    background-position: center;       
    }
ul.acordeon li:nth-of-type(2){
    background-image: url('http://www.lorempixel.com/1200/1000/sports/');
    background-size: cover;
    background-position: center;
    }
   
ul.acordeon li:nth-of-type(3){
    background-image: url('http://www.lorempixel.com/1200/1000/food/');
    background-size: cover;
    background-position: center;       
    }
ul.acordeon li:nth-of-type(4){
    background-image: url('http://www.lorempixel.com/1200/1000/nature/');
    background-size: cover;
    background-position: center;       
    }

    /* Títulos pestañas */
ul.acordeon li h4 {
  color:coral;
  position: relative; 
  top: 5%;
  z-index: 1;
  margin: 0;
  font-size: 18px;
  text-align: left;
  text-transform: uppercase;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 10% 120%;
  -moz-transform-origin: 10% 120%;
  transform-origin: 10% 120%;
  white-space: nowrap;
}


ul.acordeon li .texto{
    display: block;
    position:absolute;
    font-size:1rem;
    opacity:0;
    text-align:justify;
    color:lime;
    padding:10px;
    margin-left:10px;
    top:30%;
}

ul.acordeon li .enlace {
    border:solid thin #a1a1a1;
    border-radius:25px;
    width:100px;
    height: 25px;
    text-decoration:none;
    background-color:#dddddd;
    text-align:center;
    font-size:1rem;
    color:black;
    position:absolute;
    top:55%;
    display: block;
    font-size:1rem;
    opacity:0;
    padding:20px 10px;
    margin-left:10px;
    position:absolute;
    }

ul.acordeon li:hover .texto{
  opacity:1;
}

ul.acordeon li:hover .enlace{
  top:50%;
  opacity:1;
  position:absolute;
  left:40%;
}
   
/* Hover: Desplegamos elemento aumentando su ancho */
ul.acordeon li:hover {
  width: 60%; /* 100 - 10*(nºelem-1) // X=60 para ratio imagen */
 
}
 

ul.acordeon li:hover h4 {
  padding-left: 10px;
  background: rgba(143,34,80,.8);
  color: #eee;
  -webkit-transform: none;
  -moz-transform: none;
  transform: none;
}
   
@media(max-width:600px) {
  ul.acordeon li h4 {
    font-size: 12px;
    letter-spacing: 1px;
  }
}

Lo que te quería decir Pandemia, es que el resultado que se obtiene es distinto si se ponen paréntesis o no. Por eso muchas veces aunque hayas muchos paréntesis pero interesa separar las operaciones entre los paréntesis.
Haz las operaciones con paréntesis y sin ellos.

Hola Pandemia,
vuelve a revisar los alert nuevos porque con los resultados obtenidos no está claro. Prueba usar parentesis.
Saludos

Muchas gracias Pedro,,
funciona perfecto 

Una vez llegado a este punto felicitar a todas las personas que hayan participado en la creación de este curso. Está muy muy bien, me he quedado con ganas de mucho más. Es un gran curso de Javascript desde cero.

Personalmente recomiendo a todas las personas que no hayan trabajado con Javascript que realicen este curso, tiene muchísimos ejemplos, ejercicios.

Además qué comentar de los foros, los ejercicios son corregidos y las dudas contestadas en muy poco tiempo.

Ahora, me planteo en si seguir con el curso de PHP y llegar a ver AJAX, que me gustaría aprender un poco de AJAX o bien comprar algún libro de Javascript potente que explique un poco de callbacks, promise ,etc y pasarme a la libreria jQuery, para poder llegar a Angular.

De todos modos haga una cosa u otra, nos mantendremos en contacto através del foro.

Muchas gracias y saludos!!!

Hola C3PO,
no veas, para encontrarlo. He encontrado dos cosillas:

alert('Hola soy:'+medico1.nombre+'\n soy médico especialista en:'+medico1.especialidad+'\n trabajo en:'+medico1.centroTrabajo+'\n soy de:'+medico1.nacionalidad+);

sobra un + en la última declaración de variable --> +medico1.nacionalidad+

medicoEspecialista.protoype=new medico();

La declaración de protoype --> prototype

Saludos!!!!