Estilos base

Agregando estilos:

1. Posicionamiento --> static, absolute, relative, fixed
2. Modelo de caja (Box model) --> margin, border, padding, content
3. Tipografía --> tipos, tamaños de fuente, etc
4. Estilos visuales --> box-shadow, border-radius, gradient, etc
5. Otros --> reglas CSS y más

Colores:

--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;

Fuente:

  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;

Hola amigos,

Diego hace uso de la siguiente extensión de VS Code para resaltar colores en sus archivos CSS.

El resultado es el ya conocido.

Saludos!

yo en las variables añadi las FUENTES y COLORES

:root{
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--size-300:300;
	--size-400:400;
	--size-500:500;
	--size-700:700;
	--background:#E5E5E5;
	--linear-gradient:207.8deg, #201E1C 16.69%, #F7931A 100%;
	--bitcoin-orage:#F7931A;
	--soft-orange:#FFE9D5;
	--secondary-blue:#FFE9D5; 
	--soft-blue:#E7F5FF;
	--warm-black:#201E1C;
	--warm-blackplus1:#282623;
	--gray:#BABABA;
	--off-white:#FAF8F7;
	--just-white:#FFFFFF;
}

Nombrar variables en CSS

El nombre no debe ser igual al valor:
Cuando el nombre de la variable está ligada a su valor perdemos una de sus funciones que es la versatilidad de cambiar su valor y que todo el diseño cambie con ella por ejemplo:
Si tenemos una variable que se llama

--bitcoin-orange: #f7931a;

si luego quieres cambiar el color a un azul

--bitcoin-orange: #0000ff;

la variable pierde todo el sentido porque tiene en el nombre naranja, pero su valor es azul

El orden:

Cuando nombramos una variable es importante el orden porque cuando estamos escribiendo el código nuestro editor tratara de autocompletarnos por eso lo mejor es nombrar la variable desde su característica más general hasta la más específica para aprovechar esta característica del editor

Meh 😕

Mejor 😎

Variables finales 😍

:root {
  /*------------------ colors --------------*/
  --color-primary: #f7931a;
  --color-primary-soft: #ffe9d5;
  --color-secondary: #1a9af7;
  --color-secondary-soft: #e7f5ff;
  --color-dark-warm: #201e1c;
  --color-dark: #282623;
  --color-ligt-darker: #bababa;
  --color-background: #faf8f7;
  --color-light: #fff;

  /*------------------ Fonts --------------*/
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

Personalmente me parece innecesario agregar una variable para colores como blanco o negro, ya que puedes poner simplemente white o black.
Además si lo haces para que al cambiar el valor de la variable te cambie el valor en todos los lugares que lo utilizaste, es mala práctica identificarlo por el nombre del color. Lo suyo sería identificarlo con nombres más generales como primary-color, secundary-color, dark-color,…

:root {
    --bitcoin-color: #F7931A;
    --soft1-color: #FFE9D5;
    --secundary-color: #1A9AF7;
    --soft2-color: #E7F5FF;
    --warm-dark: #201E1C;
    --warm2-dark: #282623;
    --grey: #BABABA;
    --off-light: #FAF8F7;

    --font-DM: 'DM Sans', sans-serif;
    --font-inter: 'Inter', sans-serif;
}

Les dejo un resumen de lo que vimos en esta increíble clase 😄

• Convención que Diego usa y recomienda seguir al momento de trabajar en CSS.
  

  

• Código de la declaración de Variables!

:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}

• Código aplicado a todos los elementos

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

• Código aplicado al html, que en este caso fue la familia de la fuente y el tamaño.

html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

Próximamente mas resúmenes 😂 😃

• Analisis de proyecto a traves de figma construyendo wareframe, aqui nos pasaran una url donde podremos ver lo que tendremos que construir.

• Este es el link para el proyecto en figma https://www.figma.com/file/sMmlQaZldfDcLERYYWe6h4/Bata-Bit?node-id=83%3A132

• Codigo del repositorio de github https://github.com/degranda/batata-bit

• tenemo sun header, main(4 secciones), y footer

• Descargar todos los assets desde figma para tenerlos disponibles en nuestros proyecto, Seleccionamos la img>export>seleccionamos el formato de la img>export , aqui tambien tenemos la opcion de ver un preview, si queremos descargar dos elementos por ejemplo el logo y el isotipo para ello buscamos un donde esta el grupo en el panel derecho o seleccionarlos con ctrl + clic sobre los elementos a descargar , despues creamos una carpeta assets y la separemos en dos carpetas mas icons y imgs.

