Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Maquetado de la sección principal

10/17
Recursos

Aportes 134

Preguntas 25

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Este curso debería estar entre los primeros, porque aparte de que el profesor explica bien, lo hace todo super detallado como para que nadie se llegue a confundir. ⚡⚡⚡

El sonido de cada inicio de clase es un poco adictivo ❤

Cuando debo colocar una imagen por url y cuando debo de poner la etiqueta img? las dos son igual de rapidas? cual es la diferencia? y por rapidas me refiero a que podriamos tener una imagen en el proyecto en la carpeta assets y colocarla por background-image: url

Personalmente usaba otras etiquetas para el maquetado, como el section para el main y muchos div. Me doy cuenta que el código queda más limpio de la manera que hace el profesor.
Excelente clase!

Estas son las ventajas más importantes que nos brinda la escritura de un marcado semántico

Código más claro y fácil de mantener
Puede que te hayas preguntado para que usar ciertas etiquetas, como una etiqueta <nav> para contener tu barra de navegación, si esto sería igual a no usarla, o a usar una etiqueta <div>. O puede que lo hagas solo porque es recomendado.

Es cierto que muchas de estas etiquetas no representaran ningún cambio en la distribución del contenido o en la forma en la que se visualiza el texto, pero esta práctica permite que nuestro código tenga mayor sentido, y se acerque más a un idioma natural, donde cada elemento utilice las palabras adecuadas.

Ayuda a tu sitio a ser accesible
La accesibilidad es una parte del desarrollo web que está adquiriendo notoriedad y relevancia en los últimos años, por el creciente uso del internet, y lo indispensable que se ha hecho para todas las personas, incluyendo a personas con diversidad funcional.

Mejora tu posicionamiento SEO
Tu posicionamiento SEO puede verse afectado, positiva o negativamente de acuerdo a diversos factores, desde la forma en la que está redactado el contenido, el uso de palabras claves, un diseño responsivo o que el sitio sea accesible.

Wao🚀 creo que me enamore del HTML semantico, Platzi tiene algún curso para aprender HTML semantico? Creo que dejare de lado tantos divs y empezare a usar las etiquetas como se debe.

como buena practica he escuchado que la etiqueta main solo se puede usar una vez

Les doy un trucazo que estoy aplicando:
Para todos los cursos uso git, cada vez que inicia la clase me voy a una branch que es para el ejercicio y luego regreso a master para hacerlo como hace el profe, luego las comparo con git history en vscode y creo que asi voy aprendiendo bastante y dandome cuenta de mis errores 😄

Oo siempre lo he hecho con section. Ahora usaré main.

Diego de Granda es uno de los mejores Profesores en Platzi, Ojala haga mas cursos…

Lo intenté, pero estoy lleno de divs. Hay q empezar de nuevo… Todo por las buenas prácticas.

Estamos para aprender y ayudar!
Te dejo el siguiente enlace para que revises con mayor detalle sobre la etiqueta span: <span> </span>

Los profesores que explican detalladamente, paso a paso sin que el video dure tanto, son los mejores.

Me gusta mucho la forma en que enseña Diego. Excelente, gracias!!!

❗️❗️ Main: Sólo puede ser usado una vez por cada página.❗️❗️

Cuándo usar main, section, article, header, footer y aside en el HTML

Deberias explicar un poco más el tema de cómo llamamos imágenes desde cualquier parte de la internet a través de la url para aquellos que aun son nuevos.

Aquí observamos que una página sin estilos, no es nada bonita.
Muy bien explicado …

Buen profesor, denle un aumento.

antes no utilizaba Main :c

Codigo Limpio, ordenado y el curso bien explicado, considero que #Platzi tendria que invertirle mas en publicidad a este curso en especial.

Si te quedaste atrás en el código puedes ayudarte con el repositorio de este curso 😃
https://github.com/degranda/Proyecto-Google-Clone

Encontre una pagina que nos sirve mucho para este curso:
https://htmlcheatsheet.com/
https://htmlcheatsheet.com/css/
por lo menos a mi me ha servido.
¡Gracias!

Algo que me encanta de HTML y CSS es que puedes crear ilusiones, por ejemplo, al ver la página de Google y ver que hay botones dentro del input te preguntas: “¿Cómo le hicieron para meter botones dentro del input?” Y al ver cosas como estas te das cuenta que es solo una ilusion, realmente los íconos y el input están separados, y esto se logra entender más cuando estás usando CSS.

super genial esta claseeee, la amo 😄 😄

Esto quiere decir que cada pantalla de algún proyecto debe tener un main?

Por más que ya domines HTML y CSS “supuestamente”, siempre habrá algo nuevo que aprender en estos cursos. Gracias @degranda

Increíble como se puede llegar a analizar la estructura y estilo de una página solo con verla! 😄

