Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreDesarrollo de páginas responsivas con CSS3 y HTML5
Rating: 4.2 out of 54.2(97 ratings)
17,906 students
Desarrollo de páginas responsivas con CSS3 y HTML5
Crea páginas web que se vean bien en cualquier dispositivo
Created byFrancisco Javier Arce Anguiano
Last updated 8/2025
Spanish
What you'll learn
- El alumno comprenderá los principios básicos de la maquetación y el desarrollo de páginas responsivas
- El alumno conocerá las diferentes aplicaciones de la sentencia mediaquery para realizar páginas responsivas
- El alumno desarrollará varios ejemplos de aplicaciones responsiva por medio de los mediaquerys, CSS3 y HTML5
- El alumno aplicará sus conocimientos para desarrollar un grid responsivo y utilizar el lenguaje JavaScript para el desarrollo de páginas responsivas.
Explore related topics
Course content
10 sections • 112 lectures • 16h 36m total length
- Bienvenida al curso de Desarrollo de páginas responsivas con CSS3 y HTML53:29
Actualmente la mayoría de las consultas a páginas web las realizamos por medio de algún dispositivo móvil, ya sea el teléfono o una tableta, or lo que es muy importante que nuestras páginas se vean bien en cualquier pantalla. Otra tendencia es que las pantallas de los dispositivos móviles son cada vez más grandes o con mayor resolución, lo cual nos presenta otro reto al diseñar nuestros sitios web.
- Historia del Internet7:18
En plena guerra fría, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país. Este red se creó en 1969 y se llamó ARPANET.
- Historia del HTML55:41
El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. Los sistemas de "hipertexto" habían sido desarrollados años antes.
- Las etiquetas estructurales en HTML58:28
Las nuevas etiquetas que nos permiten manejar la estructura de la página son:
<section>
<article>
<aside>
<header>
<hgroup>
<footer>
<nav>
- Crear un layout fijo de una columna11:35
Maquetas con una columna:
Maquetas con una columna
Definir el ancho de la página.
Definir los colores
Preparar contenidos
Definir nuestra maqueta (layout) - Concluir una página de una columna10:54
Maquetas con una columna
Maquetas con una columna
Definir el ancho de la página.
Definir los colores
Preparar contenidos
Definir nuestra maqueta (layout) - Medidas flexibles en la construcción de páginas responsivas7:26
Medidas flexibles: em, rem, porcentajes
El diseño responsivo o responsive es crear interfaces o layout que se adapten a los distintos tamaños de pantalla o viewport.
Esto se hace utilizando las media queries de CSS y apoyándose en los rem, em y los porcentajes.
El tamaño de letra por defecto es de 16 píxeles si el usuario no lo modifica.
- Medida flexible EM11:03
El em depende del último font-size definido dentro del árbol de elementos en el que se encuentra.
Algunos desarrolladores prefieren utilizar un font-size de 62.5% para <html>.
De este modo reducen el valor predeterminado de 16px hasta 10px y así pueden realizar los cálculos en múltiplos de 10, más simple y sencillo; por ejemplo, 1em = 10px, 1.2em = 12px, etc.
- Medida flexible REM8:03
El rem depende del tamaño de letra base.
Si no hemos definido ningún font-size en el html, tomará el valor del navegador. Es decir, 1rem = 16px.
Si queremos que un título tenga un tamaño de 24px aplicamos font-size: 1.5rem;.
- Medida flexible Porcentaje (%)6:59
Medidas flexibles: porcentajes
Estos se usarán sobretodo para definir anchos flexibles. Por ejemplo, cuando queremos que las imágenes se adapten al 100% del ancho del contenedor, cuyo tamaño puede variar dependiendo de la media query aplicada.
O simplemente para crear un layout flexible.
- Desarrollo de página responsivas por dos columnas6:27
Layout fijos: Dos columnas
Utilizaremos la medida de porcentaje (%) y la propiedad float de CSS.
Layout fijos: dos columnas
- Desarrollo de página responsiva con tres columnas9:02
Utilizaremos la medida de porcentaje (%) y la propiedad float de CSS.
- Apuntes del curso (PDF)0:01
Apuntes del curso (PDF)
- Los medias querys en CSS34:51
Estos se usarán sobretodo para definir anchos flexibles. Por ejemplo, cuando queremos que las imágenes se adapten al 100% del ancho del contenedor, cuyo tamaño puede variar dependiendo de la media query aplicada.
O simplemente para crear un layout flexible.
Podemos delimitar el tamaño máximo y mínimo de un elemento con max-width, min-width, max-height y min-height
- La etiqueta viewport8:11
El viewport es el área visible del usuario de una página web.
El viewport varía con el dispositivo y será menor en un teléfono móvil que en una pantalla de computadora.
Por medio de la etiqueta <meta> podemos controlar el viewport en HTML 5:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Imágenes responsivas con @mediaquery9:38
Podemos hacer una imagen responsiva cambiando su ancho al 100%.
La altura la podemos dejar en “auto”.
También podemos limitar el tamaño de la imagen con max-width.
Podemos utilizar una imagen como fondo con de una división o del fondo de la etiqueta <body> con la regla background-size.
- Detectar la orientación de un dispositivo con mediaquery5:52
Mediatype
all: para todo tipo de dispositivos
print: sólo para impresoras
screen: Usado por computadoras, tabletas y teléfonos inteligentes
speech: Usado por los lectores de pantalla
Braille: braille dispositivos especiales
embossed: págna impresa en formato braille
handheld
projection
tty
tv - Desarrollar una página para laptop y para tableta8:37
Crear una página responsiva
Es decir, las páginas "responden" al tamaño de la pantalla donde se visualizan:
min-width:769px;
Pantalla para tableta:
min-width:481px y
max-width:768px
Formato para teléfonos:
max-width: 480px;
- Desarrollar una página para un dispositivo móvil pequeño o smart phone7:52
Crear una página responsiva
Es decir, las páginas "responden" al tamaño de la pantalla donde se visualizan:
min-width:769px;
Pantalla para tableta:
min-width:481px y
max-width:768px
Formato para teléfonos:
max-width: 480px;
- Crear archivos externos: para pantalla y tableta9:03
La forma "políticamente correcta" de trabajar las páginas responsivas es separar los archivos según su rango del viewport.
- Crear archivos externos: smartphones9:50
La forma "políticamente correcta" de trabajar las páginas responsivas es separar los archivos según su rango del viewport.
- Manejo de columnas con CSS38:59
- column-count
- column-gap
- column-rule-style
- column-rule-width
- column-rule-color
- column-rule
- column-span
- column-width
- Manejar las pantallas de alta resolución o retina con media query7:25
Algunos dispositivos móviles, contienen pantallas de alta resolución como las pantallas de retina. Por medio de los media querys podemos detectar la resolución del viewport y tomar medidas al respecto, como cambiar las imágenes por otras con la resolución adecuada.
- El manejo de las fuentes externas en una página responsiva13:56
Es muy util utilizar fuentes externas en nuestras páginas responsivas. En este video veremos cómo utilizar las fuentes de sitios como Google fonts o bajar nuestros archivos de sitios como fontsquirrel para incorporarlos,
- Hacer un video HTML5 responsivo3:39
Por medio de la etiqueta <video> podemos reproducir un video, y con los estilos en cascada podemos hacerlo responsivo.
- Hacer un video de Youtube responsivo5:25
Podemos importar los videos de Youtube, pero los mimos son de un ancho y largo fijos, por lo que hay que modificarlo con los estilos en cascada, de forma similar al de una imagen responsiva.
- Hacer una tabla responsiva8:21
Para hacer tablas responsivas podemos:
Reducir el tamaño.
Eliminar columnas.
Cambiar el formato de la tabla.
- Hacer una tabla responsiva para dispositivos pequeños12:48
Para hacer tablas responsivas podemos:
Reducir el tamaño.
Eliminar columnas.
Cambiar el formato de la tabla.
- Crear un formulario responsivo, primera parte15:59
Un ejemplo muy necesario es el uso de un formulario responsivo, donde por lo general necesitamos modificar o simplificar el mismo.
- Crear un formulario, segunda parte14:45
Un ejemplo muy necesario es el uso de un formulario responsivo, donde por lo general necesitamos modificar o simplificar el mismo.
- Crear un menú responsivo, primera parte11:05
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear un menú responsivo, segunda parte10:13
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear un menú responsivo en la parte baja del viewport2:36
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear un menú en un encabezado responsivo11:03
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear una galería responsiva, primera parte11:59
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear una galería responsiva, segunda parte9:49
En los dispositivos pequeños es muy incómodo un menú horizontal.
Por medio de los CSS podemos modificar la orientación del menú (y un poco de JavaScript), y con media query detectamos el tamaño del dispositivo.
- Crear un slideShow de imágenes responsivas, primera parte10:02
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos las etiquetas HTML.
- Crear un slideShow de imágenes responsivas, segunda parte11:16
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos las reglas de estilo.
- Crear un slideShow de imágenes responsivas, tercera parte9:23
Por lo general es muy requerido en las páginas web un deslizador de imágenes o slideshow. En los siguientes videos realizaremos un deslizador responsivo. En este video escribiremos el código en JS.
- Crear un slideShow de imágenes responsivas, cuarta parte7:54
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
- Crear una galería con SlideShow responsivos, primera parte HTML7:01
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
- Crear una galería con SlideShow responsivos, segunda parte CSS7:45
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
- Crear una galería con SlideShow responsivos, tercera parte JavaScript9:04
En los siguientes videos reuniremos la galería de fotos con nuestro deslizador de las mimas, haciéndola responsivas con mediaquerys.
- Crear un portafolio responsivo, primera parte, HTML4:27
Otro formato muy utilizado es el portafolio, donde mostramos nuestro trabajo. Por medio de media querys nos será muy sencillo realizarlo en forma responsiva.
- Crear un portafolio responsivo, segunda parte, CSS7:09
Otro formato muy utilizado es el portafolio, donde mostramos nuestro trabajo. Por medio de media querys nos será muy sencillo realizarlo en forma responsiva.
- Crear un catálogo de productos responsivos, primera parte4:32
Otra aplicación muy solicitada es la crear un catálogo responsivos de productos. En este video crearemos la estructura básica en HTML.
- Crear un catálogo de productos responsivos, segunda parte10:55
Otra aplicación muy solicitada es la crear un catálogo responsivos de productos. En este video crearemos la estructura básica en CSS.
- Crear un grid responsivo, primera parte8:18
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Crear un grid responsivo, segunda parte9:50
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Crear un grid responsivo, tercera parte6:34
Una herramienta muy útil para desarrollar nuestra páginas responsivas es crear un grid que nos simplifique el trabajo. En estos videos veremos un grid sencillo desarrollado con CSS3 y HTML5.
- Cambiar un layout fijo a uno responsivo8:46
Una tarea muy común es cambiar una página con un formato fijo, basado en pixeles, a un formato flexible y responsivo. En este video veremos la forma de hacerlo.
- Utilizar JavaScript para páginas responsivas, primera parte11:33
Con el evento “resize” podemos detectar cuando el cambio en el tamaño del viewport.
Por medio de las instrucciones del DOM (Document Object Model) podemos modificar los elementos de HTML.
- Utilizar JavaScript para páginas responsivas, segunda parte7:37
Con el evento “resize” podemos detectar cuando el cambio en el tamaño del viewport.
Por medio de las instrucciones del DOM (Document Object Model) podemos modificar los elementos de HTML.
- Crear menú responsivo con un campo de búsqueda13:27
En este video crearemos un menú con un campo de búsqueda.
- Crear un menú responsivo fijo de lado izquierdo9:29
En este video crearemos un menú responsivo fijo de lado izquierdo.
- Crear un menú responsivo deslizable12:15
En este video crearemos un menú responsivo deslizable.
- Crear un menú lateral deslizable9:31
En este video realizaremos un menú deslizable lateral, según el ejemplo de la W3C.
- Botones deslizables como menú9:29
En este video crearemos algunos botones delizables que nos servirán de menú.
- Crear un menú vertical4:40
En este video crearemos un menú vertical, en base al ejemplo de la W3C.
- Crear un menú responsivo con encabezado13:27
En este video crearemos un menú responsivo con encabezado, en base al ejercicio de la W3C.
- Crear un menu fijo7:46
En este video crearemos un menú fijo, en base al ejercicio de la W3C.
- Crear un menú que se oculte con el scroll8:27
En este video crearemos un menú que se oculte con el scroll, en base al ejercicio de la W3C.
- Crear un submenú desde un botón7:56
En este video crearemos un submenú desde un botón, en base al ejercicio de la W3C.
- Crear un menú responsivo con submenú, primera parte14:12
Crear un menú responsivo con submenú en base a los ejercicios de la W3C.
- Crear un menú vertical submenu, primera parte5:07
En este video crearemos un submenú vertical basado en el ejemplo de la W3C.
- Crear un menú vertical submenu, segunda parte9:59
Crear un menú vertical submenu, segunda parte
- Crear un menú vertical submenu, tercera parte7:50
Crear un menú vertical submenu, tercera parte
- Crear un menu responsivo con un submenú, primera parte12:38
En este video realizaremos un menú responsivo que contiene un submenú, tomando como referencia el ejemplo de la W3C.
- Crear un menú responsivo con un submenú, segunda parte7:36
En este video realizaremos un menú responsivo que contiene un submenú, tomando como referencia el ejemplo de la W3C. Segunda parte.
- Crear un "super menú" responsivo13:58
En este video realizaremos un "super menú", tomando como referencia el ejemplo de la W3C.
- Crear la botonera para paginación6:26
En este video realizaremos un botonera, tomando como referencia el ejemplo de la W3C.
- Crear las migas de pan con CSS39:25
En este video realizaremos las migas de pan, tomando como referencia el ejemplo de la W3C.
- Crear una botonera responsiva8:40
En este video realizaremos una botonera responsiva, tomando como referencia el ejemplo de la W3C.
- Crear una botonera para las redes sociales10:08
En este video realizaremos un submenú en un botón, acorde al ejemplo de la W3C.
- Escribir los contenidos en el archivo HTML12:04
En la mayoría de los sistemas necesitamos una pantalla de inicio.
Podemos incluir:
Una barra de navegación
Una imagen principal
Un pie de página con un submenú y redes sociales
- Escribir los estilos en cascada para la barra de navegación14:03
Después de las reglas de estilo de la “normalización”, vamos a crear los estilos de nuestra barra de navegación.
- Escribir los estilos en cascada para el banner11:22
Escribiremos los estilos en cascada para el banner, nuestro lema y el botón principal.
- Modificar los estilos en cascada para el pie de página6:03
El pie de página consistirá en varias cajas flexibles.
- El menú secundario del piede página11:36
El submenú lo manejaremos como otra caja flexible dentro de la caja flexible del pie de página.
- Las líneas de ubicación y extras en el pie de página11:10
Las líneas de ubicación y extras en el pie de página
- Aplicar los @media-queries a la página12:58
Las líneas de ubicación y extras en el pie de página
- Uso de variables para los colores6:28
Por medio de la pseudo clase :root podemos definir variables para ser usadas en los estilos en cascada.
La variable debe ser definida con doble signo de menos antes del nombre.
La variable debe ser utilizada con la función var().
- Crear un layout sencillo con display: grid;8:39
Por medio del conjunto de instrucciones display: grid, nos será muy sencillo realizar layouts.
- Crear un layout embebidos con display: grid;12:18
En un layout desarrollado con el grid, cuadrícula o rejilla, podemos embeber otras divisiones.
- Crear un formato tipo blog con display: grid;12:52
Podemos crear un “mapa” para distribuir nuestras áreas por medio de grid-template-areas.
- Crear el layout de tipo blog por template-areas11:41
Podemos crear un “mapa” para distribuir nuestras áreas por medio de grid-template-areas.
- Crear una página de inicio con el display: grid14:00
Podemos realizar una combinación de grid-template-areas con divisiones embebidas.
- Adecuar la página de inicio para ser responsiva con @media queries9:21
Por medio de los @media-queries podemos hacer responsiva la página diseñada con display: grid;
- Introducción a la página responsiva con display:grid;12:04
Introducción a la página responsiva con display:grid;
- Definir el display:grid para la página de testimonios9:42
Definir el display:grid para la página de testimonios
- Definir los estilos en cascadas para la caja de los testimonios12:36
Definir los estilos en cascadas para la caja de los testimonios
- Crear la página responsiva por medio de los media-queries12:45
Crear la página responsiva por medio de los media-queries
- Revisión del proyecto terminado de página inicial y verificarlo responsivo6:15
Podemos hacer una página responsiva con las cajas flexibles y los media queries.
Cada una de las secciones, a su vez, tendrá una definición de cajas flexibles.
- Crear el contenido HTML y los estilos en cascada básicos11:26
Por medio de las cajas flexibles (y un poco de @media-queries) podemos realizar modelos responsivos.
Crear la estructura básica de la página.
- Crear el encabezado de la página de inicio con flex-box8:28
Podemos centrar el título convertiéndolo en cajas flexibles.
- Creación del contenido de los cursos8:59
Podemos centrar el título convertiéndolo en cajas flexibles.
- Manejo del contenido con las cajas flexibles7:07
Creamos el contenido de los “cursos”.
- Crear una sección del curso más reciente7:29
Creamos el contenido de los “cursos”.
- Crear una sección para las descargas7:05
Podemos crear una nueva sección para descargar un producto en la sección principal.
- Convertir la sección de descargas con cajas flexibles5:59
Podemos crear una nueva sección para descargar un producto en la sección principal.
- Crear una galería con cajas flexibles6:29
Podemos crear la sección lateral de nuestros productos.
- Crear la barra lateral con cajas flexibles7:08
Podemos crear la sección lateral de nuestros productos.
- Crear el pie de página y el menú principal8:11
Podemos crear el Menú principal y pie de página para concluir nuestra página.
- Seleccionar un color en una página web con ColorZilla3:08
ColorZilla es una herramienta que nos permita detectar un color de un elemento de una página web.
- Herramientas para encontrar colores armónicos10:21
Herramientas para encontrar colores armónicos
- Páginas para descargar fuentes e íconos6:59
Páginas para descargar fuentes e íconos
- Crear gradientes de forma sencilla por medio de dos herramientas10:14
Crear gradientes de forma sencilla por medio de dos herramientas
- Herramientas para las cajas flexibles8:20
Herramientas para las cajas flexibles
- Herramientas para objetos SVG y Curvas Bezier Cuadráticas8:04
Herramientas para objetos SVG y Curvas Bezier Cuadráticas
- Herramienta para diseños display: grid;7:51
Herramienta para diseños display: grid;
- Despedida del curso Desarrollo de páginas responsivas con CSS3 y HTML52:34
Gracias por concluir el curso de Desarrollo de páginas responsivas con CSS3 y HTML5. Espero que haya sido de mucha utilidad en tu vida profesional. Hasta pronto.
- Archivos del curso Desarrollo de páginas responsivas con CSS3 y HTML50:04
En esta clase encontrarás los archivos del curso Desarrollo de páginas responsivas con CSS3 y HTML5.
Requirements
- Conocimiento básico en HTML
- Conocimiento básico en CSS3
- Conocimientos básicos de programación con JavaScript (no indispensable)
Description
Actualmente la mayoría de las consultas a páginas web las realizamos por medio de algún dispositivo móvil, ya sea el teléfono o una tableta, or lo que es muy importante que nuestras páginas se vean bien en cualquier pantalla. Otra tendencia es que las pantallas de los dispositivos móviles son cada vez más grandes o con mayor resolución, lo cual nos presenta otro reto al diseñar nuestros sitios web.
Este curso tiene como objetivo que aprendas a desarrollar páginas "responsivas" que se vean correctamente en cualquier dispositivo, ya sea una computadora de escritorio, una tableta o un teléfono inteligente, ya sea con una pantalla con densidad normal o una con retina. Por medio del uso de CSS3 y HTML5, con los medias querys podremos hacer páginas que "respondan" de manera inteligente a cada tipo de pantalla o "viewport".
¿Qué conocimientos y herramientas se requieren?
- Conocimiento básico en HTML
- Conocimiento básico en CSS3
- Conocimientos básicos de programación con JavaScript (no indispensable)
¿Quién debería tomar este curso?
- Diseñadores de front end con HTML y CSS
- Desarrolladores web que deseen crear páginas responsiva
¿Qué conseguirán o serán capaces de hacer los estudiantes después de tomar tu curso?
- El alumno comprenderá los principios básicos de la maquetación y el desarrollo de páginas responsivas
- El alumno conocerá las diferentes aplicaciones de la sentencia mediaquery para realizar páginas responsivas
- El alumno desarrollará varios ejemplos de aplicaciones responsiva por medio de los mediaquerys, CSS3 y HTML5
- El alumno aplicará sus conocimientos para desarrollar un grid responsivo y utilizar el lenguaje JavaScript para el desarrollo de páginas responsivas.
Who this course is for:
- Diseñadores de front end con HTML y CSS
- Desarrolladores web que deseen crear páginas responsiva