Maquetación del header

para agilizar el trabajo al momento de poner los textos de figma, con darle click al texto al lado derecho tenemos la opción de copy en content.

solo un H1 por pagina, eso no sabia, buen dato.

Para los que estamos trabajando con Git y GitHub, y aun tienen dudas acerca de la mala practica de subir archivos binarios al repo, les dejo este enlace que me ayudo a entender cuando NUNCA subirlos, y cuando no hay problema en subirlos.

–

En este caso concluyo que no hay problema, ya que nuestros SVG pesan NADA y ademas no es un proyecto que vamos a estar cambiando mucho en el futuro. Lo que podemos hacer es crear un archivo .gitignore ignorando todos los tipos de imagenes, asi git los ignora y no los commiteamos, pero si podemos subirlos al repo remoto directamente desde GitHub.

• Si estoy equivocado en algo por favor hacermelo saber. 😄

Para ahorrar tiempo, les dejo un ejemplo de lo que hace Emmet en VSCode y el link para más trucos

<header>
        img>div>h1+p+a>span
</header>

Aqui tienen todo y la imagen en un URL para los que estemos usando GitHub! ❤️

    <header>
        <img src="https://i.postimg.cc/5yRRYxRd/logotipo-vertical.png" 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>
        </div>
        <a href="">Conoce Nuestros Planes <span>i</span></a>
    </header>```

Para una mejor semantica, la etiqueta “img”, debe ir dentro de una etiqueta “figure” asi.

<figure>
  <img src=" " alt=" "/>
</figure>

Composición de header:

1. Logotipo
2. Encabezado
3. Párrafo
4. Botón flotante

Código de header:

        <img src="" alt="" />
        <div>
            <h1></h1>
            <p></p>
            <a href=""><span></span></a>
        </div>

Para que solo copien y peguen el texto del (h1, p y a) del header 😃.

• Titulo principal: La próxima revolución en el intercambio de criptomonedas.
• Parrafo: Batatabit te ayuda a navegar entre los diferentes precios y tendencias.
• Botón: Conoce nuestros planes

En el inspector de elementos de figma, se puede copiar el texto.

• Las etiquetas ancla <a href=''></a>, nos permiten utilizar su atributo href para navegar entre las diferentes secciones.
• Las etiquetas <span></span>, es una etiqueta comodin que podemos utilizarla para incluir iconos.
• Las páginas web solo deben tener un <h1> por temas de SEO.

Por buenas prácticas cualquier página, pantalla solo puede tener un h1 por temas de SEO.
El ícono lo meteremos dentro de la etiqueta span, es una etiqueta comodín que nos ayuda justo para ese tipo de textos o iconos que incluso van adentro de una etiqueta.

 <a href="">Conoce Nuestros Planes <span></span></a>```

Mauqetacion del Header

 <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>i</span></a>
        </div>
        
    </header>

Como buena practica se recomienda comentar el código, esto facilita la comunicación con el equipo ya que tus compañeros no perderán el tiempo preguntándote para la funciona del código.

A la hora de Maquetar una de las manera que tenemos, es separar el contenido en etiquetas contenedoras.

La imagen va junto al texto? ¿Tienen relación? se puede tomar esto como una de las tantas maneras para poder dar forma al código.

Esto ayudará cuando se apliquen estilos para hacer un display, por ejemplo con flexbox, es necesario aplicarle a un padre el display flex para que sus hijos se vuelvan item flexibles, y poder manipularlos con facilidad.

Estos son mis estilos
Yo envolví mi <img/> en un <figure></figure> creen que sea correcto eso?

Código

<header>
            <figure>
                <img src="./assets/icons/logo.svg" alt="Logotipo"/>
            </figure>
            <div class="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 href="#">conoce nuestros planes <span>i</span></a>
            </div>
        </header>

Por si a alguien le interesa la creación del header mediante Emmet 😁
header>img+div>h1+p+a

El header por los momentos…

Cuando tenemos iconos en los CTA es recomendable utilizar la etiqueta SPAN / Esta etiqueta nos ayudan con teste tipo de textos o iconos que se encuentran dentro de otra etiqueta.