No me quedó del todo claro la etiqueta span.

Diferencias entre contenedores

<div> Sirve de contenedor para cualquier elemento, No tiene sentido semántico.

<header> Nos permite establecer el encabezado de nuestra página web.

<nav> Define un conjunto de enlaces de navegación.

<section> Es una sección en un documento que puede contener un grupo de contenido.

<article> Define un articulo.

<aside> Define un área como contenido independiente al principal como sidebar.

<footer> Nos permite establecer el pie de página de un documento, puede existir más de uno en un sitio web.

Muy interesante, yo lo que hice fue generar el input y darle esa forma y luego los íconos de la lupa y el micrófono los posicioné mediante left right top bottom usando relative. Como siempre hay más de una manera de hacer las cosas:

Lo malo de Platzi es que sus videos son de 720p y 1080 p. Debido a mi conexión de internet el proceso de carga del video es muy paupérrima. Deberían dar opción para videos de 360p-

¡Excelente clase!
El maquetado del Main esta quedando muy bueno 😃

Metodología BEM
Sitio web: BEM CHEAT SHEET

En este sitio web podrás encontrar nombres alternativos o usar las plantillas para cada bloque que utilicemos en este proyecto o el resto de nuestros proyecto como desarrolladores web.

¡Espero te sirva este aporte!

Aún no me queda muy claro el uso del div, pero entiendo que se puede usar cuando hay un elemento compuesto o hay varios elementos, porque así es más fácil manipularlos. ¿No?

Excelente este curso! a no desanimarse!!

Etiqueta “Main” = Contenido principal.

buen curso de maquetado y estilisado, otros no detallan ni explican bien como el profe de granda

Se esta poniendo muy complejo como reconoce o sabe como acomodar multiples etiquetas

Hola, Mundo. Hola platzi day

muy bien explicado buen curso

gracias es mucho más sencillo cuando lo explican de una manera tan detallada.

Si el profe diego de por si ya explicaba pausadamente las clases, este es aún mas que va explicando paso a paso que para los nuevos nos sirve bastante.

ALGO QUE NO DIJO Y A MI ME AYUDÓ MUCHO LUEGO DE INVESTIGAR:
DIV: PARA ARMAR BLOQUES -CAJAS- SEPARADOS.

SPAN: PARA ARMAR DIVISIONES EN LA MISMA LINEA…

Adjunto el siguiente link que les ayuda a medir la especificidad de su CSS. En resumen, mientras mas picos tenga su grafico menos especifico es su CSS, un CSS “optimo” o “especifico” muestra una lineal que se mantiene estable en su recorrido. (Para poder utilizar esta herramienta copian su hoja de estilos (CSS) completa y la pegan en el cuadro de texto de la pagina). pueden utilizar los atajos de teclado ctrl + a para seleccionar todo, ctrl + c para copiar y ctrl + v para pegar.

Adjunto el link: https://jonassebastianohlsson.com/specificity-graph/

Sólo escribo para decir que de 17 lecciones llevo 10 y me parece absolutamente increíble la forma de explicar, incluso demasiado rápido pero para eso es un vídeo y existe el botón de pause. Perfecto y al grano, así sí.

Hola, alguien que me oriente sobre la diferencia entre la etiqueta <button> y la estructura <input type=“button”>
GRACIAS!!

he hecho cursos basicos de HTML montonbes de veces y siempre aprendo algo nuevo. Por eso nunca desprecio un curso por basico que sea. aun que sea para ojearlo un poco por encima. Hoy aprendí a usar la etiqueta main que yo nunca la había usado. Hasta ahora mis paginas han sido dentro del body: Header, Nav, Section, con Articles dentro y Footer. Ahora podré abandonar los Div genericos con las etiquetas container.

Me encantó esta parte creo que además de la programación el diseño es otro arte magnifico! Dejo un marcador donde explica sobre la creación de la parte de búsqueda! ❤️

Me gustó la maquetación de la barra de búsqueda ♥

Aqui es donde yo les pregunto, es buena practica darle background-color a la etiqueta body?

Me agrada ful la forma en que maqueta Diego, de cierta forma es muy similar a la mía o mejor dicho maqueto muy similar a él, el detalle con que explica es muy bueno.

