Layout con CSS Grid

Fuente Lato 😃

Por aquí les dejo las líneas de código que debemos agregar a nuestro proyecto para las fuentes.
Import link:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap" rel="stylesheet"> 

Import Style:

<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap');
</style>

Aplicacion en CSS

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

Les dejo 4 extensiones que me ayudan mucho al momento de maquetar.
Responsive Viewer
What Font
Simple mass downloader
Site Palette

Me parece que en otro curso mencionaron que no era tan conveniente nombrar las variables con el nombre de su color, ya que si dado el caso cambia los colores de la marca ya no tendrian relacion con su nombre de variable

Asi que sugiero esta forma:

:root {
            --principal-color: #ffd602;
            --brand-color: #d5040a;
            --secondary-color: #036cb6;
        }

Creo que sería mejor nombrarlos así:

:root {
    --primary-color: #ffd602;
    --secundary-color: #d5040a;
    --tertiary-color: #036cb6;
}

Imagínate que el sitio web decida cambiar de colores, entonces debes ir por todo el documento a cambiar el nombre de la variable

Layout con CSS Grid

Código de la clase: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/4-layout-con-CSS-Grid

• Algo que podemos hacer para temas de optimizacion es descargar las fuentes y agregarlas desde nuestro proyecto en local:
  Quedaría algo asi para las 3 fuentes
  Es importante poner este código primero(antes del :root) para que CSS las este preparando primero.

@font-face {
    font-family: "Lato";
    src: url('../assets/fonts/Lato-Thin.woff2') format("woff2"),
         url('../assets/fonts/Lato-Light.woff2') format("woff2"),
         url('../assets/fonts/Lato-Bold.woff2') format("woff2");
    font-weight: 100, 300, 700;
    font-style: lighter, normal, bold;
}

Pueden descargar las fuentes desde el link del código que deje anteriormente. 😄

Para ver la grid pueden verlo con ayuda de DevTools. Se van al contenedor al lado deberá aparecer un botón que diga grid le dan click y despues les va a aparecer la grid 📐
Recuerden que saber debuggear es importantísimo 🙌

ok lo de Color Zilla me encantó. Es magnifico cuando te dan herramientas tan excelentes para facilitar nuestras vidas lm/

Para las variables:

:root{
    --yellow: #ffd602;
    --red: #d5040a;
    --blue: #036cb6;
}

una forma nativa que me parece super util de seleccionar colores en tu computadora es una herramienta de microssoft power Toys te permite seleccionar los colores en distintos formatos como (rgb. hexadecimal, rgba, etc)

Les recomiendo que instalen las PowerToys oficiales de Microsoft para Win10, que aún estando en versión beta son muy estables y añaden un montón de funcionalidades increíblemente útiles. Entre ellas un color picker con un shortcut para acceso rápido. Les dejo el enlace del Github de Microsoft:
https://github.com/microsoft/PowerToys
Espero les guste tanto como a mi 😉

Muy buena explicacion sobre la grid de la pagina web!

Solo agregue el grid area en sus respectivos lugares

También pueden conseguir los colores desde inspeccionar.

Dejo esto por aquí por si alguien mas tenia mi misma duda referente a root en css https://developer.mozilla.org/es/docs/Web/CSS/:root