Manejo de Grid para posicionar contenedores

Algo muy importante que quisiera resaltar es :

Porque hacer un titulo con un tag <p> y no con un tag <h1> en nuestra pagina?

El tag h1 es importante en el hero debido al SEO y a la experiencia de usuario.
Este nos ayuda a indicar la cabecera mas importante en una pagina web, hace que la lectura del contenido sea de una manera rápida y clara dónde se encuentra el usuario y el contenido que se va a encontrar.

Por otro lado, a nivel SEO, nos ayuda a posicionar una página por la palabra clave que se desee. Se recomienda utilizar la palabra clave dentro del H1 para mejorar el posicionamiento de la página por ese término.

Para los que saben más sobre HTML y CSS y observaron que pusieron un etiqueta <p></p> en vez de un <h1></h1>, en el repositorio de github ya esta corregido, les invito a pasarse a los repositorios de cada curso que tomen y ayuden a mejorarlos, esto les ayudara a ustedes y a las persona que aun no saben mucho del tema, ayudemos a desarrollar buenas practicas sin depender mucho de los profesores.

El reto sin la imagen de fondo:

En cada clase se aprende algo diferente, como por ejemplo el letter-spacing y el uso del grid column, Diego es un excelente profesor.

Reto:

![](

Yo lo hice con flexbox jeje

.main-section {
	width: 100vw;
	height: 100%;
	background-image: url("/assets/images/Cover.png");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
.main-title-container {
	font-family: Roboto;
	font-size: 20px;
	color: white;
	letter-spacing: 8px;
	line-height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 50%;
}

.main-title-container button {
	margin-top: 55px;
	background-color: #47cfac;
	color: black;
	width: 130px;
	font-weight: 900;
	height: 60px;
	border-radius: 10px;
}

El reto ajustandolo a uno de mis proyectos 😄 ♥

Buenísimo. Para que la imagen se vea en toda la pantalla pueden usar

Background: url('dirección de imagen');
background-size: cover;

así se verá en en toda la pantalla.

Poniendo a prueba el conocimiento adquirido en los cursos anteriores, estoy usando el pre-procesador Sass así como diseño Movile first, espero sus comentarios y consejos,
Igual dejo un poco del código del cuerpo de mi pagina

Un gran complemento a este curso es iniciar con Mobile First y hacer los estilos antes de cada vídeo para comparar tu construcción con la del profesor porque hay distintos caminos que te llevaran a Roma. No te presiones si tu CSS no es igual al del profe importa el resultado y como lo construyes

Es genial como explica Diego De Granda

Este ha sido mi resultado:
![](

Mi blog

Reto:

Listo, lo que he visto en los aportes es que hay diferentes soluciones, para lograr el mismo resultado, todas son muy interesantes y enriquecedoras.

les comparto mi proyecto en Github https://github.com/ArzCorp/Blog

Leo los comentarios y no veo que este mal su forma de hacer código, si bien es cierto que tiene un titulo con p y no con H1, el menciona el porqué lo usa, recuerden que el curso es de css y aunque se debe de hacer buenas prácticas en html es solo aprendizaje de base, ojo los comentarios donde indican que no debe ser así tienen buenos fundamentos y están en lo correcto. 👨🏻‍💻✅💪

08:59 en el .home-main-text{} es
el font-weight:700 (sin la unidad px)

Porque si el home-main será único en toda la página, ¿por qué le asignan una clase y no un ID?

¿Qué tal?

Superado!

.hero {
    width: 100%;
    height: 100vh;
    background-image: url(/assets/images/hero-image.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-background {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-container h2 {
    color: white;
    letter-spacing: 0.4rem;
}
.hero-container button {
    width: 120px;
    height: 48px;
    margin-top: 60px;
    color: black;
    background-color: #47cfac;
    font-weight: bold;
}

reto.
solo me falta el tipo de fuente.

Siento que esta manera hace que se tenga un código más organizado. Facilita las cosas en el momento de ubicar posibles errores.

mi aporte!

🐱‍👤

esta es mi version, me causaba ruido que el logo de twitter fuese el de tumblr.

otra cosa me siento mas comodo haciendo las cosas con flex y no con grid.

Solucion del reto

reto completado

Vengo del curso de CSS Gris y Diseño Web con CSS Grid y Flexbox a mirar esta clase porque es frustrante como no llevan absolutamente nada a la práctica en esos dos cursos. Me alegra que al menos algo se toque de CSS Grid en este curso.

Cuándo tienes varias páginas y te encargas de ellas con un mismo archivo css, tienes que llevar la especificidad al máximo nivel.

Al momento de darle uno o más: fr, le estamos diciendo a el grid que me haga de cierto tamallo la refilla.

La propiedad de grid column, hace que posicionemos nuestra caja en una columna de su elemento padre, que debe tener la propiedad de grid column al menos, pero mejor si tiene varias columnas definidas.

Código para que la imagen quede bien 💚

    background-image: url("../assets/img/funda_wallpaper.png");
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;

Que gratificante es ver las clases del profe De Granda

Un dato curioso que quiero aportar el font-weight no se usa con px, si se fijan en el DevTool no lo usa, marca error.

Esto es por que este no se define con px, sus valores son como las fuentes de google. 500 o 700 o bold o bolder.

Asi voy

¿que es mejor?, utilizar <h1> o <p> para agregar el texto principal, ¿y porque?

Vamos bien 😃

Que gran practica, tenia muchas ganas de que ya saliera el curso

Yo hice el html y css de ésta forma:

<main class="main-container">
        <section class="main-container_text">
            <h1>Conoce las novedades y noticias del Mundo Tech</h1>
        </section>
        <section class="main-container_button">
            <button>
                <a href="/blog.html">Entra ya!</a>
            </button>
        </section>
    </main>

CSS------------
.main-container {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  height: 70%;
  width: 100%;
  background-image: url("/assets/img/Cover.png");
  background-position: center;
  background-size: auto;  
}

.main-container_text {
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
  font-size: 25px;
  letter-spacing: 10px;
  font-weight: 500px;
  width: 50%;

}

.main-container_button button {
  color: black;
  background-color: #47cfac;
  width: 110px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  line-height: 50%;
}```

Yo hubiera usado un h1 para eso de la semantica, pero supongo que eso se ve en otros cursos!

el alt nos ayuda a ver con problemas visuales
agregamos
nav {
display: grid;
grid-template-columns: 1fr 1fr;
height: 90px;
}
nav .nav-logo-contain {
margin-left: 50px;
}
nav .nav-logo-contain img{
width: 220px;
margin-top: 10px;
}
nav .profile-link {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 50px;
}
nav .profile-link a{
color: black;
border-bottom: 1px solid black;
}

.main-section {
width: 100vw;
height: 100%;
background-image: url("/assets/images/Cover.png");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.main-title-container {
font-family: Roboto;
font-size: 20px;
color: white;
letter-spacing: 8px;
line-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50%;
}

.main-title-container button {
margin-top: 55px;
background-color: #47cfac;
color: black;
width: 130px;
font-weight: 900;
height: 60px;
border-radius: 10px;
}
APUNTES …

No me dejaba establecer la altura del main al 100% sin que me saliera el scroll, lo solucioné agregando un min-height: 100% en el body

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

Pantalla principal terminada comparto link
https://sartheghost.github.io/BLOG-POST/

.flaticon-link.faceboock{
background-image: url("./css/font/img/facebook.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.twitter{
background-image: url("./css/font/img/twitter.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.instagram{
background-image: url("./css/font/img/instagram.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.tiktok{
background-image: url("./css/font/img/tiktok.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.whatsapp{
background-image: url("./css/font/img/whatsapp.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}

.hero{
width: 100%;
height: 100vh;
text-align: center;
margin: auto;
justify-content: center;
align-items: center;
}
.hero-subt{
background-image:url("./assets/img/Cover.png");
position:absolute;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
height: 100%;
width: 100%;

}
.hero-h1{
margin-top: 100px;
color: white;
justify-content: center;
letter-spacing: 5px;
font-size: 30px;

}
button{
margin-top: 100px;
background: #47cfac;
color:black;
border: 1px solid black;
padding: 8px 18px;
border-radius: 5px;
font-size: 15px;
font-weight: bold;

}

<main class=“hero”>
<section class=“hero-subt”>
<h1 class=“hero-h1” >conoces las novedades y <br>noticias del mundo tech</h1>
<button>Entrar ya!</button>
</section>
</main>

<!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">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/font/flaticon.css">
    <title>My Blog</title>
</head>
<body>
    <!-- BARRA DE NAVEGACION -->
    <header>
        <section class="header-icons-container">
            <div class="icons">
                <a href=""><span class="flaticon-001-facebook"></span></a>
                <a href=""><span class="flaticon-002-twitter"></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="#"><img src="./assets/img/Logo-negro.png" alt="Logo_Image"></a>
            </section>
            <section class="profile-link">
                <a href="perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
    <main class="home-main">
        <section>
            <p class="home-main-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, in.</p>
            <button class="home-main-button">
                <a href="">Entra ya!</a>
            </button>
        </section>
    </main>
    
</body>
</html>

Para los que saben más sobre HTML y CSS y observaron que pusieron un etiqueta <p></p> en vez de un <h1></h1>, en el repositorio de github ya esta corregido, les invito a pasarse a los repositorios de cada curso Algo muy importante que quisiera resaltar es :

Porque hacer un titulo con un tag <p> y no con un tag <h1> en nuestra pagina?

El tag h1 es importante en el hero debido al SEO y a la experiencia de usuario.
Este nos ayuda a indicar la cabecera mas importante en una pagina web, hace que la lectura del contenido sea de una manera rápida y clara dónde se encuentra el usuario y el contenido que se va a encontrar.

Por otro lado, a nivel SEO, nos ayuda a posicionar una página por la palabra clave que se desee. Se recomienda utilizar la palabra clave dentro del H1

Esta muy interesante este curso de maquetación, estoy aprendiendo conceptos nuevos y muy funcionales para mis proyectos 💚💚💚

<h1>Conoce las novedades y <br> noticias del Mundo Tech</h1>

<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=Roboto+Mono:[email protected]&display=swap” rel=“stylesheet”>

   font-family: 'Roboto Mono', monospace;
    font-size: 2.5rem;
    letter-spacing: 10px;
    color: white; 

Quisiera comparir el codigo, marcado y estilos, estoy siguiendo al profesor pero trate de simplificar las estructuras para optimizar un poco mas al momento de aplicar estilos, y usar BEM (trato, aun no fluyo con este tema)

	<body>
		<header>
			<section class="header__icons">
				<a href="/"><span class="flaticon-001-facebook"></span></a>
				<a href="/">.... los demas iconos</a>
			</section>
			<nav>
				<section class="nav__logo">
					<a href="/"><img src="assets/images/Logo-negro.png" alt="Logo" /> </a>
				</section>
				<section class="nav__links">
					<a href="perfil.html">About me</a>
				</section>
			</nav>
		</header>
		<section class="hero">
			<h1 class="hero__text">
				Conoce las novedades y <br />
				noticias del Mundo Tech
			</h1>
			<button class="hero__button" href="blog.html">Entra ya!</button>
		</section>
	</body>

body {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
}

header {
    width: 100%;
    display: grid;
    grid-template-rows: 50px 90px;
    background-color: var(--main-color);
}

.header__icons {
    width: 300px;
    height: 50px;
    margin: 0 50px;
    display: flex;
    align-items: center;
    justify-self: end;
    justify-items: flex-end;
    justify-content: space-between;
    color: var(--white);
}

.header__icons span {
    color: var(--white);
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
}

nav section {
    margin: 50px;
}

.nav__logo img {
    width: 220px;
    margin-top: 10px;
}

.nav__links a {
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--black);
}

.hero {
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;

    background-image: url("/./assets/images/cover.png");
    background-color: var(--black);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero__text {
    font-size: 2.5rem;
    color: var(--white);
}

.hero__button {
    width: 20%;
    height: 80px;
    align-self: baseline;

    font-size: 1.2rem;
    font-weight: bold;
    color: var(--black);
    
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background-image: linear-gradient(180deg, var(--main-color), var(--white))
}

Mi maquetado no quedo del todo igual pero almenos mi resultado fue mas aproximado al real

Pues yo usé un h2, ya que el h1 se ocupa para el título principal de la página justamente en el logo, más que ese tipo de descripción, de hecho si podria ser buen un parrafo.
Segundo no use grid ya que era más fácil para mí usar flexbox. Porque son muy pocos elementos y siento que grid es para algo con múcha más complejidad en su composición.

Sabes que estás progresando en tu proceso de aprendizaje cuando notas cosas que puedes corregir y cuestionar lo que te están enseñando.

<p> no usar, mejor usen un h1 o h2 para el posicionamiento web

Practicando es que se aprende, lo hice de tres formas diferentes para posicionar el main, pero ninguna le gana a la versatilidad del css grid jaja, nunca pares de aprender y practicar.

reto:

Yo lo abría hecho de otra forma sinceramente. Hubiera hecho algo tipo así sin necesidad de declarar 3 columnas.

	display: grid;
	grid-template-columns: minmax(auto, 768px);
	justify-content: center;
	justify-align: center;

Colocarle una sola columna y a ella misma limitarle el crecimiento a una medida especifica. En este caso para poner un ejemplo puse 768px, pero pudiera haber sido cualquier otra según lo hubiera requerido la forma del diseño. Y centrar todo con justify-content y justify-items sin necesidad de usar 3 columnas y decirle al contenido que ocupara la segunda columna

Muy buena clase!!!

Excelente!! Seguimos!!! 😃

hehe

¡Me parece fabuloso Grid!

font-weight: 700px? Creo que ‘px’ se fué de más.

otra duda, he visto que esta utilizando solo display grid, ¿es mejor solo utilizar display grid o en unos casos combinarlo con display flex?

la verdad me falta un poco mas de experiencia para entender bien el display grid pero ya lo voy asimilando

“Sé que para el título tenemos las etiquetas h1 a h6, pero yo voy a utilizar la etiqueta de párrafo porque al párrafo le voy a dar estilos para llevarlo al tamaño de fuente que necesito”.

Me preocupa la cantidad de errores que comete y hace como que no pasó nada, varios typo y cosas que me parece no conoce tan bien o capaz que son los nervios de dar la clase y actúa de esa manera sin querer.

Genial excelente ejercicio

Listo! Con esta clase logré pulir mi código ya que todo lo había puesto en el mismo header 😅

Yo lo hice un poco diferente, nose si fue la mejor manera para codiar el codigo…

Html

<section class="parrafo">
        <div>
            <h1>Conoce las Novedades y<br/> noticias del Mundo Tech</h1>
        </div>
    </section>
<dvi class="button-container">
        <a href="blog.html">
            <button>Entra ya!</button>
        </a>
    </dvi>

Css

    background-image: url("../img/Cover.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:absolute;

   .parrafo h1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500px;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: 160px;
    text-align: center;
    color: #e6e9ed;
}
.button-container{
    display: grid;
    justify-items: center;
}
.button-container button{
    color: #ffffff;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background-color: #47cfac;
}
.button-container:hover button {
    background-color: #31927a;
}

Yo lo hice de la siguiente forma:

–HTML–

<code>
<main>
        <section>
            <h1>Conoce las novedades y noticias del mundo Tech</h1>

            <input type="submit" value="Entra ya!!">
        </section>
    </main>

– css –

<code>
main {
    height: calc(100vh - 140px);
    background-image: url('../assets/images/Cover.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
main section {
    margin: 10%;
    width: 55%;
    text-align: center;
}
h1 {
    font-size: 35px;
    letter-spacing: 3px;
    color: #fff;
}
input[type='submit'] {
    margin: 5%;
    padding: 10px 15px;
    font-size: 18px;
    border: 1px solid rgb(224, 224, 224);
    background-color: #46ce6f;
    border-radius: 5px;
    transition: all ease-in .5s;
}
input[type='submit']:hover {
    background-color: #288343;
}

Cuando se debe usar H1 o P. Entiendo que los motores de búsqueda de google toman en cuenta los H1, entonces cuándo debería usarlos?

/* .main{
  background-image: url("../assets/img/Cover.png");
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}
.main h1{
  margin-top: 60px;
  color: white;
  font-size: 40px;
}

.main .main-button button{
  color: #47cfac;
 background-color: rgba(0, 0, 255, 0.678);
 padding: 10px 20px;

} */```

Bueno esto es lo que me salió, aunque siento que algo me falto porque no me salió responsive

Que bien enseña Diego De Granda, uno de mis profes favoritos definitivamente

Gracias por la explicación de las partes iniciales para posicionar bien esta vista instructor Diego.

Reto Listo!!

Listo, va quedando muy bien toda la maquetacion del sitio, de verdad este profe es muy bueno!

en el selector .home-main section tengo que colocar
display:grid
es necesario como es el hijo directo de un grid , sin embargo si le quitas permanece en la columna 2 pero el button se apega a la izquierda ,
porque??

Excelente!!

Continuemos. El mío lo hice con flexblox, pero aplicaré las prácticas de la clase 😄

No entiendo porque pone el display grid en el section, ya lo tenia en el contenedor, es necesario también en el hijo?

Lo había hecho de otra forma, me hace falta practicar más con el display grid 😬

De haber sabido que ibas a hacer el reto no me rompo la cabeza asiéndolo :v

RETO;

Este es mi trabajo de la clase

Esta siendo un gran curso.

7. Manejo de Grid para posicionar contenedores:

En esta clase hemos usado Grid para posicionar los contenedores dentro del main de la página principal.

Es válida su manera de hacerlo, con un grid dentro de un grid, si antes no han visto sobre CSS Grid se les hará muy muy raro, por eso antes de llevar este curso tienen que haber visto ya HTML, CSS, Flex y Grid, de lo contrario se van a perder.

Les comparto el código de la clase:

HTML:

<!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">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./assets/font/flaticon.css">
    <title>Mi blog by Aldo Ortiz</title>
</head>
<body>
    <header class="header grid">
        <section class="header-icons-container grid">
            <div class="header-icons flex">
                <a href=""><span class="flaticon-001-facebook"></span></a>
                <a href=""><span class="flaticon-002-twitter"></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 class="header-nav grid">
            <section class="nav-logo-container">
                <a href="/">
                    <img src="./assets/img/logo-negro.png" alt="Logo de mi blog">
                </a>
            </section>
            <section class="profile-link-container flex">
                <a href="/perfil.html">Sobre mí</a>
            </section>
        </nav>
    </header>
    <main class="home-main grid">
        <section class="home-main-section grid">
            <p class="home-main-text">Conoce las novedades y noticias del mundo Tech</p>
            <button class="home-main-button">
                <a href="./blogs.html">¡Entra ya!</a>
            </button>
        </section>
    </main>
</body>
</html>

CSS:

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'Segoe UI';
}
/*SHARED*/
a {
    text-decoration: none;
    display: inline;
    color: black;
}
.grid {
    display: grid;
}
.flex {
    display: flex;
}
/*HEADER*/
.header {
    width: 100%;
    height: 140px;
    grid-template-rows: repeat(2, 1fr);
}
.header-icons-container {
    width: 100%;
    height: 50px;
    background-color: #47cfac;
}
.header-icons {
    width: 300px;
    height: auto;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
.header-icons span {
    color: white;
}
.header-nav {
    grid-template-columns: repeat(2, 1fr);
    height: 90px;
}
.nav-logo-container {
    margin-left: 50px;
}
.profile-link-container {
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
.profile-link-container a {
    color: black;
    border-bottom: 1px solid black;
}
.nav-logo-container img {
    width: 220px;
    margin-top: 10px;
}
/*MAIN*/
.home-main {
    grid-template-columns: 1fr 4fr 1fr;
    height: 100%;
}
.home-main-section {
    grid-column: 2;
    justify-items: center;
    height: 350px;
    margin-top: 80px;
}
.home-main-text {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 10px;
    color: black;
    text-align: center;
}

La página va quedando así: