Exámenes HTML y CSS avanzado

17/05/2024

En este artículo se presentan una serie de exámenes HTML y CSS avanzado. Esta recopilación se centra en exámenes del módulo de Diseño de Interfaces Web de Formación Profesional en Desarrollo de Aplicaciones Web. Estos exámenes también resultan de gran interés para estudiantes y profesionales del desarrollo web de otras modalidades.

Contenidos del artículo

1. Exámenes HTML y CSS avanzado

La recopilación incluye exámenes que exigen la creación de sitios web a partir de prototipos visuales, proporcionando una experiencia práctica y realista similar a la que se encuentra en el entorno laboral. Estos exámenes son esenciales para desarrollar habilidades precisas en HTML y CSS, ya se deben reproducir diseños con exactitud, mejorando la atención al detalle.

Hemos incluido tanto exámenes resueltos como sin resolver para que, por un lado, sirvan como práctica con ejemplos ya realizados, y por otro, como motivación y desafío. Además, los exámenes que se muestran a continuación sirven para practicar todo lo aprendido en los cursos CSS Nivel Inicial, CSS Nivel Intermedio y CSS Nivel Avanzado. En estos cursos también se incluye una serie de prácticas resueltas con ejercicios más específicos.

1.2. Rúbrica de evaluación de exámenes

Puntos a Valorar	Descripción	Puntuación Obtenida
Fidelidad al Diseño (60%)	Excelente (60 pts): Diseño idéntico a prototipos y descripciones del enunciado.Bueno (40 pts): Pequeñas desviaciones. Regular (20 pts): Varias desviaciones. Insuficiente (0 pts): Muchas desviaciones.
Calidad del Código HTML y CSS. Buenas prácticas (5%)	Excelente (5 pts): HTML bien estructurado y semántico, CSS bien organizado, se siguen buenas prácticas HTML y CSS. Bueno (2.5 pts): Pequeños errores. Insuficiente (0 pts): Uso inadecuado, errores notables.
Responsividad (35%)	Excelente (35 pts): Comportamiento responsive perfecto. Bueno (25 pts): Algunos problemas menores. Regular (15 pts): Problemas evidentes. Insuficiente (0 pts): No responsivo.

Tabla 1: Rúbrica de evaluación exámenes HTML CSS avanzado

Para la realización del examen no se pueden resolver dudas online pero se pueden mirar las chuletas CSS y HTML disponibles en Eniun.

2. Examen HTML y CSS: Trade (Curso 2021-2022)

Desarrolla una página web responsive basándote en los prototipos que se te proporcionan: uno para pantallas de escritorio (mayores a 800px) y otro para dispositivos móviles (menores a 800px). Se te facilita el código HTML inicial, excepto el contenedor del formulario, que deberás crear siguiendo el diseño del prototipo.

Sigue buenas prácticas HTML y CSS, con atención a la correcta indentación, organización de código y uso eficiente de CSS.
Asegúrate de que tu página sea visualmente fiel a los prototipos.
Puedes modificar el código HTML pero no incluyas clases innecesarias si puedes hacerlo mediante selectores descendientes, selectores hijos, etc.

Código de referencia:

HTML:

<header>
  <div class="container-center">
    <h1>TRADE</h1>
    <nav>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <button>Sign Up</button>
      <button>☰</button>
    </nav>
  </div>
</header>

<section class="cta">
  <h2>Ready to get started?</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor indididunt ut labore et dolore magna aliqua.</p>
  <button>Start free trial</button>
</section>

<section class="">
<!--Escribe aquí tu código HTML para crear el formulario-->
<!-- Join Our Newsletter
Subscribe to receive updates, access to exclusive deals, and more.
Name:
Email:
Subscribe-->
</section>

<footer>
  <div class="container-center">
    <div>
      <h2>TRADE</h2>
      <p>&copy; 2000 – 2023</p>
      <p>Privacy – Terms</p>
    </div>
    <div>
      <h3>Product</h3>
      <a href="#">Product</a>
      <a href="#">Product</a>
      <a href="#">Product</a>
    </div>
    <div>
      <h3>Features</h3>
      <a href="#">Feature</a>
      <a href="#">Feature</a>
      <a href="#">Feature</a>
    </div>
    <div>
      <h3>Resources</h3>
      <a href="#">Resource</a>
      <a href="#">Resource</a>
      <a href="#">Resource</a>
    </div>
    <div>
      <h3>Company</h3>
      <a href="#">Company</a>
      <a href="#">Company</a>
      <a href="#">Company</a>
    </div>
  </div>
</footer>

Prototipos:

