Empezamos la segunda sección de nuestro proyecto. Para crearla, primero debemos analizar el diseño que nos entregaron para empezar a maquetar en nuestro index.html. ¡Vamos a ello!
Cómo hacer la división de secciones
Lo primero es agregar una clase indentificadora a la primera de cuatro secciones que tenemos. Usando la metolodología BEM, class=“main-exchange-container”, creamos dentro el primer contenedor div en el que tendremos la imagen. Añadimos la clase backgroundImg.
Creamos el segundo contenedor div para el título h2 y el párrafo p, en el que añadimos el contenido escrito en el diseño. Añadimos la clase main-exchange-container–title, en que main-exchange-container es el bloque y title el elemento. Las tablas que muestra el valor de las monedas es una sección en sí, por lo que es más correcto crear un section en lugar de un div. El div lo colocamos dentro.
<sectionclass="main-exchange-container"><divclass="backgroundImg"></div><divclass="main-exchange-container--title"><h2>Visibilizamos todas las tazas de cambio.</h2><p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p></div><sectionclass="main-tables-container"><div></div></section></section>
Cómo aplicar estilos a las secciones
Hay 3 elementos que debes tener en cuenta:
main
Ajustamos el ancho al 100% y la altura en auto porque el mismo contenido que agreguemos definirá el espacio que vaya a ocupar.
Agregamos un min-width: 320px para que no se distorcione si llega a medidas más pequeñas.
Le damos un color de fondo con la variable --off-white.
En la parte de los estilos de main falto colocar un min-width de 320px para que el contendedor con color de fondo (off-white) no se rompa cuando se alcanzen resoluciones menores a esta. Nota: Claramente es de menor importancia este detalle, pero me parecio curioso y lo quise añadir.
Una técnica que me gusta hacer es desarrollar la pagina sin ver el video, en ocasiones me queda fácil en otras me queda difícil pero jamás me rindo, cuando lo termino si coloco el video para ver detalladamente en que falle y que puede mejorar.
Si te preguntas por que el MIN-WIDTH es de 288 en las etiquetas de texto cuyo WIDTH es de 90% (del ancho del contenedor donde estan), esto es xq 288 equivale al 90% de 320, significa que su tamaño no va ser menor a 288px cuando el view port sea de 320 (que es el menor posible) .
Aquí mi código para la estructura HTML de esta Primera Sección 😄
<sectionclass="main__exchange__container"><divclass="background__imageContainer"></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 más importantes del mundo.</p></div><sectionclass="main__tables__container"><div></div></section></section>
Hola, logre hacerlo con Grid, aquí les dejo el código:
index.html
<sectionclass="main-exchange-container"><divclass="backgroundImg"></div><divclass="main-exchange-container--title"><h2>Visibilizamos todas las tasas de cambio.</h2><p>
Traemos información en tiempo real de las tasas de cambio y las
monedas mas importantes del mundo.
</p></div><sectionclass="main-tables-container"><h3class="main-tables-container__titulo--tabla">Monedas</h3><spanclass="main-tables-container__titulo--moneda">Bitcoin</span><divclass="main-tables-container__precio"><b>$</b> 1.96</div><divclass="main-tables-container__grafico"><imgsrc="./assets/icons/trending-down.svg" /></div><spanclass="main-tables-container__titulo--moneda">Ethereum</span><divclass="main-tables-container__precio"><b>$</b> 0.07</div><divclass="main-tables-container__grafico"><imgsrc="./assets/icons/trending-up.svg" /></div><spanclass="main-tables-container__titulo--moneda">Ripple</span><divclass="main-tables-container__precio"><b>$</b> 2.15</div><divclass="main-tables-container__grafico"><imgsrc="./assets/icons/trending-down.svg" /></div><spanclass="main-tables-container__titulo--moneda">Stellar</span><divclass="main-tables-container__precio"><b>$</b> 4.96</div><divclass="main-tables-container__grafico"><imgsrc="./assets/icons/trending-down.svg" /></div><spanclass="main-tables-container__actualizacion"
><b>Actualizado:</b> 19 Julio 23:45</span
>
</section>
Tambien si no desean copiar los textos a mano, pueden ir al Figma aca y si le dan click al texto, tendrán un apartado de Content , alli al darle click se les copiara el texto seleccionado
Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄. Platzi-Test
Si estamos maquetando para la pantalla mas chica de un dispositivo que es la de un móvil, no podríamos omitir el min-width del contenedor del texto?? se supone que el viewport no se va achicar menos de lo que estamos maquetando originalmente
Intenten usar la metodología BEM de una forma un poco más técnica en un principio, yo creo que el profe se ha acostumbrado a utilizarla a su manera, y lo hace de una forma muy personalizada a su manera de trabajo.
.
Siempre agreguen todo en orden de arriba hacía bajo, y es que en este caso se agregó primero el titulo y el párrafo, cuando tendría que haberse puesto primero la imagen. Lo que pasa es que el profe tiene skills tan monstruosas que puede darse el lujo de agregar si quiere primero el footer, y terminar con el header, pero pues, es bueno seguir ese orden en un principio.
Hola, les dejo el atajo de emmet de todo el HTML realizado en esta clase:
section.main-exchange-container>div.background-img+div.main-exchange-container--title>h2{Visibilizamos todas las tasas de cambio}+p{Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.}^section.main-tables-container>div
tuve problemas para que el contenido cuando el tamaño de la pantalla creciera quedara en el centro, en esos casos margin: 0 auto puede ser de mucha ayuda
Para quien quiera el texto que va dentro de las cjas se los dejo.
<div class="main-exchange-container--title">
<h2>Visibilizamos todas las tasas de cambio.</h2>
<p>Traemos informaciónen tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
</div>```
Hola chicos/cas
Antes había hecho una pregunta con respecto a los margenes en los buscadores porque se comportan de distinta manera los estilos cuando le aplico los valores de los px tanto en chrome como microsoft edge, lo que he hecho con el margen top es dejarlo como auto y veo que así se ajusta en los distintos buscadores, no se si es una buena idea, pero hace lo que quiero
¿la etiqueta main no esta siendo mal utilizada?
Se supone que es para contener la información principal de la página (título principal, descripción del servicio, producto, etc…) y todas las secciones no son principales…
Agradezo la correxión.
Otra forma de crear el botón es con la etiqueta button. No solo usas la etiqueta correcta sino que a la hora de posicionarlo con estilos se hace mas sencillo. Solo necesitas 2 atributos.
No se si sea buena practica, pero recomiendo colocarle a la etiqueta body un min-width de 300px para que los demas elementos hijos no rompan con el ancho natural de la pagina
En la parte de los estilos de main falto colocar un min-width de 320px para que el contendedor con color de fondo (off-white) no se rompa cuando se alcanzen resoluciones menores a esta.
Nota: Claramente es de menor importancia este detalle, pero me parecio curioso y lo quise añadir.
section.main-exchange-container>(div.backgroundImg)+(div.main-exchange-container--title>(h2{Visibilizamos todas las tasas de cambio.})+(p{Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo}))+(section.main-tables-container)+(div)
Clase 12: Empezamos la[ segunda sección de nuestro proyecto](https://platzi.com/clases/2030-mobile-first/32493-analizando-el-diseno/). Para crearla, primero debemos analizar el diseño que nos entregaron para empezar a maquetar en nuestro index.html. ¡Vamos a ello!
## Cómo hacer la división de secciones
Lo primero es agregar una clase indentificadora a la primera de cuatro secciones que tenemos. Usando [la metolodología BEM](https://platzi.com/clases/2030-mobile-first/32306-implementando-bem/), class=“main-exchange-container”,
creamos dentro el primer contenedor div en el que tendremos la imagen. Añadimos la clase backgroundImg.

Creamos el segundo contenedor div para el título h2 y el párrafo p, en el que añadimos el contenido escrito en el diseño. Añadimos la clase main-exchange-container–title, en que main-exchange-container es el bloque y title el elemento.
Las tablas que muestra el valor de las monedas es una sección en sí, por lo que es más correcto crear un section en lugar de un div. El div lo colocamos dentro.
` <section class="main-exchange-container">`
` `
`
`
`
Visibilizamos todas las tazas de cambio.
`
`
Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.
`
`
`
` <section class="main-tables-container">`
` `
` </section>`
` </section>`
## Cómo aplicar estilos a las secciones
Hay 3 elementos que debes tener en cuenta:
### main
Ajustamos el ancho al 100% y la altura en auto porque el mismo contenido que agreguemos definirá el espacio que vaya a ocupar.
Agregamos un min-width: 320px para que no se distorcione si llega a medidas más pequeñas.
Le damos un color de fondo con la variable --off-white.
`main` {
` width: 100%`;
` min-width: 320px`;
` height`: auto;
` background-color: var`(--off-white);
}
### .main-exchange-container
Llamamos al primer contenedor principal en que estamos trabajando y ajustamos de igual manera el ancho al 100% y la altura en auto.
Añadimos un padding-top: 80px y un padding-bottom: 30px para agregar espacio tanto arriba como abajo.
Alineamos el texto al centro.
`.main-exchange-container` {
` width: 100%`;
` height`: auto;
` padding-top: 80px`;
` padding-bottom: 30px`;
` text-align`: center;
}
### .main-exchange-container–title
Llamamos al contenedor de la sección de texto y le damos un ancho del 90%. Limitamos el ancho mínimos a 288px y un máximo de 900px.
Añadimos un margin: 0 auto, para que, pese a no ocupar el 100% del ancho, esté siempre en el centro.
`.main-exchange-container--title` {
` width: 90%`;
` min-width: 288px`;
` max-width: 900px`;
` margin: 0` auto;
}
Hasta ahora visualizaremos esto en el navegador:

¡Muy bien! Nos falta agregar la imagen de fondo y unos estilos a las etiquetas de texto antes de pasar con la sección de las tablas.
<section class="main-exchange-container">
<div class="backgroundImg"></div>
<div class="main-exchange-container--title">
<h2>Visibilizamos todas las tazas de cambio.</h2>
<p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
</div>
<section class="main-tables-container">
<div></div>
</section>
</section>
Hey! La sección de recursos me ha ayudado bastante para ubicarme rápidamente en la clase. Primero veo la clase completa, después voy y aplico lo aprendido y de guía uso los recursos que están ahí gracias a “José Miguel Veintimilla” un heroe sin capa. Recomiendo ver más seguido esa sección para no ver el video dos veces buscando lo que ya está escrito
<!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"><!-- FONTS --><linkrel="preconnect"href="https://fonts.googleapis.com"><linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin><linkhref="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap"rel="stylesheet"><!-- CSS --><linkrel="stylesheet"href="./css/style.css"><title>Web App | Mobile First</title></head><body><header><imgsrc="./assets/img/logo.svg"alt=""><divclass="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><aclass="header--button"href="">conoce nuestros planes <span></span></a></div></header><main><sectionclass="main-exchange-container"><divclass="backgroundImg"></div><divclass="main-exchange-container--title"><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, laborum.</p></div><!-- TABLE --><sectionclass="main-tables-container"><divclass=""></div></section></section><section></section><section></section><section></section></main><footer></footer></body></html>
Solo por si alguién se preguntó por que no utilizo en el bloque .main-exchange-container–title la propiedad de justify-self es porque el bloque tiene un display block propio de la etiqueta section.
Lo aclaro porque yo quise utilizarlo saludos.
buenas solo una critica constructiva seria bueno que indique por que coloca width:90% y otros padding de donde saca la referencia y por que lo razona asi eso ayudaria mucho en el aprendizaje y saber el motivo
Lo que aprendí de esta clase, además de practicar fue que el layout o el diseño con tablas se aplica al diseño de mensajes en los correos electronicos y hasta ahora (tiempo de este video) es la única manera de hacerlo. Ya iré aprendiendo más para poder comprobar y mejorar este concepto que tengo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?