• Ahora revisaremos las fuentes que ocuparemos, para ello revisaremos en figma y por buenas practicas el diseño no deberia de tener mas de dos fuentes, estas las descaremos de google font, la primera es DM sans descargaremos la de un peso de 400, 500 y el de 700 y inter con un peso de 300 y 500, aquí tendremos dos formas de traernos estas fuentes a nuestro proyecto y son a través de un link o con un @import desde css pero esta no es una buena practica cuando tenemos mas de una, entonces lo haremos copiando el link pegando en el html y para hacer uso de ellas usaremos este código

  font-family: 'DM Sans', sans-serif;
  font-family: 'Inter', sans-serif;
  

• creamos el archivo index.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,500;0,700;1,400&family=Inter:wght@300;500&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <header></header>
      <main>
          <section></section>
          <section></section>
          <section></section>
          <section></section>
      </main>
      <footer></footer>
  </body>
  </html>
  

• comenzaremos a establecer nuestro estilos bases creando un archivo styles.css, aquí nos vamos a figma a la sección de branding y veremos todos los colores que se están usando en todo el proyecto después podemos seleccionar uno y ver la composición de este al igual estos el diseñador pudo haberle puesto nombres personalizados que podemos usar para nombrar nuestras variables y tener una relación entre el css y el diseño de figma , estos estilos se pueden ordenar de una forma que podamos buscar cualquier elemento de forma rápida:

  1. Posicionamiento: static, absolute, relative, fixed
  2. Modelo de caja (Box model): margin, border, padding, width and height
  3. Tipografía: Tamaños, pesos, tipos de fuentes
  4. Visuales: box-shadow, border-radius, gradient, etc
  5. Otros: todo lo demás

  /* Crearemos nuestras variables */
  :root {
      /* Colores */
      --bitcoin-orange: #f7931a;
      --soft-orange: #ffe9d5;
      --secondary-blue: #1a9af7;
      --soft-blue: #e7f5ff;
      --warm-black: #201e1c;
      --black: #282623;
      --grey: #bababa;
      --off-white: #faf8f7;
      --just-white: #fff;
  }
  
  /* Quitaremos todas las propiedas que vienen por defecto */
  *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  html{
      /* esto para poder hacer el uso de rem, cambiando la base que tiene por defecto el 
      navegador que es una base 16px y la pasaremos a una base 10px ya que sera mas facil
      calcular el numero de la 16px*62.5% = 10px*/
      font-size: 62.5%;
      /* aqui solo pondemos nuestra fuente base, y la otra fuente la usaremos solo en 
      ciertos elementos especificos*/
      font-family: 'DM Sans', sans-serif
  }
  

Quiero dejar comentado que hasta ahora me parece bastante bueno el curso, por el hecho de no trabajar directamente al código, sino de pre analizar el diseño con figma y obtener los recursos necesarios antes de lanzarnos de cabeza a codear. A su vez, el hecho de que nos enseñen como sería el trabajo de un frontend apartir de un diseño en figma me parece excelente. Por ahora el curso me parece muy bien logrado aunque apenas lleve unas pocas clases

Sugerencia sobre box-sizing: border-box

°
En la clase el profesor muestra lo siguiente en el CSS:

* {
    box-sizing: border-box;
} 

Que aunque funciona bien, omite los pseudoelementos, lo que puede dar lugar a resultados inesperados en algunos proyectos.
A causa de eso surge el Universal box-sizing :

*, *:before, *:after {
  box-sizing: border-box;
}

Que este método si toma en cuenta los pseudoelementos. Pero el asterisco *, hace que sea difícil usar content-box o padding-box en otras partes del CSS.
Lo que nos lleva al líder actual de las buenas practicas:
El Universal box-sizing con herencia :

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Este reset brinda mas flexibilidad que sus predecesores y permite usar content-box o padding-box donde sea compatible sin preocuparse de que un selector universal anule tu css.
Recomendaria usar el Universal box-sizing con herencia para sus proyectos. Y cabe agregar que normalmente box-sizing no se hereda, por lo que es un comportamiento especializado.
°
Si quieren saber mas sobre esto o como usarlo visiten: Box Sizing | CSS-Tricks
Ahi explican muy bien esto, y esa pagina es buenísima para cosas de CSS.
O visiten el autor original de este método: Paul Irish
El explica el porque surge, y las compatibilidades.

/* 1. Posicionamiento
2. Modelo caja (Box model)
3. Tipografía
4. Visuales
5. Otros */

:root{
    /* Colores */
--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}```

No hay una sola manera de escribir el CSS. La convención(orden) que sugiere el profesor para escribir las propiedades es buena y la pueden usar.

Existen otras y cual usen dependerá del lugar donde terminen trabajando.

Personalmente acostumbro usar la guía de estilos de Google que sugiere usar orden alfabético y otras cosas.

Se los dejo por si es algo que les interese: https://google.github.io/styleguide/htmlcssguide.html#CSS

El uso del rem y estilos iniciales se explican en la clase 35 (medidas REM) del Curso definitivo de HTML y CSS

Aquí está el reset de estilos que se utiliza profesionalmente:
https://meyerweb.com/eric/tools/css/reset/

Este profe enseña muy buenos hacks o trucos, denle un tamal por eso

Curso Definitivo de HTML y CSS

excelente curso lo recomiendo antes de seguir con este

por que usa 62.5% en el font-size? fue algo que sacó del diseño o simplemente lo decidió?

Para mi es mas practico colocar simpre la primera palabra de cada varibale como descripción del contenido de la varible para que que sea mas fácil encontrar el nombre de ese color en proyectos grandes.
Ej
–color–
–font–
–box-shadow
etc.

.root{
    /* colors */
    --color-bitcoin-orange:#f7931a;
    --color-soft-orange:#ffe9d5;
    --color-secundary-blue:#1a9af7;
    --color-soft-blue:#E7f5ff;
    
    --color-warm-black:#201e1c;
    --color-warm-black:black;
    
    --color-grey:grey;
    --color-offwhite:#faf8f7;
    --color-white:#fff;
}

/*

1. Posicionamiento
2. Modelo de caja (box model)
3. Tipografia
4. Visuales
5. Otros
   */

:root {
/* Colores */
–bitcoin-orange: #F7931A;
–soft-orange: #FFE9D5;
–secondry-blue: #1A9AF7;
–soft-blue: #E7F5FF;
–warn-black: #201E1C;;
–black: #282623;
–grey: #BABABA;
–off-white: #FAF8F7;
–just-white: #FFFFFF;
}

• {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
font-size: 62.5%;
font-family: ‘DM Sans’, sans-serif;
}

recomendación estructura de una regla de css

.clase{
	posicionamiento
	modelo de caja (box model)
	tipografia
	visuales
	otros
}```

el css hasta los momentos…

/*

1. Posicionamiento
2. Box model
3. Tipografia
4. Visuales
5. Others
   */

:root{
/* colores */
–bitcoin-orage:#F7931A;
–soft-orange:#FFE9D5;
–secondary-blue:#FFE9D5;
–soft-blue:#E7F5FF;
–warm-black:#201E1C;
–black:#282623;
–gray:#BABABA;
–off-white:#FAF8F7;
–just-white:#fff;
}

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

html{
font-size: 62.5%;
font-family: ‘DM Sans’, sans-serif;
}

Muy buen método este de no andar codeando a la loca sino dándole orden a todo, esa preproducción es muy importante 👏

Este es el proyecto de figma de donde Diego toma las información:
https://www.figma.com/community/file/897624260484339106

Saludos.

SI realmente este es un buen flujo de trabajo, he visto quienes van resolviendo a mucho detalle por partes pero me parece que este va muy buen.

Para definir los estilos podemos seguir el siguiente orden:

1. Posicionamiento.

2. Modelo de caja.

3. Tipografía.

4. Estilos visuales.

5. Otros.

Se agregar las variables para el color

Entre las ventajas de usar variables en CSS: el código se es más legible además es más fácil cambiar los valores.
Se pueden declarar de manera global o local, y se llaman con la función var( --variable) justo en el valor de la propiedad CSS.

Se aplican las propiedades universales

Con ´box-sizing: border-box;` se le dice al navegador que sume el valor de borde o de relleno para la dimensión total elemento html.

Se establece el tamaño de la fuente

El tamaño de la fuente font-size: 62.65%;crea una equivalencia para poder usar REM como pixeles. Ejemplo: 16px es igual a 1.6 REM.

/*
1. Posicionamiento
2. Modelo caja (Box model)
3. Tipografía
4. Visuales
5. Otros
*/```

Hola a todos, con base en este video se me ocurre que podemos optimizar el esquema de coding CSS bajo el siguiente listado:

/*
1. Variables
2. Default set (* {box-sizing, margin & padding} html {REM defaults & main font})
3. Posicionamiento (position, display, etc.)
4. Modelo de caja (Box model - widht/height/).
5. Tipografía (fuentes y tamaños)
6. Visuales (Shadow-box, Borders, background-color, color)
7. Otros - Miscelaneous
*/```

Saludos!

2. Estilos base

Les comparto el código CSS de la clase:

/*
1. Posicionamiento
2. Modelo de caja (Box Model)
3. Tipografía
4. Visuales
5. Otros
*/
/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*VARS*/
:root {
    /*Colores*/
    --bitcoin-orange: ##F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warn-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
html {
    /*para usar rem*/
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

ctrl + k + c Shortcut para agregar un comentario en CSS

ESTOS SON MIS COLORES , LOS CAMBIE UN POCO A MI GUSTO

colores:
:root {
/* Colores */
–bitcoin-orange: #f7931a;
–soft-orange: #ffe9d5;
–secondary-blue: #1a9af7;
–warm-black: #201e1c;
–black: #282623;
–grey: #bababa;
–off-white: #faf8f7;
–just-withe: #fff;
}

Es oro que Diego comparta estos GUIDELINES que utiliza para sus proyectos

Tu css debe quedar mas o menos así:

/*
1. Posicionamiento
2. Modelo de caja (Box-model)
3. Tipografía
4. Visuales
5. Otros
*/
:root{
    /*Colores*/
    --bitcoint-orange: #F7931A;
    --soft-orange: #FFE9D4;
    --secundary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black:#282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

También existe una convención para organizar los atributos de HTML.

Les recomiendo mucho https://stylelint.io/ para no tener de ordenar el css a mano

Me gustó mucho establecer el orden al crear el css, creo que me vendrá muy bien porque mis css acaban siento caóticos.

/*--
Relacion de la generacion de los estilos:

1) posicionamiento.--------------->(position static, absolute, relative, fixed)
2) Modelo de caja (Box Model).---->(para darle cierta dimension margin, border, padding, content, tamaños widht high etc)
3) Tipografía.-------------------->(tipos, tamaños de fuente, etc)
4) Visuales.---------------------->(Estilos que tengan que ver con temás visuales, box-shadow, border-radius, gradient, etc)
5) Otros.------------------------->(miselanius u otros como reglas de CSS y más)
--*/

:root {
    /*colores*/
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-orange: #f88b32;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

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

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}```

/*
1. Posicionamiento
2. Modelo caja (box model)
3. Tipografia
4. Visuales
5. Otros
*/
:root{
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}

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

html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}```

![](

No sé si sólo me pasa a mí pero los últimos 39s del vídeo no se escuchan

Oigan chicos, en el intro de este capitulo hay algo raro, hay como una voz pero muy baja diciendo algo, es muy raro, casi como un murmullo, no les parece?

Para mejores practicas, cuando agreguemos los estilos deben de ser en este orden:
** 1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografía
4. Visuales
5. Otros **

tambien, para facilitar nuestro trabajo, agregamos los colores a usar en variables:
** --bitcoin-orange: #f7931a;
–soft-orange: #ffe9d5;
–secondary-blue: #1a9af7;
–soft-blue: #e7f5ff;
–warm-black: #201e1c;
–black: #282623;
–grey: #bababa;
–off-white: #faf8f7;
–just-white: #fff; **

Aquí les dejo el código de la clase 😃 :

/*
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografia
4. Visuales
5. Otros 
*/

:root {
  /* colors */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
}

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

html {
  font-size: 62.5%;
  font-family: 'DM Sans', sans-serif;
}

CODIGO DE LOS ESTILOS CSS

/* 
1. Posicionamiento
2. Modelo caja (Box model)
3. Tipografía
4. Visuales
5. Otros 
*/
:root {
    /*Colores*/
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

En mi caso utilizo Sass para trabajar el CSS, todo esto lo creo en un
parcial llamado _globales.scss y lo importo al parcial principal (el cual compilare) y me dara mi archivo CSS final.

// /*MANEJO DE PROPIEDADES
//
//  1) Propiedades del modelo de caja (display, width, height, margin, etc)
//  2) Posicionamiento (position, left, top, right, etc)
//  3) Tipografía(text-transform, text-decoration)
//  4) Decoración (background-image, color, etc)
//  5) Variables
//  6) Mixins */

// FUENTES

$Fuente_1: 'DM Sans', sans-serif;
$FUente_2: 'Inter', sans-serif;

// COLORES

$linear_bg: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
$bitcoin_orange: #F7931A;
$soft_orange: #FFE9D5;
$secondary_blue: #1A9AF7;
$soft_blue: #E7F5FF;
$warn_black: #201E1C;
$warn_black2: #282623;
$color_grey: #BABABA;
$off_white: #FAF8F7;
$just_white: #FFFFFF;

// REINICIANDO ESTILOS

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

html {
  font-size: 62.5%;
  font-family: $Fuente_1;
}

Aqui el codigo final del archivo css, lo hice con ayuda de algunos otros aportes para que este completo

/*
1.-Posicionamiento --> static, absolute, relative, fixed
2.-Modelo de caja (Box model) --> margin, border, padding, content
3.-Tipografía --> tipos, tamaños de fuente, etc
4.-Estilos visuales --> box-shadow, border-radius, gradient, etc
5.-Otros --> reglas CSS y más
*/

:root {
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

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

html {
    font-size: 62.5%;
    font-family: 'DM sans', sans-serif;
}

style.css

/* 
1. Posicionamiento
2. Modelo caja (box model)
3. Tipografía
4. Visuales
5. Otros
*/

:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #ffffff;
}

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

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

Estilos bases del proyecto:

Convención usada por Diego De Granda para estilos en CSS: 1.posicionamiento 2.Modelo de caja (Box Model) 3.Tipografia 4.Visuales 5.Otros.

🔥🔥Vamos con todo con este proyecto 🔥🔥

:root{
    /*Colores*/
    --bitcoin-orange: #F7931A;
    --Soft-Orange:#FFE9D4;
    --Secondary-Blue:#1A9AF7;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --warm-black-1:#282623;
    --Grey:#BABABA;
    --off-White:#E6E6E6;
    --Just-White:#FFFFFF;
}
.
* { box-sizing: border-box;
    padding: 0;
    margin: 0;}

html 
  { font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

Buena clase

Alphabetical sorter es la extensión de VSC para ordenar alfabéticamente. Es mejor práctica hacerlo así que como proponen en este curso.

Es mejor organizarlo por orden alfabético, incluso existen extensiones dirigidas a este propósito.

Orden de los estilos

inicial para css (con sus respectivos comentarios)

/* 
    Posicionamiento             --> static, absolute, relative, fixed
    Modelo de caja (Box model)  --> margin, border, padding, content
    Tipografía                  --> tipos, tamaños de fuente, etc
    Estilos visuales            --> box-shadow, border-radius, gradient, etc
    Otros                       --> reglas CSS y más
*/

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

:root {
    /* colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

/*
1- posicionamiento: posicionamiento con  posistion-fix, position-relative, etc
2- Modelo de caja (box model): margin, padding, tamaño de caja wid heght
3- Tipografia: fuentes, tamaño de fuentes, tipo de fuentes
4-  visual: temas visuales, shadow-box, border-radis

5- otros: 
*/

Empecé este curso hace casi un año, y decidí que necesitaba saber un poco más de otras cosas para tomarlo, he hecho como 15 cursos más y ahora regreso a él. La suscripción de Platzi definitivamente es útil para distintas formas de aprendizaje.

Manera en que De Granda agrega estilos:

1. Posicionamiento --> static, absolute, relative, fixed
2. Modelo de caja (Box model) --> margin, border, padding, content
3. Tipografía --> tipos, tamaños de fuente, etc
4. Estilos visuales --> box-shadow, border-radius, gradient, etc
5. Otros --> reglas CSS y más

En el root nosotros vamos a implementar nuestras variables (color, fuente, etc)

:root {
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --offwhite: #faf8f7;
  --just-white: #ffffff;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}```

/* Convencion para generar los estilos
1. Posicionamiento
2. Modelo de caja (Box model)
3. Tipografia
4. Visuales
5. Otros 
*/
:root {
    /* Colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

Estilos Base:

/*

1. Posicionamiento
2. Modelo de Caja (BoxModel)
3. Tipografia
4. Estilos con temas visuales (shadow box, border-radius, etc.)
5. Otros

*/
:root{
    /* colores */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --gray: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-family: 'DM Sans', sans-serif;
    font-size: 62.5%;
}
body{
    font-size: 1.6rem;
}

variables de color css

Excelente esta convencion ya que nos ayuda a tener un código mas organizado

Me siento todo un profesional creando estos estilos bases, fuentes, colores y teniendo todo tan organizado. Muy buena introducción hasta ahora

Encontré los colores en la sección de referencias en el proyecto de Figma. tenerlo en cuenta.

Estilos base - Notion

Comparto mis apuntes de la clase, con algunos cambios en el CSS porque quise seguir el proyecto añadiendo un estilo un poco más personalizado a mi manera.

Por si no recuerdan de como utilizar las variables:

:root{
	--color-parrafo: green;
}
p{
	color: var(--color-parrafo); font-weight: bold;
}

Si no encuentran branding como en mi caso :c era por que el menú de pages tiene un pequeño scroll

1.- Los estilos base son los estilos iniciales
2.- Incluimos margin, pading y boxsizing ademas de usar rem
3.- crear variables para los colores que se usaran continemente
4.- estructura:

- Posicionamiento: static, absolute, relative, fixed
- Modelo de caja (Box model): margin, border, padding, content
- Tipografía: tipos, tamaños de fuente, etc
- Estilos visuales: box-shadow, border-radius, gradient, etc
- Otros: reglas CSS y otros

5.- en el root van las variables su sintaxis es:

--nombre: #numero;

configuracion de variables en css

:root{
    --bitcoin-orange:#F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue:#1A9AF7;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --black:#282623;
    --grey:#BABABA;
    --off-white:#FAF8F7;
    --just-white:#FFFFFF;
}

Para que ahorren tiempo 😃

:root {
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #282623;
    --black: #201e1c;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

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

html {
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}

body {
    overflow-x: hidden;
    font-size: 1.6rem;
}

Comparto mi configuración de variables en SASS

Reiniciar los estilos por defecto del navegador:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*  Pequeña convencion:

    1. Posicionamiento (position fix, relative)
    2. Modelo caja (margin, padding, width, height, Box Model)
    3. Tipografia
    4. Visuales (box-shadow, border-radius)
    5. Otros
*/
:root{

    /* Colores */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --warm-black: #201E1C;
    --black: #282623;
    --off-white: #FAF8F7;
    --just-white: #FFFFFF;

    /* font-size and font-family */
	--font-sans:'DM Sans', sans-serif;
	--font-inter:'Inter', sans-serif;
	--fs-s:30rem; /* don´t linked  */
	--fs-m:40rem;
	--fs-l:50rem;
	--fs-xl:70rem; 
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
    font-family: var(--font-sans);
}

Esta super interesante la convencion que usa diego para estructurar los estilos

• Posicionamiento (Display, flex, relative, justify-content, etc)
• Modelo de caja (box model, padding, margin, width, height)
• Tipografía (Font-size, font-weight, font-family, etc)
• Visuales (box shadow, border radius, color)
• Otros.

Con esto asumo que debe quedar super organizados los estilos y legibles sobre todo por las secciones, lo digo porque en el reto de clonar wikipedia trate de hacer mis estilos “ordenadamente” pero en primera me quedaron demasiadas lineas de codigo repetidas (que ahora me queda un poco mas claro tambien el uso de las variables), y sobretodo estaba hecho un alboroto jejee

Aquí los colores en css que estaremos utilizando.

:root{
        /*Colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --gray: #bababa;
    --off-withe: #faf8f7;
    --withe: #fff;
}

Que emoción ya empezamos!!! 😍😎

👌

No era lo mismo si poniamos el font-size y font-family en el :root? 😕

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}

la medida rem es un estandar o es una tendencia para estos proyectos?

¿Alguien sabe cómo es que cuando Diego pone los colores de Figma en el archivo CSS se pasan a minúsculas las letras?

Ejemplo: Copia el código #FFE9D5
y visual studio code le cambia automáticamente a #ffe9d5

¿Es algún plugin o configuración?

:root{
    /* Fuentes */
    --font-sans: 'DM Sans', sans-serif;
    --font-inter: 'Inter', sans-serif;
    /* Colores */
    --orange-to-black: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFF;

}```

Buenas les dejo mi código css, por si alguna le sirve, saludos.

/*
Posicionamiento --> static, absolute, relative, fixed
Modelo de caja (Box model) --> margin, border, padding, content
Tipografía --> tipos, tamaños de fuente, etc
Estilos visuales --> box-shadow, border-radius, gradient, etc
Otros --> reglas CSS y más
*/

:root{
    /* colores */
    --bitcoin-orage:#F7931A;
    --soft-orange:#FFE9D5;
    --secondary-blue:#FFE9D5;
    --soft-blue:#E7F5FF;
    --warm-black:#201E1C;
    --black:#282623;
    --gray:#BABABA;
    --off-white:#FAF8F7;
    --just-white:#fff;
}

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

html {
    font-size: 62.5%;
    font-family: ‘DM Sans’, sans-serif;
}```

Por acá dejo todo lo que hicimos en la clase por si alguien lo necesita ❤️

:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}```

:root{
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black:#201E1C;
    --black: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}```

Hola compañer@s, ¿por qué en el CSS al elemento HTML se le coloca el font size de 62.5%? ¿En todos mis proyectos tengo que usar ese porcentaje?

It was an excellent class Diego. We continue to advance in our project.

Variables de Color corregidas.

:root{
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

Alguien sabe por qué el profesor usa:

html {
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

En vez de body? Nunca había visto a nadie usar html, alguien sabe el por qué?

/*Agregando Estilos para buenas practicas durante el diseño
Posicionamiento --> static, absolute, relative, fixed
Modelo de caja (Box model) --> margin, border, padding, content
Tipografía --> tipos, tamaños de fuente, etc
Estilos visuales --> box-shadow, border-radius, gradient, etc
Otros --> reglas CSS y más
*/

/*Implementaci[on de variables de color*/
:root{
    /*Colores*/
--bitcoin-orange: #f7931a;
--soft-orange: #ffe9d5;
--secondary-blue: #1a9af7;
--soft-blue: #e7f5ff;
--warm-black: #282623;
--black: #201e1c;
--grey: #bababa;
--off-white: #faf8f7;
--just-white: #fff;
}

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

html{
    font-size: 62.5%;
    font-family: "DM Sans", sans-serif;
}```

• Declaracion de variables

:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: #e7f5ff;
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
}```


- Reseteo de valores default de navegador 

• {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  }

-Fuente y tamaño en el html

html {
font-size: 62.5%;
font-family: “DM Sans”, sans-serif;
}```

/*
1. Posicionamiento
2. Modelo caja (box model)
3. Tipografia
4, Visuales
5. Otros
*/

:root {
    /* colores */
    --bitcoin-orange: #f7931a;
    --soft-orange: #ffe9d5;
    --secondary-blue: #1a9af7;
    --soft-blue: #e7f5ff;
    --warm-black: #201e1c;
    --black: #282623;
    --grey: #bababa;
    --off-white: #faf8f7;
    --just-white: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%; /*para poder hacer uso de REM*/
    font-family: "DM Sans", sans-serif;
}

Estilos base

Convención para agregar estilos:

1. Posicionamiento
2. Modelo de caja
3. Tipografía
4. Estilos visuales
5. Otros

Variables

Son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento.

Para declarar propiedades personalizadas (variables) usamos un nombre que comience con dos guiones (–), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:

elemento {
  --main-bg-color: brown;
}

Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
  --main-bg-color: brown;
}

Para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función var(), en lugar de cualquier otro valor normal:

elemento {
  background-color: var(--main-bg-color);
}

En otro curso hablan de no usar un blanco absoluto por que eso visualmente puede perder un poco de calidad gráfica.

Amigos q plugin en visual studio code te permite mostrar (resaltar) el color en el hexadecimal como se aprecia en la declaracion de las variables de colores.

Me surgió una duda, yo se que :root y html son la misma etiqueta en esencia.
¿Por qué no se puso el font-size y font-family dentro de :root justo después de los colores?