Pantallas mayores a 800px:

Pantallas menores o iguales a 800px:

Solución:

3. Examen HTML y CSS: Cats lover (Curso 2022-2023)

Descripción del ejercicio práctico:

Desarrolla una página web responsive basándote en los prototipos que se te proporcionan.

Asegúrate de que tu página sea visualmente fiel a los prototipos.
Sigue buenas prácticas HTML y CSS, con atención a la correcta indentación, organización de código y uso eficiente de CSS.
Puedes modificar el código HTML pero no incluyas clases innecesarias si puedes hacerlo mediante selectores descendientes, selectores hijos, etc.

Detalle de algunos estilos:

Define la paleta de colores usando propiedades personalizadas:

--primary-blue: #074167; /* Azul */
--dark-blue: #143548; /* Azul oscuro */
--background-light: #ffebd9; /* Crema */
--hover-light: #CCB299; /* Marrón */

Define la tipografía general de todo el documento, utiliza Google Fonts:

Montserrat Light 300

Colores de Hover:

Enlaces del Menú y Footer: Color al pasar el cursor: var(–hover-light).

Cursor:

El cursor debe cambiar a pointer cuando se pasa sobre elementos elementos clicables.

Input:

Autofoco en el input.
border-radius: 4px.

Transiciones y Transformaciones:

Logo Hover: Transformación de tipo rotación de 360 grados con una transición suave de 0.25 segundos.
Input Hover: Transformación de tipo escala a 1.1 con una transición suave de 0.25 segundos.
Botón Lupa Hover: Transformación de tipo escala a 1.3 con una transición suave de 0.25 segundos y cambio de color a var(–hover-light).

Sombras:

H1 Shadow: Sombra de texto de var(–hover-light) con un desplazamiento de 8px horizontalmente, 4px verticalmente y un desenfoque de 6px.

Parallax y filtro en el Contenedor cta-container:

Para el efecto parallax, la imagen de fondo debe estar fija (fixed), cubrir completamente el área (cover), centrarse en el contenedor (background-position: center center), no repetirse (no-repeat)
Aplica un filtro sepia del 30% (sepia(30%)).

Prototipos:

Pantallas mayores a 600px:

Pantallas menores o iguales a 600px:

Código de referencia:

HTML:

<header>
    <nav>
        <ul class="menu">
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
    <div class="logo">
        <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/2330/2330051.png" width="36px" alt="Logo"></a>
    </div>
    <div class="search">
        <input type="text" placeholder="Buscar...">
        <button>🔎︎</button>
      <button class="hamburger">☰</button>
    </div>
</header>
<div class="cta-container">
  <h1>♥ Cat lover</h1>
</div>
<footer>
  <div class="footer-copy">
      <h3>ONLY CATS</h3>
      <small>&copy; 2000 – 2023</small>
  </div>
  <div class="footer-menu">
    <div>
      <h3>Cats</h3>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
    </div>
    <div>
      <h3>Cats</h3>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
    </div>
     <div>
      <h3>Cats</h3>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
    </div>
     <div>
      <h3>Cats</h3>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
      <a href="#">More cats</a>
    </div>
  </div>
</footer>

Recursos:

Imagen realizada con IA (descárgala en local para su uso): https://drive.google.com/file/d/13r925bEFPwKlHgJbTcUEv2VysluhZaRq/view?usp=drive_link
Icono de Flaticon: https://cdn-icons-png.flaticon.com/128/2330/2330051.png

Solución:

4. Examen HTML y CSS: Dogs lover (Curso 2023-2024)

Descripción del ejercicio práctico:

Desarrolla una página web responsive basándote en los prototipos que se te proporcionan.

Asegúrate de que tu página sea visualmente fiel a los prototipos.
Sigue buenas prácticas HTML y CSS, con atención a la correcta indentación, organización de código y uso eficiente de CSS.
Puedes modificar el código HTML pero no incluyas clases innecesarias si puedes hacerlo mediante selectores descendientes, selectores hijos, etc.
Presta atención al SEO y a la accesibilidad.

Detalle de algunos estilos:

Define la paleta de colores usando propiedades personalizadas:

--primary-color: #f57c00; /* Anaranjado */
--dark-color: #1a0c01; /* Color oscuro */
--background-light: #ECE0CF; /* Crema */
--hover-light: #F2C14E; /* Anaranjado claro */

Define la tipografía general de todo el documento, utiliza Google Fonts:

Montserrat Light 300

Colores de Hover:

Enlaces del menú, del footer y botón de formulario: Color al pasar el cursor: var(–hover-light).

Cursor:

