No tienes acceso a esta clase

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

Terminando el Home

12/26
Recursos

Aportes 74

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Tuve curiosidad sobre el motivo de el porque hizo un nested del elemento <button> con el elemento <a>, y quise validarlos en WHATWG y en W3C , que son dos grandes herramientas para poder validar el markup de los html y seguir buenas practicas, y en ambas me mostro un ERROR : El elemento a no debe aparecer como descendiente de un elemento button.
Con esto quisiera aclarar dos cosas: El elemento <a> representa un hipervinculo hacia una pagina de destino o hacia una sección dentro de la pagina agregando el atributo HREF. Mientras que <button> es un poco mas especifico para acciones como validar o resetear un formulario o mostrar un modal, etc.

Pueden probarlo ustedes mismos! Dejo los link de los Markup Validation Service

https://validator.w3.org/
https://html5.validator.nu/

Finalmente quisiera decir que siempre es bueno averiguar mas allá de los videos, tutoriales, y otros recursos en general que encuentres en internet, eso es lo que al final te hace un developer diferente al resto!

Denle esto a su button

.index-cta a button:hover {
    background-color: #47cfac;
    transform: scale(1.1);
}

Nunca seguiste el diseño que nos mostraste, realizaste uno similar pero no el mostrado.
No me mal interpretes, esta genial ver otras alternativas pero de qué sirvió el reto si no se llego

Ahorita es para aprender, lo acepto, pero por ese tipo de cositas se crean conflictos entre frontends y diseñadores

El que las clases sean tan cortas y concretas, te hacen ir de "A ver, una más"
Y pues… son las 3:00 A.M y aquí estamos 😅

Usando los Markup Validation Service (dejo el enlace mas abajo) Me salian errores donde tengo las etiquetas (section) en el index.html de este curso, y me salta el error Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.. Investigando un poquito mas en estas mismas páginas (w3c.org), pude aprender que cuando se útilice la etiqueta (section) o (article) siempre se anide una etiqueta (h2 a h6). Con esto puedo deducir que el uso de la etiqueta (section) como se ha estado usando en el curso es incorrecto, y se debe reemplazar por una mejor opción. Estoy en lo cierto? la etiqueta div podría ser una mejor opción?

Links de los Markup Validation Service
https://html5.validator.nu/
https://validator.w3.org/

comparto mi trabajo

Tambien se le pueden agregar algunas sombras al texto y boton con:

text-shadow: 2px 2px 4px #000000;
box-shadow: -11px 13px 36px -12px rgba(0,0,0,1);

Home terminado

Les dejo este link que me ha ayudado a realizar botones con algunos estilos que a mi parecer son sencillos pero agradables, así que para comenzar esta bien:

https://fvsch.com/styling-buttons

Esto es como un vicio…seguir y seguir…hasta terminar!! ja ja ja ja ja

Así quedó el Home Page de mi proyecto : )

Justo me adelante al poner las fuentes en el body como buena práctica 😀

Terminé al fin

Les comparto mi versión del proyecto, con ligeros cambios 😁😅

Hey amigos como estan …me gustaria recibir feedback de mi blog…les dejo el deskopt y el mobile…😃
Deskopt:

Mobile:

Agregué unos estilos al button del main para que se vea más bonito 😃

Muy buena seción! Increible la rapidez con la que se maqueta!

Me parece genial la idea de hacer cursos practicos, y se pueda llenar nuestros portafolio, puede que el curso se hubiera llamado curso practico de css grid pero ahora tiene mas sentido co el nuevo nombre.

Este curso, hasta ahora, me parece un buen repaso para quienes se inician en el CSS, pero creo que le falta explicar un poco más como funciona CSS grid.

Tengo una duda. ¿Cómo puedo quitar el borde punteado que aparece al hacer click encima de elmentos de enlace como los iconos? Ya probé con la propiedad outline, pero no me funciona.

Aquí mi avance del proyecto, pueden ver mi código en GitHub 😄

https://github.com/sebastianner/Personal-Blog

  • En los archivos de Github, el botón se diseño diferente, se hizo con una etiqueta diferente a button, se ve un estilo plano. He aprendido una nueva forma de hacer botones.

Estas son las font-family que se están ocupando.

font-family: 'Roboto', sans-serif;

    font-family: 'Roboto Mono', monospace;

    font-family: 'Roboto Slab', serif;