<main>
        <section class="main-logo">
            <img src="" alt="">
        </section>
        <section class="main-input">
            <div class="main-input-container">
                <span class="search-icon">
                </span>
                <input type="text">
                <a class="micro-icon" href=""></a>
            </div>
        </section>
        <section class="main-buttons">
            <div>
                <button>Buscar con Google</button>
            </div>
            <div>
                <button>Me siento con suerte</button>
            </div>
        </section>
    </main>```

Conocia main, pero no habia dado cuenta de lo importante que es saber las etiquetas de HTML5 para cada cosa, puesto que ayuda mucho al SEO.

Hasta este punto me doy cuenta que muchas veces le pongo clases a todas las etiquetas y después me doy cuenta que no son necesarias pero creía que todas tienen que tener una 😅

que buena manera de explicar

Me a gustado mucho lo de las Url con CSS.

Es muy importante estructurar de manera correcta el sito, esto ayuda a agilizar la aplicacion de CSS

Por que usar div si ya el section funciona como contenedor padre?

Me siento con suerte =)

estupendo 😄 sigamos con más

muy bien explicas

En este enlace encontrarán más info del tag MAIN🔥🔥🔥

Excelente explicación, ahora nuestro proyecto tiene una buena estructura para desarrollar la parte principal de la página web.

Nunca me imaginé qué, el main de la página de Google fuera algo compleja de maquetar!. jejejeje

interesante como maquetar la sección del main, a darle estilos!!

Muy buen curso! Como se dice por aqui: “La practica hace el maestro” A practicar se ha dicho!

Me hubiera gustado hacer este curso antes, la maquetación con HTMLsemántico es súper importante pra no tener edificultades con el manjeo de los estilos más adelante

para agregar el icono en el titulo de la pagina y que el clone se vea mucho mas profesional les recomiendo usar la etiqueta

    <link rel="shortcut icon" href="https://img.icons8.com/color/48/000000/google-logo.png" type="img">

en el head del documento html se vera asi

Cada vez que publicas un aporte o preguntan te dan un punto. Así que vengo aquí a por mi puntito. Un saludo.

Adaptando lo explicado por el profesor al modo oscuro de Google.

¡Me encanta este profe! Explica muy bien. ¡Gracias!

Inicialmente había trabajado el main con divs pero ahora lo voy a cambiar a section para que sea semánticamente correcto.

Antes:

<div class="container">
            <figure class="logo">
                <img src="./pics/logo.png" alt="logo">
            </figure>
            <div class="search">
                <div class="search_items">
                    <img class="lupa" src="./pics/lupa.png">
                    <form>
                        <input type="search" name="search">
                    </form>
                    <img class="micro" src="./pics/microfono.png">
                </div>
            </div>
            <div class="botones">
                <button class="buscar">Google Search</button>
                <button class="suerte">I'm feeling lucky</button>
            </div>
        </div>

Puedes comentar tu html asi:

<!-- Aquí puedes escribir tu comentario -->

Y en css de esta forma:

/* Aquí puedes escribir tu comentario */

EXCELENTE CLASE

GOOOOD!!!

Para mi Degranda es mi profesor favorito!

  <main>
    <section class="main-logo">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
    </section>
    <section class="main-input">
      <div class="main-input-container">
        <span class="search-icon">
          </span>
        <input type="text">
        <a class="micro-icon" href=""></a>
      </div>
    </section>
    <section class="main-buttons">
      <div>
        <button>Buscar con Google</button>
      </div>
      <div>
        <button>Me siento con suerte</button>
      </div>
    </section>
  </main>```

muchas gracias, te entiendo a la perfeccion, muy detallado y super entendible.

excelente a darle con todo

Excelente explicación.

Que buen avance vamos 😃

ohh, no sabía de la etiqueta main, en el curso de desarrollo web online con Leonidas no vi esta etiqueta

En el primer ejercicio yo utilice una etiqueta section en lugar de main. Pero eso es una mala practica ya que usar main ayuda mucho en el posicionamiento SEO

Genial, tampoco conocia la etiqueta main

No conocía la etiqueta main 😄

El siguiente link nos enseña como y cuando usar img en HTML VS backgroud-imagen en CSS:
https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image/1469139#1469139

Opino que deberías comentar más el código para que sea más fácil de leer, me pasa que entre tanta etiqueta me pierdo un poco en las explicaciones y secciones porque estoy recién aprendiendo.

excelente forma de explicar.

Es muy común ver la etiqueta aside al lado de la etiqueta main esta suele ser usada para colocar anuncios de publicidad o un menú de navegación

<main>
	...
</main>
<aside>
	...
</aside>

usar las etiquetas correctas nos ayudaran a un mejor posicionamiento en la web.

Conocia la etiqueta main, pero no la utilizaba.! Buena practica

La etiqueta <main> contiene lo principal del proyecto,todo lo que este abajo de la etiqueta <header> y arriba de <footer>.

<main> es el padre de <section> y <article>.

no conocía la etiqueta <main>, que bien se siente aprender cosas nuevas y que puedas aplicarlas rápidamente en tus proyectos.

Todo lo que esté debajo del header y antes del footer, es la etiqueta main.

Gran profesor

Excelente clase.

Excelente profesor!!!

Va tomando forma

muy bien por estos avances