Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Instruido por:
Diego De Granda
Diego De Granda
Básico
5 horas de contenido
Ver la ruta de aprendizaje
Construye un sitio web totalmente responsivo
Proyecto del curso
Construye un sitio web totalmente responsivo

Crearás el frontend de un sitio web partiendo de su wireframe, analizarás su arquitectura y construirás en código cada una de sus partes para que este se adapte a cualquier dispositivo de los usuarios.

Curso de Responsive Design: Maquetación Mobile First

Curso de Responsive Design: Maquetación Mobile First

Progreso del curso:0/31contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/31contenidos(0%)

Bienvenida al curso

Material Thumbnail

Introducción al curso

01:13 min

Setup inicial

Material Thumbnail

Analizando el diseño

06:36 min

El valor de Mobile First

02:34 min

Material Thumbnail

Arquitectura inicial

06:11 min

Material Thumbnail

Assets de nuestro proyecto

09:43 min

Material Thumbnail

Fuentes de nuestro proyecto

05:41 min

Sección de Header

Material Thumbnail

Maquetación del header

04:47 min

Material Thumbnail

Implementando BEM

11:06 min

Material Thumbnail

Uso de linear-gradient

07:44 min

Material Thumbnail

Uso de position para botón flotante

12:15 min

Sección de Intercambios

Material Thumbnail

Estructura base de la sección de intercambio

10:11 min

Material Thumbnail

Imagen de background

07:43 min

Material Thumbnail

Estructura de tabla de monedas

13:12 min

Material Thumbnail

Estilos base de tabla de monedas

10:24 min

Material Thumbnail

Detallando estilos de tabla de monedas

09:05 min

Material Thumbnail

Finalizando estilos de tabla de monedas

10:50 min

Sección de Beneficios

Material Thumbnail

Estructura base de la sección de beneficios

07:26 min

Material Thumbnail

Estilos de la sección de beneficios

15:17 min

Material Thumbnail

Maquetando tarjetas de beneficios

11:18 min

Sección de Planes

Material Thumbnail

Maquetando sección comodín

10:36 min

Material Thumbnail

Estructura de sección de planes

09:33 min

Material Thumbnail

Aplicando estilos a sección de planes

07:06 min

Material Thumbnail

Aplicando estilos a las tarjetas de la sección de planes

10:10 min

Material Thumbnail

Detallando estilos en tarjetas de planes

10:18 min

Material Thumbnail

Aplicando estilos al botón de call to action

09:12 min

Material Thumbnail

Scroll horizontal con CSS

11:40 min

Sección de Footer

Media Queries

Material Thumbnail

Aplicando media queries

15:03 min

Lighthouse

Material Thumbnail

Análisis con Lighthouse

10:13 min

Próximos pasos

Material Thumbnail

Cierre y próximos pasos

02:03 min

nuevosmás votadossin responder
joaquin dati
joaquin dati
Estudiante

No me funciona -.-
Alguna idea…

consulta.png
0
Alejandro Fraga
Alejandro Fraga
Estudiante

por que a veces escribe la clase con doble – o un solo - ???

0
Cesar Guevara Cabrera
Cesar Guevara Cabrera
Estudiante

¿Alguien mas se ha dado cuenta de que los márgenes verticales no se respetan, es decir no se suman si no que gana el margen mayor?

1
Andres Gabriel Reinoza Arteaga
Andres Gabriel Reinoza Arteaga
Estudiante

Hola comunidad! les consulto como se hace para unir ambas tablas que hicimos y que al hacer swipe si intercambien entre ellas?

0
Alejandro Fraga
Alejandro Fraga
Estudiante

ese monton de cifras en box shadow…? .-.

0
Miguel Di Massimo Nieto
Miguel Di Massimo Nieto
Estudiante

Descargamos dos fuentes, Inter y DM Sans. Por qué no hace falta indicarle al navegador qué fuente debe tener, por ejemplo, el header? cómo lo sabe el navegador?

0
Juan pablo Restrepo Muñoz
Juan pablo Restrepo Muñoz
Estudiante

¿Alguien sabe una extensión para VS Code para autocompletar las clases en CSS?

1
José Jacobo Capa Angamarca
José Jacobo Capa Angamarca
Estudiante

Hola compas! alguien me podria ayudar con una duda? por qué pone flex-direction: column; si las etiquetas tienen el display block, ocupa cada una todo el espacio del header, pienso que es innecesario o para que le aplica esa propiedad?

0
Camilo Molina
Camilo Molina
Estudiante

Como puedo generar un slider para mostrar los planes de pago al hacer click en las flechas ???

0
Juan Pablo Cadena Bahos
Juan Pablo Cadena Bahos
Estudiante

Las imágenes dan mucha vida al proyecto, igualmente los textos claros y limpios. me pregunto la diferencia entre una pagina clara y limpia y que la pagina quede vacía, en proyectos propios a veces las siento vacías ¿ no se si les pasa lo mismo ?

0