Estructura HTML del Header: Logos, Encabezados y Botones

Clase 8 de 32 • Curso de Responsive Design: Maquetación Mobile First

Clase anteriorSiguiente clase

Resumen

¿Qué estructura tendremos que crear en nuestro header? Vamos a analizar el diseño en Figma para determinar las etiquetas que necesitamos en el archivo HTML del proyecto en curso.

Cómo hacer la maquetación en Figma

Lo primero es crear una etiqueta img dentro del header para el logo.
Luego un contenedor div que contenga:

  • h1 para el título principal
  • p para el párrafo
  • Una etiqueta a para el call to action, que contenga también una etiqueta span para el pequeño ícono a su lado.

Tendríamos un código así:

    <header>
        <img src="" alt="">
        <div>
            <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 href="">Conoce nuestros planes <span></span></a>
        </div>
    </header>

El siguiente paso es aplicar clases para llamarlas desde CSS y empezar a aplicar estilos.

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