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
Aarón Guillermo Castillo Rivera
Aarón Guillermo Castillo Rivera
Estudiante

Una pregunta, igual podíamos agregar la flecha hacia abajo en el html o hay alguna diferencia?

1
Samer Nader Ahmad Dommar
Samer Nader Ahmad Dommar
Estudiante

Amigos, tengo dudas con la metodología BEM. Según lo que he leído, de esta manera estaría correcto, pero veo que Diego lo hace de una manera distinta. También veo que no le agrega clases a todas las etiquetas, pero la metodología BEM indica que TODAS las etiquetas deben tener su clase.

<headerclass="header"><pictureclass="header__picture"><imgclass="header__img"src="./assets/imgs/logo.svg"alt="logo de la empresa batatabit"></picture><divclass="header__title-container"><h1class="header__title">La próxima revolución en el intercambio de criptomonedas.</h1><pclass="header__paragraph">Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p><ahref="#"class="header__button">Conoce Nuestros Planes <span>i</span></a></div></header>
0
Braian Eduardo Vazquez Jimenez
Braian Eduardo Vazquez Jimenez
Estudiante

Saludos, alguna vez vi que el buen instructor Diego De Ganda en algún video puse el sitio web que estaba haciendo en su dispositivo con localhost, alguno sabe cómo lo hico, espero me aya explicado lo que quiero hacer. Ver el sitio web que estoy construyendo en localhost de mi computadora MacOS, en mi celular Android.

0
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