Para hacer evitar problemas con el boton, es mejor darle padding en ves de width y height fijos

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body{
    font-family: 'Roboto';
    margin  : 0;
    padding : 0;
    top     : 0;
    bottom  : 0;
    left    : 0;
    right   : 0;
}

a{
    text-decoration     : none;
    color                    : black;
    display             : inline;
    cursor              : pointer;    
}


header{
    width                : 100%;
    height               : 150px;
    display              : grid;
    grid-template-rows   : 1fr 1fr;
}

header .icons-container{
    width                : 100%;
    height               : 50px;
    background-color     : #FE7700;
    display              : grid; 
}

header .icons{
    width                : 300px;
    height               : auto;
    margin-right         : 50px;
    display              : flex;
    justify-content      : space-around;
    align-items          : center; 
    justify-self         : end; 
    
}

nav  {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    height               : 90px;
}
nav .logo-container {
    margin-left          : 50px;
}
nav .logo-container img {
    margin-top           : 10px; 
}

nav .profile-link {
     display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px; 
}
 
.home-main {
    display              : grid;
    grid-template-columns: 1fr 4fr 1fr;
    height               : 100%;
    background-image     : url('../css/img/anonymous_rose_flower_200517_1600x900.jpg');
    background-position  : center;
    background-repeat    : no-repeat;
    background-size: cover;
}
.home-main div {
    display               : grid;
    grid-column           : 2;
    justify-items         : center;
    height                : 100vh;
    margin-top            : 80px;
}

.home-main-text {
    font-size             : 30px;
    font-weight           : 700px;
    letter-spacing        : 10px;
    color                 : black;
    text-align            : center;
    color                 : white;
}

.home-main-button {
    width                 : 110px;
    height                : 50px;
    background            : #FE7700;
    text-align            : center;
    font-weight           : 700;
    font-size             : 18px;
    line-height           : 50px;
    border-radius         :20px;
}




Les comparto mi HOME 😃

Así me quedó:

Les comparto mi versión personal.

Pues ese es el resultado cuasi final, mejorando la version inicial que tenía, aunque el codigo lo hice a mi manera, que difiere una gran parte del profe, it works 😅💪

Asi llevo mi proceso

Excellent, we have finished the header. 🚀👨🏻‍🚀

me va quedando asi

Me urge aprender CCS Grid, todo es más fácil y bonito

Así va quedando el mío 😃

![](

terminando el home

Lo hice siguiendo el diseño original, si que me costo les dejo el codigo, por si les ayuda.

<!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="CSS/style.css" />
    <link rel="stylesheet" href="CSS/font/flaticon.css" />
    <title>Mi Blog</title>
  </head>
  <body>
    <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="index.html"
            ><img src="Assets blog/Logo-negro.png" alt="Logo de mi blog"
          /></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">
          Conoce las novedades y<br />
          noticias del mundo Tech
        </p>
        <button class="home_main_button">
          <a href="blogs.html">Entra ya !</a>
        </button>
      </section>
    </main>
  </body>
</html>
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected];500;700&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];500;700;900&display=swap");

:root {
  /*Colors*/
  --menta-color: #47cfac;
  --dark-color: #434a54;
  --white-color: white;
  --whiteg-color: #e6e9ed;
  --gray-color: #ccd1d9;
  --grayB_oscuro-color: #656d78;
  --black-color: #23282d;
  --violet-color: #ac92ec;
  --green-color: #a0d468;
  /* Fonts */
  --Roboto-font-family: "Roboto", sans-serif;
  --RobotoMono-font-family: "Roboto Mono", monospace;
  --RobotoSlab--font-family: "Roboto Slab", serif;
}

