Estilos base de tabla de monedas

La hice con grid, me gustaria feedback de ser necesario. Nunca pares de aprender.

.main-tables-container-title {
    text-align: left;
    margin: 15px;
    font-size: 1.8rem;
    color: #FF9536;
}
.main-tables-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 300px));
    grid-template-rows: 50px 120px 65px;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #b5b0ac;
    list-style: none;
}
.main-tables-container li {
    height: 40px;
    min-width: 100px;
    margin: 1px;
    padding: 12px;
    border-radius: 5%;
    text-align: left;
    background-color: var(--just-white);
}
.main-tables-container-coins,
.main-tables-container-coins-value {
    grid-row: 2 / 2;
}
.main-tables-container .main-tables-container-coins-value {
    color: #757575;
    font-size: 1.4rem;
    font-weight: 400;
}
.main-tables-container-coins-value li:nth-child(1) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(2) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-up.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(3) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(4) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li {
    display: flex;
    justify-content: space-between;
}
.main-tables-container-subtitle {
    grid-row: 4;
    grid-column: 1 / 3;
    padding: 8px;
    border-radius: 8%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.9rem;
    background-color: var(--soft-orange);
    color: var(--warm-black);
}
.main-tables-container-subtitle::after {
    content: "19 Octubre 23:10";
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

Nadie le presto atencion a porque le puso 15px en margin bottom :v…yo si …anteriormente se puso 30 px en margin bottom con .main-exchange-container p …asi que se afecta al padre .main-echange-container y lo heredan sus crias

Comparto mi tabla, la hice con puro grid. Me costó mucho pero se logró! 🥵🥵

HTML

<section class="main-exchange-container__table-container">
                <h3>Monedas</h3>
                <div>
                    <p>Bitcoin</p>
                </div>
                <div>
                    <p>$ 1.96 <span class="trending-down"></span></p>
                </div>
                <div>
                    <p>Ethereum</p>
                </div>
                <div>
                    <p>$ 0.07 <span class="trending-up"></span></p>
                </div>
                <div>
                    <p>Ripple</p>
                </div>
                <div>
                    <p>$ 2.15 <span class="trending-down"></span></p>
                </div>
                <div>
                    <p>Stellar</p>
                </div>
                <div>
                    <p>$ 4.96 <span class="trending-down"></span></p>
                </div>
                <div class="main-exchange-table__footer">
                    <p><span>Actualizado:</span> 19 Julio 23:45</p>
                </div>
            </section>

CSS

.main-exchange-container__table-container {
    display: grid;
    grid-template-columns: 100px 100px;
    justify-content: center;
    gap: 10px;
}

.main-exchange-container__table-container h3 {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: var(--bitcoin-orange);
    grid-column: 1 / -1;
    text-align: left;
}

.main-exchange-container__table-container div:nth-child(even) {
    margin-top: 10px;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    color: #b5b0ac;
    line-height: 1.9rem;
    text-align: left;
}

.main-exchange-container__table-container div:nth-child(odd) {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    line-height: 1.6rem;
    text-align: center;
    color: #757575;
    text-align: center;
}

.main-exchange-container__table-container .trending-down {
    display: inline-block;
    background-image: url('../icons/trending-down.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 8px;
    margin-left: 10px;
}

.main-exchange-container__table-container .trending-up {
    display: inline-block;
    background-image: url('../icons/trending-up.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 8px;
    margin-left: 10px;
}

.main-exchange-container .main-exchange-container__table-container .main-exchange-table__footer {
    margin: 16px 0;
    grid-column: 1 / -1;
    width: 90%;
    height: 31px;
    padding: 8px;
    text-align: center;
    justify-self: center;
    background-color: var(--soft-orange);
    border-radius: 8px;
}

.main-exchange-table__footer p {
	font-size: 1.2rem;
	font-weight: 400;
    line-height: 1.45em;
    color: var(--warm-black);
}

.main-exchange-table__footer span {
    font-weight: 700;
    text-align: center; 
}

Cada día se aprende más. Este curso es el mejor complemento del Curso definitivo de HTML y CSS

Yo no creo que no es lo mejor usar CSS Grid en este caso, porque si tu vas a la documentación oficial de MDN puedes ver que el proposito de las tablas es presentar datos (aunque en la era de los dinosaurios 🦕 se usaba para el diseño) y CSS Grid para el diseño.

También una razón para usar tablas en ESTE CASO (aclaro esto porque en muchos casos es mejor CSS Grid) es porque si intentaste hacerlo en css grid pudiste notar es es mas difícil con las tablas

Lo que quiero decir es que debes evaluar en que caso es mejor usar una que otra, y no porque una tecnología este de moda no quiere decir que sea mejor en TODOS los aspectos.

Aporte para la clase, estoy tomando nota con comentarios a los largo de todo el codigo, como los libros de programacion en c, como el Deitel

Aquí les dejo mi código que hice con CSS Grid, creo que lo único que me falló es que al hacer más grande la pantalla no se escala, sin embargo creo que se puede resolver. Espero sus opiniones, muchas gracias 😄
HTML

CSS

DOM

Pues ahí vamos:

No sé si solo yo me di cuenta pero en el Title Diego deja el font family del padre que sería inter pero el archivo de Figma dice DM sans… Vieron eso?

Buenas tardes, ofrezco otra opción con grid layout para quine quiera guiarse.

Sección de html

                <div class="item title"><h3>Monedas</h3></div>
                <div class="item content">
                    <div class="subitem text">Bitcoin</div>
                    <div class="subitem value">$ 1.96</div>
                    <div class="subitem text">Ethereum</div>
                    <div class="subitem value">$ 0.07</div>
                    <div class="subitem text">Ripple</div>
                    <div class="subitem value">$ 2.15</div>
                    <div class="subitem text">Stellar</div>
                    <div class="subitem value">$ 4.96</div>
                </div>
                <div class="item button"><a href=""></a></div>
                <div class="item date">Actualizado<span>: 19 Julio 23:45</span></div>
            </section>

Sección CSS

.main-table-container{
    display: grid;
    grid-template: 35px 159px 31px/197px 38px;
    grid-template-areas:"titulo titulo"
                        "contenido boton"
                        "fecha fecha" ;
    margin-left:calc(50% - 99px);;
}
.item.title{
    grid-area:titulo;
    align-self: center;
    justify-self: start;
    margin-left: 12px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: #FF9536;
}
.item.content{
    grid-area: contenido;
    display: grid;
    grid-template: repeat(4,1fr) / 101px 95px;
    border-radius: 10px;
    overflow: hidden;
    gap: 1px;
}
.item.content .subitem{
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 12px;
    background-color: var(--white-color);
}
.item.content .text{
    font-family: "inter",sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: #B5B0AC;
}
.item.content .value{
    font-family: "Inter",sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #757575;
    background-image: url("./assets/imgs/flecha-abajo.svg");
    background-repeat: no-repeat;
    background-position: 80%;
}
.item.content .value:nth-of-type(4){
    background-image: url("./assets/imgs/flecha-arriba.svg");
}
.item.button{
    grid-area: boton;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("./assets/icons/Vector.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.item.button a{
    display: block;
    width: 50%;
    height:80%;
}
.item.date{
    grid-area: fecha;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--soft-orange);
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 5px;
    width: 173px;
    height: 31px;
    font-family: "Inter",sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.9rem;
    color: var(--warm-black);

}
.item.date span{
    line-height: 1.4rem;
    font-weight: 500;
}```

Como se llama la extensión en VS Code que utiliza el profesor para cuando hace uso del color en las variables y muestre su color asi en rectángulo.

Hola, comentarles que inicié mi Github pages aplicando lo que aprendo de la Escuela de Desarrollo Web ⭐️

Les comparto el link, agradecería mucho su feedback positivo y así seguir inmersandome más de esta bonita carrera. 😍
No duden en agregar issues de creerlo conveniente con sus aportes.💚

https://yajayra18.github.io/
Por ahora estoy avanzando con los issues de mobile 📱

![](

.main-currency-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: 'Inter', sans-serif;
}

.main-currency-table .currency-table--title{
    margin-bottom: 15px;
    font: size 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: left;
}

.currency-table--conteiner{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;

}

.currency-table--conteiner table{
    width: 100%;
    height: 100%;
}

.currency-table--conteiner td{
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
    background-color: var(--just-white);
}

Les comparto una forma que hice diferente para hacer los bordes de la tabla. Lo hice para practicar lo que vi en el primer curso

.currency__table-container table tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.currency__table-container table tr:first-child td:last-child {
    border-radius: 0 8px 0 0;
}

.currency__table-container table tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.currency__table-container table tr:last-child td:first-child{
    border-radius: 0 0 0 8px;
}

.currency__table-container table tr:last-child td:last-child{
    border-radius: 0 0 8px 0;
}

me sale así la dimensión de la tabla

Yo lo hice de esta forma. Espero su feedback

        <section class="tables-container">
          <h3 class="tables-container__title">Coins</h3>
          <div class="tables-container__table">
            <p class="coin-name">Bicoin</p>
            <p class="coin-value">1.96</p>
            <p class="coin-name">Ethereum</p>
            <p class="coin-value">0.07</p>
            <p class="coin-name">Ripple</p>
            <p class="coin-value">2.15</p>
            <p class="coin-name">Stellar</p>
            <p class="coin-value">4.96</p>
          </div>
          <div class="currency">
            <p class="currency__date"><strong>Updated</strong> 19 July 23:45</p>
          </div>
        </section>

CSS

.tables-container {
  height: auto;
  &__table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 250px;
    height: 159px;
    margin: 0 auto;
    margin-top: 1.2rem;
    background-color: var(--just-white);
  }
  &__title {
    width: 250px;
    height: 20px;
    text-align: left;
    padding-left: 1rem;
    margin: 0 auto;
    margin-top: 3.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--bitcoin-orange);
  }
}
.coin-name,
.coin-value {
  padding: 1rem;
  border: 1px solid var(--off-white);
  font-size: 1.6rem;
  font-family: var(--inter-font);
}
.coin-name {
  color: var(--text-gray);
  font-weight: 500;
  text-align: left;
  padding-left: 1rem;
}
.coin-value {
  position: relative;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dark-gray);
  &::before {
    content: '$ ';
    margin-right: 0.5rem;
  }
  &:nth-child(even)::after {
    content: '';
    width: 20px;
    height: 10px;
    padding: 1rem;
    margin-left: 0.7rem;
  }
  &:nth-child(2)::after {
    background: url(../icons/trending-down.svg) center no-repeat;
  }
  &:nth-child(4)::after {
    background: url(../icons/trending-up.svg) center no-repeat;
  }
  &:nth-child(6)::after {
    background: url(../icons/trending-down.svg) center no-repeat;
  }
  &:nth-child(8)::after {
    background: url(../icons/trending-up.svg) center no-repeat;
  }
}
.currency {
  font-family: var(--inter-font);
  width: 220px;
  height: 40px;
  border-radius: 0.5rem;
  margin: 0 auto;
  margin-top: 2.5rem;
  background-color: var(--soft-orange);
  &__date {
    // font-weight: 700;
    padding: 1rem;
    font-size: 1.6rem;
    text-align: center;
  }
}

Resultado

Gente, me gustaria saber cual es la diferencia de poner los iconos asi:

<code> 
 <div class="main__table--money"> 
                    <li>Bitcoin</li>
                    <li>Eltherum</li>
                    <li>Ripple</li>
                    <li>Stellar</li>
                    <li class="numbers">$ 1.96<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                    <li class="numbers">$ 0.06<span><img src="./assets/icons/trending-up.svg" alt="alto"></span></li>
                    <li class="numbers">$ 2.15<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                    <li class="numbers">$ 4.96<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                </div>

a como lo esta poniendo el profesor que es directamente en el CSS.
Gracias.

Que extensión permite ver los cuadros de colores encima de los textos en el código css?

Genial, después de este curso tomare el de CSS Grid para no utilizar tablas.

dure un rato pero logré hacer esa tabla al 100 con grid y flex acá les comparto el código, si me pueden dar retro de mejores prácticas estaría super!

HTML

<section class="exchange-tablesContainer">
   <div class="tableContainer" >
      <h3>Monedas</h3>
      <section class="grid-tableContainer">
         <div>
            <h4>Bitcoin</h4>
         </div>
         <div>
            <h5>$ 1.96<span></span></h5>
         </div>
         <div>
            <h4>Ethereum</h4>
         </div>
         <div>
            <h5>$ 0.07<span></span></h5>
         </div>
         <div>
            <h4>Ripple</h4>
         </div>
         <div>
            <h5>$ 2.15<span></span></h5>
         </div>
         <div>
            <h4>Stellar</h4>
         </div>
         <div>
            <h5>$ 4.96<span></span></h5>
         </div>
      </section>
      <div class="table-updateDate">
         <p> <span>Actualizado:</span> 19 Julio 23:45 </p>
      </div>
   </div>
</section>

CSS

/*Tablas*/

.exchange-tablesContainer {
	margin-top: 40px;
	width: 65%;
	align-self: center;
	min-width: 110px;
	max-width: 520px;
	text-align: left;
}

.tableContainer {
	display: flex;
	flex-direction: column;
}

.tableContainer h3 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 2.3rem;
	color: #ff9536;
	margin-left: 12px;
	margin-bottom: 12px;
}

.grid-tableContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	grid-gap: 1.5px;
}

.grid-tableContainer div {
	padding: 10px 12px;
	display: flex;
	background-color: var(--just-white);
}

.grid-tableContainer div:nth-child(1) {
	border-top-left-radius: 4px;
}

.grid-tableContainer div:nth-child(2) {
	border-top-right-radius: 4px;
}

.grid-tableContainer div:nth-child(7) {
	border-bottom-left-radius: 4px;
}

.grid-tableContainer div:nth-child(8) {
	border-bottom-right-radius: 4px;
}

.grid-tableContainer div:nth-child(2n) {
	justify-content: center;
}

.grid-tableContainer div h4 {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.9rem;
	color: #b5b0ac;
}

.grid-tableContainer div h5 {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7rem;
	color: #757575;
}

.grid-tableContainer div h5 span {
	display: inline-block;
	margin-left: 10.5px;
	width: 12px;
	height: 8px;
	background-image: url('../assets/icons/trending-down.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #F5450D;
}

.grid-tableContainer div:nth-child(4) h5 span {
	display: inline-block;
	margin-left: 10.5px;
	width: 12px;
	height: 8px;
	background-image: url('../assets/icons/trending-up.svg') !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #F5450D;
}

.table-updateDate {
	background-color: var(--soft-orange);
	color: var(--warm-black);
	padding: 8px;
	text-align: center;
	margin-top: 16px;
	border-radius: 8px;
	width: 90%;
	align-self: center;
}

.table-updateDate p {
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.45em;
}

.table-updateDate span {
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.45em;
}

y así se ve

Luego de mucho esfuerzo pude implementar la tabla en Grid y posicionar la palabra “Monedas” y estilar la fecha:

Mi código CSS para lograrlo:

.currency-table--container {
    display: grid;
    grid-template-columns: 101px 95px;
    gap: 1px;
    justify-content: center;
}
.main-currency-table .currency-table--title {
    color: #FF9536;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.344rem;
    position: relative;
    top: 25px;
    right: 45px;
}
.main-currency-table .currency-table--date p {
    margin-top: 30px;
    color: var(--black);
    background-color: var(--soft-orange);
    display: inline-block;
    padding: 8px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 8px;
}
.currency-table-box {
    background-color: var(--just-white);
    color: #B5B0AC;
    font-size: 1.6rem;
    line-height: 1.936rem;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 8px 8px 8px 0px;
}
.table-box-number {
    font-size: 1.4rem;
    color: #757575;
    font-weight: 400;
    line-height: 1.694rem;
}
.currency-table-box span {
    display: inline-block;
    width: 12px;
    height: 12px;
}
.trending_down span{
    background-image: url('./assets/icons/trending-down.svg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    left: 4px;
}
.trending_up span{
    background-image: url('./assets/icons/trending-up.svg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    left: 4px;
}

Lo hice con grid tambien 😄
HTML

                <div class="main-currency-table">
                    <p class="currency-table--title">
                        Monedas
                    </p>
                    <div class="currency-table--container">
                       <div class="currency-table-cells"> <p class="cripname">Bitcoin</p> </div>
                       <div class="currency-table-cells"><p class="price">$1.52 <span class="down"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Etherum</p></div>
                       <div class="currency-table-cells"><p class="price">$1.71 <span class="up"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Ripple</p></div>
                       <div class="currency-table-cells"><p class="price">$0.92 <span class="down"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Stellar</p></div>
                       <div class="currency-table-cells"><p class="price">$2.16 <span class="down"></span></p></div>
                    </div>
                </div> ```
CSS 

.currency-table–title{
margin-top: 48px;
margin-bottom: 12px;
font-family: DM Sans;
color: #FF9536;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.34rem;

}

.currency-table–container{
width: 100%;
display: grid;
grid-template: repeat(4,50px)/ 35% 30%;
gap: 1px;
align-content: center;
justify-content: center;

}
.currency-table–container .currency-table-cells{
background-color: white;
}
.currency-table-cells:nth-of-type(1){
border-radius: 8px 0px 0px 0px;

}
.currency-table-cells:nth-of-type(2){
border-radius: 0px 8px 0px 0px;;
}
.currency-table-cells:nth-of-type(8){
border-radius: 0px 0px 8px 0px;
}
.currency-table-cells:nth-of-type(7){
border-radius: 0px 0px 0px 8px;
}
.cripname{
font-family: Inter;
font-size: 1.6rem;
font-weight: 500;
color: #B5B0AC;
margin: 15px 15px;
}
.price{
font-family: Inter;
font-size: 1.4rem;
font-weight: 400;
color: #757575;
text-align: center;
margin: 15px 15px;

}

.price .down{
display: inline-block;
width: 11px;
height: 6px;
background-image: url(’./assets/icons/trending-down.svg’);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 10px;
}
.price .up{
display: inline-block;
width: 11px;
height: 6px;
background-image: url(’./assets/icons/trending-up.svg’);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 10px;
}

![Screenshot_1.png](https://static.platzi.com/media/user_upload/Screenshot_1-fc269a9f-bd91-4ccb-a28c-0ed2c7ff3e22.jpg)

Mi tabla con CSS Grid:

      <section class="main--tables-container">
        <h3>Monedas</h3>
        <div class="main--currency-table">
          <span class="right-arrow"></span>
          <div class="row">
            <div class="title">Bitcoin</div>
            <div class="price price-down">$ 1.96 <span></span></div>
          </div>
          <div class="row">
            <div class="title">Ethereum</div>
            <div class="price price-up">$ 0.07<span></span></div>
          </div>
          <div class="row">
            <div class="title">Ripple</div>
            <div class="price price-down">$ 2.15<span></span></div>
          </div>
          <div class="row">
            <div class="title">Stellar</div>
            <div class="price price-down">$ 4.96<span></span></div>
          </div>
        </div>
        <div class="main--table-update">
          <p><strong>Actualizado:</strong> 19 de Julio 1943</p>
        </div>
      </section>```

.main–tables-container {
font-family: ‘Inter’, sans-serif;
}

.main–tables-container h3 {
text-align: left;
padding-left: 12px;
margin-bottom: 12px;
font-size: 1.8rem;
font-family: ‘DM Sans’, sans-serif;
color: var(–bitcoin-orange);
}

.main–tables-container .main–currency-table .row {
display: grid;
grid-template-columns: 101px 95px 1fr;
grid-template-rows: 39px;
border-bottom: 1px solid var(–off-white);
}
.main–currency-table {
position: relative;
background-color: var(–just-white);
border-radius: 8px;
}

.main–currency-table .right-arrow {
position: absolute;
top: calc(50% - 5px);
right: -40px;
display: inline-block;
width: 13px;
height: 8px;
background-image: url(’/assets/icons/arrow-down.svg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transform: rotate(-90deg);
}

.main–currency-table .row:last-child {
border-bottom: none;
}

.main–currency-table .title {
display: flex;
align-items: center;
padding-left: 12px;
border-right: 1px solid var(–off-white);
font-size: 1.6rem;
color: #b5b0ac;
}

.main–currency-table .price {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 12px;
font-size: 1.4rem;
font-weight: 300;
color: #757575;
}

.main–currency-table .price span {
display: inline-block;
margin-right: 15px;
width: 12px;
height: 12px;
}

.main–currency-table .price-down span {
background-image: url(’/assets/icons/trending-down.svg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.main–currency-table .price-up span {
background-image: url(’/assets/icons/trending-up.svg’);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.main–tables-container .main–table-update {
padding: 8px;
margin: 15px 15px 64px 15px;
border-radius: 8px;
border: none;
background-color: var(–soft-orange);
}

Les comparto la forma como hice la tabla
Resultado

HTML

<div class="main-commission-table">
<h3 class="commission-table__title">Comisones</h3>
<div class="commission-table__container">
<ul class="table-right">
       	<li>Bitrade</li>
        <li>Bitpreco</li>
        <li>Novadax</li>
        <li>Coinext</li>
</ul>
<ul class="table-left">
        <li>$ 12.96 </li>
         <li>$ 13.07 </li>
         <li>$ 13.15 </li>
         <li>$ 14.96 </li>
</ul>
</div>
<div class="commission-table__date">
       <p><b>Actualizado:</b> 19 Julio 23:48</p>
</div>
</div>

CSS

/* Estilos a la Tabla */
.main-commission-table {
    width: 200px;
    margin: 0 auto;
    margin-top: 40px;
}

.main-commission-table h3 {
    padding: 0 12px;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

.commission-table__container {
    display: grid;
    grid-template-columns: 100px 88px;
}

.commission-table__container li {
    padding: 10px 12px;
    list-style-type: none;
}

.commission-table__container .table-right {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: #B5B0AC;
}

.commission-table__container .table-left {
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color: #757575;
}

.commission-table__date {
    width: 180px;
    padding: 8px;
    background: var(--soft-blue);
    border-radius: 8px;
    /* Texto */
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--black);
}

HTML

 <div class="box">
                <div class="box-item criptoTitle">
                    <h3>Monedas</h3>
                </div>
                <div class="box-item criptoMoney">
                    <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Bitcoin
                    </p>
                    <!-- price -->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 1.96
                        <span></span>
                    </p>
                    <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Ethereum
                    </p>
                     <!-- price -->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 0.07
                        <span class="up-row"></span>
                    </p>
                     <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Ripple
                    </p>
                     <!--price-->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 2.15
                        <span></span>
                    </p>
                    <!--name-->
                    <p class="criptoMoney-item criptoMoney-name">
                        Stellar
                    </p>
                    <!--price-->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 4.96
                        <span></span>
                    </p>
                </div>
                <div class="box-item criptoRow">
                    <span></span>
                </div>
            </div>

            <div class="ctnFirst-date">
                <h3><strong>Actualizado:</strong></h3>
                <p>19 Julio 23:45</p>
            </div>

CSS

.box{
    display:grid;
    grid-template: 20% 70% /repeat(2,40%) 20%;
    grid-template-areas: "header header ."
                         "main main aside"
                         "main main aside"
                         "main main aside"
                         "main main aside";
    gap: 5px;
    width: 80%;
    min-width: 23.5rem;
    max-width: 50rem;
    height: 19.4rem;
    margin: auto;
    margin-right: 1rem;
    margin-top: 4.7rem;
    margin-bottom: 1.6rem;
}
.box-item{
    width:100%;
    height:100%
}
.box-item:nth-child(1)
{
    grid-area: header;
}
.criptoTitle{
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3rem;
    color:#FF9536;
}
.box-item:nth-child(2)
{
    grid-area: main;
    display:grid;
    grid-template: repeat(4,minmax(3.9rem,80%)) /repeat(2,minmax(10.1rem,80%));
    place-items: center;
    gap: 1px;
    border-radius:12px;
    background: #E5E5E5;
}
.criptoMoney-item{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    width: 100%;
    height:100%;

    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    letter-spacing: -0.02em;

    color: #B5B0AC;
    background: #FFFFFF;
}
.criptoMoney-name{
    justify-content: flex-start;
    padding-left: 2rem;
}
.criptoMoney-value{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7rem;
    letter-spacing: -0.02em;

    color: #757575;
}
.criptoMoney-item:nth-child(1){
    border-top-left-radius: 7px;
}
.criptoMoney-item:nth-child(2){
    border-top-right-radius: 7px;
}
.criptoMoney-item:nth-child(7){
    border-bottom-left-radius: 7px;
}
.criptoMoney-item:nth-child(8){
    border-bottom-right-radius: 7px;
}
.criptoMoney-item span {
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../public/assets/icons/trending-down.svg");
    background-repeat: no-repeat;
}
.criptoMoney-item .up-row{
    background-image: url("../public/assets/icons/trending-up.svg");
}
.box-item:nth-child(3)
{
    grid-area: aside;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-item:nth-child(3) span {
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../public/assets/icons/right-arrow.svg");
    background-repeat: no-repeat;
}
.ctnFirst-date{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 18.3rem;
    height:3.1rem;
    margin:auto;


   font-family: 'Inter', sans-serif;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1.5rem;


    border-radius: 8px;
    background: #FFE9D4;
}

Aquí les dejo un grid generator:

https://grid.layoutit.com/

Muy bien este curso. Pero se nota la experiencia del profesor. Es mas complicado para un principiante de hacer eso jejeje.

Lo hice con grid, tengo que mejorar el código, pero al menos logre el desafio y me hizo dar cuenta que necesito mas practica con Grid.

Les comparto mi tabla hecha con grid-layout me falta aun agregarle los iconos pero es trabajo honesto.

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

Demoré ratísimo sacarla con CSS Grid layout, pero lo logré. Les dejo un screenshot, tanto del maquetado como del CSS. Además, el código persé:

HTML screenshot:

CSS screenshot:

HTML code:

            <section class="main-table-container">
                <p>Monedas</p>
                <div class="table__wrapper">
                    <div class="table-coins">
                        <div class="table__row--coins">
                            <div class="row--coin">Bitcoin</div>
                            <div class="row--coin">Ethereum</div>
                            <div class="row--coin">Ripple</div>
                            <div class="row--coin">Stellar</div>
                        </div>
                        <div class="table__row--price">
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 1.96
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 0.07
                                    <span class="row__price--indicator price-up"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 2.17
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 4.96
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span class="table--arrow"></span>
                </div>
                <span class="table--update">
                    <strong>Actualizado: </strong> 19 julio 23:45
                </span>
            </section>

CSS code:

.main-table-container p {
  text-align: left;
  margin-left: 1rem;
  color: var(--bitcoin-orange);
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.3rem;
}

.table__wrapper {
  display: grid;
  grid-template-columns: 1fr 15px;
}

.table__wrapper .table--arrow {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  padding-left: 3rem;
  background-image: url("./assets/icons/arrow_right_black.png");
  background-position: center;
  background-repeat: no-repeat;
}

.table-coins {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  background-color: var(--just-white);
  border-radius: 5px;
  font-family: var(--font-inter);
  font-style: normal;
}

.table-coins .table__row--coins {
  text-align: left;
  color: #b5b0ac;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.936rem;
  letter-spacing: -0.02em;
}

.table__row--coins .row--coin {
  padding: 1rem;
}

.table-coins .table__row--price {
  align-self: end;
  justify-self: left;
  text-align: center;
  color: #757575;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: -0.02em;
}

.table__row--price .row--price {
  padding: 1.1rem 0;
}

.row--price .row__price--indicator {
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.price-down {
  background-image: url("./assets/icons/trending_down.png");
}

.price-up {
  background-image: url("./assets/icons/trending_up.png");
}

.table--update {
  display: inline-block;
  width: 85%;
  height: 25px;
  margin-top: 2rem;
  margin-left: -1.5rem;
  border-radius: 5px;
  color: var(--warm-black-1);
  background-color: var(--soft-orange);
  font-size: 12px;
  line-height: 15px;
  /* font-weight: 700;
   */
}

.table--update strong {
  display: inline-block;
  margin-top: 4px;
}

Y así luce:

Por si alguien lo notó, el profesor no aplica exactamente todos los tamaños (width, height, line–height, margin) que se ven del proyecto en figma.

VI QUE VARIOS LO HICIERON DE FORMA DISTINTA, AQUI LES DEJO MI FORMA
…
HTML

<div class="section-top--container-price_coins">
                <p class="section-coins">Monedas</p>
                <article>
                    <img src="./images/2-main/icons/flechita2.svg" alt="">
                    <div class="container-price_coins">
                        <div class="crypto">
                            <p>Bitcoin</p>
                            <p>$ 1.96</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Ethereum</p>
                            <p>$ 0.07</p>
                            <img src="./images/2-main/icons/price_drop.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Ripple</p>
                            <p>$ 2.15</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Stellar</p>
                            <p>$ 4.96</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        
                    </div>
                    <img src="./images/2-main/icons/flechita.svg" alt="">
                </article>
                <p class="section-date"><span>Actualizado:</span> 19 Julio 23:45</p>
            </div

CSS

main .section-top--container-price_coins > .section-coins {
    margin-bottom: 12px;
    margin-left: 48px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bitcoin-orange);
}
main .section-top--container-price_coins article {
    display: grid;
    grid-template-columns: auto 3fr auto;
    justify-items: center;
    align-items: center;
    margin-bottom: 15px;
}
article .container-price_coins {
    margin: 0 40px;
}
article .container-price_coins .crypto {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
article .container-price_coins .crypto p:nth-child(1) {
    width: 80px;
    margin-right: 20px;
    color: #B5B0AC;
    font-size: 1.6rem;
}
article .container-price_coins .crypto p:nth-child(2) {
    width: 50px;
    margin-right: 10px;
    color: var(--grey);
    font-size: 1.4rem;
}
main .section-top--container-price_coins .section-date {
    /* border: 1px solid black; */
    background-color: var(--soft-orange);
    width: 173px;
    height: 31px;
    margin: 0 auto;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
main .section-top--container-price_coins .section-date span {
    font-weight: bold;
}

Mi tabla con display Grid

.main-table--currency-container {
    width: 70%;
    min-width: 235px;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-inter), sans-serif;
}
.currency-table--title h3{
    text-align: left;
    margin-bottom: 1.5rem;
    margin-left: 1.2rem;
    font-family: var(--font-DM);
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: var(--size-700);
    color: var(--bitcoin-orange);
}
.currency-table {
    background: var(--just-white);
    margin: 0 auto;
    border-radius: .8rem;
    /* Estilos grid*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 4rem;
    /* Visualez*/
    box-shadow: 0 0 .5rem rgb(226, 226, 226);
}
.currency-table .table__item-bitcoin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1.2rem;
    /*Estilos visuales*/
    font-size: 1.6rem;
    font-weight: var(--size-500);
    color: #B5B0AC;
}
.currency-table .table__item-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.5rem;
    /*Estilos visuales*/
    font-size: 1.4rem;
    font-weight: var(--size-400);
    color: var(--gray);
}
.table__item-value .icon-trading-down {
    display: inline-block;
    width: 1.2rem;
    height: 1.5rem;
    background-image: url('./assets/icons/trending-down.svg');
}
.table__item-value .icon-trading-up {
    display: inline-block;
    width: 1.2rem;
    height: 1.5rem;
    background-image: url('./assets/icons/trending-up.svg');
}
---------------------------------------------------------------------------
<section class="main-tables">
          <div class="main-table--currency-container">
            <div class="currency-table--title">
              <h3>Monedas</h3>
            </div>
            <div class="currency-table">
              <div class="table__item-bitcoin">Bitcoin</div>
              <div class="table__item-value">$1.96 <span class="icon-trading-down"</span> </div>
              <div class="table__item-bitcoin">Ethereum</div>
              <div class="table__item-value">$0.07 <span class="icon-trading-up"></span> </div>
              <div class="table__item-bitcoin">Ripple</div>
              <div class="table__item-value">$2.15 <span class="icon-trading-down"></span> </div>
              <div class="table__item-bitcoin">Stellar</div>
              <div class="table__item-value">$4.96 <span class="icon-trading-down"></span> </div>
            </div>
            <div class="currency-table--date">
              <p><b>Actualizado</b>: 19 julio 23:45</p>
            </div>
          </div>
        </section>

.main-currency-table{
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}

.main-currency-table .currency-table--title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--bitcoin-orange);
    text-align: left;
}

.currency-table-container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 350px;
    margin: 0 auto;
}

.currency-table-container table{
    width: 100%;
    height: 100%;
}

.currency-table-container td{
    width: 50%;
    font-size: 1.6rem;
    line-height: 2.3rem;
    font-weight: 500;
    color: var(--grey);
    background-color: var(--just-white);
}

Para centrar elementos de manera mas limpia y concisa, pueden usar “margin-inline: auto”. De esa manera evitan tener que especificar medidas para top y bottom usando unicamente “margin”.

Despacio pero seguro

tantas clases de estilos me marea! =(

buen video amigo

Good class. Everything was clear.

👌

Completado con grid 😄

div .monedas{
    font-size:1.8rem;
    line-height: 2rem;
    font-weight: 700; 
    color: #FF9536;
    margin: 0 0 15px 20%;
    text-align: start;
}

.fecha-container{
    border-radius: 8px;
    background-color: var(--soft-orange);
    margin: 0 20%;
    height: 31px;
}

.fecha-p{
    font-size:1.2rem;
    font-family:'Inter', sans-serif;
    padding: 6px 0;
}

.main-tables-container{
    display: grid;
    grid-column-gap:2px; 
    grid-row-gap: 2px;
    width: 60%;
    grid-template-columns: [x0] 1fr [x1] 1fr [x2];
    grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3] 1fr [y4];
    font-family:'Inter', sans-serif;
    font-size:1.6rem ;
    line-height: 3rem;
    margin: 0 20% 20px 20%;
    
    border-radius: 8px;
    text-align: left;
}

.item1{
    grid-column: x0 / x1;
    grid-row: y0 / y1 ;
    padding-left: 10px;
    background-color: #fff;
}
.item2{
    grid-column: x0/ x1 ;
    grid-row: y1 / y2 ; 
    padding-left: 10px;
    background-color: #fff;
}
.item3{
    grid-column: x0 / x1 ;
    grid-row: y2 / y3 ;
    padding-left: 10px;
    background-color: #fff;
}
.item4{
    grid-column: x0 / x1 ;
    grid-row: y3 / y4 ;
    padding-left: 10px;
    background-color: #fff;
}
.item5{
    grid-column: x1 / x2 ;
    grid-row: y0 / y1 ;
    padding-left: 10px;
    background-color: #fff;
}
.item6{
    grid-column: x1 / x2 ;
    grid-row: y1 / y2 ;
    padding-left: 10px;
    background-color: #fff;
}
.item7{
    grid-column: x1 / x2 ;
    grid-row: y2 / y3 ;
    padding-left: 10px;
    background-color: #fff;
}
.item8{
    grid-column: x1 / x2 ;
    grid-row: y3 / y4 ;
    padding-left: 10px;
    background-color: #fff;
}

.main-tables-container .span-d{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(./assets/icons/trending-down.svg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.main-tables-container .span-u{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(./assets/icons/trending-up.svg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}```

Disculpen compañeros saben por que a mi no me sale con ese pequeño margen de separación entre cada elemento de la tabla?

les dejo mi codigo:
html

<section class="main-tables-container">
          <div class="main-currency-table">
            <p class="currency-table--title">Monedas</p>
            <section class="grid-currency-table">
              <div class="coin"><h4>Bitcoin</h4></div>
              <div class="mount"><h5>$ 1.96</h5></div>
              <div class="coin"><h4>Ethereum</h4></div>
              <div class="mount"><h5>$ 0.07</h5></div>
              <div class="coin"><h4>Ripple</h4></div>
              <div class="mount"><h5>$ 2.15</h5></div>
              <div class="coin"><h4>Stellar</h4></div>
              <div class="mount"><h5>$ 4.96</h5></div>
            </section>
            <div class="grid-currency-table-date">
              <p><b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
          </div>
        </section> ```

**css**

.main-currency-table {
width: 70%;
min-width: 235px;
max-width: 500px;
height: 360px;
margin: 0 auto;
font-family: ‘Inter’, sans-serif;
}

.main-currency-table .currency-table–title{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.3rem;
color: var(–bitcoin-orange);
}

.grid-currency-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
border-radius: 10px;
margin-bottom: 20px;
background-color: var(–just-white);

}

.grid-currency-table .coin {
justify-self: flex-start;
padding-left: 10px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(–grey);
}

.grid-currency-table-date {
font-size: 1.6rem;
} ```