Web Developer Fundamentals

1

Qu茅 aprender谩s sobre HTML y CSS

2

驴Qu茅 es el Frontend?

3

驴Qu茅 es Backend?

4

驴Qu茅 es Full Stack?

5

P谩ginas Est谩ticas vs. Din谩micas

HTML

6

HTML: anatom铆a de una p谩gina web

7

Index y su estructura b谩sica: head

8

Index y su estructura b谩sica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatom铆a de una etiqueta de HTML

Etiquetas multimedia

11

Tipos de im谩genes

12

Optimizaci贸n de im谩genes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

CSS

21

驴Qu茅 es CSS?

22

驴C贸mo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatom铆a de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

M谩s sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desaf铆o: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas pr谩cticas y ejemplos de responsive

50

Im谩genes responsive

Accesibilidad

51

Sem谩ntica

52

Textos

53

Labels, alt y title

Pr贸ximos pasos

54

Pr贸ximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Variables

42/55
Recursos

Aportes 228

Preguntas 43

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

La verdad que cada clase mas aprendo mucho mas, realmente se merece llevar el nombre de 鈥淒efinitivo鈥.

En la clase de hoy vimos el tema de Variables Si, Variables en CSS.

Para que nos sirven?
Nos servir谩n para guardar valores que reiteradamente ocuparemos en el desarrollo de nuestro proyecto. Realmente se le ve mas utilidad en proyectos grandes. Pero claro, es importante conocerlo desde ahora.

Como se declara?
Normalmente se declara dentro de :root ta que ser谩n variables globales.
y se declaran de la siguiente manera:

:root {
  --primary-color: #322f3d;
  --secondary-color: #8d93ab;
  --font-color: white;
  --font: 1.8rem;
  --titles: 3rem;
}

Indicando con 鈥 (Doble gui贸n) y seguido del Nombre de la variable y el **valor **que este tendra.

Como utilizar las variables?
Se utilizaran las variables gracias a la Funci贸n var() y se usa de la siguiente manera.

header {
  background-color: var(--primary-color);
  width: 100%;
  height: 10rem;
  color: var(--font-color);
  font-size: var(--titles);
  text-align: center;
}

Espero les guste el mini resumen. Saludos 馃槂

Recomiendo mucho la p谩gina de colors Para jugar con paletas de colores

Nota:

Adicionalmente var() tambien puede recibir un valor por defecto en caso de no poder encontrar la variable.

var( <custom-property-name> , <declaration-value>? )
<h1>Ejemplo:</h1>
:root {
 --base-gray: #273b47
}

body {
	color: var(--base-gray, gray)
}

Tambi茅n funcionan las variables al aplicar m谩rgenes:

La pseudoclase :root hace referencia al elemento ra铆z del documento, o lo que es lo mismo, al elemento <html>. La diferencia de utilizar html o :root como selector es que este 煤ltimo tiene algo m谩s de especificidad CSS. Mientras que html tiene 001, :root tendr铆a 010.

Al colocarla en :root estamos definiendo que la custom property estar谩 definida para el 谩mbito de esa etiqueta <html> (o cualquier elemento hijo), es decir, a todo el documento.

Definir una variable CSS

El mayor beneficio que yoo le veo esque te acorta mucho tiempo y no son complicadas
aqui les dejo un link para quienes queiran investigar mas
https://developer.mozilla.org/es/docs/Web/CSS/var

Las variables CSS se comportan como propiedades, porque tienen herencia y tienen cascada.
Por eso se le llaman Custom Properties, adem谩s de que no se pueden declarar fuera de un selector.

:root{ 
  --color: red; 
    background: var(--color); 
}

Declarando las variables en el root, hacemos que esas variables sean globales y puedan ser usadas a lo largo de todo el proyecto.

Nota: Las variables en CSS son case sensitive. Es decir, cuando recuperamos su valor, debemos escribir el nombre tal y como lo declaramos. Es curioso porque las propiedades CSS no son case sensitive (aunque la buena practica sea siempre escribirlas en minuscula). Entonces podemos decir que solo las propiedades personalizadas (en este caso las variables) si son case sensitive.

Cuando usan el lorem el comando Alt + z hace un ajuste en la l铆nea, me refiero a que salte de l铆nea

Tomando como analog铆a lo que dijo Diego de Granda,root es como un arbol que hara que nuestras valriables se hereden en todo nuestro proyecto.

aqu铆 les dejo mis apuntes de todo el curso hasta esta clase

apuntes CSS

est谩 todo desde lo que se vi贸 al inicio en HTML

