Máster en HTML 5 y CSS 3 principiantes Universidad, DAM, DAW

U1: HTML -- Introducción a HTML

• Descargar Google
• Descargar Visual Studio Code
• Extensiones para Visual Studio Code
• Hola mundo en HTML
• Comentarios en HTML
• Primera página básica en HTML
• Formas de ejecutar una página HTML
• Generación de plantilla HTML con VSC

U2:  HTML -- Elementos básicos en HTML

• Títulos en HTML
• Párrafos en HTML
• Links en HTML
• Imágenes en HTML
• Formato de texto en HTML etiqueta <b>
• Formato de texto en HTML etiqueta <strong>
• Formato de texto en HTML etiqueta <i>
• Formato de texto en HTML etiqueta <em>
• Formato de texto en HTML etiqueta <small>
• Formato de texto en HTML etiqueta <mark>
• Formato de texto en HTML etiqueta <del>
• Formato de texto en HTML etiqueta <ins>
• Formato de texto en HTML etiqueta <sub>
• Formato de texto en HTML etiqueta <sup>
• Uso de caracteres en HTML
• Estilos básicos CSS en HTML

U3: CSS -- Introducción a CSS

• Introducción a CSS
• Formas de agregar estilos CSS
• Clases en CSS
• Funcionamiento del cascadeo en CSS
• Introducción al Box Model en CSS

U4: HTML -- Links en HTML y CSS

• Rutas relativas y absolutas para los links HTML
• Marcadores Bookmarks en HTML
• Estado y colores de los links en HTML con CSS
• Links con botones en HTML y CSS
• Links con Imágenes en HTML

U5: HTML -- Tablas en HTML

• Tablas en HTML
• Atributos colspan y rowspan en Tablas HTML
• Tablas en HTML con CSS
• Ejercicio 1 tablas HTML
• Ejercicio 2 tablas HTML parte 1
• Ejercicio 2 tablas HTML parte 2
• Ejercicio 2 tablas HTML parte 3

U6: HTML -- Listas en HTML

• Listas no ordenadas <ul> en HTML
• Listas ordenadas <ol> en HTML
• Listas de descripción <dl> en HTML
• Listas anidadas

U7: HTML -- Elementos en Inline y block en HTML

• Elementos inline <span> HTML
• Elementos en bloque <div> HTML

8: HTML -- Iframes en HTML

• Iframes en HTML

9: HTML -- Formularios en HTML

• Introducción a los formularios en HTML
• Atributos de la etiqueta <input> en HTML
• Tipos de <input> y validación de formularios <input  Type "text">
• Tipos de <input> y validación de formularios <input Type “password”>
• Tipos de <input> y validación de formularios <input Type “email”>
• Tipos de <input> y validación de formularios <input Type “number”>
• Tipos de <input> y validación de formularios <input Type “tel”>
• Tipos de <input> y validación de formularios <input Type “url”>
• Tipos de <input> y validación de formularios <input Type “checkbox”>
• Tipos de <input> y validación de formularios <input Type “radio”>
• Tipos de <input> y validación de formularios <input Type “file”>
• Tipos de <input> y validación de formularios <input Type “date”>
• Tipos de <input> y validación de formularios <input Type “datetime-local”>
• Tipos de <input> y validación de formularios <input Type “time”>
• Tipos de <input> y validación de formularios <input Type “month”>
• Tipos de <input> y validación de formularios <input Type “week”>
• Tipos de <input> y validación de formularios <input Type “color”>
• Tipos de <input> y validación de formularios <input Type “range”>
• Tipos de <input> y validación de formularios <input Type “submit”>
• Tipos de <input> y validación de formularios <input Type “reset”>
• Tipos de <input> y validación de formularios <input Type “button”>
• Tipos de <input> y validación de formularios <input Type “hidden”>
• Tipos de <input> y validación de formularios <input Type “search”>
• Métodos del formulario – Método GET
• Métodos del formulario – Método POST
• Métodos del formulario – Método PUT y DELETE
• Otro tipo de input -- Select
• Otro tipo de input -- TextArea
• FieldSet y Legend
• Atributos de la etiqueta <form>
• Ejemplo completo formularios parte 1
• Ejemplo completo formularios parte 2
• Ejemplo completo formularios parte 3

U10: HTML -- Elementos semánticos en HTML

• Etiqueta <section>
• Etiqueta <article>
• Etiqueta <aside>
• Etiqueta <header>
• Etiqueta <footer>
• Etiqueta <nav>
• Etiqueta <main>
• Etiqueta <time>
• Etiqueta <summary>
• Etiqueta <mark>
• Etiqueta <figcaption>
• Ejemplo completo elementos semánticos parte 1
• Ejemplo completo elementos semánticos parte 2

U11: HTML -- Proyecto final

• Proyecto final parte 1
• Proyecto final parte 2
• Proyecto final parte 3

U12: CSS -- Introducción a CSS

• CSS - Descargar Google Chrome
• CSS - Descargar Visual Studio Code
• CSS Extensiones para VSC
• CSS - Introducción a CSS
• CSS - Formas de agregar estilos CSS
• CSS - Funcionamiento del Cascadeo en CSS

U13:  CSS -- Selectores en CSS

• Selector ID en CSS
• CSS – Selector universal en CSS
• CSS – Agrupar Selectores en CSS
  

U14: CSS -- Clases en CSS

• CSS – Clases en CSS
• CSS – Subclases en CSS

U15: CSS -- Colores en CSS

• CSS – Colores por nombre en HTML
• CSS – Colores por nombre en CSS
• CSS – Colores por RGB y RGBA
• CSS – Colores por Hexadecimal
• CSS – Colores por HSL y HSLA

U16: CSS -- Bordes en CSS

• CSS – Manejo de bordes en CSS
• CSS – Tipos de bordes en CSS
• CSS – Redondeo de bordes en CSS

U17: CSS -- Box model en CSS

• CSS - Introducción a Box model en CSS
• CSS – Ancho de elementos en Box Model
• CSS – Outline en CSS
• CSS – Outline offset en CSS
• CSS – Padding en CSS
• CSS – Box sizing en CSS
• CSS – Propiedades margin-width y margin-height en CSS
• CSS – Propiedad margin-auto (centrar elementos)
• CSS – Propiedad inherit en CSS

U18: CSS -- Manejo de fondos en CSS

• CSS – Poner colores de fondo en CSS
• CSS – Poner colores de fondo gradientes en CSS
• CSS – Poner imagen de fondo en CSS

U19: CSS -- Formatos de texto en CSS

• CSS – Formatos de texto en CSS

U20: CSS -- Fuentes de texto en CSS

• CSS – Manejo de fuentes en CSS
• CSS – Google Font en CSS

U21: CSS -- Iconos en CSS

• CSS – Iconos en CSS
• CSS – Iconos con FontAwesome en CSS

U22: CSS -- Transiciones en CSS

• CSS - Transiciones en CSS

U23: CSS -- Animaciones en CSS

• CSS – Animaciones en CSS

U24: CSS -- Proyectos

• CSS – Proyecto 1 parte 1
• CSS – Proyecto 1 parte 2
• CSS – Proyecto 2 parte 1
• CSS – Proyecto 2 parte 2
• CSS – Proyecto 2 parte 3
• CSS – Proyecto 2 parte 4
• CSS – Proyecto 2 parte 5
• CSS – Proyecto 2 parte 6
• CSS – Proyecto 2 parte 7

U25: BONUS -- Subir pagina web a internet

• BONUS -- Subir pagina web a internet

Evaluación del curso

• Este curso contiene un examen final

G-Tools: Para estudiantes

• Acceso exclusivo a herramientas de vanguardia para estudiantes: mejora tu empleabilidad, participa en eventos exclusivos, aprovecha nuestro asistente virtual inteligente y más.

⚑ Certificado de finalización

• Tu certificado digital personalizado, una insignia única de tus logros, con validez internacional, duración del curso y código QR para verificación instantánea.