Desarrollo De Frontend (Clase) - HTML DESDE CERO: Aprende a crear tu primera página web 🚀 (Parte 2)

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 ... Clase Desarrollo De Frontend día 21-02-2025 ¡Bienvenidos a la segunda sesión de nuestro curso de *Desarrollo Frontend*! En esta clase, dejamos atrás el blanco y negro para darle vida y color a nuestras páginas web. Nos sumergimos en el universo de *CSS*, el lenguaje encargado de la estética y la presentación visual. Aprenderás a conectar tus archivos HTML con hojas de estilo externas y a utilizar los tres tipos de *selectores fundamentales*: de etiqueta, de clase y por identificador (ID). Explicamos el *Modelo de Caja* para manejar propiedades críticas como márgenes (margin), rellenos (padding), bordes y colores. Además, damos nuestros primeros pasos con *Bootstrap* para crear formularios modernos y responsivos con el mínimo esfuerzo. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Fundamentos de CSS: Sintaxis básica y vinculación de archivos externos. • Selectores Avanzados: Diferencias de uso entre Clases e IDs. • Modelo de Caja: Entendiendo la diferencia real entre margin (espacio externo) y padding (espacio interno). • Teoría del Color: Uso de intensidades RGB y paletas profesionales. • Bootstrap 4: Cómo importar la librería y aplicar clases como form-control. • Inspección de Código: Tips para depurar estilos directamente en el navegador. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción y cierre del módulo de etiquetas HTML 02:57 Importancia de la estructura web para apps y sistemas 05:59 Introducción a las Hojas de Estilo en Cascada (CSS) 07:06 HTML vs CSS: El DOM y la estética visual 10:15 Organización del proyecto: Creando carpetas de estilos (/styles) 11:47 Definición y sintaxis de CSS: Tu primera hoja de estilo 13:48 Selector de Etiqueta: Aplicando estilos globales (p, h1, body) 15:15 Selector de Clase: Agrupando elementos de diferentes tipos 16:46 Selector de Identificador (ID): Para casos únicos y específicos 17:58 Formación de color: Píxeles, intensidad RGB y transparencias 22:51 Aplicando selectores H1 y párrafos en el proyecto 27:32 Prioridad de selectores: El orden de lectura del navegador 30:01 Práctica: Creando y aplicando la clase .texto-rojo 31:41 Uso de IDs: Aplicando el estilo único #parrafo-especial 33:11 Combinación de estilos: Herencia y jerarquía de propiedades 38:01 Propiedades de texto: Alineaciones, fuentes y decoración 39:57 Fondos y bordes: Imágenes y colores de fondo 45:22 Sombras y efectos: Jugando con opacidad y profundidad 56:32 Visualización en bloque vs en línea: Imágenes y etiquetas 1:07:51 El estilo en los formularios: Importación de código 1:10:05 Concepto de Margen (margin): Distancia hacia afuera 1:12:01 El orden del reloj: Arriba, derecha, abajo e izquierda 1:14:19 Concepto de Relleno (padding): Distancia hacia adentro 1:15:50 Práctica de espaciado: Separación de cajas y tablas 1:22:26 Introducción a librerías: El ecosistema de la industria 1:27:40 Qué es Bootstrap: La librería desarrollada por Twitter 1:29:31 Instalación de Bootstrap: Importando el CDN en el head 1:32:51 Aplicando la clase form-control a los inputs 1:34:41 Uso de placeholder: Texto de ayuda en las cajas 1:38:18 Ajustes finales y previsualización del formulario moderno 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=4C3LX5cSl4Q • Video Siguiente: ¡Próximamente disponible! 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • INTRODUCCIÓN A REDES 1: https://www.youtube.com/watch?v=hyqRz_iGZ6o • DHCP Y PROCESO DORA (Clase 4): https://www.youtube.com/watch?v=AV3KHycBx6U #Frontend #CSS3 #Bootstrap #DesarrolloWeb #Programacion #IngeSRM #AprendeAProgramar #WebDesign #UIUX #Coding css, curso css, aprender css, css desde cero, css avanzado, tutorial css, css fácil, programación en css, desarrollo frontend, curso frontend, aprender frontend, frontend desde cero, desarrollo web, programación web, diseño web, html y css, css grid, flexbox, 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 css, css3, curso de css3, css moderno, cómo hacer una web con css, qué es css, cómo funciona css, propiedades css, css para principiantes, estructura de una página web con css, 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 css 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 css, diseño web moderno, diseño web responsive, css responsive, curso de diseño web