Guarda valores que siempre usamos en los estilos para no repetir el mismo c贸digo a cada rato.

Se guardan en :root {}. Se escriben as铆: --nombreVariable: valor;.

Para llamarlas se pone en el valor de la propiedad: var(--nombreVariable);.

:root {
  --primary-color: #003476;
  --secundary-color: #b4d2f7;
  --header-size: 4rem;
  --font: 1.8rem;
}
h1 {
  font-size: var(--header-size);
  color: var(--primary-color);

Notas de la clase

wow la verdad me gustar铆a que todos los cursos de platzi tuvieran esta calidad e reforzado algunos temas para entender mas pero este es un gran profesor 鉁

38. Mis apuntes sobre: 鈥淰ariables (custom properties)鈥

Debemos crear las variables en el root del css, porque hace referencia a todo el HTML.

Por si no ven el potencial: Imaginen que quieren cambiar todos los colores de su web, solo cambian los valores de las variables, y TODA su web cambiar谩 de color, en vez de tener que hacerlo en todo el inmenso CSS que tengan, por eso vale la pena.

Les comparto el c贸digo CSS de la clase:

:root {
    --primary-color: #003476;
    --secundary-color: #b4d2f7;
    --header-size: 4rem;
    --font-size: 1.8rem;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
.header {
    width: 100vw;
    height: 15vh;
    background-color: var(--primary-color);
}
.main {
    width: 100vw;
    height: 70vh;
    font-size: var(--font-size);
}
.main-title {
    font-size: var(--header-size);
    color: var(--primary-color);
}
.footer {
    width: 100vw;
    height: 15vh;
    background-color: var(--secundary-color);
}

Hab铆a visto otros cursos de CSS y HTML antes, pero en ninguno mencionaron siquiera la existencia de variables. Estoy muy satisfecho con el contenido visto hasta ahora en el curso, he aprendido mejores practicas de desarrollo as铆 como tambi茅n he prestado mucha atenci贸n a ciertas practicas que no son recomendadas. Solo me queda dar las gracias a Diego De Granda y al equipo de Platzi que han hecho posible este curso.

Ya tengo todo el CSS con variables. Incluso met铆 en una variable todo el estilo de unas sombras, as铆:

  /* Sombras */
  --shadow-sm-dark: 0 0 0.75rem -0.35rem rgba(0, 0, 0, 0.25);

Queda genial porque ahorro 50% en cada sombra.

Ac谩 les dejo el sitio:
https://donnyvasquez.github.io/Curso-definitivo-de-HTML-y-CSS/blog/

Diooos que incre铆ble me gusto mucho, gracias 鉂わ笍. Todo esto me servira para mi vida, y sin duda no me arrepiento de invertir en mi futuro con Platzi son lo m谩ximo.

A mi me gusta usar este website para buscar paletas de colores:

(https://colorhunt.co/)

Apunte de la clase: Variables en CSS

Usualmente se declaran las variables dentro de 鈥渞oot鈥 que hace referencia a la etiqueta 鈥渉tml鈥 y por ende las declara de manera global.

Sintaxis

:root{
	--my-variable: valor;
}

Ejemplo

:root{
	--color-parrafo: green;
}
p{
	color: var(--color-parrafo); font-weight: bold;
}
<p>Hola me llamo Keneth y soy Ingeniero de Sistemas</p>

A帽adir un valor predeterminado

:root{
	--color-parrafo: green;
}
/*red ser谩 el valor predeterminado, este se aplicar谩 si no se detecta la variable (en este caso est谩 mal escrito)*/
p{
	color: var(--color-parrafomsa, red); font-weight: bold;
}
<p>Hola me llamo Keneth y soy Ingeniero de Sistemas</p>

las variables son importantes para la actualizaci贸n de una pagina despu茅s de pasar un tiempo, si el branding de una marca cambia, solo cambias un par de variables y todo el tema de tu pagina web puede cambiar

Desde que empec茅 este curso ya no me mareo ni me vuelvo loco al leer c贸digo. Claro que los proyectos del curso son peque帽os, pero de igual forma. Cada vez se hace m谩s familiar ubicar etiquetas, selectores, darnos cuenta lo que nos est谩 j#diendo el proyecto y corregirlo. Esto no tiene ning煤n tipo de relevancia, pero quer铆a compartirlo de todos modos 馃槂

Clase 42 - Variables


驴Qu茅 son los custom properties o variables?

  • Son espacios en donde podemos almacenar c贸digo que vamos a repetir mucho en nuestros proyectos.

驴C贸mo usamos variables en CSS?

  • Para usar variables de CSS debemos situarnos al inicio de nuestro documento CSS y usar el elemento root de la siguiente manera:
  • Sintaxis:
:root
{

}
  • Dentro de este selector es donde escribiremos nuestras variables y para escribirlas debemos de hacerlo de la siguiente manera:
  • Sintaxis:
:root
{
    --primary-color: #003476;
    --secondary-color: #b4d2f7;
    --header-size: 4rem;
    --font: 1.8rem;
}
  • Como vemos para crear variables debemos de escribir dos guiones (鈥) y seguido de ellos escribimos el nombre de la variable y finalmente su valor.
  • Para usarla en alg煤n momento debemos usar el valor var() y dentro del par茅ntesis debemos escribir el nombre de la variable de la siguiente forma:
  • Sintaxis:
h1
{
    font-size: var(--header-size);
    color: var(--primary-color);
}

驴Hac铆a donde hace referencia el selector :root?

  • Al elemento <html>.

驴Cu谩les son los usos m谩s comunes que le podemos dar a las variables como desarrolladores frontend?

  • Colores.
  • Tama帽o de fuentes.
  • Fuentes.

驴Cu谩ndo le vamos a sacar provecho a las variables como desarrolladores frontend?

  • Cuando estemos en proyectos grandes.

Comparto los apuntes de la clase 馃槂

La pseudoclase :root CSS coincide con 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.

https://developer.mozilla.org/en-US/docs/Web/CSS/:root

Hola, este es mi aporte.

El uso de variables es indispensable en proyectos grandes con lineas de codigo muy largas y nos evita caer en errores al manejar diferentes tipos de tama帽os de fuentes o diferentes colores.

:root {
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #4c4d4c;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --gray-green: #989c99;
    --H2-titles:#52575c;
    --button-content:#c2c7cc;
    --sm: 1.4rem;
    --md: 1.6rem;
    --lg: 1.8rem;
}

aca dejo como ejemplo las variables que estoy usando en mi proyecto actual.

El principal aporte que veo al implementar variables es el mantener de forma sencilla la uniformidad del c贸digo reutilizando una variable muy intuitiva a lo largo de tu css. Sin duda alguna esta ha sido una de mis clases preferidas! Esto en verdad ayuda a hacer m谩s din谩mico el proceso de construcci贸n de un layout.

Les comparto una gran p谩gina que a mi me ha ayudado mucho con lo que son paletas de colores. Vienen ya armadas y con los c贸digos en hexadecimal para que lo pongas en tus code, adem谩s hay much铆sima variedad de paletas: Color Hunt.
Besitoos

驴Por qu茅 no darle al html un font-size: 10px, en lugar de un porcentaje que puede variar por browser?

Anotaciones:

驴Qu茅 ocurre cuando tienes muchos ficheros .css?
驴Alguna buena pr谩ctica para tener las variables en 1 solo fichero y que todos los .css obtengan el valor de las variables de ah铆?
Gracias

:root{ /* el hace referencia al html */
	--variable: value;
}
selector{
	property:var(--variable);
}
  • Las variables nos permiten reutilizar c贸digo y estandarizar algunas valores como los colores, fuentes, etc.

No sab铆a lo de las variables. La verdad ahorra much铆simo tiempo y adem谩s asegura que se mantengan los estilos en nuestra p谩gina.

La mayor铆a de preprocesadores tienen esa opci贸n, o forma de crear variables de una forma m谩s intuitiva. Yo uso less, y las variables se crean con un @[nombre]: valor. Y ya est谩

馃 Las variables CSS permite almacenar un valor para referenciarlo en varios lugares.

Les comparto una pagina donde pueden ver diferentes dise帽os de botones y copiarlos a su codigo
https://cssbuttons.app/

Si est谩n buscando en los recursos la carpeta claseVariables esta se encuentra dentro de la carpeta clasePseudoClases. Igual aqu铆 les comparto el c贸digo de esta clase.

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="stylesheet" href="./style.css">
</head>
<body>
    <header></header>
    <main>
        <h1>Soy un titulo</h1>
        <section>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, at esse? Atque accusamus eum explicabo. Enim nulla impedit neque est!
            </p>
        </section>
    </main>
    <footer></footer>
</body>
</html>

style.css

:root {
    --primary-color: #003476;
    --secundary-color: #b4d2f7;
    --header-size: 4rem;
    --font: 1.8rem;
}

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

html {
    font-size: 62.5%;
}

header {
    width: 100vw;
    height: 15vh;
    background-color: var(--primary-color);
}

main {
    width: 100vw;
    height: 70vh;
    font-size: var(--header-size);
}

h1 {
    font-size: var(--header-size);
    color: var(--primary-color);
}

footer {
    width: 100vw;
    height: 15vh;
    background-color: var(--secundary-color);
}

Si usas variables, puedes simplemente cambiar el valor de una variable y cambiar谩 la propiedad en donde hayas puesto esa variable. Sirve mucho para ahorrarte trabajo en estar buscando cada color quieres modificar. Por ejemplo una empresa de dice que por navidad reemplazaran el color azul por el rojo, entonces t煤 solo modificas el valor de tu variable de azul y rojo y listo!!!.

  • Nota: Los nombres de propiedades personalizadas son case sensible (distinguen entre may煤suculas y min煤sculas) 鈥 --my-color ser谩 tratado como una propiedad personalizada distinta a --My-color.

cuando inicie ten铆a mis dudas del nombre del curso, pero se lo merece al 100%.
CURSO DEFINITIVO DE HTML Y CSS

42.-Variables

Es posible usar variables en CSS en donde podemos guardar un valor que podemos reutilizar en nuestros estilos, as铆 evitamos escribir c贸digo repetido.

Lo hacemos mediante:

:root{} 鈫Que siempre hace referencia a nuestro html. Aqu铆 es donde se declarar谩n variables.

Ojo si en sus proyectos aun les piden soportar IE css vars no funciona je nos paso https://caniuse.com/css-variables

No es mejor usar directamente stylus o alg煤n otro preprocesador? siento que el c贸digo crece y se hace mas complejo usando de esta forma las variables

S铆 hab铆a visto el tema de las variables en videos de youtube antes pero nunca me anim茅 a utilizarlas, creo que lo voy a hacer de ahora en adelante!

buen铆simo

Genial! variables<3

Las utilizamos para cosas que vamos a estar re utilizando constantemente en nuestro proyecto, como nuestro color primario, secundario o terciario; nuestro tama帽o de fuente y color de fuente; tama帽o de encabezados

Son mayormente usadas cuando tenemos proyectos grandes, para no confundir nuestro valores los estandarizamos con variables que rehusamos, as铆 evitamos discrepancias de colores o tama帽os de fuente.

ROOT: Nuevo elemento de CSS para generar variables:
:root {}
El root hace siempre referencia a nuestra etiqueta <html>. Es como el punto de partida de nuestro proyecto. Dentro del root declaramos nuestras variables.

Las variables se construyen con el siguiente formato:
鈥搉ombre-variable: valor;

El profesor menciona que el

:root { }

siempre est谩 apuntando a nuestra etiqueda HTML, por lo que si se colocan la variables en el apartado de

html {
	font-size: 62.5%;
	--primary-color: #003476;
	--secondary-color: #64d2f7;
	--header-size: 4 rem;
}

tambi茅n deber铆a funcionar.

Primera vez usando variables en CSS y me encantaron!!

Variables en CSS

Las variables en css permiten utilizar estilos que se van a usar mucho como colores principales o tama帽os de fuente.

:root {
    --primary-color: #003478;
    --secondary-color: #b4d2f7;
    --header-size: 4rem;
    --font: 1.8rem;
}

para declarar variables, se hace usando el selector :root y se definen las propiedades con dos guiones -- y luego el nombre de la variable --variable-para-color-principal: #04d3f5;

las variables en css nos srivern para reutilizare codigo, es decir si necesitamos hacer un proyecto con ciertos colores podemos guardar en root:{--variable1:#color1;} y asi para en lugar de estar copiando codigo que posiblemente alguien toque y cambie un peque帽o valor, solo tengamos que llmar a la variable con background-color: var(--variable1);

Woaaaa que buenas son las variables, me encanto esta clase, dato curioso, puedes ponerle cualquier nombre, por ejemplo 鈥溾損ajaro: 100vh;鈥 y igual va a servir

Variables en CSS

驴Por qu茅 utilizar propiedades personalizadas o variables?

Para responder a esta pregunta es necesario formular otra pregunta: 驴Qu茅 pasa cuando se tiene una gran cantidad de l铆neas CSS? Una de las situaciones m谩s comunes es la repetici贸n de valores para las propiedades como color: #ff9 se repitan.

En caso se requiera cambiar una de las propiedades repetidas, es necesario buscar dichos valores globalmente debido a que la misma propiedad CSS se encuentra en diferentes archivos, se puede evitar todo este proceso si se utilizan variablesque permite realizar dicho cambio desde un solo lugar (en la definici贸n de la variable)

驴Qu茅 son?

Definidas como propiedades personalizadas (las define el usuario/programador), las variables en CSS nos permiten establecer propiedades reutilizables, que se ocuparan reiteradas veces, en el desarrollo de un proyecto.

Creaci贸n

Para su creaci贸n es necesario definir el

  • nombre de la propiedad
  • valor de la propiedad

Para poder llamar a la propiedad registrada es necesario utilizar la funci贸n var(--nombre-propiedad)

驴D贸nde definimos las variables?

Estas nuevas propiedades se pueden definir dentro en:

  • pseudo-clase :root
  • selector css

Ejemplo

:root{
	/* Definici贸n de las variables */
}
section{
	--pdd-box: 4rem;
	padding: var(--pdd-box);
}

Restricciones para el nombre de las variables

Los nombres de las variables deben tener las siguientes caracter铆sticas.

  • Deben iniciar con el prefijo --(dos guiones)

Los nombre son Case sensitive (distingue entre may煤sculas y min煤sculas)

Ejemplo

:root{
	--nueva-propiedad: value;
	--color-uno: value1;
	--color-Uno: value2;
}

En este ejemplo el --color-uno es diferente de --color-Uno

Valores por defecto

Otra funcionalidad de las variables es que se puede definir un valor en por defecto en caso aun no se defina la propiedad personalizada o variable.

Funcionamiento

Los valores por defecto utiliza la funci贸n var() haciendo uso de 2 par谩metros

  1. Nombre de la propiedad.
  2. Valor por defecto.

var() solo puede aceptar un m谩ximo de 2 argumentos.

Definici贸n

selector{
	var(<nombre_propiedad>, alt_value);
}

Ejemplo

p{
	color: var(--my-var, red)
}

Establece un valor del color desde la variable --my-var y un color rojo en caso la variable no este definida.

Ejemplo general

/*
	EJEMPLOS
	--nombre-propiedad: valor;
*/
:root{
	--primary-color: #ff0;
	--secondary-color: #0ff;

	--title-size: 3.6rem;
	--pdd-20: 2.4rem;
}

Valores err贸neos

En ocasiones se definen valores incorrectos a las variables creadas o se asigna un valor incorrecto a un determinada propiedad css, lo que lleva a preguntarse.

驴Qu茅 pasa con los valores inv谩lidos?

Cuando el navegador encuentra una sustituci贸n inv谩lida con var(), se usar谩 el valor inicial o heredado.

Dios santo! Qu茅 cosa juedteee.

Super interesante todo lo que podemos hacer en css, siento que me quedo corto pero supongo que es cuesti贸n de empezar a practicar mucho鈥 siempre dec铆a que prefer铆a el back-end pero ahora creo que prefiero ser fullstack y enfocarme m谩s al front-end ya que me gust贸 bastante.

Excelente es una gran ayuda en cualquier proyecto.

Las variables nos ayudan a simplificar nuestro trabajo en el prototipado. Estas variables ir谩n a dentro del selector root:
El root hace referencia siempre a nuestro html. Se escribe de la siguiente manera:
搂 :root{
鈥損rimery-color: #003476;
鈥搒ecundary-color: #0034c6;
}
Para llamar a la variable a un selector la sintaxis es la siguente:
搂 Container{
Background-color: var(鈥損rimery-color)
}

Hola chicos.
Les comparto la siguiente p谩gina de abode para que puedan combinar , probar y jugar con diferentes colores aplicando reglas de armon铆a de color como an谩logos, cuadrados, compuesto, entre otros.
https://color.adobe.com/es/create/color-wheel

Les dejo mi resumen de clase y un ejemplo utilizando el mismo HTML del video y el uso de variables. Coloqu茅 el valor de main como un 鈥渞esultado鈥 de restar el alto de la ventana con lo que tiene de alto el header m谩s lo que tiene de alto el footer. De cierto se vuelve 鈥渄inamico鈥 el alto del contenido de la p谩gina. puede ver el resultado renderizado desde esta p谩gina

CSS

:root {
	/*el selector :root es el punto de partida del documento, al escribirlo del modo que est谩 ac谩 hace referencia a la etiqueta html y es donde se deben colocar las variables*/
	--primary-color: #003476;
	/*--primary-color es la forma de generar una variable llamada primary-color*/
	--secondary-color: #b4d2f7;
	--header-size: 3.5em;
	--font: 18px;
	--heigth-header: 20vh;
	--heigth-footer: 15vh;
	--heigth-main: calc(100vh - (var(--heigth-header) + var(--heigth-footer)));
}

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

header {
	background-color: var(--primary-color);
	/*var (--nombre-de-variable) es la forma de utilizar las variables creadas desde el selector :root*/
	height: var(--heigth-header);
	width: 100vw;
}

main {
	width: 100vw;
	height: var(--heigth-main);
	font-size: var(--font);
}

h1 {
	color: var(--primary-color);
	text-align: center;
	font-size: var(--header-size);
}
footer {
	background-color: var(--secondary-color);
	width: 100vw;
	height: var(--heigth-footer);
}

Creo que el principal beneficio es la organizaci贸n. No andar repitiendo valores y tener una consistencia.

Aqu铆 igual aplicar铆a una variable para el width e incluso dos para los height! Excelente material 馃槑

para crear una variable en css, escribo:

:root { --nombre-de-la-variable: valor; }

La clase mas reveladora del curso, y no es por demeritar las otras.

Sintaxis para crear variables:

Sintaxis para llamar a esas variables:

Excelente clase, no sabia que se pod铆an usar variables en CSS鈥 esto me permitir谩 llevar un mejor control en los dise帽os de mis proyectos. les comparto aqu铆 mi c贸digo por si alguien tuvo problemas con la ejecuci贸n y necesita compararlo, por que a mi si me sali bien 馃槂

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html{
    font-size: 62.5%;
}
:root{
    --primery_color: coral;
    --segundary_color: rgb(233, 224, 149);
    --header_size: 4rem;
    --font:1.8rem;
}
header{
    width: 100vw;
    height: 15vh;
    background-color: var(--primery_color);
}
main{
    width: 100vw;
    height: 70vh;
    font-size: var(--font);
}
h1{
    font-size: var(--header_size);
    color: var(--primery_color);
}
footer{
    width: 100vw;
    height: 15vh;
    background-color: var(--segundary_color);
}

<!DOCTYPE html>
<html lang=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Variables</title>
<link rel=鈥渟tylesheet鈥 href="./style.css">
</head>
<body>
<header></header>
<main>
<h1>
Soy un Titulo
</h1>
<section>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse magni delectus officia ratione, repellendus quos maiores eum atque asperiores necessitatibus omnis cupiditate soluta fugit voluptates numquam, beatae perferendis eos sunt?
Fugit ut minus perferendis eum corporis, sapiente, magni sequi provident quis iure facere rem possimus tempora. Iure maiores architecto earum quibusdam hic fugit ab reiciendis eaque, sapiente, nesciunt reprehenderit molestias?
Eligendi deleniti voluptas reprehenderit, ex sint voluptatum beatae exercitationem autem, tempore quaerat mollitia consequuntur ut ducimus possimus facilis quia iusto id praesentium! Veniam aspernatur reiciendis cum quam iure tempore quod!
Deserunt odit esse nobis libero eaque repellat atque et unde enim dolor quaerat voluptatum voluptatem, autem sint dicta explicabo ex quo, commodi aliquam iusto! Provident, dolores cumque! Totam, dolor dignissimos!
</p>
</section>
</main>
<footer></footer>
</body>
</html>

:root {
鈥損rimary-color:#003476;
鈥搒ecundary-color:#b4d2f2;
鈥搕ercero-color:yellow;
鈥揾eader-size:4rem;
鈥揻ont:1.8rem;

}

{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;/
siempre debe ser*/
}
header {
width: 100vw;
height: 15vh;
background-color:var(鈥損rimary-color);
}
main {
width: 100vw;
height: 70vh;
font-size: var(鈥揻ont);
}

h1 {
font-size: var(鈥揾eader-size);
color:var(鈥搒ecundary-color);
display: flex;
justify-content: center;
}

section {
width: 150vw;
height: 25vh;
background-color:var(鈥搕ercero-color);

}
footer {
width: 100vw;
height: 15vh;
background-color:var(鈥搒ecundary-color);
}

Seg煤n yo sabia lo basico de HTML y CSS, pero ahora me di cuenta que no sabia nada 馃槶馃槶

WOW imagina tener una paleta de colores que es lo comun para un proyecto鈥 Esto es de locos me encanto.

Me encanto esta clase es muy util!!!

Las variables se declaran en el :root {
}

Custom Properties y Variables en CSS

  • Las Custom Properties o Variables en CSS son una herramienta que nos permite almacenar valores para su posterior uso en nuestros estilos.

  • A diferencia de variables en matem谩ticas o lenguajes de programaci贸n, las variables en CSS son 煤tiles para almacenar valores que queremos utilizar en diferentes partes de nuestro proyecto.

  • Utilizamos el selector :root para declarar nuestras variables. Por ejemplo:

    :root {
      --primary-color: #003476;
      --secondary-color: #b4d2f7;
      --header-size: 100%;
      --font-size: 1.8rem;
    }
    
  • Estas variables se utilizan con la funci贸n var() en cualquier propiedad CSS. Por ejemplo:

    header {
      background-color: var(--primary-color);
      font-size: var(--header-size);
    }
    
    h1 {
      color: var(--primary-color);
      font-size: var(--font-size);
    }
    
    footer {
      background-color: var(--secondary-color);
    }
    
  • El uso de variables nos permite reutilizar c贸digo, mantener la coherencia en el dise帽o y facilitar la actualizaci贸n de estilos en proyectos grandes.

  • Es especialmente beneficioso cuando hay una variedad de colores y tama帽os de fuente en todo el proyecto.

  • Al utilizar variables, podemos centralizar y organizar mejor nuestros estilos, evitando inconsistencias y facilitando el mantenimiento del c贸digo.

隆Ahora est谩s listo para incorporar variables en tus proyectos CSS y aprovechar sus beneficios! En la siguiente clase, exploraremos el tema de las web fonts y c贸mo integrar fuentes personalizadas en nuestros proyectos web.

OIgan, una super pagina para aprender mas del flex, ME ENCANTO, LO VI EN UNOS COMENTARIOS PERO SE LOS DEJO NUEVAMENTE <https://flexboxfroggy.com/#es>

Me gustaron mucho las variables

En CSS (Cascading Style Sheets), las variables son llamadas 鈥渧ariables personalizadas鈥 o 鈥渧ariables CSS鈥 y se introdujeron con la especificaci贸n de CSS3. Las variables permiten almacenar informaci贸n que puede ser reutilizada a lo largo del documento, lo que facilita el mantenimiento y la actualizaci贸n del estilo de una p谩gina web. Aqu铆 hay una introducci贸n a c贸mo se utilizan:

Declaraci贸n de Variables CSS:
css
Copy code
/* Declaraci贸n de una variable */
:root {
鈥揷olor-primario: #3498db;
鈥搕amanio-fuente: 16px;
}

/* Uso de variables en otras reglas CSS */
body {
font-size: var(鈥搕amanio-fuente);
}

.header {
background-color: var(鈥揷olor-primario);
color: white;
}
En este ejemplo:

:root se utiliza para declarar variables a nivel global en el documento.
鈥揷olor-primario y --tamanio-fuente son nombres de variables personalizadas.
var(鈥搉ombre-variable) se utiliza para hacer referencia y utilizar el valor almacenado en la variable.
Alcance de las Variables:
Las variables CSS pueden tener diferentes alcances:

Globales (:root):

Declarar variables en :root las hace accesibles en todo el documento.
Locales (en un selector espec铆fico):

Tambi茅n puedes declarar variables dentro de un selector espec铆fico, limitando su alcance a ese selector y sus descendientes.
css
Copy code
.elemento {
鈥揷olor-fondo: #f0f0f0;
background-color: var(鈥揷olor-fondo);
}
Cambios Din谩micos:
Una gran ventaja de las variables CSS es que sus valores pueden cambiar din谩micamente mediante JavaScript. Puedes actualizar el valor de una variable y ver los cambios reflejados en el dise帽o de tu p谩gina.

javascript
Copy code
document.documentElement.style.setProperty(鈥欌揷olor-primario鈥, 鈥#ff5733鈥);
Estas son solo algunas de las caracter铆sticas b谩sicas de las variables CSS. Pueden ser extremadamente 煤tiles para mejorar la mantenibilidad y la coherencia en el dise帽o de tu sitio web.

Variables en CSS
Las variables son utilizadas para almacenar valores que se pueden reutilizar en una hoja de estilo. Las variables son especialmente 煤tiles para almacenar colores, tama帽os de fuente, m谩rgenes y otros valores que se utilizan en varios lugares de tu hoja de estilo.
.
El uso de variables CSS hace que las hojas de estilo sean m谩s flexibles y f谩ciles de mantener, ya que se puede cambiar el valor de una variable en un solo lugar y afectar谩 autom谩ticamente todos los lugares en los que se utiliza en la hoja de estilo.
.
Las variables CSS se definen en el bloque :root, que es el selector de m谩s alto nivel en una hoja de estilo y se utiliza para declarar variables globales que pueden ser accedidas desde cualquier parte del documento CSS.
.
Declaraci贸n de una variable: Para declarar una variable CSS, se utiliza la propiedad doble guion (鈥) seguida del nombre de la variable y el valor que deseas asignar. Ej.

:root {
	--color-primary: #007bff;
	--font-size: 16px;
} 

Uso de una variable: Para utilizar una variable en tu hoja de estilo, se debe encerrar el nombre de la variable entre par茅ntesis y precedido de var(). Ej:

.boton {
	background-color: var(--color-primary);
	font-size: var(--font-size);
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Variables</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <header></header>
    <main>
      <h1>I'm a title</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque
        fuga, iusto sequi iure cupiditate repudiandae in quo doloribus inventore
        non distinctio, illo minima. Autem repellat esse blanditiis explicabo
        at?
      </p>
    </main>
    <footer></footer>
  </body>
</html>

CSS

:root {
  --primary-background-color: #00006c;
  --secondary-background-color: #7fffd4;
  --header-font-size: 4rem;
  --global-font-size: 1.8rem;
}

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

html {
  font-size: 62.5%;
}

header {
  height: 15vh;
  background-color: var(--primary-background-color);
}

main {
  height: 70vh;
  font-size: var(--global-font-size);
}

h1 {
  color: var(--primary-background-color);
  font-size: var(--header-font-size);
}

footer {
  height: 15vh;
  background-color: var(--secondary-background-color);
}

Aparte de lo que dijo el profe, creo que usar variables tambi茅n hace que el c贸digo se entienda m谩s f谩cil.

Las variables en CSS, tambi茅n conocidas como 鈥渧ariables personalizadas鈥 o 鈥渃ustom properties鈥, son una forma de almacenar informaci贸n reutilizable en tus hojas de estilo

Gracias profe por la explicacion鈥

隆No ten铆a idea de que esto pod铆a hacerse! Es una buena forma de simplificar el trabajo y mantenerlo ordenado.

no tenia idea de esta funcionabilidad de css

que buena clase!!!

oh鈥 benditas sean la variables, sufria bastante cuando los proyectos tomaban 500 lineas de css para arriba y ni hablar del resposive

Me gusta como explica el profe Diego. Es un genio.

.

Las variables deben tomar como nombre su funci贸n:

Ejm: --background-color-nav:green;
鈥揻ont-size-p:2rem;

Con anticipacion te brindan documentacion para profundizar aun mas en el tema impartido.

La verdad super f谩cil, ya me preguntaba si css tenia algo as铆.

Se deberian llamar constantes.

En CSS, una variable es un valor que se puede reutilizar en diferentes partes de un archivo CSS o en varios archivos CSS. Las variables se definen con el s铆mbolo 鈥 seguido del nombre de la variable y su valor. Por ejemplo, se puede crear una variable llamada --main-color con el valor red:

:root {
    --main-color: red;
}

Una vez que se ha definido una variable, se puede utilizar en cualquier parte del archivo CSS o en varios archivos CSS, mediante la utilizaci贸n de la sintaxis var(鈥搉ombre-de-la-variable). Por ejemplo:

.header {
    background-color: var(--main-color);
}

En este ejemplo, el fondo del encabezado ser谩 rojo, ya que estamos utilizando la variable --main-color que definimos anteriormente con el valor de red.

En resumen, las variables de CSS son una forma de almacenar valores comunes que se pueden reutilizar en varias partes de un archivo CSS o varios archivos, con el objetivo de reducir la repetici贸n de c贸digo, facilitar el mantenimiento, y poder cambiar el valor de una sola vez en todas las partes donde se utiliza.

Me gustan mucho las variables, antes las usaba en SASS
Esta p谩gina me ha ayudado a entender los tama帽os mas que nada de fuentes y organizarlos mejor
Utopia

  :root {
        --step--4: clamp(0.40rem, calc(0.39rem + 0.44vw), 0.74rem);
        --step--3: clamp(0.58rem, calc(0.47rem + 0.64vw), 0.96rem);
        --step--2: clamp(0.69rem, calc(0.55rem + 0.84vw), 1.20rem);
        --step--1: clamp(0.90rem, calc(0.68rem + 1.45vw), 1.70rem);
        --step-0: clamp(1.00rem, calc(0.74rem + 1.46vw), 1.88rem);
        --step-1: clamp(1.20rem, calc(0.87rem + 1.91vw), 2.34rem);
        --step-2: clamp(1.44rem, calc(1.01rem + 2.48vw), 2.93rem);
        --step-3: clamp(1.73rem, calc(1.16rem + 3.22vw), 3.66rem);
        --step-4: clamp(2.07rem, calc(1.34rem + 4.17vw), 4.58rem);
        --step-5: clamp(2.49rem, calc(1.54rem + 5.39vw), 5.96rem);
    }

Que cosa hermosa las variables. la verdad que es algo que me ha cambiado la forma de ver CSS.