Semantic UI: Admin y Portafolio Profesional

Name: Semantic UI: Admin y Portafolio Profesional
Rating: 4.5 (66 reviews)

Crea un panel de administración y un portafolio impactante con Semantic UI.

Created byOscar Uh • Official Udemy Partner

Last updated 9/2025

Spanish

Spanish [Auto],

What you'll learn

Diseñar y construir interfaces de usuario modernas y responsivas con Semantic UI.
Implementar un panel de administración con gestión de usuarios y visualización de datos.
Crear un portafolio profesional que destaque tus proyectos de manera efectiva.
Personalizar y tematizar Semantic UI para adaptarlo a tus necesidades.
Utilizar el sistema de grillas de Semantic UI para crear layouts flexibles.
Implementar formularios personalizados con validaciones y manejo de errores.
Incorporar de elementos visuales para mejorar la experiencia del usuario.

Course content

9 sections • 65 lectures • 3h 12m total length

Bienvenida0:57
Contenido del curso1:26
En este video se explica todo el contenido del curso así como los temas y la estructura inicial del curso.
¿Por qué para personas ?1:57
¡Importante!0:07
Descripción del framework Semantic UI0:33

Introducción a la sección0:25
Este video es la introducción a la sección
Instalación de Brackets y estructura de carpetas2:29
En este video te muestro la instalación del entorno de trabajo, donde instalamos nuestro IDE Brackets, una extensión Emmet que es una herramienta para el desarrollo rápido de código HTML y CSS y la estructura de nuestros ejercicios del curso Semantic UI

Enlace para la descarga de brackets: http://brackets.io/
Sintaxis esencial en emmet (indispensable para el curso)3:32
En esta lección te muestro como usar Emmet para desarrollar estructuras HTML con rapidez, al terminar esta lección seras capaz de generar código HTML con emmet
Instalar el Framework Semantic UI usando un archivo HTML3:05
En este video se muestra la instalación del framework Semantic UI que tienen 2 archivos integrados a un archivo HTML (semantic.min.css y semantic.min.js)

Link de semantic:https://semantic-ui.com/
Reto 1 - Estructura HTML básica en emmet y Brackets (Sección 1)
Entorno de desarrollo y uso de Emmet

Introducción a la sección0:30
Estilos para Botones7:57
Los botones son la parte más importantes de un sitio web, es por eso que Semantic UI puede modificarlos de forma muy variable, los preparar para usarlos en diferentes contextos.
Iconos y banderas2:55
Tanto los iconos y las banderas son la parte fundamental de todos los componentes, ya que son representaciones que se emplean en botones, enlaces menús entre otros componentes.
Inputs simples con diferentes tamaños1:53
Esta lección tiene como objetivo mostrarte la conversión de un input tipo texto usando Semantic UI y los diferentes tamaños: massive, large, medium
Inputs con etiquetas (labeled)3:27
En este video se muestra la implementación de las clases labeled para cambiar la apariencia de una etiqueta html input.
Inputs con otras modalidades2:59
Menú sencillo izquierdo2:31
En este video se crea un menú superior izquierdo con Semantic UI y se explica la colocación del menú en el contenido de una estructura container
Menú sencillo derecho con buscador integrado2:03
En este video se crea un menú superior derecho con un buscador integrador en Semantic UI, se explica la colocación del menú en el contenido de una estructura container
Tabla HTML con Semantic UI2:58
En este video te muestro el uso de la clase table, celled para transformar un elemento HTML table en una tabla estilo Semantic UI.
Tablas HTML y más características con Semantic UI4:10
En este video te muestro el uso de más clases para las tablas HTML y todo esto 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 lecciones0:04

Introducción a la sección0:21
Usando la clase grid con 3 columnas (división básica de la pantalla )2:34
En esta lección te muestro como dividir la pantalla de forma básica, se usa la clase ui grid y la clase column.
Usando la clase grid de 16 columnas (división de pantalla con números)2:37
En esta lección trabajamos con la división de pantalla con cantidad de columnas.
Elemetos grid que contienen grids3:39
En esta lección te muestro como agregar grids adentro de otros grids, esta técnica te ayudara a ver de una forma diferente tu diseño web.
Elementos grid para PC4:03
En este video te muestro como utilizar la clase computer only para mostrar contenidos únicamente en la PC y no móviles ni tabletas.
Elementos grid para Tablet1:52
En este video te muestro como mostrar contenido solamente para tablet con Semantic UI
Elementos grid para Móvil2:29
En este video te muestro como presentar contenido solamente para dispositivos móviles con Semantic UI
Reto 4: Estructura realizada con Grids
Usando los grids con Semantic UI
Ejercicios realizados durante las lecciones0:04