Los textos se pueden copiar y pegar directamente de Figma (Para ahorrar tiempo si gustan!!!).

No sabía lo de la etiqueta de <span></span> para iconos, excelente.

¿Cuando debo usar la etiqueta a para convertirla en un botón y cuando usar la etiqueta botton?

no entiendo, por que no usan las entidades html para los acentos…

asi quedaria el texto:

<h1>La pr&oacute;xima revoluci&oacute;n en el intercambio de criptomonedas.</h1>

Por buenas practicas, cualquier pagina solo puede tener un H1. Por cuestiones de SEO.-

Jaja que increible es ver como se empiezan a aplicar las cosas que aprendes

Terminé la landing page sin ver el curso xd

📢📢 AVISO IMPORTANTE ❗❗

• Mira el siguiente tutorial para acceder al resumen visual de la clase 📕

vamos bien vamos bien hasta ahorita todo bien

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

Notion - Maquetación del header

No es mucho, pero es trabajo honesto, comparto mis apuntes en Notion de esta clase, con parte del avance de mi proyecto.

CODIGO HTML (HEADER)

<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>i</span></a>
        </div>
</header>

Les comparto el código de la clase:

    <header class="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>i</span></a>
        </div>
    </header>

Recuerden los atajos de EMMET

img+div>h1+p+a>span

En este caso el img es la primera línea, al darle el + le indicamos que lo que sigue va en otra línea de código, el div contiene los elementos (h1+p+a) al darle el símbolo > y a la misma vez (h1+p+a) vienen en 3 líneas de código diferentes porque tienen el +, el span viene contenido porque el a tiene el símbolo Z ✌😎

Para la flecha que va hacia abajo pueden usar font awesome (la CDN la saque de aquí):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<i class="fas fa-chevron-down"></i>

Notas de la clase

• Slide 1
  

  

• Slide 2
  

  

• Slide 3
  

  

• Slide 4
  

  

• Slide 5
  

  

• Slide 6
  

  

• Slide 7
  

  

genial

Un mega atajo para hacer todo de un jalon, seria así:

img+(div>h1{La próxima revolución en el intercambio de las criptomonedas}+p{Batatabit te ayuda a navegar entre los diferentes precios y tendencias}+a>{Conoce nuestros planes}+span>{i})

despues le das tab y listo…

No sabia el dato de solo un H1 por pagina, gracias por comentarlo.

<!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"> 
    <title>Web App | Mobile First</title>
</head>
<body>
    <header>
        <img src="" alt="">
        <div>
            <h1>la proxima revolucion 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>i</span> </a>
        </div>
    </header>
    <main>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

maquetando la extructura header

Muy buen curso! El profesor nos muestra las buenas practicas de un proyecto de una empresa real! Un valor agregado! Gracias Platzi y gracias Diego De Granda

Super, Es una manera práctica de ver y hacer… lomejor

Comparto la estructura del header

   <header>
        <img src="" alt="">
        <div>
            <h1>La proxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias.</p>
            <a href="">Conce nuestros planes <span>i</span></a>
        </div>
    </header>

Creo que sería buena idea incluir en el diseño en Figma la parte de prototipado con el enlace del botón a la parte del diseño que tiene que mostrar.
https://www.figma.com/community/file/919353340841181691

Si estas utilizando el preprocesador Pug, para colocar el span dentro de la etiqueta a:

a(href="") Conoce nuestros planes #[span i] 

maquetando nuestro header

<header>
        <img src="" alt="">
        <div>
            <h1>La próxima revolución en el intercambio de criptomonedas.</h1>
            <p>Batatabit te ayuda a navergar entre los diferentes precios y tendencias.</p>
            <a href="">Conoce nuestros planes <span>i</span></a>
        </div>
    </header>

NOTA IMPORTANTE: cada página debe tener sólo un H1 por temas de SEO.

Good class. Header is ok!

Alguien sabe en donde esta el repo del curso?

https://www.youtube.com/watch?v=1AcZ5uQGATs
Aquí un video que explica lo que es SEO (Search Engine Optimization)

👌

¿la etiqueta img no deberia estar dentro del contenedor figure por buenas practicas?