Añadiendo estilos al home de nuestra aplicación

Nice.

Asi estamos un poco los backend dev con CSS jaja:

Un Resumen del css de esta clase pero con ajuste para eliminar el código repetido. Primero ver el video completo y luego usar ese código si lo desean

body, header, ul, li, footer {
    align-items: center;
    display: flex;
    justify-content: center;
}
header, ul {
    background: linear-gradient(
        to right,
        hsl(98, 100%, 62%),
        hsl(204, 100%,  59%)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}
body {
   background: hsl(204, 100%, 5%);
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif;
   height: 100vh;
}

header {
    color: #71622d;
    font-size: 72px;
    height: 60px;
    padding: 100px 50px 50px;
}

ul{
    flex-direction: column;
}

li {
    border: 1px solid white;
    font-size: 28px;
    margin-bottom: 20px;
    padding: 50px;
    width: 500px;
}
a {
    color: white;
    text-decoration: none;
}
footer {
    justify-content: space-evenly;
    padding: 50px 0;
    width: 100vw;
}

Si quieren saber cómo hice esos estilos de manera super sencilla, miren este pequeño hilo en twitter que hice para ustedes

Con resetear algunos estilos básicos es suficiente:

El margin y el padding quedan sin valores predefinidos por los navegadores.
El box-sizing hace que no cuenten o sumen lineas adicionales.
La cuarta linea, “outline”, la uso durante la creación del estilo css para ver todo en recuadros con una linea roja y saber ubicar todo en el sitio web. Esta no afecta la elaboración del estilo css. Una vez que finalizo, la comento como aparece en la imagen que adjunto.

Para justificar y alinear al centro con Grid.

Para los que se preguntar porqué hay que resetear los estilos CSS, es porque cada pinche navegador tiene sus reglas predefinidas en estilos y, si partimos de ellas, nuestras páginas web se verán distintas en Chome, Mozilla, Edge, Brave, Opera, el maldito Safari… en fin, por eso es importante este archivo.

Se puede resetear con:

*  {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

Como primera línea de código en el css

Si no se te actualiza el CSS.
Cada vez que cambias el archivo CSS y quieres ver los cambios actualiza el navegador con Ctrl+F5. Esto vacía el caché guardado. Se puede decir que es como refrescar la página desde cero.

en el CSS no aplica el DRY?