Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes:$349
$259
Currency
Antes:$349
Ahorras:$90
COMIENZA AHORA
Curso de Responsive Design: Maquetación Mobile First

Clases del 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
Juan Fernando Lenis
Juan Fernando Lenis
Estudiante

También quisiera saber porque el profesor no para de usar pixeles en lugar de usar REM que es lo que el mismo recomienda.

1
Juan Fernando Lenis
Juan Fernando Lenis
Estudiante

Hola, me gustaría saber de donde salen todas las medidas. Yo solo escucho a Diego decir si si, aquí 218 acá 452.58 y no se de donde salen. Gracias!

1
Rocio Salgado
Rocio Salgado
Estudiante

Hola! tengo una duda, la segunda tabla la hago debajo de la primera? o tengo que hacer otro css?

1
David Cancino
David Cancino
Estudiante

Hola, tengo una duda, por qué en el width no ponemos auto como en el height? gracias

1
Jhon Bueno
Jhon Bueno
Estudiante

Yo logré terminar el diseño del proyecto con los conocimientos del Curso definitivo de HTML y CSS, y el Curso Práctico de HTML y CSS, pero no sé por qué el profe De Granda le pone <div> a todo, hasta a la etiqueta de p, no es una queja, porque si lo hace él supongo que son buenas prácticas, pero me gustaría saber por qué lo hace, o es para que la estructura sea más ordenada, no sé, alguien me puede explicar eso?

3
Miguel_Cossio
Miguel_Cossio
Estudiante

¿es una mala practica descargar todo en svg?

1
Oscar Adrián Martínez Cavazos
Oscar Adrián Martínez Cavazos
Estudiante

Hola, buen dia a todos. Tengo un problema con la segunda tabla, lo que pasa es que he intentado de muchas formas alinear la flecha de la izquierda que esta en la tabla de comisiones pero al intentar alinearla y hacer grande la pagina esta se mueve. Aqui les dejo el codigo y un comentario encima de la flecha, espero y alguien pueda ayudarme. Muchas gracias a todos de antemano!!

Codigo HTML:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>BatataBit</title><linkrel="preconnect"href="https://fonts.gstatic.com"><linkhref="https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap"rel="stylesheet"><linkrel="stylesheet"href="./styles.css"></head><body><header><imgsrc="./assets/imgs/logo.svg"alt=""><sectionclass="header__title-container"><h1>La próxima revolución en el intercambio de criptomonedas.</h1><p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p><ahref=""class="header__button">Conoce nuestros planes <span></span></a></section></header><main><sectionclass="main-exchange-container"><!-- Primer tabla --><divclass="background-img"></div><divclass="main-exchange-container__title"><h2>Visibilizamos todas las tasas de cambio.</h2><p>Traemos información en tiempo real de las casas de cambio y las monedas mas imortantes del mundo</p></div><sectionclass="main-tables-container"><divclass="main-currency-table"><pclass="currency-table__title">Monedas</p><divclass="currency-table__container"><!-- La etiqueta table sirve para crear tablas con html y css grid --><table><!-- la etiqueta tr significa table row o fila de la tabla y esta contiene etiquetas td --><tr><!-- Las etiquetas td son las columnas o los apartados que tendra cada fila en este caso tendra 2 apartados debido a que se agregaron 2 td. El significado de esta etiqueta es table data --><tdclass="table--top-left">Bitcoin</td><tdclass="table--top-right table--right">$1.96 <spanclass="down"></span></td></tr><tr><td>Ethereum</td><tdclass="table--right">$0.07 <spanclass="up"></span></td></tr><tr><td>Ripple</td><tdclass="table--right">$2.17 <spanclass="down"></span></td></tr><tr><tdclass="table--bottom-left">Stellar</td><tdclass="table--bottom-right table--right">$4.96 <spanclass="down"></span></td></tr></table></div><spanclass="arrow_right"></span></div><divclass="currency-table-date"><p><b>Actualizado:</b> 19 Julio 23:45</p><!-- Segunda tabla --></div><divclass="main-comisions-table"><pclass="comisions-table__title">Comisiones</p><divclass="comisions-table__container"><table><tr><tdclass="td-topLeft">Bitrade</td><tdclass="td-right td-topRight">$12.96</td></tr><tr><td>Bitpreco</td><tdclass="td-right">$13.07</td></tr><tr><td>Novadax</td><tdclass="td-right">$13.15</td></tr><tr><tdclass="td-bottomLeft">Coinext</td><tdclass="td-right td-bottomRight">$14.96</td></tr></table></div><!-- Este span es la felcha con la que tengo problema!!! --><spanclass="arrow-left"></span><divclass="comisions-table-date"><p><b>Actualizado:</b> 19 Julio 23:48</p></div></section></section><section></section><section></section><section></section></main><footer></footer></body></html>

Codigo CSS:

/* 
Orden para generar estilos
1. Posisionamiento
2. Modelo de caja
3. Tipografia
4. Visuales
5. Otros
*/:root {
    /* colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --gray: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C16.69%, #F7931A100%);
}

headerimg {
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header__title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
    text-align: center;
    align-self: center;
}

.header__title-containerh1 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: var(--just-white);
    
}

.header__title-containerp {
    margin-top: 24px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

.header__title-container.header__button {
    /* La position absolute toma en cuenta los bordes de la pantalla */position: absolute;
    left: calc(50% - 114.5px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /* Sombra */box-shadow: 0px4px8pxrgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--warm-black);
}

