Crear la pantalla de blog

El procedimiento iterativo que hemos hecho y que tiene como principio Degranda es:

1.identificar o maquetar mentalmente
2.estructurar
3.agregar clases
4.implementar estilos

Una vez terminado… repetir hasta finalizar nuestro proyecto.
Me parece una muy buena guía para comenzar una maquetación. ✅✅✅

Nuevamente un maquetado vacío, es poco práctico todo lo que hace, entiendo que quiere “imaginarse” la estructura, pero armarla sin siquiera ver ningún texto dummy es usar demasiada imaginación, sin contar que luego borra y arma de nuevo porque tenía más sentido crearlo y luego copiar y pegar algunas cosas. Nuevamente pisa sus propias ideas, no hay clase en el body, capaz que no es neceasario, pero decís una cosa y luego no la aplicás. No respetás el diseño, la imagen es mayor de ancho que el contenido del article. Muchos bugs en la arquitectura, pero por suerte usás un alt en la imagen por ser “buenas práticas”…

La forma nativa para no repetir el código es usando webcompoents: https://www.webcomponents.org/

Estoy mas que seguro que no fue el mismo codigo, pero creo que me quedo bastante aceptable

Todo se logra con un buen nombramiento. Importante!

Interesante esa manera de trabajar, efectivamente, yo también primero visualizo mentalmente, luego hago el “esqueleto” o layout general, y luego agrego clases y empiezo a trabajar de afuera hacia adentro, ya sea usando Grid o Flex (o ambos).

creo que voy quedando mucho mas confundido mientras avanzo en este curso en particular.

Continuando con la dinámica de hacerlo con mi propio estilo, decidí no reemplazar la sección de contacto por una que muestre otros blogposts de interés.

Noto que estoy mas avanzada porque ya no me pierdo taanto cuando el profe va explicando!

Ahora ya se para que sirve la etiqueta main, antes usaba solo divs

En lo personal me agrada la manera en la que estructura, sin colocar textos.

Me encanta como pone las clases ya que facilita mucho el manejo de estilos

El curso va bien, leo algunos descontentos pero son bases que necesitas hacer, el código no es perfecto, la perfección te la dará el tiempo y más conocimientos que vayas adquiriendo en el camino.

Adicionalmente, Diego hace lo mismo que yo, veo el diseño, me lo imagino, lo estructuro y lo voy haciendo en cosido, a medida que avanzo voy agregando o quitando hasta darle la forma final.
💪👨🏻‍💻🤓📈✅

Comenzare a crear la pantalla de blog, realmente que con estas clases he salido de muchas dudas, tanto así ya que puedo realizar este tipo de maquetación sin problemas.

Si quieren agregar varios párrafos de Lorem solo tienen que poner un por * después de haber escrito lorem y la cantidad de párrafos que quieren

lorem*10

o también se puede por palabra, seguidamente del lorem solamente ponen el número de palabras que quieren que les aparezca

lorem15

Bueno pues ahi vamos tratando de seguir el diseño personalizado pero manteniendo el estilo del curso

Este es mi maquetado de esta sección una forma algo diferente a la que mostro diego, ya que de esta forma entendí yo y se me hizo mas fácil así

Antes de seguir, me reté a hacer la página por mi cuenta. Y he aquí el resultado 😄

Buen método de codear, son solo puntos de vista y formas de trabajo diferentes , hay que aprender de todo

Este es mi diseño un tanto diferente

El éxito para el buen entendimiento de la maquetación de un proyecto es la utilización de BEM y uso correcto de etiquetas HTML.

Esto es solo el primer paso, después seguimos con VUE, eso si es hermoso.

• Los preprocesadores como sass, stylus ,less ayudan mucho
  automatizar el creado de varias paginas para no estar copiando y pegando código

Antes de empezar a ver la maquetación del profe de Granda traté de aplicar los estilos por mi cuenta como medio de práctica

Me quedo una duda de unos videos mas atras… cuando Diego hace la parte de los post en ningun momento utiliza ningun grid, ni nada, solo hace lo siguiente

.blogs-posts-container .post-container{
    display: inline-block;
    padding-left: 10px;
    max-width: 30%;
    margin-bottom: 50px;
}

Osea que todo lo que ponga dentro de esa sección, lo va acomodar 1 article al lado del otro horizontal y baja el article cuando llega al 30% del width total de la pantalla… ¿verdad?

Me gusta mucho la metodología de Diego: permite tener un orden y secuencia lógica del proyecto (de menos a más). Con ello es fácil realizar la estructura básica para después enfocarse en los estilos y detalles.

Seria genial que pudieras poner las imágenes y los textos de una vez para poder ver los cambios cuando pones el css, por lo que hay varios comentarios de que algunos que dicen que están confundidos.

necesito saber el nombre de la web donde te ayudan a segmentar el contenido de esta forma

![](

Mi aporte

¿Es correcto semánticamente que la imagen quede fuera del article, si es parte del post? Pregunto por el SEO

Continuemos 😄

<<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/estilos/main.css" />
    <link rel="stylesheet" href="estilos/font/flaticon.css" />
    <title>Blog</title>
  </head>
  <body>
    <header>
      <section class="header-icon-container">
        <div class="icons">
          <a href="/"><span class="flaticon-001-facebook"></span></a>
          <a href="/"><span class="flaticon-013-twitter-1"></span></a>
          <a href="/"><span class="flaticon-011-instagram"></span></a>
          <a href="/"><span class="flaticon-010-linkedin"></span></a>
          <a href="/"><span class="flaticon-008-youtube"></span></a>
        </div>
      </section>
      <nav>
        <section class="nav-logo-container">
          <a href="index.html"
            ><img src="/assets/Logo-negro.png" alt="Logo de mi Blog"
          /></a>
        </section>
        <section class="profile-link">
          <a href="perfil.html">Sobre Mi</a>
        </section>
      </nav>
    </header>
    <main>
      <section class="grid-container blogposts-img-container">
        <img src="/" alt="blogpost-image" />
      </section>
      <section class="blogpost-main-container">
        <div class="grid-container">
          <h3></h3>
          <article>
            <h1></h1>
            <p></p>
            <p></p>
            <p></p>
          </article>
        </div>
      </section>
      <section class="contact-main-container">
        <div>
          <img src="" alt="" />
          <div class="contact-left">
            <a href=""></a>
            <p></p>
          </div>
        </div>
        <div>
          <img src="" alt="" />
          <div class="contact-right">
            <a href=""></a>
            <p></p>
          </div>
        </div>
      </section>
    </main>
    <footer>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
    </footer>
  </body>
</html>>

Super

estupendo sigamos 😄

Que gran proyecto!

Excelente clase!!

Sin duda la metodología BEM es muy buena!

Muy bien seguimos avanzando y ya establecimos la estructura de las pagina web blog.

Seguimos 😄

Muy fácil la forma de maquetar, cada ves me doy mas ideas y entiendo como ir maquetando mis propios proyectos!!

Genial!!

Muy chevere la forma en que se dan las clases

super

n