HTML y CSS en detalle
En este curso, utilizará herramientas de desarrollo de software como HTML para construir páginas web atractivas que funcionen bien y utilizará datos semánticos estructurados para controlar la apariencia de los sitios web para el usuario final. A continuación, profundizará en CSS aplicando estilos cada vez más específicos a diversos elementos. Aprenderá a utilizar el sistema de cuadrícula de Bootstrap para crear diseños y trabajar con componentes y temas.
Monthly Subscription Starting at AED 99 + VAT
- Level Foundation
- Duration 29 hours
- Course by Meta
-
Offered by
About
En este curso, utilizará herramientas de desarrollo de software como HTML para construir páginas web atractivas que funcionen bien y utilizará datos semánticos estructurados para controlar la apariencia de los sitios web para el usuario final. A continuación, profundizará en CSS aplicando estilos cada vez más específicos a diversos elementos. Aprenderá a utilizar el sistema de cuadrícula de Bootstrap para crear diseños y trabajar con componentes y temas. Por último, explorará la depuración y aprenderá cómo se puede utilizar para desterrar los errores comunes del front-end. Al final de este curso, podrá: • crear un formulario simple con un diseño sensible usando HTML5 y CSS • crear un diseño de respuesta con CSS • crear una UI con Bootstrap • implementar herramientas de depuración Se trata de un curso de iniciación para alumnos que quieran prepararse para una carrera en el desarrollo de front-end. Para poder hacer este curso y lograr resultados satisfactorios, no es necesario tener experiencia previa en desarrollo, sino solo conocimientos básicos de navegación por Internet y ganas de iniciarse en la codificación.Modules
Introducción al curso
-
4
Videos
-
3
Readings
-
1
Discussion
1
Discussions
- ¿Qué espera aprender?
4
Videos
- Introducción al programa
- Introducción a HTML y CSS en detalle
- ¿Cómo se utilizan HTML y CSS en el mundo real?
- Resumen: lo que sabe sobre HTML y CSS
3
Readings
- Programa del curso
- Cómo tener éxito en este curso
- Trabajar con laboratorios en este curso
Semántica y metaetiquetas
-
6
Videos
-
5
Readings
-
4
Assignment
4
Assignment
- Comprobación de conocimientos: práctica del uso de etiquetas semánticas
- Comprobación de conocimientos: metadatos
- Comprobación de conocimientos: protocolo Open Graph
- Comprobación de conocimientos: semántica y metaetiquetas
6
Videos
- Etiquetas semánticas y por qué las necesitamos
- Etiquetas semánticas en acción
- Metadatos
- Diseño básico
- UX con metaetiquetas
- Creación de una tarjeta para redes sociales
5
Readings
- Hoja de trucos de HTML semántico
- Hoja de referencia de metadatos
- Diseño de la disposición
- Tarjetas para redes sociales
- Recursos adicionales
Entrada de usuarios y formularios
-
7
Videos
-
8
Readings
-
2
Lab
-
5
Assignment
5
Assignment
- Autoevaluación: crear y probar un formulario
- Comprobación de conocimientos: declaración de los elementos del formulario
- Comprobación de conocimientos: presentación de formularios
- Autoevaluación: crear un formulario complejo
- Comprobación de conocimientos: entrada de usuarios y formularios
2
Labs
- Crear y probar un formulario
- Crear un formulario complejo
7
Videos
- Formularios y validación
- Crear un formulario
- Aprovechar al máximo la validación del lado del cliente
- Botones de radio
- Uso de elementos de formulario interactivos
- Presentación de formularios
- Diferencias de los navegadores
8
Readings
- Tipos de entrada
- Visual Studio Code en Coursera
- Crear y probar un formulario (solución)
- Hoja de referencia: elementos de formulario interactivos
- Enviar
- Glosario: elementos de formulario HTML
- Crear un formulario complejo (solución)
- Recursos adicionales
Elementos multimedia
-
6
Videos
-
4
Readings
-
1
Lab
-
3
Assignment
3
Assignment
- Autoeevaluación: calificar los medios
- Comprobación de conocimientos: elementos de los medios
- Resumen del módulo: análisis detallado de HTML
1
Labs
- Calificar los medios
6
Videos
- Video y audio
- Reproductores integrados
- iFrames
- iFrame como imagen
- El elemento canvas
- Resumen del módulo: análisis detallado de HTML
4
Readings
- Calificar los medios (solución)
- Imágenes
- Hoja de referencia de sandbox de iFrame
- Recursos adicionales
Creación de diseños
-
6
Videos
-
6
Readings
-
1
Lab
-
2
Assignment
2
Assignment
- Autoeevaluación: crear un diseño de cuadrícula
- Verificación de conocimientos: creación de diseños
1
Labs
- Crear un diseño de cuadrícula
6
Videos
- Disposición web CSS
- Flexbox básico
- Gráficos de Flex
- Cuadrículas CSS
- Presentación de cuadrícula
- Estudio de caso: cómo Meta crea compilaciones adaptables
6
Readings
- Comprensión de FlexBox
- Unidades de medida CSS
- Hoja de referencia de cuadrículas y flexbox
- Área de plantilla de cuadrícula
- Crear un diseño de cuadrícula (solución)
- Recursos adicionales
Selectores CSS
-
4
Videos
-
5
Readings
-
1
Lab
-
2
Assignment
2
Assignment
- Autoevaluación: CSS específico
- Comprobación de conocimientos: selectores CSS
1
Labs
- CSS específico
4
Videos
- Selectores muy utilizados
- Selectores de combinación
- Pseudoclases
- Uso práctico de pseudo
5
Readings
- Todos los selectores y su especificidad
- CSS específico (solución)
- Pseudoelementos
- Hoja de referencia CSS Pseudo
- Recursos adicionales
Efectos CSS
-
5
Videos
-
6
Readings
-
1
Lab
-
2
Assignment
2
Assignment
- Autoevaluación: transformación y transición de elementos
- Comprobación de conocimientos: efectos CSS
1
Labs
- Transformación y transición de elementos
5
Videos
- Qué es un efecto
- Efectos de texto
- Transformaciones y transiciones CSS
- Animación CSS
- Ejemplos de animación
6
Readings
- Hoja de referencia sobre efectos de texto
- Transformación y transición de elementos (solución)
- Fotogramas clave CSS
- Hoja de referencia de animación y efectos
- Preprocesadores: sass, scss, Stylus
- Recursos adicionales
Depuración
-
7
Videos
-
3
Readings
-
1
Discussion
-
2
Assignment
2
Assignment
- Comprobación de conocimientos: depuración
- Cuestionario del módulo: CSS interactivo
1
Discussions
- ¿Con qué errores de CSS ha tenido problemas?
7
Videos
- Errores comunes
- Gestión de errores
- Herramientas de depuración
- CSS específico del navegador
- Pruebas de interfaz de usuario
- Estudio de caso: cómo Meta realiza las pruebas de front-end
- Resumen del módulo: CSS interactivo
3
Readings
- Instalar un Linter de terceros en VS Code
- Depuración del front-end
- Recursos adicionales
Evaluación calificada
-
5
Videos
-
4
Readings
-
1
Discussion
-
1
PeerReview
-
1
Lab
-
1
Assignment
1
Assignment
- Comprobación de preparación: ¿Ha completado la configuración inicial?
1
Peer Review
- Presente su proyecto de portafolio
1
Discussions
- Share your completed portfolio
1
Labs
- Entorno de pruebas de proyectos
5
Videos
- Resumen del curso
- Selección del tema y elaboración de la maqueta
- Colocación de elementos, creación de marcadores de posición
- Planificación de la experiencia del usuario
- Ejemplar: hasta ahora todo bien
4
Readings
- Acerca del proyecto de portafolio
- Selección de temas
- Configuración del entorno de desarrollo local
- Creación de temas
Resumen del curso
-
1
Videos
-
1
Readings
-
1
Discussion
1
Discussions
- ¿Qué es lo que encontró más interesante del curso?
1
Videos
- ¡Felicitaciones! Ha completado HTMLS y CSS en detalle.
1
Readings
- Siguientes pasos
Auto Summary
"HTML y CSS en detalle" es un curso de iniciación en desarrollo front-end, ofrecido por Coursera. Ideal para principiantes, enseña a crear páginas web atractivas usando HTML y CSS, aplicar estilos específicos, utilizar Bootstrap para diseños responsivos y depurar errores comunes. Sin requerir experiencia previa, el curso dura 1740 minutos y ofrece suscripciones Starter y Professional. Perfecto para quienes desean comenzar una carrera en desarrollo web.
Taught by Meta Staff