Bienvenido/a

Por favor, ingresa tus datos para comenzar. Serán utilizados únicamente para generar tu certificado de finalización.

AE3_ABP-Ejercicio individual [Actividad Evaluada]

Perfil Digital Interactivo: Dominando CSS para Diseñar con Precisión

Una cápsula educativa para transformar tu forma de maquetar y diseñar perfiles web con CSS moderno. Este es un material de apoyo, el cual te permitirá consolidar los aprendizajes y conocimientos necesarios para poder resolver de buena manera esta actividad práctica.

Introducción y Objetivos

Público objetivo: Estudiantes del Bootcamp FullStack Python de SkillNest, Coding Dojo y Talento Digital para Chile.

Información Importante:Todo el contenido que explorarás en esta plataforma ha sido diseñado como material de estudio, repaso y consolidación de los aprendizajes vistos hsta ahora del Módulo 2: Diseño y estilos con CSS. Aquí encontrarás actividades interactivas, ejemplos aplicados y ejercicios de autoevaluación que te permitirán reforzar los conceptos clave de CSS, preparándote de manera efectiva para el ejercicio individual de este aprendizaje esperado. 🔧 Sin embargo, es importante que sepas que este material no reemplaza el ejercicio práctico individual, que consiste en construir tu propia página de perfil profesional, donde deberás aplicar lo aprendido. Este proyecto es la actividad central del AE3 y la principal evidencia de tus aprendizajes, por lo tanto, todo lo que encuentres aquí está al servicio de ayudarte a desarrollarlo de manera autónoma, creativa y técnicamente sólida.

Objetivos de Aprendizaje:

HTML Semántico: Aplicar etiquetas como header, section, y article para mejorar accesibilidad y SEO.
Reset CSS: Entender y utilizar un reseteo de estilos para consistencia entre navegadores.
Tipografía Web: Importar fuentes y usar unidades relativas como rem.
Flexbox: Diseñar layouts flexibles y centrar elementos de forma eficiente.
Componentes Reutilizables: Construir y estilizar 'cards' con interactividad.
Diseño Responsivo: Implementar media queries con un enfoque mobile-first.
Variables CSS: Centralizar y gestionar paletas de colores y propiedades.
Iconografía y Accesibilidad: Integrar iconos y asegurar un buen contraste y navegación por teclado.

Activación de Conocimientos Previos

¡Es hora de calentar motores! Ayuda a la ranita a llegar a su hoja correcta respondiendo preguntas sobre CSS. Usa las teclas de flecha o haz clic en las respuestas.

Desarrollo: Construyendo el Perfil

Sigue el video-tutorial. Se pausará automáticamente en momentos clave para hacerte una pregunta rápida y reforzar tu aprendizaje.

Evaluación Formativa

Pon a prueba lo que has aprendido hasta ahora con este quiz interactivo. No cuenta para la calificación final, ¡es solo para practicar!

Evaluación Final

Intentos restantes: 3

Tiempo restante: 30:00

Síntesis del Módulo

Repasemos las ideas más importantes que hemos cubierto en esta cápsula educativa.

Ideas Clave

Separación de Conceptos: HTML es para la estructura y el contenido; CSS es para la presentación y el estilo. Usar etiquetas semánticas es fundamental.
Diseño Adaptable (Responsive): El uso de Flexbox, Grid y Media Queries es esencial para crear experiencias que funcionen en cualquier dispositivo, desde móviles hasta escritorios.
Eficiencia y Mantenibilidad: Las variables CSS (custom properties) permiten crear sistemas de diseño coherentes y fáciles de actualizar, cambiando un valor en un solo lugar.

Podcast Relacionado

Escucha este episodio para profundizar sobre la importancia del diseño y la estructura en el desarrollo web.

Cierre y Reflexión

La metacognición es clave para consolidar el aprendizaje. Responde a las siguientes preguntas para reflexionar sobre tu proceso.

🧩 ¡Hora de Aplicar lo Aprendido!

EJERCICIO PRÁCTICO INDIVIDUAL

¡Felicitaciones por completar el recorrido interactivo! Ahora que has repasado y reforzado tus conocimientos sobre HTML y CSS, te invitamos a crear tu propia página web de perfil profesional. Esta será tu evidencia práctica del módulo 2.

Tu Misión

Construir una página web de una sola vista que sirva como tu currículum o perfil profesional en línea. Deberás aplicar los conceptos de HTML semántico y CSS moderno que hemos visto.

Rúbrica de Evaluación

Tu proyecto será evaluado con un total de 10 puntos, siguiendo estos criterios:

Criterio	Puntos
Uso correcto de HTML estructural (header, main, section, footer, etc.)	2
Uso de CSS para estilos básicos (colores, fuentes, márgenes)	2
Inclusión de una imagen de perfil con estilos (ej. borde redondeado)	1
Presentación clara de información personal y profesional	2
Buen diseño visual, ordenado y legible	2
Uso de al menos 2 componentes de estilo "card" para agrupar información	1

Recursos para Empezar

Para que no empieces desde cero, te proporcionamos una base de código. Puedes copiar el código de abajo o descargar los archivos directamente para abrirlos en tu editor (como Visual Studio Code).

index.html (Base)




  
  
  Mi Perfil Profesional - [Tu Nombre]
  



  
    
    
    
      [Tu Nombre Completo]
      [Tu Título o Profesión]
    
  

  
    
      Sobre Mí
      Escribe aquí una Bio sobre ti, tus pasiones y objetivos profesionales.
    

    
      Experiencia Laboral
      
    

    
      Habilidades
      
        HTML5
        CSS3 (Flexbox, Grid)
        JavaScript
        
      
    
  

  
    Contacto: tuemail@ejemplo.com

style.css (Base)

/* Estilos Generales */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f2f5;
  color: #333;
  margin: 0;
}

.container {
  max-width: 960px;
  margin: 20px auto;
  padding: 0 20px;
}

/* Header y Perfil */
.perfil-header {
  background-color: #2c3e50;
  color: white;
  padding: 40px;
  text-align: center;
}

.perfil-img {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* Esto hace la imagen redonda */
  border: 5px solid #fff;
}

/* Tarjetas (Cards) */
.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 20px;
}

h3 {
  color: #2980b9;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 10px;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  background-color: #34495e;
  color: white;
}

footer a {
  color: #3498db;
}

Instrucciones de Entrega

Una vez que hayas completado tu página de perfil, debes entregarla a través de uno de los siguientes métodos (según lo indique tu instructor):

GitHub Pages: Sube tu proyecto a un repositorio de GitHub y activa GitHub Pages para generar una URL pública. Entrega esa URL.
Plataforma LMS SkillNest: Sube los archivos `index.html`, `style.css` y tu imagen de perfil a la tarea correspondiente en la plataforma de SkillNest.

Guía para Publicar en GitHub Pages 🔗

¡Felicidades! Has Aprobado

Has completado exitosamente la cápsula educativa. Aquí tienes tu certificado de finalización.

Certificado de Finalización

Se otorga a:

Por haber completado satisfactoriamente la cápsula educativa:

"Perfil Digital Interactivo: Dominando CSS para Diseñar con Precisión"

Institución: Bootcamp Fullstack Python SkillNest

Instructor: Cristian Iglesias Vera

Horas académicas: 3

Fecha de finalización: