Caso de estudioHTML5 y CSS.
A través de este caso de estudio aprenderás a aplicar los fundamentos de HTML5 y CSS para construir interfaces web modernas, accesibles y responsivas.
Ten en cuenta que...
Las herramientas necesarias para realizar el caso son:
- Editor de código de tu elección
- Navegador web predeterminado
- Banco de imágenes e iconos de descarga propia.
Descripción del caso
Crea una página web para una empresa de venta de autos llamada Fantastic. La página debe incluir una barra de navegación, portada con imagen de fondo, botón con animación, contenido organizado en cards animadas, formulario de contacto y pie de página con íconos. Además, el diseño debe ser completamente responsive, adaptándose correctamente a distintos dispositivos (escritorio, tablet y móvil). El objetivo de este caso es aplicar los conocimientos fundamentales de HTML5 y CSS3, estilos visuales, animaciones básicas y diseño adaptable (responsive design).
Desarrollo del caso
Da clic en cada elemento para conocer el paso a paso
Al finalizar este caso de estudio fortaleceras competencias en
- Cumplimientos de requisitos funcionales
- Uso correcto de HTML5
- Uso correcto de CSS
- Diseño visual y presentación
- Responsive y accesibilidad
¡Te enseña fácil!
El diseño de página debe adaptarse correctamente a distintos dispositivos como escritorio, tablet, celular (responsive).
Crear una navbar que incluya un logo con el texto "Fantastic" del lado izquierdo y 5 enlaces de navegación a su derecha: Inicio, Marcas, Promociones, Servicios, Contáctanos.
Realiza 6 tarjetas (cards) con información de autos. Cada card debe contener: una imagen del auto, descripción y precios. Aplicar una animación de “saltar” o elevarse al pasar el mouse sobre cada tarjeta.
Crear una portada con título principal atractivo, una imagen de fondo llamativa (puede ser un auto o una carretera). También incluye un botón que cambie de color cuando el usuario pase el cursor sobre él (efecto hover con transición).
Crea un pie de página (footer) incluyendo íconos representativos (pueden ser de redes sociales o contacto). Agrega un formulario de contacto con: campo para nombre, campo para correo electrónico y botón de envío
Caso de estudio HTML5 y CSS.
GERALDINE ZARIT PAREDES OLIVEROS
Created on October 9, 2025
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Vaporwave presentation
View
Animated Sketch Presentation
View
Memories Presentation
View
Pechakucha Presentation
View
Decades Presentation
View
Color and Shapes Presentation
View
Historical Presentation
Explore all templates
Transcript
Caso de estudioHTML5 y CSS.
A través de este caso de estudio aprenderás a aplicar los fundamentos de HTML5 y CSS para construir interfaces web modernas, accesibles y responsivas.
Ten en cuenta que...
Las herramientas necesarias para realizar el caso son:
Descripción del caso
Crea una página web para una empresa de venta de autos llamada Fantastic. La página debe incluir una barra de navegación, portada con imagen de fondo, botón con animación, contenido organizado en cards animadas, formulario de contacto y pie de página con íconos. Además, el diseño debe ser completamente responsive, adaptándose correctamente a distintos dispositivos (escritorio, tablet y móvil). El objetivo de este caso es aplicar los conocimientos fundamentales de HTML5 y CSS3, estilos visuales, animaciones básicas y diseño adaptable (responsive design).
Desarrollo del caso
Da clic en cada elemento para conocer el paso a paso
Al finalizar este caso de estudio fortaleceras competencias en
¡Te enseña fácil!
El diseño de página debe adaptarse correctamente a distintos dispositivos como escritorio, tablet, celular (responsive).
Crear una navbar que incluya un logo con el texto "Fantastic" del lado izquierdo y 5 enlaces de navegación a su derecha: Inicio, Marcas, Promociones, Servicios, Contáctanos.
Realiza 6 tarjetas (cards) con información de autos. Cada card debe contener: una imagen del auto, descripción y precios. Aplicar una animación de “saltar” o elevarse al pasar el mouse sobre cada tarjeta.
Crear una portada con título principal atractivo, una imagen de fondo llamativa (puede ser un auto o una carretera). También incluye un botón que cambie de color cuando el usuario pase el cursor sobre él (efecto hover con transición).
Crea un pie de página (footer) incluyendo íconos representativos (pueden ser de redes sociales o contacto). Agrega un formulario de contacto con: campo para nombre, campo para correo electrónico y botón de envío