Episodios de Desarrollador web Full Stack
187 episodios · del más reciente al más antiguo · página 3
-
Unidades relativas (%, em, rem, vw, vh) para responder
Las unidades relativas son la columna vertebral del diseño responsivo en CSS. A diferencia de las unidades absolutas como el píxel (px), las unidades relativas se calculan en…
-
Taller de : adapta el tamaño de la fuente según el ancho de la pantalla
RECORDATORIO TEÓRICO El diseño responsivo no se limita a reorganizar bloques en la pantalla: también implica adaptar la tipografía para que sea legible en cualquier dispositivo…
-
Estrategias para definir los puntos de quiebre
Los puntos de quiebre (en inglés breakpoints) son los valores de anchura de ventana gráfica en los que el diseño de una página web cambia para adaptarse mejor al dispositivo del…
-
Taller: primera consulta de medios para cambiar el color de fondo
**Recordatorio teórico** Una media query (consulta de medios) es una regla CSS que permite aplicar estilos de forma condicional según las características del dispositivo o de la…
-
Media Queries: sintaxis y lógica que dan prioridad a los dispositivos móviles
Las Media Queries (consultas de medios) son una de las herramientas más poderosas de CSS3. Permiten aplicar estilos específicos según las características del dispositivo o de la…
-
Observación : inspección de un sitio que no responde
RECORDATORIO TEÓRICO El diseño responsivo es una filosofía de desarrollo web que permite que una interfaz se adapte fluidamente a cualquier tamaño de pantalla, desde un teléfono…
-
Vocabulario básico: ventana gráfica, puntos de interrupción y fluidez
El diseño responsivo es una filosofía de desarrollo web que consiste en crear interfaces capaces de adaptarse automáticamente a cualquier tamaño de pantalla, sin necesidad de…
-
Introducción al diseño responsivo y a CSS3
El diseño responsivo es una filosofía de desarrollo web que consiste en crear páginas capaces de adaptarse automáticamente a cualquier tamaño de pantalla, ya sea un teléfono…
-
Texto de transición: preparación para el siguiente paso (introducción rápida a CSS)
A lo largo de este capítulo de HTML y estructuración semántica, has construido una base sólida: sabes estructurar un documento con las etiquetas correctas, respetar la jerarquía…
-
Miniproyecto final: portafolio de varias páginas completamente semántico
Descripción del proyecto Este miniproyecto de cierre de capítulo te invita a construir un **portafolio personal de varias páginas** aplicando todas las competencias de HTML…
-
Texto resumido: estrategia de estructuración semántica de extremo a extremo
La estructuración semántica en HTML no es una simple convención estética ni un lujo reservado a expertos. Es una disciplina fundamental que determina la calidad técnica, la…
-
Taller: hacer que una tabla sea accesible (alcance, resumen)
RECORDATORIO TEÓRICO Una tabla HTML es accesible cuando cualquier usuario, incluidos quienes utilizan lectores de pantalla, puede comprender la relación entre los datos de las…
-
Taller: creación de un horario semanal
RECORDATORIO TEÓRICO Las tablas HTML permiten estructurar datos tabulares, es decir, información que tiene una relación lógica entre filas y columnas. La etiqueta principal es …
-
Matrices semánticas: table, thead, tbody, tbody, th, caption, scope
Las tablas en HTML permiten representar datos tabulares, es decir, información organizada en filas y columnas con relaciones entre ellas. Antes de profundizar en su uso correcto…
-
Taller de : usa el tiempo, el código y el abbr correctamente
**Recordatorio teórico** Las etiquetas semánticas en línea ``, `` y `` tienen propósitos muy específicos y complementarios. La etiqueta `` sirve para marcar fechas, horas o…
-
Taller: enriquece la entrada del blog con etiquetas en línea
RECORDATORIO TEÓRICO Las etiquetas semánticas en línea permiten atribuir un significado preciso a fragmentos de texto dentro de un párrafo o de cualquier bloque de contenido, sin…
-
Etiquetas semánticas en línea: strong, em, mark, code, time, abbr
Las etiquetas semánticas en línea son elementos HTML que se insertan dentro de un flujo de texto para aportar un significado preciso a una palabra, una expresión o un fragmento de…
-
Texto extenso: atributos alt complejos y longdesc
En los capítulos anteriores hemos visto cómo insertar imágenes con la etiqueta img, cómo usar el atributo alt para proporcionar un texto alternativo básico y cómo estructurar…
-
Taller: creación de una galería de imágenes semánticas
RECORDATORIO TEÓRICO En HTML semántico, cada elemento debe tener un significado preciso que va más allá de su simple apariencia visual. Cuando trabajamos con imágenes, la etiqueta…
-
Taller: insertar una foto de perfil con subtítulo
RECORDATORIO TEÓRICO En HTML, la etiqueta permite incrustar una imagen en una página web. Es un elemento vacío (sin etiqueta de cierre) que requiere dos atributos esenciales: src…
-
Las imágenes: etiqueta img, atributo alt, figure y figcaption
Las imágenes son elementos fundamentales en cualquier página web. Permiten transmitir información visual, ilustrar contenidos, decorar interfaces y enriquecer la experiencia del…
-
Rutas relativas frente a rutas absolutas: administre bien sus URL
En el desarrollo web, cada vez que se crea un enlace de hipertexto, se inserta una imagen, se referencia una hoja de estilos o se enlaza un archivo JavaScript, es necesario…
-
Taller: lista de recursos externos (objetivo y rel)
**Recordatorio teórico** En HTML, los enlaces externos se crean con la etiqueta y su atributo href. Sin embargo, cuando el destino del enlace es una página o recurso externo, dos…
-
Taller: creación de navegación interna con anclas
**Recordatorio teórico** Las anclas HTML permiten crear enlaces de navegación interna dentro de una misma página. El mecanismo se basa en dos elementos complementarios: el punto…
-
Enlaces de hipertexto: una etiqueta y atributos esenciales
Los enlaces de hipertexto son uno de los fundamentos del lenguaje HTML y, por extensión, de la web en su totalidad. Sin ellos, las páginas web serían documentos aislados, sin…
-
Bloque frente a integrado: comprensión del flujo de documentos
En HTML, cada elemento que escribes en tu código ocupa un lugar en la página según reglas precisas que el navegador aplica automáticamente. Para comprender cómo se organiza…
-
Taller de : listas anidadas
**Recordatorio teórico: Listas anidadas en HTML** Una lista anidada es simplemente una lista que contiene otra lista en su interior. En HTML, esto se consigue colocando un…
-
Taller: agregue la lista de habilidades en el currículum
**Recordatorio teórico** En HTML, las listas son elementos semánticos fundamentales para estructurar información agrupada. Existen tres tipos principales: la lista no ordenada…
-
Listas HTML: ul, ol, dl
Las listas son uno de los elementos más utilizados en HTML. Permiten agrupar información de manera semántica, es decir, dando al contenido un significado preciso que tanto el…
-
Lista de verificación para la evaluación provisional y la autoevaluación
Este capítulo tiene un objetivo claro: permitirte evaluar de forma honesta y estructurada lo que has aprendido hasta ahora en la sección «HTML y estructuración semántica». No se…
-
Miniproyecto : creación de tu currículum semántico
Descripción del proyecto En este miniproyecto, crearás tu propio currículum vitae personal en formato HTML, aplicando todos los principios de semántica, accesibilidad y buenas…
-
Taller: limpiar y comentar tu código
**Recordatorio teórico** Un código HTML limpio y bien comentado no es un lujo: es una exigencia profesional. En un entorno de trabajo real, tu código será leído, mantenido y…
-
Mejores prácticas: denominación de archivos y estructura de árbol simple
En el desarrollo web profesional, la forma en que se nombran los archivos y se organiza la estructura de carpetas de un proyecto no es un detalle secundario. Es, por el contrario…
-
Evaluación de las habilidades adquiridas y las próximas etapas del curso
Este capítulo marca un momento importante en tu recorrido como futuro desarrollador web: es el momento de hacer una pausa, mirar hacia atrás y tomar conciencia de todo lo que has…
-
Miniproyecto: mejora del sitio estático + README completo
Descripción del proyecto Este miniproyecto es la culminación de la sección introductoria del curso. El estudiante debe tomar un sitio web estático existente (creado durante los…
-
Taller: escribe un README claro para el miniproyecto
**Recordatorio teórico** Un README es el primer archivo que cualquier desarrollador, reclutador o colaborador leerá al llegar a tu repositorio. No es un documento de relleno: es…
-
Markdown y README: presentación de tu proyecto
Markdown y README: presentación de tu proyecto Cuando un desarrollador publica un proyecto en una plataforma como GitHub o GitLab, lo primero que ve cualquier visitante no es el…
-
Taller: encontrar la respuesta correcta en MDN y aplicarla
**Recordatorio teórico** MDN Web Docs (Mozilla Developer Network) es la referencia técnica oficial para los estándares web: HTML, CSS y JavaScript. A diferencia de un tutorial de…
-
Documentación e investigación eficaces (MDN, StackOverflow)
Como desarrollador web, una de las habilidades más importantes que debes cultivar desde el principio no es memorizar todos los comandos o propiedades posibles, sino saber dónde…
-
Ciclo de confirmación de pruebas: iteraciones pequeñas y rápidas
Como desarrollador web en formación, ya has trabajado con Git, has aprendido a versionar tu código, a crear ramas y a estructurar tu entorno de trabajo. Ahora es el momento de dar…
-
Taller: corregir un error de visualización de HTML/CSS con DevTools
**Recordatorio teórico** Las DevTools (herramientas de desarrollador) son un conjunto de utilidades integradas en los navegadores modernos (Chrome, Firefox, Edge) que permiten…
-
Método de depuración paso a paso
La depuración es una de las habilidades fundamentales que distingue a un desarrollador eficaz de uno que se bloquea ante el primer error. Todo desarrollador, sin importar su nivel…
-
Miniproyecto: sitio estático versionado (env + Git)
Descripción del proyecto Este mini-proyecto tiene como objetivo consolidar todos los conocimientos adquiridos en el capítulo introductorio sobre el entorno de desarrollo y Git. El…
-
Taller: agregar un archivo.gitignore adaptado a un proyecto HTML/CSS
**Recordatorio teórico** El archivo .gitignore es un archivo de texto plano ubicado en la raíz de tu repositorio Git que le indica a Git qué archivos o carpetas debe ignorar y…
-
Crear un archivo.gitignore: por qué y cómo
Cuando trabajas con Git en un proyecto, no todos los archivos que existen en tu carpeta local deben ser rastreados ni enviados al repositorio. Algunos archivos son generados…
-
Concepto de sucursal (descripción general)
Las ramas en Git: qué son y por qué son esenciales Hasta ahora has aprendido a crear un repositorio local, a realizar confirmaciones (commits) y a escribir mensajes de…
-
Taller: escribir compromisos significativos
**Recordatorio teórico** Un commit (confirmación) en Git es mucho más que guardar cambios: es una unidad de comunicación con tu equipo (y contigo mismo en el futuro). Un mensaje…
-
Confirmar mensajes: prácticas recomendadas
Cuando trabajas con Git, cada confirmación (en inglés «commit») es como una fotografía del estado de tu proyecto en un momento dado. Pero una fotografía sin etiqueta ni…
-
Ver el historial de confirmaciones con git log
El comando git log es una de las herramientas más importantes en el día a día de un desarrollador que trabaja con Git. Su función principal es mostrar el historial de…
-
Taller: crear un repositorio local y realizar una primera confirmación
**Recordatorio teórico** Git es un sistema de control de versiones distribuido que permite registrar el historial de cambios de un proyecto a lo largo del tiempo. La unidad…