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