El cursor debe cambiar a pointer cuando se pasa sobre elementos elementos clicables.

Input:

Autofoco en el input.

Transiciones y Transformaciones:

Nav a: Aplica una transición en los enlaces del menú para que el color de fondo se cambie de forma gradual con una duración de 0.2s y de tipo linear.
Input Hover, Textarea Hover: Aplica una transformación de tipo escala a 1.1 con una transición suave de 0.25 segundos a los inputs y textarea.

Sombras:

Aplica una sombra al texto al título <h1> con var(–hover-light) como color, desplazamiento horizontal de 8px, desplazamiento vertical de 4px y un radio de difuminado de 6px. Además, aplica al <h1> un color de fondo de rgba(236, 224, 207, 0.5).

Parallax y filtro en el Contenedor cta-container:

Para el efecto parallax, la imagen de fondo debe estar fija (fixed), cubrir completamente el área (cover), centrarse en el contenedor (background-position: center center), no repetirse (no-repeat)
Aplica un filtro sepia del 30% (sepia(30%)).

Prototipos:

Pantallas mayores a 650px:

Pantallas menores o iguales a 650px:

Código de referencia:

HTML:

<header>
    <div class="logo">
      <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/1351/1351861.png" alt="Logo"></a>
      <button class="hamburger">☰</button>
    </div>
    <nav>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Gallery</a></li>
      </ul>
    </nav>  
  </header>
  <div class="cta-container">
    <h1>♥ Dog lover</h1>
    <p>Dogs, known as humanity's best friends, offer loyalty, joy, and companionship, enriching our lives with unconditional love and fun.</p>
  </div>
  <div class="footer-copy">
    <h3>ONLY DOGS</h3>
    <small>&copy; 2000 – 2024</small>
  </div>
  <footer>
    <div class="footer-menu">
      <div>
        <h3>Dogs</h3>
        <p>Dogs, known as humanity's best friends, offer loyalty, joy, and companionship, enriching our lives with unconditional love and fun.</p>
        <p>Dogs, known as humanity's best friends, offer loyalty, joy, and companionship, enriching our lives with unconditional love and fun.</p>
        <a href="#">More dogs</a>
      </div>
      <div>
        <h3>Dogs</h3>
        <p>Dogs, known as humanity's best friends, offer loyalty, joy, and companionship, enriching our lives with unconditional love and fun.</p>
        <p>Dogs, known as humanity's best friends, offer loyalty, joy, and companionship, enriching our lives with unconditional love and fun.</p>
        <a href="#">More dogs</a>
      </div>
      <div class="contact-container">
        <h3>Contact with us</h3>
        <form class="contact-form">
          <input type="text" name="nombre" placeholder="Name" required>
          <input type="email" name="email" placeholder="Email" required>
          <textarea name="consulta" placeholder="Message..." rows="6" required></textarea>
          <button type="submit">Send</button>
        </form>
      </div>
    </div>
  </footer>

Recursos:

Imagen de Pixabay: https://pixabay.com/es/photos/oto%C3%B1o-perro-naturaleza-sale-de-4470022/
Icono de Flaticon: https://cdn-icons-png.flaticon.com/128/1351/1351861.png

5. Examen HTML y CSS: Elephant lover (Curso 2024-2025)

Desarrolla una página web responsive basándote en los prototipos que se te proporcionan:

Sigue buenas prácticas HTML y CSS, con atención a la correcta indentación, organización de código y uso eficiente de CSS.
Asegúrate de que tu página sea visualmente fiel a los prototipos.
Puedes modificar el código HTML pero no incluyas clases innecesarias si puedes hacerlo mediante selectores descendientes, selectores hijos, etc.
Presta atención al SEO y a la accesibilidad.

*Se te facilita el código HTML inicial completo que puedes modificar si lo necesitas y un trozo de código CSS.

Detalle de algunos estilos:

Estilos generales del documento:

Tipografía: Arial, sans-serif

Margen y padding: 0 para todos los elementos

Color del texto: #343a40

Header (nav):

Fondo: #f8f9fa

Logo: Tamaño de 1.6em

Lista de navegación (nav ul li a):

Tamaño de fuente de los enlaces: 1.2em

Relleno interior: de 25 px arriba y abajo y 10px derecha e izquierda

Borde: 3px sólido con color según la posición del botón:

Home: #007bff

About: #32cd32

Services: #8a2be2

Contact: #ffd747

Hover de todos los enlaces menos el del logo: Línea inferior en azul #007bff y texto en negrita

Sección cta-container:

Fondo: #e9ecef

Padding: 110px vertical

Encabezado (h1): Tamaño de fuente 2.2em

