No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
43 Min
54 Seg

Manejo de Grid para posicionar contenedores

9/26
Recursos

¿Cómo estructurar una página web principal con HTML y CSS?

Desplegar una página web profesional va más allá de simplemente escribir código: se trata de crear una experiencia de usuario agradable y efectiva. Los retos pueden variar desde la estructura de HTML hasta la aplicación de estilos CSS. Veamos cómo podemos abordar este proceso de manera efectiva.

¿Cómo diseñar la sección principal en HTML?

Iniciar con una estructura HTML clara es crucial para una maquetación exitosa. Nuestro objetivo es maquetar y estilizar la sección principal de una página web. Aquí hay algunos pasos a seguir:

  • Crear una sección en el HTML: Añade un <section> que contenga un párrafo <p> y un botón dentro de un enlace <a>.
  • Estructurar contenido:
    <section class="home-me">
      <p>Conoce las novedades y noticias del mundo Tec</p>
      <a href="blogs.html" class="home-me-button">Entérate ya</a>
    </section>
    
  • Definir un Link: El botón debe apuntar a una página destinada, como blogs.html.

¿Por qué usar clases en vez de selectores directos?

Cuando trabajamos con múltiples páginas y componentes similares, el uso de clases es esencial para lograr estilos consistentes y reutilizables:

  • Nombrar clases de manera coherente: Define clases para el párrafo y el botón, como .home-me-text y .home-me-button. Esto facilita la aplicación de estilos y les confiere un significado claro.
  • Clases específicas: Usar clases en lugar de selectores de etiquetas permite mayor flexibilidad y control sobre los estilos CSS.

¿Cómo aplicar estilos CSS de manera efectiva?

Los estilos en CSS pueden transformar una estructura sencilla en una página visualmente llamativa. Aquí te ofrecemos algunos pasos para aplicar estilos interesantes a tu página web:

  • Definir un layout flexible: Utiliza display: grid para organizar la disposición del contenido en la sección.
    .home-me {
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
      height: 100vh;
    }
    
  • Alinear contenido: Usa justify-content: center y align-items: center para centrar el texto y el botón en la sección.
  • Estilizar el texto y el botón:
    .home-me-text {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 10px;
      color: black;
      text-align: center;
    }
    
    .home-me-button {
      margin-top: 80px;
    }
    

¿Qué aspectos considerar para una mejor experiencia de usuario?

Finalmente, es importante recordar ciertos aspectos que mejoran la experiencia del usuario:

  • Evitar scroll innecesario: Asegúrate de que el contenido tenga suficiente espacio para evitar que el usuario necesite desplazarse.
  • Verificar visualizaciones: Revisa cómo se comporta el diseño en diferentes tamaños de pantalla.
  • Proceso iterativo: No todo sale perfecto al primer intento; iterar y ajustar los estilos es parte del proceso de desarrollo.

Recuerda que aprender a estructurar y dar estilo a una página web es un proceso continuo. ¡Sigue explorando y mejorando tus habilidades para convertirte en un experto en desarrollo web!

Aportes 121

Preguntas 14

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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 😄 ♥

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

Mi blog

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

Este ha sido mi resultado:
![](

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

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.

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

Reto:

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

Vamos bien 😃

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.

Que gratificante es ver las clases del profe De Granda

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

¿Qué tal?


Asi voy

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. 👨🏻‍💻✅💪

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

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.

Asi Quedo El Mio :D ![](https://static.platzi.com/media/user_upload/image-3fdb153c-bc69-4bc8-ba67-40fba320d2df.jpg)Me base un poco el el Repositorio de GitHub, y la Imagen la Encontre en Pexel.com. Para la paleta de Colores use coolors.co

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

Resultado del reto

He aprendido 2 nuevas propiedades css:

  • word-spacing

  • letter spacing

las cuales me sirvieron para el título del HOME.

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 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!

* `font-weight: 700;` es válido y define el grosor de la fuente (negrita). * `font-weight: 700px;` no es válido y causaría un error en la interpretación de la propiedad.
Fue genial el reto, asi me quedo: ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2hmdW7Zk18q_V5FwJO8nfeG0_n4rTOmTShduz_AzEQk7plO4vfhFpLY0_aznRdOTNMY8WnUTCj2Xs_IYJc8j1rz7AU4roGuPkKKGs2dsqmaEsEDNsb6jkJf6mrqQrsbImVbFCrlFWr7_HbYpf-HML9wCGsfisr8aOHiYbEoKTBsB6H_ER3ddju87k-U/s1849/Captura%20de%20pantalla%20de%202025-02-04%2016-24-31.png) ![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1xlDRgoY370Lw0ZzZ4ORE7B7fOOs02AYqRtvN4oi2ee-Wul2zRwnPaf9vdPSrI44E0cA2X4XOAhbEAUNxmDk1drwUzTrKzobs1glkB3DhR9GAhLzfu6UWSMleqzsYCYKrm7Vz-ayn3-kLap2JaBrM87vgwwXzhWmgHuCRAvSOFVcsu9EldgGRI2-mGE/s1849/Captura%20de%20pantalla%20de%202025-02-04%2016-24-42.png)![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEincj1UAbVkNnb-MAlhyphenhyphenqyqKpCua6hZVz3MHWhw15gFW0unUMsCPuPHAjH9w8_tDFwOWCJfXyF611T4AGQT2itAYS6JKadSquUgLMQHvpKkgUPrnU-AkCFL9-VLVwqtHB1OWTuBWFCSFpOlagXESrvbNllagBGLEbS011u07LXixG6VW1BxuVK_UpXibeA/s1827/Captura%20de%20pantalla%20de%202025-02-04%2016-24-50.png)
![](https://static.platzi.com/media/user_upload/image-badc4ce0-ce27-47f1-ae85-d1722262eef1.jpg)
creo que usar grid es innecesarion, en el header claroo y loentiendo pero en esta seccion tan basica no se deberi complicar usando grid, simplemente usanfo fle y margenes se hubiera acomodado todo.
a

la propiedad grid-column es una forma abreviada para las propiedades grid-column-start y grid-column-end y especifica en qué columna colocar un elemento y cuántas columnas abarcará el elemento

En el min 8:59 debe ser: font-weight: 700; el profe puso px y con eso no te da el bold del texto.

Por acá mi reto

Así va:

1:08 Momento sus

Uhmmm interesante, no me esta saliendo igual desde que decidí no ponerle el fixed al body XD

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

<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:wght@200&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!