No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Estructura base de la sección de intercambio

12/32
Recursos

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.

12.jpg

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">
            <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>

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:
ejemplo para estructura base de la sección

¡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.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).

Aportes 77

Preguntas 39

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

Es mi impresión, o no se está aplicando correctamente la metodología BEM en el curso?

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.

Recomiendo agregarle al main, min-width: 320px
para que no se haga mas pequeño después de esta dimension, y quede igual al header !

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) .

Hola, una pregunta. ¿Por qué se usa una etiqueta de div en lugar de una de figure como contenedor de la imagen?

Aquí mi código para la estructura HTML de esta Primera Sección 😄

<section class="main__exchange__container">
                <div class="background__imageContainer"></div>
                <div class="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>
                <section class="main__tables__container">
                    <div></div>
                </section>
</section>

No olviden darle seguimiento al proyecto con git y github, para seguir mejorando en su carrera, si no han hecho el curso, se los recomiendo mucho

la metodología BEM hace tener nombres muy grandes en el archivo css.

Esta extensión de VS Code es para autocompletar los selectores HTML a CSS: HTML to CSS autocompletion

Hola, logre hacerlo con Grid, aquí les dejo el código:

index.html

 <section class="main-exchange-container">
        <div class="backgroundImg"></div>
        <div class="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>
        <section class="main-tables-container">
          <h3 class="main-tables-container__titulo--tabla">Monedas</h3>
          <span class="main-tables-container__titulo--moneda">Bitcoin</span>
          <div class="main-tables-container__precio"><b>$</b> 1.96</div>
          <div class="main-tables-container__grafico">
            <img src="./assets/icons/trending-down.svg" />
          </div>
          <span class="main-tables-container__titulo--moneda">Ethereum</span>
          <div class="main-tables-container__precio"><b>$</b> 0.07</div>
          <div class="main-tables-container__grafico">
            <img src="./assets/icons/trending-up.svg" />
          </div>
          <span class="main-tables-container__titulo--moneda">Ripple</span>
          <div class="main-tables-container__precio"><b>$</b> 2.15</div>
          <div class="main-tables-container__grafico">
            <img src="./assets/icons/trending-down.svg" />
          </div>
          <span class="main-tables-container__titulo--moneda">Stellar</span>
          <div class="main-tables-container__precio"><b>$</b> 4.96</div>
          <div class="main-tables-container__grafico">
            <img src="./assets/icons/trending-down.svg" />
          </div>
          <span class="main-tables-container__actualizacion"
            ><b>Actualizado:</b> 19 Julio 23:45</span
          >
        </section> 

css

.main-tables-container {
  padding-top: 30px;
  width: 250px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  margin: 0 auto;
  column-gap: 18px;
  row-gap: 18px;
  font-size: 1.8rem;
}

.main-tables-container__titulo--tabla {
  color: var(--bitcoin-orange);
  grid-column: 1/4;
}

.main-tables-container__titulo--moneda {
  grid-column: 1/2;
}

.main-tables-container__actualizacion {
  grid-column: 1/4;
  color: var(--black);
  background-color: var(--soft-orange);
  padding: 2px;
}

Si se dieron cuenta que desde Figma pueden copiar los textos directamente?

Muchas veces la voz del Profe suena robotica 😮

Este es sin duda uno de los cursos mas importantes de todo Platzi.

Aqui mi codigo en css de esta clase

main{
    width: 100%;
    min-width: 320px;
    height: auto;
    background-color: var(--off-white);
}
.main--exchange-container{
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}
.main--exange-container-title{
    width: 90%;
    min-width: 238px;
    max-width: 900px;
    margin: 0 auto;
}```

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

En figma, pueden dar clic a texto y a la derecha en el css ya pueden copiarlo.

Pueden copiar y pegar el contenido en figma asi no tenemos que escribirlo 😃

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


Vamos poco a poco ^^

Ingresando div*2+section>div y luego presionando tab se obtiene:

<div></div>
<div></div>
<section>
    <div></div>
</section>  

Podemos colocar en la clase “main-exchange-container”:

padding: 80px 0 30px;

😉

hola! cual sería la utilidad de poner el header como position:relative ? gracias

Arquitectura HTML de la primera sección:

<section class="main-exchange-container">
	<div class="imgBackground"></div>
	<div class="main-exchange-container__title">
		<h2></h2>
		<p></p>
	</div>
	<section class="main-table-container">
		<div>
		</div>
	</section>
</section>

Un par de recomendaciones:
.

  1. 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.
    .
  2. 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.

Asi queda el codigo luego de este video

main{
  min-width: 320px;
  width: 100%;
  height: auto; /* auto se utiliza cuando queremos que el contenido defina la altura del elemento padre */
  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;
}

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ón en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
            </div>```