body {
  margin: 0;
  padding: 0;
  position: fixed; /*no permite hacer scroll a la pantalla*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* --------------------Header------------------------------ */
a {
  text-decoration: none;
  display: inline;
  color: var(--black-color);
}

header {
  width: 100%;
  height: 50px;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
header .header_icons_container {
  width: 100%;
  height: 50px;
  display: grid;
  background-color: var(--menta-color);
}
header .header_icons_container .icons {
  width: 300px;
  height: auto;
  display: flex;
  justify-items: flex-end;
  align-items: center;
  justify-content: space-between;
  justify-self: end;
  margin-right: 50px;
}
header .icons span {
  color: var(--white-color);
}
/* --------------------Main------------------------------ */
main {
  display: grid;
  grid-template-columns: 1fr 4fr 1fr;
  background-image: url(/images/Cover.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  justify-items: center;
  height: 100vh;
}
main .nav_logo_container {
  margin-left: 50px;
}
main .nav_logo_container img {
  width: 220px;
  margin-top: 50px;
}

main .profile_link {
  grid-column: 3;
  align-items: center;
  justify-content: center;
  margin-right: 50px;
  margin-top: 70px;
}
main .profile_link a {
  font-family: var(--RobotoMono-font-family);
  font-size: 20px;
  color: var(--white-color);
  border-bottom: 1px solid var(--white-color);
}
.home_main {
  display: grid;
  grid-column: 2;
  height: 100%;
}
.home_main div {
  display: grid;
  grid-column: 2;
  justify-items: center;
  height: 350px;
}
.home_main_text {
  font-family: "Roboto Mono", monospace;
  font-size: 50px;
  font-weight: 700;
  color: var(--white-color);
  text-align: center;
  margin-top: 0;
}
.home_main_button {
  width: 150px;
  height: 60px;
  background-color: var(--menta-color);
  display: grid;
  align-items: center;
  margin-bottom: 100px;
  border: none;
}
.home_main_button a {
  font-weight: 700;
  font-size: 18px;
}

Así quedó el mio 😄

n

EXCELENTE

Pasa que a mi no me centra el boton, tuve que forzarlo en html con la etiqueta center, pero hasta ahora no se porque no me centra si tengo lo mismo que el profesor…

excelente 😄

Excelente home terminado. Me encanta como quedó.

excelente terminamos el index, muy buena practica!

Quedo parecido a como lo hice en el reto anterior, solo que yo lo hice responsivo con grid xD

Asì va mio…

Estoy muy contento con lo que estoy aprendiendo aquí, muchísimas gracias Diego!!

Que bien profe gracias poco a poco

![](

Excelente explicaciones hasta ahora!

Me siguen preocupando las ideas extrañas que aplica, una etiqueta a adentro de un button. 12 clases y apenas trabajó con grid.

mi boto no se centra alguien tuvo el mismo problema?

.home-main-button{
width: 110px;
height: 50px;
background: #47cfac;
display: grid;
align-items: center;

}
.home-main-button a{
font-weight: 700;
font-size: 18px;

}

Listo el primer módulo 🤩. Vamos por el otro !!

Excelente!

Gracias !

Muchas gracias por la explicación de los detalles finales del home instructor Diego.

Sigamos 😄

Les comparto mi avance !

Excelente, más ansiosa. 😄

cual es la diferencia entre background y background-color

Retomando ritmo debido a una pausa laboral pero bueno, se me van algunos conceptos y llegan otros, la idea es encontrar la forma individual de maquetar de la mejor manera.

Hola amigos espero alguien me podría ayudar a resolver mi duda.
Tuve problemas para agregar los enlaces a las redes sociales del header de la forma del profesor asi que me anime a hacerlo de otra forma pero me encontré con este error.
1-El texto dentro del <span> esta encima del icono que agregue mediante <background-image> en css y si lo borro desaparece el icono, ¿cuál ha sido mi error usando esa etiqueta?

<html>
 <div class="icons">
                <a href="#"><span class="icons-item-fb">FB</span></a>
                <a href="#"><span class="icons-item-tw"></span></a>
                <a href="#"><span class="icons-item-ig">IG</span></a>
                <a href="#"><span class="icons-item-in">IN</span></a>
                <a href="#"><img src="./assets/youtube.svg" alt="icono-de-youtube"></a>
            </div>
<css> 
.icons-item-tw {
    background-image: url(/curso-de-maquetacionCSS/assets/twitter.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 32px;
    height: 32px;
}


La forma que halle para solucionar fue intercambiar <span> por una etiqueta <img>(3) pero alguien me ayuda a solventar mi duda?

Así va quedando el mío

Hola amigos, este es mi blog

a partir del minuto 4:00 el vídeo pierde el audio, pero se entiende lo que quiere decir jajaja

body {
  font-family: Roboto Mono, monospace;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}```

Ahí vamos!
Ya arregle las fuentes y algunos tamaños.
Va quedando así.


Aguien sabe como colocar el fondo completo en la pantalla, una vez lo hice pero no recuerdo como (usando el 100vh)

para hacer un boton mas bonito pueden usar materialize