.header__buttonspan {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icons/ic-black-arrow-down.svg');
}

main {
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}

.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}

.main-exchange-container__title {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

.main-exchange-container.background-img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 50xp;
    background-image: url(./assets/imgs/bitcoin.svg);
    /* Estas propiedades nos sirven para que en el caso de que la imagen se haga grande, siempre la veamos en el centro y esta no se duplique para cubrir el tamaño si no que se estire y se haga mas grande */background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main-exchange-containerh2 {
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 2.6rem;
    color: var(--black);
}

.main-exchange-containerp {
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

/* .main-tables-container {
    height: auto;
} */.main-currency-table {
    position: relative;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 300px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}

.main-currency-table.currency-table__title {
    margin: 0 auto;
    margin-bottom: 15px;
    min-width: 230px;
    max-width: 300px;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: left;
}

.currency-table__container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    display: inline-block;
}

.currency-table__containertable {
    width: 100%;
    height: 100%;
}

.currency-table__containertd {
    width: 50%;
    padding-left: 12px;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.9rem;
    color: var(--gray);
    background-color: var(--just-white);
}

.currency-table__container.table--top-left {
    border-radius: 15px000;
}

.currency-table__container.table--top-right {
    border-radius: 015px00;
}

.currency-table__container.table--bottom-left{
    border-radius: 00015px;

}

.currency-table__container.table--bottom-right {
        border-radius: 0015px0;
}

.currency-table__container.table--right {
    font-size: 1.4rem;
    font-weight: normal;
    text-align: center;
    line-height: 1.7rem;
    color: #757575;
}

.currency-table__container.up {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url(./assets/icons/ic-trending-up.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.currency-table__container.down {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url(./assets/icons/ic-trending-down.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.main-currency-table.arrow_right {
    position: absolute;
    margin-left: 12.5px;
    top: 155.5px;
    width: 14px;
    height: 15px;
    background-image: url(./assets/icons/ic-black-arrow-right.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.currency-table-date {
    width: 190px;
    height: 30px;
    margin: 15px auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}

.currency-table-datep {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.5rem;
    color: var(--warm-black);
}

/* Tabla de comisiones */.main-comisions-table {
    position: relative;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 300px;
    margin: 0 auto;
    margin-top: 30px;
}

.main-comisions-table.comisions-table__title {
    min-width: 230px;
    max-width: 300px;
    height: 23px;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
    text-align: left;
    align-self: left;
}

.comisions-table__container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
    display: inline-block;
}

.main-comisions-tabletable {
    width: 100%;
    height: 100%;
}

.main-comisions-tabletd {
    width: 50%;
    padding-left: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.9rem;
    color: var(--gray);
    background-color: var(--just-white);
}

.main-comisions-table.td-right {
    padding-left: 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 400;
    line-height: 1.7rem;
    color: #757575;
}

.main-comisions-table.td-topLeft {
    border-radius: 15px000;
}

.main-comisions-table.td-topRight {
    border-radius: 015px00;
}

.main-comisions-table.td-bottomLeft {
    border-radius: 00015px;
}

.main-comisions-table.td-bottomRight {
    border-radius: 0015px0;
}

.main-comisions-table.comisions-table-date {
    width: 190px;
    height: 31px;
    padding: 8px;
    margin: 15px auto;
    border-radius: 8px;
    text-align: center;
    background-color: var(--soft-blue);
}

.comisions-table-datep {
    font-size: 1.2rem;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    line-height: 1.452rem;
    color: var(--warm-black);
}


/* Estos son los estilos de la flecha */.main-comisions-table.arrow-left {
    position: absolute;
    top: 155.5px;
    top: 1px;
    right: 225px;
    width: 14px;
    height: 15px;
    background-image: url(./assets/icons/ic-black-arrow-left.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
1
Mariano Napoleón Z
Mariano Napoleón Z
Estudiante

Hola muchachos tengo una duda.

Intento poner la variable de color en los estilos de css pero me toma todas las configuraciones que estoy haciendo , pero no me toma el programa las variables.

Lo estoy escribiendo asi :

background-color : var(–off-white);

Saben porque?

Muchas gracias.

1
Erika Diana Guillén Leyva
Erika Diana Guillén Leyva
Estudiante

¿Es mala práctica agregar iconos SVGs (sencillos como down-arrow) en el código HTML como se muestra abajo?

Captura de Pantalla 2021-06-03 a la(s) 20.17.56.png

me refiero a esto, en el archivo HTML.

Captura de Pantalla 2021-06-03 a la(s) 20.17.44.png
1
jennifer largo
jennifer largo
Estudiante

hola todos: segui las instrucciones para la seccion del header incorporando la imagen que descargue en figma asi como el div con los elementos. agregue los estilos al pie de la letra. sin embargo al renderizar y ver en el modo mobile-s320px los elementos me salen así. alguien me podria ayudar a resolverlo

2