😄

me gustaria saber por que no usa la etiqueta figure que vimos en el curso de html para las imagenes y usar menos tag div…

Por los aportes estoy dudando entre si poner o no el min-width al main 😅

📢📢 AVISO IMPORTANTE ❗❗

les recomiendo usar grid para esto, es menos codigo a mi punto de vista y mas comodo.

super

El tamaño mínimo ya no es 320px
tenemos que empezar a considerar dispositivos como el Galaxy Fold que tiene un mínimo de 280px o de 280px

Bueno, gracias a los Galaxy Fold, el tamano minimo seria de 280px

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

saludos y gracias

¿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


antes


Ahora, aplicando

body{
    min-width: 300px
}


hay alguna diferencia entre usar un div con un background de una imagen y usar la etiqueta img?, o sólo es el modo de trabajo?

=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//

Se puede usar en width:100%, a su ves width:100vw ???

=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//=//

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.

Cada vez me está gustando más este curso 😄

hola lo estoy haciendo con sas, y se me ocurre que se puede re utilisar el tittle-container del header para esta seccion
Un tick para centrar la imagen: .backgroundImg { position:relative;  width: 70%; left: 15%; right: 15%; height: 195px; background-image: url('./assets/img/Bitcoin.svg');}

Otro atajo para hacerlo mas rapido es:

section.main-exchange-container>(div.backgroundImg)+(div.main-exchange-container--title>(h2{Visibilizamos todas las tasas de cambio.})+(p{Traemos informaci&oacute;n en tiempo real de las casas de cambio y las monedas m&aacute;s importantes del mundo}))+(section.main-tables-container)+(div)

le damos Tab y listo…

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. ![12.jpg](https://static.platzi.com/media/articlases/Images/12%281%29.jpg) 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: ![ejemplo para estructura base de la sección](https://static.platzi.com/media/articlases/Images/image%28172%29.png) ¡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

Yo lo hice asi

Y me quedo asi…

min-width: 288px
en main-exchange-container–title por que
es el 90% de 320px (ancho para mobile durante el diseño)

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;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="./css/style.css">
    <title>Web App | Mobile First</title>
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">
        <div class="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>
            <a class="header--button" href="">conoce nuestros planes <span></span></a>
        </div>
    </header>
    <main>
        <section class="main-exchange-container">
            <div class="backgroundImg"></div>
            <div class="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 -->
            <section class="main-tables-container">
                <div class=""></div>
            </section>
        </section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

Recomiendo agregar comentarios con:

/* (escríbe aquí) */

Escribe esto y explica algo siempre que añadas algo, esto servirá para que cuando te pierdas, puedas ubicarte más rápido.

El proceso del proyecto de este curso me encanta.

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.

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

.main-exchange-container{
    width: 100%;
    min-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;
}

¿Todavía es recomendable manejar los Intecambios con tablas?

Que buen curso

Con este curso estoy aprendiendo muchas cosas

Muy buena la clase!

buen video diego vamos con todo ene ste curso

Buena ✌

soy yo o asta este momento no hemeos visto nada de responsividad ?

Good class and good explanation.

Aquí en una línea para maquetar la seccion

div.backgroundImg+div.main-exchange-container--title+section.main-tables-container>div

Al parecer si estaba bien cuando creai que estaba usando mal Bem.

¿Por qué poner la imagen en un div con background? ?¿si se puede poner una img no?

Interesante