Texto (p): Ancho máximo 550px, negrita, tamaño de fuente 1.2em

Sección services-container:

Fondo: #f1f3f5

Padding: 34px vertical

Ancho de los contenedores (div): 30% cada uno

Tamaño del icono: 2em

Sección contact-container:

Fondo: #f8f9fa

Formulario de contacto (contact-form):

Ancho máximo: 500px

Padding: 20px

Inputs y textarea:

Fondo: #f1f3f5

Hover: Borde inferior #007bff

Input para el nombre: Borde inferior #32cd32

Input para el correo: Borde inferior #8a2be2

textarea: Borde inferior #ffd747

Botón de envío:

Fondo: #007bff

Texto: blanco

Hover: Fondo #343a40

Footer:

Fondo: #f1f3f5

Padding: 20px

Textos (h3, small): Negrita

Enlaces (a): Tamaño de fuente 2em, sin subrayado

Prototipos:

Versión Maxi:

Versión Mini:

Código de referencia:

HTML:

<nav> 

  <a class="logo" href="#">&#x1F418;</a> 

  <input type="checkbox" id="menu-toggle"> 

  <label for="menu-toggle" class="menu-icon">&#9776;</label> 

  <ul> 

    <li><a href="#">Home</a></li> 

    <li><a href="#">About</a></li> 

    <li><a href="#">Services</a></li> 

    <li><a href="#">Contact</a></li> 

  </ul> 

</nav> 

<div class="cta-container"> 

  <h1>♥ Elephant Lover</h1> 

  <p>Elephants, known for their wisdom and strength, bring joy, companionship, and a sense of wonder into our lives, captivating us with their intelligence and gentle nature.</p> 

</div> 

<div class="services-container"> 

<div> 

  <div>&#x1F4D6;</div> 

  <h3>Elephant Facts</h3> 

  <p>Elephants, known for their wisdom and strength, bring joy, companionship, and a sense of wonder into our lives, captivating us with their intelligence and gentle nature.</p> 

</div> 

<div> 

  <div>&#x1F331;</div> 

  <h3>Elephant Conservation</h3> 

  <p>Elephants, known for their wisdom and strength, bring joy, companionship, and a sense of wonder into our lives, captivating us with their intelligence and gentle nature.</p> 

</div> 

<div> 

  <div>&#x1F52E;</div> 

  <h3>Elephant Myths</h3> 

  <p>Contrary to popular belief, elephants are not only majestic but also incredibly intelligent animals with complex social structures. Explore the myths surrounding these gentle giants.</p> 

</div> 

</div> 

<div class="contact-container"> 

  <h2>Contact with Us</h2> 

  <form class="contact-form"> 

    <label for="name">Name:</label> 

    <input type="text" name="name" required autofocus> 

    <label for="email">Email:</label> 

   <input type="email" name="email" required> 

    <label for="message">Message:</label> 

    <textarea name="message" rows="6" required></textarea> 

    <button type="submit">Send</button> 

  </form> 

</div> 

<footer> 

  <a href="#" class="animated-elephant">&#x1F418;</a> 

  <h3>ONLY ELEPHANTS</h3> 

  <small>&copy; 2024 – 2025</small> 

</footer>

6. Examen HTML y CSS: Sloth lover (Curso 2025-2026)

Desarrolla una página web responsive basándote en los prototipos que se te proporcionan:

Sigue buenas prácticas HTML y CSS.
Asegúrate de que tu página sea visualmente fiel a los prototipos.
Se te facilita el código HTML y CSS incompleto que puedes modificar si lo necesitas.

Prototipos:

Pantallas mayores a 650px:

Pantallas menores o iguales a 650px:

Código de referencia:

HTML:

<header> 

<nav> 

<ul> 

<li><a href="#">Inicio</a></li> 

<li><a href="#">Hábitat</a></li> 

<li><a href="#">Curiosidades</a></li> 

</ul> 

</nav> 


<div class="logo"> 

<a href="#" aria-label="Inicio">🦥</a> 

</div> 


<nav> 

<ul> 

<li><a href="#">Sobre nosotros</a></li> 

<li><a href="#">Contacto</a></li> 

</ul> 

</nav> 


<button class="hamburger" aria-label="Abrir menú">☰</button> 

</header> 


<main> 

<section class="cta-container"> 

<h1>💚 Amantes de los perezosos</h1> 

<p>Los perezosos nos inspiran a disfrutar del tiempo sin prisa, en equilibrio con la naturaleza y con una paz que se contagia.</p> 

<form class="search-box" action="#" method="get"> 

