Sistema de diseño, assets y variables de CSS

4/22
Recursos

Aportes 70

Preguntas 33

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Enlace para descargar las carpetas con los iconos y logos:

Código para nuestras variables

:root{
    --white: #FFFFFF;
    --black: #000000;
    --dark: #232830;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
}

body{
    font-family: 'Quicksand', sans-serif;
}

Me parece que una variable para poder ser efectiva debería tener un nombre que no haga referencia directa al color que se usa, si no al uso.
Por ejemplo, si cambiamos el valor de “Hospital Green” por otro tono de verde o por otro color se volvería confuso.
Si en lugar de ello ponemos nombres como “background_secundary” puede ser más practico.

Conejos importantes antes de continuar con la siguiente clase

Una muy buena practica es el tener código HTML y CSS por separado. Recuerda que la profesora lo esta trabajando todo en el HTML para una mejor explicación.

Para conectar tu HTML con tu CSS solo basta con agregar esta linea de código dentro de tu head en HTML

  <link href="styles/style.css" rel="stylesheet" type="text/css">

Después del href vas a colocar la ruta de donde esta tu archivo, yo tengo una carpeta llamada “styles” y dentro de ella mis estilos llamados “style.css”. Es importante que no olvides agregar la extension del archivo.

Al igual tener una estructura en tu carpeta de trabajo para tener un mejor orden. La estructura que yo estoy manejando es la siguiente:

Por ultimo te comparto mi código completo, por si llegas a tener algún problema

HTML

<!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 href="styles/style.css" rel="stylesheet" type="text/css">
    <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=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

CSS

:root {
    --white: #ffffff;
    --black: #000000;
    --very-light-pinki: #c7c7c7;
    --text-input-field: #f7f7f7;
    --hospital-green: #acd982;
}

body {
    font-family: 'Quicksand', sans-serif;
}

La profe usa la terminal para crear carpetas y moverse entre archivos , etc.
NO TE ASUSTES LA TERMINAL SERA TU MEJOR AMIGA Y DEBES APRENDER A USARLA.

.

Recuerda que en Platzi hay un curso genial sobre terminal y linea de comandos LINK DEL CURSO

.

También es probable que si estas en Windows estos comandos no te funcionen y te salga un error , pero CALMA. Es porque la profe usa Mac , los comandos varían un poco para Windows , si quieres tener los mismo comandos en la terminal que la profe , puedes tomar este curso Curso de Prework: Configuración de Entorno de Desarrollo en Windows

En este curso te enseñan a instalar WSL , es como tener un S.O Linux!!! en tu pc y poder seguir usando Windows sin problema.

SERAS UN CASI hacker y mas importante te serviran los mismo comandos que usa la profe en la terminal.

Aqui puede descargar los archivo de la clase

Primero debemos crear nuestro “root”, y poder así modificar, las variables de manera global

:root {
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
	    --hospital-green: #ACD9B2
        }

buscamos tipografía en Google Fonts

<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=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">

Agregamos font-family a nuestro body

body{
            font-family: 'Quicksand', sans-serif;
        }

Descargamos los archivos de la clase

Hola! Si tienes problemas con la carpeta de logos e íconos, acá te dejo una forma de hacerlo:

  1. En las lecturas recomendadas vas a encontrar el link del repositorio del proyecto en github: https://github.com/platzi/curso-frontend-developer-practico

  2. Una vez dentro del repositorio, descarga el zip, seleccionando: Code (Botón verde) – Download ZIP

  3. Guarda el zip en tu carpeta de trabajo y descomprímelo! Si estás usando WSL la forma más rápida de hacerlo desde el terminal es utilizando el siguiente comando:

unzip curso-frontend-developer-practico-main.zip

  1. Listo! Allí encontraras las carpetas con los iconos y los logos, suerte!!

Por buena práctica es recomendable hacer el css en un archivo aparte…

Una buena practica que aprendí en los cursos de la escuela de desarrollo web para los proyectos es incluir en el archivo de style.css esta estructura, que te permitirá formatear los estilos del navegador y trabajar los tamaños de las fuentes con rem, esto también los vimos en el primer curso de Frontend developer:

:root{
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
}

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

body{
    font-family: 'Quicksand', sans-serif;
    font-size: 62.5%;
}

Hola para quienes usen windows subsytem for linux y tengan problemas para pasar los assets del curso de su carpeta descargas de windows a su carpeta en wsl (frontend-developer-1)

  1. Confirma que estes en home/usuario
  2. Escribe explorer.exe .
  3. Te va a abrir un explorador de archivos en windows, busca la carpeta en la que tengas tus proyectos.
  4. Abre la carpeta y arrastra normalmente las carpetas o archivos que necesites

Ese fue mi método si alguien sabe como hacerlod esde la consola se los agradecería mucho! 😃

Si no me entiendes por aca te dejo el video de referencia:
https://www.youtube.com/watch?v=fzhnC_gQ0B4

Hola! como consejo que se me hizo muy interesante de la profesora del curso de diseño en modo oscuro:

Los nombres de las variables deben ser definidos por su función, no por su valor.

.
Y bueno, a lo que se refiere, es que en lugar de poner:

--very-light-pink: #C7C7C7 ❌
// debemos poner algo como:
--background-color: #C7C7C7 ✅
o por la función que será de esa variable

A mí se me hizo muy interesante, por que:

  1. Mejor organizado.
  2. Si modificamos algo, sabemos que es exactamente lo que cambiamos.
  3. Si cambiamos los colores de la marca, por ejemplo ya no queremos el rosita, ahora queremos un azul cielo, ya no tendrían sentido los nombres de las variables…

Entre otras cosas que estarían mejor 😃

VARIABLES CSS

Si gustan tambien pueden importar las fuentes desde la misma stylesheet (:

@import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected];400;500;600;700&display=swap');

Las variables deben declararse dentro de un selector, se acostumbra usar :root para que la variable sea global, se declaran con dos guiones y el nombre para utilizarlas se usa la funcion var() y entre los paréntesis se escribe el nombre de la variable

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

El nombre exacto es Custom properties aunque no está mal decirles variables (hasta la W3C las llama variables). Pero ¿por qué se llaman custom properties y no variables? Son dos las razones

  • El valor es heredado a los hijos
  • El valor puede redefinirse por cascada

Estos dos conceptos (cascada y herencia) son muy propios de las propiedades CSS y no tienen relación con el comportamiento de una variable en ningún lenguaje de programación.

:root {
  --my-color: red
}

body {
  color: var(--my-color)
}

En este caso todos los textos (párrafos, títulos, etc.) serán de color rojo por herencia, porque descienden de body al resto de elementos (comportamiento propio de CSS)
Ahora el caso de la cascada con el mismo ejemplo

:root {
  color: red
}

body {
  color: var(--color)
}

h1 {
  --color: blue;
}

En este caso todos los textos (párrafos, títulos, etc.) serán de color rojo por herencia, pero todos los h1 serán azules porque hemos usado la cascada para redefinir el valor de la propiedad personalizada --color

Esta guía me ha ayudado mucho a saber qué espaciados y tamaños colocar en los elementos: https://spec.fm/specifics/8-pt-grid

Enlaces directos para los íconos y logos

ICONOS
➡️ https://svgshare.com/i/eiG.svg cart icon
➡️ https://svgshare.com/i/ek2.svg added to cart icon */
➡️ https://svgshare.com/i/ejA.svg email icon */
➡️ https://svgshare.com/i/eiy.svg right arrow icon */
➡️ https://svgshare.com/i/ejs.svg burger menu icon */
➡️ https://svgshare.com/i/eiz.svg shopping cart icon */
➡️ https://svgshare.com/i/ei9.svg shopping cart notification icon */

LOGOS
➡️ https://svgshare.com/i/eiH.svg favicon bota fora */
➡️ https://svgshare.com/i/ehx.svg favicon Yard Sale */
➡️ https://svgshare.com/i/eiX.svg logo bota fora */
➡️ https://svgshare.com/i/ekB.svg logo yard sale */

Para usarlos solo deben colocar el enlace en el atributo source:

<img src="https://svgshare.com/i/ekB.svg" alt="Yard Sale Logo" />

como bajo las carpetas de los logos de github???

<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=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
<style>
        :root {
            --white: #FFFFFF;
            --black: #000000;
            --dark: #232830;
            --very-light-pink: #C7C7C7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
        }
        body{
            font-family: 'Quicksand', sans-serif;
        }
    </style>

Ojo, claro que pueden ver los pixelajes deben ingresar al proyecto en figma https://www.figma.com/file/bcEVujIzJj5PNIWwF9pP2w/Platzi_YardSale y allí seleccionan el frame correspondiente y ven todo!

Es muy importante que los patrones que sigamos en nuestros diseños, sean de múltiplos de 4, para la comodidad de nuestra visa.

Vengo del curso de React, pues me salte este curso ya que antes habia hecho el curso de html y css largo, y ademas ansioso. Y cuando la profe empezo a hablar sobre la globalizacion de variables me exploto la cabeza.
Globalizacion de variables + componentes = MUNDO DE POSIBILIDADES.
Derrepente cambiando un par de colores se puede crear un modo nocturno, o cambiar de idiomas, o los templates. Se crea casi completamente un proyecto nuevo solo cambiando las variables ME ENCANTA.
Voy a disfrutar mucho este curso

:root, para indicar las variables que vayamos a crear

Les recomiendo los cursos sobre sistemas de diseño, @rulotico es lo más! https://blog.rulotico.com/sistemas-de-diseño-2021-5836255ff0ee

Si estás desde la terminal, puedes abrir el proyecto donde te encuentras con VS Code usando el siguiente comando:

code .
de dónde sacó los acces

Crear un proyecto nuevo desde Visual Studio

  1. Abrir la terminal en VS
  2. cd Desktop → abrir carpeta donde se va a crear el proyecto
  3. take frontend-developer → nombre del proyecto
  4. touch index.html →crear archivo inicial
  5. Luego abrirlo desde VS😃

Las carpetas de los iconos y logos están en el repositorio de github que nos dejaron en los recursos de la clase…

Para descargarlos se pueden apoyar de este video:[https://www.youtube.com/watch?v=KzZcnBzI3OU]

Nota:
El comando “take” solo funciona en la shell zsh que es la que tiene mac, si tienes wsl o alguna distro de linux, estas tienen por defecto la shell bash y ahí no puedes usar dicho comando, pero en esta clase del curso de curso de terminal y línea de comandos el profe devars te enseña cómo personalizar tu terminal y cambiar la shel por zsh y ahí sí está este gran comando que aunque no parezca ahorra tiempo. Espero te sirva.
Saludos! 😃

En los comentarios más votados algunos se saltaron la clase 2 o no les gusta leer, recomiendo leerla para que después no comente que es mala práctica style en el html
clase-2

Utiliza las fuentes descargardas!!(miniTutos)😅

  • Para mejorar el PERFORMANCE y la optimizacion de carga de nuesra página/aplicación futura es recomendable descargar las fuentes e importarlas desde la carpeta de nuestro proyecto.
    1.- Hay que descargar las fuentes que estaran en un comprimido ZIP de aqui ¡¡Descarguemos las fuentes!! Presionar Descargar Familia(Download Family)
    2.- CONVERTIRLAS DE TTF a WOFF2. El Browser ignorará el formato TTF por eso lo convertimos a WOFF2 de la siguiente página. ¡Quiero Convertir!

    3.- Ahora A Descargalas en All Files > Donwload All y será en ZIP, luego descomprimir.
    4.- Creamos una carpeta en la raíz de nuestro Proyecto llamado assets y dentro otra carpeta llamada fonts, luego los Pegamos en este úlitmo.
    5.- Podriamos crear un archivo llamado main.css e importarlo desde nuestro index.html, pero lo haré desde nuestro index.html:
    **Lo importamos de la siguiente manera: **
<style>
        @font-face {
            font-family: 'Quicksand';
            src: url("./assets/fonts/Quicksand-Light.woff2") format("woff2"),
                 url("./assets/fonts/Quicksand-Medium.woff2") format("woff2"),
                 url("./assets/fonts/Quicksand-Bold.woff2") format("woff2");
            font-weight: 300, 500, 700;
            font-style: lighter, normal, bold;
        }
        :root {
           ......
        }
    </style>

Y ahora a tener mejor performance! y #NuncaParesDeAprender

Debería seperar los archivos de css en lugar de ponerlos al principio del HTML, después se haría más fácil entender la estructura de todo un proyecto con sus archivos separados y haciendo uso de ellos en donde se necesitan.

Existe un pequeña plicacion llama “pixie.exe” que cuando se ejecuta nosmuestra el RBG y el hexadecimal del pixel donde este posicionado el puntero del mouse. de esta namera podemos estar seguros que se esta usando el color exacto porque no todas las pantallas dan el mismo tono de color pero el codigo simpre será el correcto.

Variables en CSS

En CSS, las propiedades personalizadas (también conocidas como variables) son entidades definidas por autores de CSS que contienen valores específicos que se pueden volver a utilizar en un documento. Se establecen mediante la notación de propiedades personalizadas (por ejemplo, --main-color: black😉 y se acceden mediante la función var() (por ejemplo, color: var (--main-color);).

Para declarar propiedades personalizadas (variables) usamos un nombre que comienze 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;
}

:root

La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento <html> y es idéntico al selector html, excepto que su especificidad es mayor.

/* Selecciona el elemento raíz del documento:
   <html> en el caso de HTML */
:root {
  background: yellow;
}

😁

Alguien mas esta llevando este curso usando el curso de VIM?

Información adicional:
Es mejor trabajar el CSS en un archivo separado, para poder escriber el codigo de todo el sitio web en una sola vez.
Desde el archivo html solo afectara al mismo. La profesora lo escribe asi pues su fin es que conozcamos las variables CSS.
Tambien es mejor ponerles de nombre primary y secundary a las variables de color. Esto pues en los diseños siemre hay colores prinicpales y secundarios, es decir un role como bien indica el sistema de diseño.

Lo interesante con las variables en css, es que estas, pueden ser rápidamente alteradas, solo con tocar una línea de código.

Lo que no entiendo es porque no crear una hoja de estilos para poner aparte todo el diseño -.-

He visto que, para que una variable tenga un sentido lógico, debería de llamarse con un nombre al cual haga referencia, o a la función que esta vaya a cumplir, ¿Por qué?, porque será más fácil de saber:

  • ¿Por qué está ahí?
  • ¿Cuál es su función?
    Y así saber o conocer cuál es la referencia que esta tenga con el contenido de nuestro diseño.

Para aquellas personas que estén teniendo problemas para visualizar los archivos dentro de las Carpetas de íconos y Logos:

  1. Deben descargar los archivos.
  2. Descomprimirlos en un sitio de internet. Como unzip.online
  3. Crear 2 carpetas diferentes que puedan almacenar los íconos y los logos, respectivamente.
  4. Añadir los archivos descomprimidos a sus carpetas correspondientes.
  5. Añadir ambas carpetas a la carpeta principal de "frontend-developer-1"
    Espero les sirva!

Para que el párrafo sea cómodo a la vista, lo recomendable es usar "la regla de múltiplo de 4" para los margenes.

Primer paso 😄

¡Vamo’ adarle!

Estando más informado de cómo funciona el desarrollo frontend puedo notar que las líneas de código son quizás el tercer paso del trabajo…

Antes de todo se debe tener la idea, luego diseñar en FIgma las pantallas, una ruta de diseño. Luego obtener los logos e iconos. Para lueeego empezar a hacer las líneas de código.

En la clase, la profe solo agrega una de las dos Tipografías.
✅ Quicksand
❌ Roboto

Les comparto como me quedó el código.

<!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">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <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=Quicksand:[email protected];500;700&family=Roboto:[email protected]&display=swap" rel="stylesheet">
    <style>
        :root {
            --white:#ffffff;
            --black:#000000;
            --very-light-pink:#c7c7c7;
            --text-input-field:#f7f7f7;
            --hospital-green:#acd9b2;
        }
        body {
            font-family: 'Quicksand', sans-serif;
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>
<body>
    
</body>
</html>

Muy interesante este tema de los sistemas de diseño.

No sabia que habia estas medidas estandars… Esa es la diferencia entre un trabajo normal y uno bien hecho.
Esas diferencias que no podemos explicar pero que hacen que una pagina se vea bien

Para los que somos humildes y utilizamos linux o windows el comando take es igual a hacer un mkdir (crear una carpeta) y hacer un cd a esa carpeta.

take carpeta
pwd = carpeta

es lo mismo que:

mkdir carpeta
cd carpeta

Se viene lo chido

Por fin entendiendo esto de las customs properties o variables

excelente clase

También podemos agregar las fuentes directamente en el css

@import url('https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap');

        body{
            font-family: 'Quicksand', sans-serif;
        }

Los link del tipo de letra y los colores.

<<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">
    <style>
        :root{
            --white: #FFFFFF;
            --black: #000000;
            --very-light-pink: #c7c7c7;
            --text-input-field: #F7F7F7;
            --hospital-green: #ACD9B2;
        }
        body{
            font-family: 'Quicksand', sans-serif;
        }
    </style>> 

Comando para abrir VS Code desde Terminal


 
Una forma rápida de abrir desde la terminal el VS Code es usando el comando: code seguido del archivo o carpeta
 

LInux Ubuntu

/* Abrir un archivo en especifico */
[email protected]: ~/frontend-developer-1 code index.html
/* Abrir carpeta del proyecto */
[email protected]: ~$ code ./frontend-developer-1

Para descargar los assets, y prácticar el uso de git, les dejo este repositorio de github.

¿Cómo declarar variables globales?

Ve al head de tu archivo .html, y justo antes de la etiqueta de cierre, pon:

:root {
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
}

Este código nos sirve para declarar colores que usaremos en varias partes del sitio web, facilitando su modificación en un futuro.

body {
	font-family: 'Open Sans', sans-serif;
	font-family: 'Quicksand', sans-serif;
}

También nos sirve para predefinir otros aspectos como la tipografía.

Para los que estan haciendo la parte practica de este curso en WSL les comparto como descargue y pase los archivos ahi.

  1. Desde Windows entre a la carpeta de descarga que alguien mas ya habia publicado Carpeta de Assets
  2. En mi caso descargue toda la carpeta y Drive en automatico la comprimio en .zip , despues la movi a una C: (esto por que me parecia mas comodo acceder desde WSL a esa ruta para copiar el archivo pero tu la puedes dejar donde quieras). Nota: Drive te baja un archivo con varios numeros en el nombre, te sugiero que lo renombres a algo facil, yo lo deje como Platzi_Yard_Sale.zip
  3. Pase a mi terminal en WSL y de ahi me movi a la carpeta que creamos esta clase para el proyecto osea frontend-developer
  4. Estando en mi carpeta en WSL ejecute el siguiente comando para mover mis archivos desde C: en Windows a la carpeta del proyecto en WSL
cp /mnt/c/Platzi_Yard_Sale.zip /home/TU_USER/frontend-developer-1

donde _TU USER es el nombre de la carpeta de tu usuario en WSL, tambien lo puedes ver usando el comando pwd

  1. Estando ahi instale el paquete unzip para poder descomprimir este tipo de archivos y posteriormente descomprimir el archivo que pase de Windows a WSL. Te dejo la secuencia de comandos a continuacion:
sudo apt-get update
sudo apt install unzip
unzip Platzi_Yard_Sale.zip

Y listo, finalmente deberas ver en tu proyecto en VS Code algo asi :

html:

 <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=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">

css:


:root {
    --white: #FFFFFF;
    --black: #000000;
    --dark: #232830;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
}

html {
    font-size: 62.5%;
}


Lo recomendable por buenas practicas es siempre agregar el CSS en un archivo aparte y las fuentes para mejor performance es mejor tenerlas descargadas directamente en el proyecto.

Que bueno que al final no uso roboto en un proyecto, al fin

Una alternativa mas corta para los colores

#FFF == #FFFFFF
#000 == #000000

Buenas prácticas con SVCs

Si estas usando algún SVC (Sistema de control de versiones como Git) Freddy sugiere que los archivos binarios como imágenes no se suban al repositorio. Lo mejor es alojar esos archivos en otro lugar. No conozco algún lugar así más que Google Drive.

Variables de CSS

En un equipo de desarrollo, diseño proporcionará el diseño del proyecto(wireframe) del cual podremos guiarnos para crear variables de los colores y las fuentes

  • Colores bases del proyecto…
:root{
--white: #ffffff;
}

  • Fuentes y ancho de fuente

HTML

    <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=Quicksand:[email protected];500;700&display=swap" rel="stylesheet">

CSS

body{
	font-family: "Quicksand", Sanserif;
} 

Nota
El diseño del proyecto debe seguir ciertas reglas para que se vea bien. Los colores y espaciados de cada elemento del proyecto son importantes. Por eso siempre hay que tenr en cuenta La teoria del los colores pasa saber elegir los colores del proyecto y la regla del espaciado, nuestro ojo funciona con multiplos de 4.

El espaciado es recomendable que sean con margen de múltiplo de 4 🧐

Como bajo esos iconos?

Colocando en la terminal . code una vez creado la carpeta nos abre automáticamente el proyecto en VSCode

Estoy emocionado por este proyecto 😄

¿Hola, te como puedo agregar los archivos a Figma ?

Genial, me encanta que estos cursos sean prácticos, con ejercicios muy cercanos a un “trabajo”

Hola, si quieren poder ver el pixelaje exacto en figma tan solo tienen que ingresar al enlace del prototipo que quieren ver y dar click en la parte superior donde se ve un menú desplegable y le dan click en abrir con editor 😁