Presentación inicial
  • Bienvenida
  • Contenido del curso
  • ¿Por qué para personas ?
Entorno de desarrollo para el curso
  • Introducción a la sección
  • Instalación de Brackets y estructura de carpetas
  • Sintaxis esencial en emmet (indispensable para el curso)
  • Instalar el Framework Semantic UI usando un archivo HTML
  • Reto 1 - Estructura HTML básica en emmet y Brackets (Sección 1)
  • Entorno de desarrollo y uso de Emmet
Elementos Básicos de Semantic UI
  • Introducción a la sección
  • Estilos para Botones
  • Iconos y banderas
  • Inputs simples con diferentes tamaños
  • Inputs con etiquetas (labeled)
  • Inputs con otras modalidades
  • Menú sencillo izquierdo
  • Menú sencillo derecho con buscador integrado
  • Tabla HTML con Semantic UI
  • Tablas HTML y más características con Semantic UI
  • Reto 2 - Página de contacto con menú integrado (Solución integrada)
  • Reto 3 - Formulario de registro de usuarios
  • Elementos Básicos de Semantic UI
  • Ejercicios realizados durante las lecciones
Sistema de Grids (rejillas)
  • Introducción a la sección
  • Usando la clase grid con 3 columnas (división básica de la pantalla )
  • Usando la clase grid de 16 columnas (división de pantalla con números)
  • Elemetos grid que contienen grids
  • Elementos grid para PC
  • Elementos grid para Tablet
  • Elementos grid para Móvil
  • Reto 4: Estructura realizada con Grids
  • Usando los grids con Semantic UI
  • Ejercicios realizados durante las lecciones
Javascript y Semantic UI
  • Introducción a la sección
  • Accordion
  • Modal simple
  • Modal Simple con Imagen integrada
  • Modal Simple con botones
  • Modal generado con eventos de botón
  • Modal con efecto horizontal flip
  • DropDown simple con elementos select
  • DropDown multiple con imágenes
  • SidebarMenu (Sticky)
  • El tooltip
  • Usar transiciones
  • Reto 5: Video, votaciones y progress
  • Usando JavaScript en Semantic UI
  • Ejercicios realizados durante las lecciones
Apariencias con Semantic UI
  • Introducción a la sección
  • Diseño estilo twitter y otros diseños
  • Reto 6: Agregando el tema de amazon y github a mis botones
  • Ejercicios realizados durante las lecciones
Creando un Layout "Panel administrativo web"
  • Introducción a la sección
  • Creando el menú principal
  • Menú derecho con dropdown y campo de búsqueda
  • Menú lateral izquierdo
  • Contenedores centrales del panel
  • Elementos iniciales del panel administrativo
  • Elemento Formulario
  • Elemento Gráfica
  • Elemento Tabla
  • Construcción general de panel administrativo
  • La página de "Gráficas" en el panel administrativo
  • La página de "Formularios" en el panel administrativo
  • La página "página" en el panel administrativo
  • La página de "Elementos UI" en el panel administrativo
  • Ejercicio completo de la lección
  • Reto 7: Agregando mensajes en el index del panel administrativo
Creando un Layout de "Portafolio web"
  • Introducción a la sección
  • Menú del portafolio web
  • Creando el pie de página del portafolio
  • Creando las card para proyectos de portafolio
  • Ejercicio completado
  • Termina tu portafolio con información real
Conclusiones y evaluación final
  • Despedida
  • Examen final