Introducción a la sección0:32
Accordion5:46
En este video se muestra la creación de un elemento Semantic UI llamado accordion que utiliza jQuery para su funcionamiento.
Modal simple4:42
En este video te muestro la creación de un modal con Semantic UI que junto con Javascript con JQuery pueden generar un bueno modal simple y agradable a la vista.
Modal Simple con Imagen integrada2:17
Modal Simple con botones2:14
Modal generado con eventos de botón3:22
Modal con efecto horizontal flip2:52
DropDown simple con elementos select2:46
DropDown multiple con imágenes5:00
SidebarMenu (Sticky)3:31
El tooltip3:13
Usar transiciones4:19
Reto 5: Video, votaciones y progress
Usando JavaScript en Semantic UI
Ejercicios realizados durante las lecciones0:04

Introducción a la sección0:50
Creando el menú principal2:52
Menú derecho con dropdown y campo de búsqueda5:30
Menú lateral izquierdo4:20
Contenedores centrales del panel4:11
Elementos iniciales del panel administrativo6:40
Elemento Formulario0:23
Elemento Gráfica0:48
Elemento Tabla0:20
Construcción general de panel administrativo4:12
La página de "Gráficas" en el panel administrativo7:01
La página de "Formularios" en el panel administrativo10:33
La página "página" en el panel administrativo6:36
La página de "Elementos UI" en el panel administrativo4:54
Ejercicio completo de la lección0:08
Reto 7: Agregando mensajes en el index del panel administrativo

Requirements

Conocimientos básicos de HTML, CSS y JavaScript.
Familiaridad con el concepto de frameworks CSS.
Un editor de código y un navegador web.

Description

Este curso te guiará paso a paso en la creación de dos proyectos esenciales: un panel de administración robusto y un portafolio profesional y atractivo, ambos construidos con el framework Semantic UI.

Aprenderás a dominar los componentes, temas y la estructura de Semantic UI para construir interfaces de usuario modernas y responsivas. Comenzaremos por entender la filosofía de Semantic UI y su sistema de grillas, lo que te permitirá crear layouts flexibles y adaptables a cualquier dispositivo.

Luego, nos sumergiremos en la construcción del panel de administración, implementando funcionalidades como la gestión de usuarios, la visualización de datos y la creación de formularios personalizados. En la segunda parte del curso, nos centraremos en el desarrollo de un portafolio profesional, donde aprenderás a presentar tus proyectos de manera efectiva, utilizando las animaciones y los efectos visuales que ofrece Semantic UI.

A lo largo del curso, recibirás ejemplos prácticos, ejercicios y consejos para optimizar tu flujo de trabajo y crear aplicaciones web de alta calidad con Semantic UI. Al finalizar, tendrás las habilidades necesarias para construir interfaces de usuario complejas y atractivas, tanto para proyectos personales como profesionales. Este curso es ideal para desarrolladores web que buscan una alternativa a frameworks más populares como Bootstrap, y desean explorar la flexibilidad y la semántica de Semantic UI. Domina la creación de paneles de administración y portafolios profesionales que destaquen por su diseño y usabilidad.

Who this course is for:

Desarrolladores web que buscan aprender Semantic UI.
Diseñadores web que desean crear interfaces de usuario con un framework semántico.
Estudiantes de desarrollo web que buscan ampliar sus conocimientos.
Cualquier persona interesada en construir interfaces web modernas y responsivas.

Semantic UI: Admin y Portafolio Profesional

What you'll learn

Explore related topics

Course content

Presentación inicial5 lectures • 5min

Entorno de desarrollo para el curso4 lectures • 10min

Elementos Básicos de Semantic UI11 lectures • 31min

Sistema de Grids (rejillas)8 lectures • 18min

Javascript y Semantic UI13 lectures • 41min

Apariencias con Semantic UI3 lectures • 4min

Creando un Layout "Panel administrativo web"15 lectures • 59min

Creando un Layout de "Portafolio web"5 lectures • 24min

Conclusiones y evaluación final1 lecture • 1min

Requirements

Description

Who this course is for: