Desarrollo De Frontend (Clase) - CURSO DE DESARROLLO FRONTEND: Estructura y Etiquetas HTML5 (parte 1) 🔥

Estos vídeos no están hechos con propósitos de enseñar, solo los subo para mantener un recuerdo de la Universidad, y para eventos futuros (errores, ¿Cómo diseñé esto?, ¿Qué error cometí?), lo digo porque no me fijo en la musica de fondo ni esos detalles mínimos ... ¡Bienvenidos a la primera sesión de nuestro curso de *Desarrollo Frontend*! En esta clase, sentamos las bases fundamentales para entender cómo se construye la web. Exploramos la analogía del "esqueleto" (HTML), la "piel" (CSS) y los "músculos" (JavaScript), y nos sumergimos de lleno en la creación de nuestra primera estructura web utilizando *Visual Studio Code*. Aprenderás a manejar el *DOM (Document Object Model)* y a utilizar etiquetas esenciales de HTML5. Desde la organización de títulos y párrafos hasta la inserción de contenido multimedia (imágenes y videos) y la creación de tablas para estructurar datos. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Trilogía Web: La relación entre HTML, CSS y JavaScript. • Estructura Base: El significado de etiquetas raíz como html, head y body. • Contenido: Uso de jerarquías con h1 a h6 y textos con p. • Multimedia: Inserción de imágenes locales/remotas y videos de YouTube. • Tablas: Estructuración de datos con filas (tr) y celdas (td). • Navegación: Creación de enlaces entre páginas con la etiqueta a. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción: Responsabilidades del Frontend 01:22 HTML como lenguaje de marcado y esqueleto web 02:16 Concepto del DOM y representación en árbol 03:26 CSS: Estilos, colores y la parte visual 04:31 JavaScript: La magia de la programación y manipulación del DOM 05:36 Inspeccionando el código de sitios reales y etiquetas 07:35 Preparación del entorno y creación de carpetas en VS Code 09:13 Creación del archivo index.html y archivos principales 11:59 Anatomía de una etiqueta y la radiografía del código 14:56 Etiqueta raíz html y tipos de etiquetas 16:30 El head: Configuraciones e importaciones no visuales 18:25 Títulos de pestaña y posicionamiento con title 20:21 El body: Donde vive el contenido de la página 22:43 Títulos H1 a H6: Jerarquías y tamaños de contenido 26:11 Práctica de títulos y buenas prácticas de código 29:56 Etiqueta p para párrafos de texto 32:22 Inserción de imágenes con la etiqueta img 34:45 Atributos de objetos: Entendiendo src y alt 37:26 Cargando imágenes desde enlaces externos (Internet) 40:02 Gestión de assets locales: Carpetas de imágenes y rutas 43:39 Multimedia: Insertar videos de YouTube con iframe 46:31 Estructuración de datos: El concepto de tablas en la web 51:12 Filas (tr) y celdas (td): Armando la cuadrícula 55:37 Práctica avanzada: Imágenes dentro de celdas de tabla 1:01:09 Hipervínculos (a): Conectando secciones y páginas 1:03:55 Rutas relativas y navegación entre archivos locales 1:07:09 Ejercicio de práctica: Creando la página de biografía 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Siguiente: https://www.youtube.com/watch?v=5VaVeI1Qbng 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • INTRODUCCIÓN A REDES 1: https://www.youtube.com/watch?v=hyqRz_iGZ6o • IPv4 Y MÁSCARAS (Clase 8): https://www.youtube.com/watch?v=5uIGQV5DWRI #Frontend #HTML5 #DesarrolloWeb #VSCode #IngeSRM #AprendeAProgramar #Programación #WebDesign #Coding #DOM html, curso html, aprender html, html desde cero, html avanzado, tutorial html, html fácil, programación en html, desarrollo frontend, curso frontend, aprender frontend, frontend desde cero, desarrollo web, programación web, diseño web, html y css, cómo hacer una página web, universidad de caldas, frontend universidad, clases de frontend, universidad caldas manizales, programación desde cero, curso de programación, curso de desarrollo web, frontend avanzado, desarrollo web con html, html5, curso de html5, html5 y css3, cómo crear una web con html, qué es html, cómo funciona html, etiquetas html, html para principiantes, estructura de una página web, curso de frontend 2025, curso de html y css, aprender desarrollo web, cómo hacer una web con html y css, curso online de desarrollo web, curso de maquetación web, tutorial de desarrollo frontend, curso de html en español, programación en la universidad, clases de programación en universidad, cursos de desarrollo web, cómo aprender a programar, aprender a maquetar una web, diseño responsive con html y css, diseño web moderno, diseño web responsive, html responsive, curso de diseño web, curso de frontend paso a paso, universidad de caldas colombia, cómo hacer una web responsive, cómo programar en html, html y bootstrap, frontend y backend, aprender programación desde cero, frontend en la universidad, cómo hacer una web moderna, universidad de caldas clases, curso online frontend, curso de programación desde cero, programación web en la universidad, clases de frontend en la universidad de caldas, clases de html, html en la universidad, desarrollo web universidad colombiana,