<!--Incluye aquí tu código html--> 

</form> 

</section> 

 
<section class="cards-container"> 

<article class="card"> 

<h3>Hábitos del perezoso</h3> 

<p>Los perezosos viven suspendidos en los árboles y su metabolismo lento les permite conservar energía. Pasan gran parte de su vida boca abajo alimentándose de hojas, flores y brotes tiernos de la selva tropical, moviéndose con precisión cuando lo necesitan.</p> 

</article> 


<article class="card"> 

<h3>Conservación</h3> 

<p>Su hábitat natural, los bosques tropicales, está amenazado por la deforestación y el cambio climático. Proyectos de reforestación, centros de rescate y educación ambiental trabajan para garantizar su supervivencia en equilibrio con su ecosistema.</p> 

</article> 


<article class="card"> 

<h3>Datos curiosos</h3> 

<p>Los perezosos pueden dormir hasta veinte horas al día y su pelaje alberga algas verdes que les ayudan a camuflarse. Son grandes nadadores y pueden aguantar la respiración bajo el agua durante largos minutos, adaptándose de forma asombrosa a su vida tranquila en los árboles tropicales.</p> 

</article> 

</section> 

</main> 


<footer> 

<h3>ONLY SLOTHS</h3> 

<small>&copy; 2025 – 2026</small> 

</footer>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap'); 

:root{ 

--primary-color:#5A6B3F; 

--dark-color:#333; 

--light-green:#d9e8c1; 

--lighter-green:#ecf4d9; 

--background-light:#f9f9f9; 

} 

*{ 

box-sizing:border-box; 

margin:0; 

padding:0; 

font-family:'Roboto',sans-serif; 

color:var(--dark-color); 

} 

body{background:#fff;line-height:1.4;} 

.logo a{ 

text-decoration:none; 

font-size:1.8rem; 

display:inline-block; 

animation: balance 3s ease-in-out infinite; 

transform-origin: left top; 

} 

@keyframes balance { 

0% { transform: rotate(0deg); } 

50% { transform: rotate(20deg); } 

100% { transform: rotate(0deg); } 

} 

.cta-container{ 

background-color:var(--light-green); 

background-image: 

radial-gradient(circle at 100% 150%, var(--light-green) 24%, var(--lighter-green) 24%, var(--lighter-green) 28%, var(--light-green) 28%, var(--light-green) 36%, var(--lighter-green) 36%, var(--lighter-green) 40%, transparent 40%, transparent), 

radial-gradient(circle at 0 150%, var(--light-green) 24%, var(--lighter-green) 24%, var(--lighter-green) 28%, var(--light-green) 28%, var(--light-green) 36%, var(--lighter-green) 36%, var(--lighter-green) 40%, transparent 40%, transparent), 

radial-gradient(circle at 50% 100%, var(--lighter-green) 10%, var(--light-green) 10%, var(--light-green) 23%, var(--lighter-green) 23%, var(--lighter-green) 30%, var(--light-green) 30%, var(--light-green) 43%, var(--lighter-green) 43%, var(--lighter-green) 50%, var(--light-green) 50%, var(--light-green) 63%, var(--lighter-green) 63%, var(--lighter-green) 71%, transparent 71%, transparent), 

radial-gradient(circle at 100% 50%, var(--lighter-green) 5%, var(--light-green) 5%, var(--light-green) 15%, var(--lighter-green) 15%, var(--lighter-green) 20%, var(--light-green) 20%, var(--light-green) 29%, var(--lighter-green) 29%, var(--lighter-green) 34%, var(--light-green) 34%, var(--light-green) 44%, var(--lighter-green) 44%, var(--lighter-green) 49%, transparent 49%, transparent), 

radial-gradient(circle at 0 50%, var(--lighter-green) 5%, var(--light-green) 5%, var(--light-green) 15%, var(--lighter-green) 15%, var(--lighter-green) 20%, var(--light-green) 20%, var(--light-green) 29%, var(--lighter-green) 29%, var(--lighter-green) 34%, var(--light-green) 34%, var(--light-green) 44%, var(--lighter-green) 44%, var(--lighter-green) 49%, transparent 49%, transparent); 

background-size:100px 50px; 

text-align: center; 

background-attachment:fixed; 

padding:100px 20px; 

} 
@media (max-width:650px){ 

}

Puedes encontrar más ejercicios resueltos aquí: ejercicios CSS de nivel básico, ejercicios CSS de nivel intermedio y ejercicios CSS de nivel avanzado.

Exámenes HTML y CSS avanzado

¡Invítanos a un café!

Servicios

Suscríbete a la newsletter