Maquetación y estilos de la información del usuario

Archivo Information.jsx

import React from 'react';
import '../styles/components/Information.css';

const Information = () => {
  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Información de contacto:</h2>
        </div>
        <div className="Information-form">
          <form action="">
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo Electronico" name="email" />
            <input type="text" placeholder="Direccion" name="addres" />
            <input type="text" placeholder="apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="country" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">Regresar</div>
          <div className="Information-next">pagar</div>
        </div>
      </div>
      <div className="Information-sidebar">
        <h3>Pedido:</h3>
        <div className="Information-item">
          <div className="Information-element">
            <h4>ITEM Name</h4>
            <span>$10</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Information;

Lo recomendable al trabajar con formularios es utilizar la etiqueta label para indicar la información que se solicita en los campos de texto. Esto es útil principalmente útil para las personas que utilizan lectores de pantalla.

import React from 'react';
import '../styles/components/Information.css';

const Information = () => (
  <div className="Information">
    <div className="Information-content">
      <div className="Information-head">
        <h2>Contact Information:</h2>
      </div>
      <div className="Information-form">
        <form action="">
          <label htmlFor="name">
            Full Name
            <input type="text" placeholder="Full Name" name="name" id="name" />
          </label>
          <label htmlFor="email">
            Email
            <input type="text" placeholder="Email" name="email" id="email" />
          </label>
          <label htmlFor="address">
            Address
            <input
              type="text"
              placeholder="Address"
              name="address"
              id="address"
            />
          </label>
          <label htmlFor="apto">
            APT
            <input type="text" placeholder="APT" name="apto" id="apto" />
          </label>
          <label htmlFor="country">
            Country
            <input
              type="text"
              placeholder="Country"
              name="country"
              id="country"
            />
          </label>
          <label htmlFor="state">
            State
            <input type="text" placeholder="State" name="state" id="state" />
          </label>
          <label htmlFor="city">
            City
            <input type="text" placeholder="City" name="city" id="city" />
          </label>
          <label htmlFor="cp">
            Postal Code
            <input type="text" placeholder="Postal Code" name="cp" id="cp" />
          </label>
          <label htmlFor="phone">
            Phone
            <input type="text" placeholder="Prone" name="phone" id="phone" />
          </label>
        </form>
      </div>
      <div className="Information-buttons">
        <div className="Information-back">Go Back</div>
        <div className="Information-next">Pay</div>
      </div>
    </div>
    <div className="Information-sidebar">
      <h3>Order Summary:</h3>
      <div className="Information-item">
        <div className="Information-element">
          <h4>ITEM Name</h4>
          <span>$10</span>
        </div>
      </div>
    </div>
  </div>
);

export default Information;

No se supone que es mala practica usar tanto <div /> y no <section />, <main /> o <nav />?

En mi caso agradezco mucho que la aplicación se este desarrollando desde 0, a pesar que el curso en si no sea de maquetación.
.
Al hacerlo de esta manera, es más fácil entender cada uno de los componentes por lo cual en el momento en que lleguemos a los hooks no tendremos que estar pensando en donde esta cada cosa y a qué hace referencia.
.
Personalmente, prefiero más este tipo de cursos a aquellos en donde descargas un repositorio y empezas a trabajar desde ahí.

Recuerda: “Programas para humanos, no para máquinas”…aunque parece obvio, no está demás recordarlo…

Para el que lo este haciendo en ingles:

import React from 'react';

import '../styles/components/Information.css';

const Information = () => {
  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Contact Information:</h2>
        </div>

        <div className="Information-form">
          <form action="">
            <input type="text" placeholder="Name" name="name" />
            <input type="text" placeholder="Email" name="email" />
            <input type="text" placeholder="Country" name="country" />
            <input type="text" placeholder="City" name="city" />
            <input type="text" placeholder="State" name="state" />
            <input type="text" placeholder="Adress" name="adress" />
            <input type="text" placeholder="Apartament" name="apto" />
            <input type="text" placeholder="Postal code" name="cp" />
            <input type="text" placeholder="Phone Number" name="phone" />
          </form>
        </div>

        <div className="Information-buttons">
          <div className="Information-back">
            Go Back
          </div>

          <div className="Information-next">
            Continue and Pay
          </div>
        </div>
      </div>

      <div className="information-Sidebar">
        <h3>Order:</h3>

        <div className="Information-item">
          <div className="Information-element">
            <h4>ITEM Name</h4>
            <span>$10</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Information;

Queria aportar sobre los nombres de los componentes.
.
Al ver terminado el componente que estamos trabajando, que es el formulario que la persona llena con los datos de compra, y a un costado tiene el resumen de lo que esta comprando. esto es lo que se llama Checkout.
.
De tal manera que el componente que vimos en la clase anterior tiene mas sentido llamarlo shoppingCart, Order o algo asi.

Es normal tantas etiquetas “Div” en los templates.?

Me parece que pudieron ahorrarse estas clases, entregando el boilerplate de estas secciones ya realizado de una mejor forma (estoy suponiendo que la calidad la están sacrificando por el tiempo). Esta forma de hacer HTML no es “profesional” tal como lo dice el título del curso.
 
El sólo hecho de no tener labels y depender de placeholders significa que no estamos implementando correctamente WCAG.

Hola, les dejo el avance de mi proyecto, hecho en Nextjs con Styled Components:

https://github.com/danyel117/platzi-conf-store

Commit clase 25.

Html semantico

export default function Information() {
  return (
    <main className="Information">
      <section className="Information-content">
        <article className="Information-head">
          <h2>Contact Information</h2>
        </article>
        <article className="Information-form">
          <form action="">
            <input type="text" placeholder='Complete name' name='name' />
            <input type="text" placeholder='Email' name='email' />
            <input type="text" placeholder='Address' name='address' />
            <input type="text" placeholder='Apto.' name='apto' />
            <input type="text" placeholder='City' name='City' />
            <input type="text" placeholder='Country' name='country' />
            <input type="text" placeholder='State' name='state' />
            <input type="text" placeholder='Postal Code' name='cp' />
            <input type="text" placeholder='Phone' name='phone' />
          </form>

        </article>
        <article className="Information-buttons">
        <div className="Information-back">
          Go back
        </div>
        <div className="Information-next">
          Next
        </div>
        </article>
      </section>
      <aside className='Information-sidebar'>
      <h1>Pedido</h1>
      <section className="Information-item">
        <article className="Information-element">
          <h4>Item Name</h4>
          <span>$10</span>
        </article>
      </section>
      </aside>
    </main>
  )
}

Me encanta que Oscar siempre está recordandonos las buenas practicas al escribir código

  <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Informacion de contacto</h2>
        </div>
        <div className="Information-from">
          <form action="">
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo electronico" name="email" />
            <input type="text" placeholder="Direccion" name="address" />
            <input type="text" placeholder="Apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="counrty" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">Regresar</div>
          <div className="Information-next">Pagar</div>
        </div>
      </div>
      <div className="Information-sidebar ">
        <h3>Pedido:</h3>
        <div className="Information-item">
          <div className="Information-element">
            <h4>
              Item name <spam>10 $</spam>
            </h4>
          </div>
        </div>
      </div>
    </div>

Information .css

.Information {
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  grid-row-gap: 1.5em;
  display: grid;
  margin: 0 0 4em 0;
}
.Information-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Information-sidebar {
  margin: 10px 0 0 0;
}
.Information-back {
  margin: 10px 0 0 0;
}
.Information-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Information-item .fas {
  margin: 0 0 0 10px;
  color: rgba(0,0,0,0.4);
  cursor: pointer;
}
.Information-item button {
  background-color: transparent;
  border: none;
  outline: none;
}
.Information-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.Information-element h4 {
  margin: 0;
}
h2 {
  margin: 0 0 8px 0;
  padding: 0;
}
h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  padding: 0;
}
input {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  color: rgba(0,0,0,0.75);
  display: inline-block;
  font-feature-settings: "tnum";
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  list-style: none;
  margin: 0 0 8px 0;
  outline: 0;
  padding: 4px 12px;
  width: 100%;
  box-sizing: border-box;
}
.Information-buttons {
  margin: 10px 0 0 ;
}
.Information button {
  box-shadow: inset 0px 1px 0px 0px #bee2f9;
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    background-color: #63b8ee;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    cursor: pointer;
    color: #14396a;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #7cacde;
    width: 100%;
    display: block;
    outline: none;
}

Genial!

n