HTML

CONFIGURACION
Pelenight theme, 2077theme temas
Prettier Formateador de código (nos ayuda a ordenar el
código, colocar el código en su lugar).
Indent-rainbow Me agrega espacios
Image preview Para visualizar imágenes que tenemos referenciadas
Live server Nos levanta un servidor local en tiempo real
Palenight theme Cambiar el color del editor
Image preview Para poder ver la imagen en el código
[Link] Temas para visual studio code
[Link] Chat para desarrolladores
ESLint
Auto Rename Tag Cambia automáticamente la etiqueta de cierre cuando
modificas una etiqueta HTML.
[Deprecated] Bracket Pair Colorizer 2 Colorea pares de corchetes y paréntesis
gitens Proporciona información detallada sobe historial de
git, como quien iso cambios en cada línea de códigos y
cuando
 Colorea las líneas de indentación.
indent-rainbow  Cada nivel tiene un color diferente.

[Link]

COMPONENTES DE REACT GRATIS [Link]

PARA REALIZAR FONDOS CON CSS Y [Link]
HTML

EXTENCION DE CHROME
COLORZILLA Para poder coger colores de otras paginas
FAKE FILLER Rellena formularios con datos falsos
[Link] Para estar actualizado con noticias .
uBlock Origin Quitar anuncios
TRADUCTOR IA
DARK READER Tema claro y obscuro
1PASSWORD – PASSWORD MANAGER Para administrar contraseñas
CALENDLY: SOTWARE Software de programación de reuniones
ADGUARD ADBLOCKER Bloqueador de anuncios
[Link] Botones etc para copiar código
TEMARIO:
26:10 - Editor de código ---
 Utilizamos editores de Código o ides (visual Studio Code).
 [Link] descargamos e instalamos
 Creamos una carpeta para el proyecto que vamos a desarrollar
 Creamos un [Link]
[Link]

HTML BASICO ---

00:35:02 - Estructura de una etiqueta
 Cada elemento está definido por etiquetas
 Se llama index porque nosotros cuando subimos una pagina web a un servidor, la mayoría de los
servidores que son compartidos están hechos para que la pagina que tiene que leer sea el index.
 Las paginas web siempre se termina en html
 El nombre de etiquetas siempre se abre con este símbolo >
Ejemplo: <tag> </tag> en el medio va el contenido

00:45:48 - Estructura de una página WEB

00:51:58 - Párrafos y encabezados
ENCABEZADOS: <H1> </H1> tenemos 5 tipos encabezados del a la h1 a h5 (h$*5) para crear rápido los
encabezados.

 H1 es solo usado por una vez o una vez por pagina, porque por esto lo ven de que se trata la
página.

ETIQUETA P: <P> </P> puede escribir un elemento

01:00:09 - Listas
Los menús de navegación se construyen con listas.

ORDENADA: <ol> </ol>

LISTAS: <li> </li>

DESORDENADA: <ul> </ul > no tiene orden como en una receta

01:10:45 - Enlaces (BAsico)

Sitio web es un conjunto de página web

Enlaces también conocidos como HIPERVÍNCULOS

Atributos: son características de los elementos

ETIQUETA: <a> </a>

Hrefer: para que nos redireccione a otra página, por motivos de seguridad tenemos que poner los https

<a href="[Link] dalto </a>

Aquí me envía a las paginas diferentes

<a href="enlaces [Link]">segundo enlace </a>

<a href="enlaces [Link]">tercer enlace </a>

Podemos navegar en diferentes paginas.

ATRIBUTO: TARGET=”_self” esto sirve para que abra otra pestaña en la misma

ATRIBUTO: TARGET=”blank” para que se abra otra pestaña

<a href="enlaces [Link]">segundo enlace </a>

<a href="enlaces [Link]" target="black">tercer enlace </a>
ATRIBUTO: TITLE este atributo esque nos pide la información de este elemento, se puede poder en la
imágenes, es mas usado en eso para conocer de que se trata la imagen.

<a href="enlaces [Link]" target="black" title="subtitulo del

enlace">tercer enlace </a>

01:26:09 - Imagenes y Rutas

ETIQUETA: <img> se auto cierra solo permite abrir una sola vez

Src es para poder colocar la ruta de la imagen

Alt nos permite escribir un texto en caso que la imagen no cargue, también describe de lo que se trata la
imagen

Title para que pase el curso encima de la imagen y aparezca una breve descripción

<img src="[Link]" alt="nayri chela" title="imagen de google ">

RUTAS EN HTML:
  RUTAS ABSOLUTAS: en un recurso que está ahí por ejemplo una url de youtube, ya que se puede
acceder de varios lugares

<a href="[Link] curso de html</a>

<a href="[Link]"> apartado de listas</a>
 RUTAS RELATIVAS: tenemos que saber donde esta cada cosa y saber accederla

Para retroceder o acceder a las carpetas atrás colocamos ../

<a href="[Link] curso de html</a>

<a href="../CURSO/[Link]"> apartado de listas</a>
01:41:40 - Formularios
Los formularios básicamente es la forma que tenemos nosotros de pedir los datos a los usuarios,
dependiendo el tipo de datos IMPUT

ETIQUETA DE BLOQUES: <form></form>

<input> es como decir dame un dato que tipo type: aquí podemos ingresar si es texto, email, rango,
color

HAY 4 ATRIBUTOS DE UN TYPE:

 ATRIBUTO: REQUIRED Obliga al usuario a escribir algo por ejemplo el campo obligatorio de
email, no da paso para enviar, y también con MINLENGTH donde vamos a colocar el numero de

caracteres de un nombre.

<input type="textl" required minlength="2"">

 ATRIBUTO: NAME es un identificador de un input, definimos como se va a llamar este campo,
cuando el servidor reciba los datos del input, cuando llegue va a llegar con el nombre username.
 PLACEHOLDER: es el texto que aparece en los recuadros para completar aquí
podemos escribir el ejemplo que debe ir en el campo.
 VALUES: los datos ingresados se van a guardar en valúes

No todos los inputs tienen placeholder

 <input type="textl" placeholder="escribe tu nombre ">

--- CSS BÁSICO ---

01:56:45 - Introducción a CSS
Es una hoja de estilo en cascada significa que vamos a seleccionar varios elementos hay muchas formas
de seleccionar los elementos.

Tenemos 3 formas de enlazar css:

1. Estilos en línea: suele llamar estilo en línea porque es estilos en una sola línea.

Style sirve para dar estilo y Font-size sirve para dar tamaño de las letras, NO ES BUENO HACER ESTO

<h1>TITULO</h1>
<p style="color: blue; font-size: 25px ">

Lorem ipsum dolor, sit amet consectetur

p>
2. Vamos a trabajar por separado en la cual vamos a vincular con una hoja de estilo, un archivo
donde va a estar todo referente al estilo y le realizamos una referencia en la parte de HEAD

<link rel="stylesheet" href="[Link]">

/* p viene hacer un selector o el elemento que queremos editar, las llaves

son un bloque se declaraciones */
p {
color: blueviolet;
}

02:08:24 - Selectores (BAsico)

LA ETIQUETA: <span> </span> utilizamos para seleccionar algo muy puntual.

CLASES: asigna elementos, separamos los elementos por clases. Las clases podemos utilizar para muchos
elementos, podemos hacer varios elementos tengan la misma clase, los nombres tienen que ser para
poder identificar.
SELECTOR: ID no es recomendado esto, porque son elementos únicos

02:18:04 - Propiedades de texto y fuente

FONT-FAMILY: Son propiedades que afectan al texto y a la forma del navegador que nos presenta el
texto. Siempre tenemos que terminar con un ; si son mas de 2 palabras tenemos que colocar en comillas
simples, podemos agregar una , y colocar otra tipografía si la primera no carga pueda cargar la otra.

FONT-WEINGHT: BOLD: Define el grosor de la tipografía ya no usamos <b></b> ,

<STRONG>HOLA<STRONG> usamos para colocar una palabra en negrita del párrafo y debemos hacer con
strong para que Google le de importancia.

p {
color: blue;
font-family: "Times New Roman"; /*TIPOGRAFIA*/
font-size: 13px; /*TAMA;O DE LETRAS*/
font-weight: 800; /* GROSOS DE LETRAS*/
font-style: italic; /* letras dobladas, super inclinadas*/
text-align: right; /* para justificar o centrar el texto */
text-decoration: underline; /* para poner línea abajo, medio y arriba y
podemos quitar el subrayado con none a los enlaces */
line-height: 3; /* cuanto de alto va a tener la letra, esto son los
interlineados*/
letter-spacing: 2px; /* separar las letras*/
text-transform: uppercase; /* para poder colocar mayúsculas y minúsculas
con lowercase ... y CAPITALIZE sirve para colocar la primera palabra y los
de despues del punto en mayúscula*/

02:44:56 - Tipografías externas

Como crear o traer tipografías que no están en nuestro sistema integradas

 [Link]
 Buscamos la tipografia y seleccionamos
  En la parte de head colocamos lo que copiamos en código y asi podemos acceder a la fuente
desde css.

02:55:25 - Modelo de caja (box model)

Se diseña como deberían poner los elementos de html en la página web, un elemento en una pagina se
considera una caja rectangular.

CONTENIDO: es el núcleo de box model básicamente es el área donde se muestra el texto, puede ser
imagen

PADDING O RELLENO: es el espacio contenido y borden del elemento, separa el contenido del borde

BORDER: es una línea que rodea al contenido se puede controlar el estilo el grosor y el color de borde,
puede ser un borde lineado, punteado o un borde común.

MARGIN: te separa de una caja, es el espacio alrededor de la caja fuera del borde, no forma parte de la
caja

<div> </div>: Es un elemeto de bloque que no tiene ningun tipo de funcionalidad

WIDTH Y HWIGHT: nos define el ancho y el largo de la tabla, tambien se puede trabajar con input paffa
los formularios.

div {
background: red; /*para realizar el fondo de color rojo porque la caja
no tiene alcho ni lago */
width: 300px; /*ancho */
height: 100px; /*alto*/
}

03:07:04 - Relleno y Margen (margin y

padding)

PADDING: Es el espacio que hay entre el contenido y el borde de una caja, lo que hace es aumentar el
tamaño alrededor del contenido al dentro del borde. Es el relleno de una caja Ejemplo: utilizando.

<form class="formulario">
<input class="formulario_input"type="text" placeholder="email">
<input class="formulario_input"type="password"placeholder='contrase;a'>
<input class="formulario_input"type="submit"
</form>
.formulario {
background: red;
padding: 10px;
}
.formulario_input {
padding: 10px; /* aumenta el tama;o de la caja, separa el contenido del
borde */
Si utilizamos en padding de 10px estamos diciendo que estamos dando el mismo valor para los 4 costado

También Podemos usar los diferentes padding en la misma línea de una sola forma: top, right,
bottom, left.

También podemos usar padding solo para definir la vertical y la horizontal. En los inputs pueden
tener varias clases
<form class="formulario">
<input class="formulario_input"type="text" placeholder="email">
<input class="formulario_input"type="password"placeholder='contrase;a'>
<input class="formulario_input formulario submit "type="submit" /*se puede
usar varios clases en input*/
</form>
.formulario {
background: red;
padding: 30px;
}
.formulario_input {
padding: 6px 10px; /* aumenta el tamaño de la caja, separa el contenido
del borde */
width: 100%; /* es el largo de la caja */
background: violet;
color: black;
}
.formulario_submit {
letter-spacing: 6px; /*separación de texto */
text-transform: uppercase; /* para colocar en mayúscula */
background: rebeccapurple; /* para colocar fondo del botón */
width: 100px; /* el largo del botón */
}

MARGIN:

Cuando usamos margin estamos diciendo que las cajas se separen 10px entre si 3.23

<div class="box"></div>
<div class="box"></div>

. box {
background: red; /* color de fondo de la caja */
height: 150px; /*alto*/
width: 150px; /*ancho*/
margin-bottom: 50px; /* es una propiedad que nos permite separa los
elementos lo que le indiquemos */
}
 EJERCICIOS
Para colocar todo el fondo de color negro colocamos en css, dentro del body background

<div class="card">
<h1>ADRIAN CHELA</h1>
<H2>INGENIERO EN SOFTWARE </H2>
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
eaque quisquam ratione quas ea harum maiores
praesentium quos inventore. Facilis ab sed minus ratione laborum
quod ipsam rerum voluptates odit! "Youtube to Mp3" es una herramienta de
descarga de mp3 de Youtube. Admite convertidor de alta calidad de Youtube
a mp3,
descarga música de Youtube de alta velocidad. Además, [Link]
también le permite descargar videos de Youtube y
convertir videos de Youtube a MP4, WEBM, 3GP, M4A más rápido.</P>
</div>

body {
background-color: black; /*fondo*/
font-family: sans-serif;
color: blue; /*color de letras*/
}
.card {
background: coral;
text-align: center; /* texto centrado*/
width: 400px; /* ancho del cuadro*/
margin: auto; /*para centrado del cuadro .. auto.. para centrar
horizontalmente*/
margin-top: 20px;
}
h1 {
 padding-top: 20px; /* es el espacio superior entre la caja y letra */
font-size: 22px;
margin: 0%;
}
h2 {
font-size: 18px;
font-weight: 100px;
letter-spacing: 2px; /* separación de las letras*/
}
p {
font-size: 9px;
padding: 20px;
background: rgb(29, 234, 206);
text-align: justify;
}

03:37:57 – Bordes
Borde forma parte de la caja, modifica primero es el tamaño, luego el bordeado ya sea de línea, puntos
dobles borde:

BORDER-WIDTH tamaño del borde

BORDER-STYLE bordeado de líneas.

BORDER-COLOR para modificar el color del margen

BORDER-RADIUS nos permite redondear las puntas.

03:53:43 - Tamaño de caja (box sizing)

<div> hola

</div>

div {
background: red;
width: 150px;
margin: auto;
 text-align: center;
}
div {
border-width: 5px;
border-color: blue;
border-style: solid;
border-radius: 15px;
}

Tambien el borde se puede usar en la misma línea como: BORDER: 3PX SOLID BLACK

BORDER-TOP: borde en la parte superior

BORDER-LEFT: borde a la parte derecha

BORDER-BOTON: borde en la parte inferior

BORDER-RIGHT: borde a la izquierda

BORDER: NONE quitar los bordes

div {
border-top: 3px solid black;
}

<div>

<input type="email" placeholder="email">

<input type="password" placeholder="password">

</div>

background-color: black;
}

input {
margin: 5px; /*colocamos un maregn */
 padding: 6px 9px; /*para poder anchar y altura de un cuadro */
border: none; /* para ocultar el borde*/
border-top: 1px solid black; /*para colocar un borde el la parte
superior*/
border-bottom: 1px solid greenyellow;
background: transparent;
border-left: 1px solid white;
color: green; /* color de texto */
border-radius: 4px;
}

box sizing
Es la propiedad que nos define muchas cosas sobre el modelo de la caja

Nos va a permitir determinar la forma en la que cada elemento cada componente de la caja, el padding
el borde, el contenido y el margin van a interactuar entre si

Es una propiedad que css que utilizamos para afectar como funciona el modelo de caja predeterminada,
en este caso vamos a ver como los navegadores calculan el total de tamaño de un elemento.

CONTENT BOX: es modelo de caja tradicional, el tamaño que das a la caja solo se afecta al contenido
<div class="box box-default"></div>
<div class="box box-new">
</div>

body {
margin: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
.box-default {
box-sizing: border-box;
padding: 25px;
border: 10px solid black;
}
.box-new {
box-sizing: border-box; /* PARA QUE EL CONTENIDO SE ADAPTE*/
padding: 25px;
border: 10px solid black;
}

04:02:09 – Colores-
SE PUEDE COLOCAR CON:

RGB: red, Green a blue tiene 256 posibles combinaciones

background: rgb(255, 200, 200);

RGBA: alfa crea otro canal de iluminación contrala la opacidad en la primera capra vamos a ver cuanto
de color vamos a dar, rojo verde y azul

[Link]

HEXADECIMAL: tiene 16 combinaciones posibilidades. Rojo , Verde, Azul

04:25:16 - Unidades
Tenemos las absolutas y las relativas

1. PIXELES: son medidas absolutas usamos normalmente para definir por ejemplo los tamaños de
algunos elementos como el alto y el ancho de una imagen, el tamaño de los textos, se usan para los
márgenes y los padding.

Em: son medidas relativas un 1em vale 30px

04:50:29 - Fondos, Gradientes y Sombras

El fondo tiene otra capa que es Negra

<body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
voluptatem eveniet cum, recusandae ex mollitia eos
eius! Dicta, nihil hic iusto molestiae consectetur magni culpa
accusantium omnis distinctio placeat atque.
<div class="box"></div>

body {
background-color: #0f0;
}
.box {
width: 200px;
height: 200px;
margin: 20px;
background-color: #f3e7; /* con esto al colocar una tranparencia de
texto */
position: absolute;
top: 0;
}
Tenemos 3 propiedades que son muy comunes

<body>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere
voluptatem eveniet cum, recusandae ex mollitia eos
 eius! Dicta, nihil hic iusto molestiae consectetur magni culpa
accusantium omnis distinctio placeat atque.
<div class="box"></div>

body {
background-color: #0f0;
}
.box {
width: 100%;
height: 150px;
margin: 20px;
background-color: rgba(53,117,255,0.467); /* con esto al colocar una
tranparencia de texto */
background-image: url([Link]
q=tbn:ANd9GcRjk6KeneZOYKwoI6CrNTNyKFhdtVF4Zc9Gdr2kwTHVIA&s);
background-size: cover; /* CONTAIN ayuda a la imagen a adaptarse y COVER
ayuda a adaptarse*/
background-position: top;
background-repeat: no-repeat; /*para que no repita la imagen si
colocamos repeat -y solo se repite toda la fila y si colocamos repeat -x
repite toda la fila*/
background-attachment: fixed; /* permite mover el fondo */
}

[Link]

GRADIENTES

<body>
<div class="box">

<h1>TITULO</h1>
<img src="[Link]
q=tbn:ANd9GcQcn5Tog9ogBt1u0u1fO7a1-TVJgCihDQf8pwGCwK9D8g&s"
</div>
</body>

body {
background-color: red;
margin: 0;
}
.box {
width: 300px;
height: 400px;
background: linear-gradient(
#000,
transparent /* no permite tener una especie de variacion del color
que tenemos más claro o más obscuro para colocar el gradiente a la
derecha colocamos background: linear-gradient(to right , transparent, #000
*/
); /*esto está diciendo que ba a comvertir un fondo en un gradiente
lineal */
margin: 0;
border-radius: 7px;
margin: auto;
margin-top: 20px;
border-top: 6px solid #900;
}
h1 {
margin: 0;
color: #fff;
text-align: center;
padding: 20px;
font-family: sans-serif;
}
img{
width: 300px;
}
 SOMBRAS
Agregan realismo a cualquiera de los elementos asta tridimensionales, tenemos 3 tipos de sombras

SOMBRA DE CAJA: BOX-SHADOW

body {
margin: 0;
}
.box {
width: 300px;
height: 400px;
background: #e2e2e2;
margin: auto;
margin-top: 50px;
box-shadow: 0px 0px 40px #9fe63c;
box-shadow: 20px 20px 50px #000;
}

SOMBRA DE TEXTO: text-shadow: 0 0 5px red;

IMÁGENES:
img {

width: 160px;
filter: drop-shadow (0px 0px 40px #000);
}
05:31:15

- Ejercicio practico-

<div class="card">
<img class="img"
src="[Link]
q=tbn:ANd9GcQcn5Tog9ogBt1u0u1fO7a1-TVJgCihDQf8pwGCwK9D8g&s" alt="">
<h1 class="card_title">ADRIAN CHELA</h1>
<h2 class="card_description">INGENIERO EN SOFTWARE</h2>
<P class="card_content">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Aliquid voluptatibus magni eos
recusandae quisquam
quasi odit! Possimus, commodi fugiat ratione recusandae debitis
quasi necessitatibus libero alias provident
nesciunt. Maiores, illo.</P>
</div>
<div class="card red-card">
<img class="img"
src="[Link]
q=tbn:ANd9GcQcn5Tog9ogBt1u0u1fO7a1-TVJgCihDQf8pwGCwK9D8g&s" alt="">
<h1 class="card_title">ADRIAN CHELA</h1>
<h2 class="card_description">INGENIERO EN SOFTWARE</h2>
 <P class="card_content">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Aliquid voluptatibus magni eos
recusandae quisquam
quasi odit! Possimus, commodi fugiat ratione recusandae debitis
quasi necessitatibus libero alias provident
nesciunt. Maiores, illo.</P>
</div>
</div>
<div class="card">
<img class="img"
src="[Link]
q=tbn:ANd9GcQcn5Tog9ogBt1u0u1fO7a1-TVJgCihDQf8pwGCwK9D8g&s" alt="">
<h1 class="card_title">ADRIAN CHELA</h1>
<h2 class="card_description">INGENIERO EN SOFTWARE</h2>
<P class="card_content">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Aliquid voluptatibus magni eos
recusandae quisquam
quasi odit! Possimus, commodi fugiat ratione recusandae debitis
quasi necessitatibus libero alias provident
nesciunt. Maiores, illo.</P>
</div>

body {
background: #fff;
font-family: sans-serif;
color: white;
}
.card {
background: coral;
text-align: center;
width: 300px;
margin: auto;
margin-top: 20px;
padding: 20px 10px;
box-shadow: 0px 0px 35px #000700;
border-radius: 20px;
display: inline-block;
margin: 40px;
}
.red-card{
background: darkslateblue;
}
h1 {
 padding: 10px;
font-size: 22px;
margin: 0;
}
h2 {
font-size: 13px;
font-weight: 100;
letter-spacing: 2px;
}
.card_title {
font-size: 22px;
margin: 0;
}
.card_description {
font-size: 13px;
font-weight: 100;
letter-spacing: 2px;
}
p {
font-size: 9px;
padding: 20px;
text-align: justify;
}
img {
width: 200px;
border-radius: 100px;
padding: 12px;
}

--- HTML AVANZADO ---

05:38:02 - Metatags, Comentarios e Iconos
COMENTARIO: es un código que escribimos que solo es legible para el desarrollador, es un mensaje
para los desarrolladores, existe niveles que son tan complejos los códigos que necesitamos especificar
que hace una sección para que entendamos cual es la funcionalidad de cada elemento
 <!-- este es un titulo -->
<h1>titulo</h1>

ICONOS: tenemos que colocar iconos de 32 px por 32 px, 64 por 64. Es el icono que se agrega para la
pestaña, colocamos type para establecer al navegador

<link rel="icon" href="../CLASES HTML/imagenes/[Link]"

type="image/png">

METATAGS: son etiquetas que tienen la finalidad de describir ciertos aspectos de nuestra página web
proporciona información de nuestra página.

Html:5

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
rel="icon" href="../HTML BASICO/CLASES HTML/imagenes/[Link]"
type="image/png"> <!-- Todas las metaetiquetas tienen un name y y cont en
este caso utilizamos un width que va hacer el ancho total de la pagina
va hacer igual al ancho del dispositivo, para que nuesta pagina este
adatpado a todos los dispositivos, y INICIAL-SCALE para que ingrese con
un tamaño de texto normal -->
<link>
<meta name="description" content="esta pgina web es para "> <!-- aqui
podemos colocar a que se refiere la pagina -->

<meta name="keywords" content=""> <!-- META:KW apara que nos aparesca

de manera rapida la linea codigo aqui vam todas las palabras claves
separadas por comas-->
<meta name="author" content="adrian chela ">
<meta name="robots" content="nosnippet" > <!-- para que apresca
nuestra pagina en la web utiilizamos nosnippet-->
<meta name="robots" content="noarchive"> <!-- para que google no pueda
almacenar una copia de nuestra pagina web en cache, -->
<meta name="robots" content="noimageindex">
<!-- para que no aparesca las imagenes cuando buscamos en el navegador
, -->
<meta name="OG:"> <!-- cuando colocamos un enlace en facebook observamos
que se carga de la manera automatica la imagen , el titulo y la
descripicion de un video. -->
<meta name="OG:TITLE" content="">
<meta name="OG:IMAGE"content="">
<meta name="OG:DESCRIPTION" content="">
<meta name="OG:URL" content="">
 <title>Document</title>
</head>

05:57:18 - Textarea y Labels

Es como un imput que te permite escribir más cantidad de texto en varias líneas

<form>
<H2>Formulario de contacto</H2>
<div class="form_input">
<label for="nombre">Nombre completo</label>
<input type="text" placeholder="Nombre completo " id="nombre">
</div>
<div class="form_input">
<label for="email">email</label>
<input type="email" placeholder="email" id="email">
</div>
<div class="form_input">
<label for="mensaje">Mensaje</label>
<textarea rows="8" placeholder="deja un comentario" id="
mensaje"></textarea> <!-- PARA QUE FOCUSEA LOS CUADROS UTILIZAMOS LOS
FOR="NOMRE " Y LOS ID -->

</div>
</form>

body {
margin: 0;
background-color: #ffffff;
}
h2 {
text-align: center;
margin: 0;
margin-bottom: 10px;
}
form {
background-color: #ededed;
padding: 20px 0;
max-width: 600px;
margin: auto; /* el formulario siempre se va a estar centrado */
box-shadow: 0px 0px 25px #0002;
margin-top: 50px;
}
.form_input {
padding: 6px 20px;
}
input,
textarea {
width: 100%;
/* podemos colocarl con classes para que puedan tener los mismos css*/
box-sizing: border-box;
padding: 6px 12px;
border: none;
border: 1px solid #999;
box-shadow: 0px 0px 15px #0001;
background-color: transparent;
border-radius: 4px;
color: #4f9;
}
textarea {
min-width: 100%; /* para que se ajuste a los cuadros de los demas*/
resize: vertical; /* solo para que se dezplase para la parte vertical*/
min-height: 100px; /* para cuando el contenido crece la caja tambien
crece */
font-family: sans-serif;
}
label {
font-size: 0.9em;
line-height: 2;
}

06:24:18 - Select, Datalist y Option

Select: son un tipo de campo de entrada que nos permite seleccionar n=una opción entre varias
opciones

Datalist: nosotros escribimos algo y se autocompleta con opciones que predefinimos es la combinación
de un input con un select.

<body>
<form>
<H2>Formulario de contacto</H2>

<!-- SIMPLE IMPUTS-->

<div class="form_input">
<label for="nombre">Nombre completo</label>
<input type="text" placeholder="Nombre completo " id="nombre">
</div>
<div class="form_input">
<label for="email">email</label>
<input type="email" placeholder="email" id="email">
</div>
<!- SELECT Y OPTION -->
<div class="form_input">
<label>Tipos de usuario
<select mane="type-of-user">
<!--colocamos user asi para poder identificar cuando trabajamos
con javascript el value es importante porque va hacer el valor que el
sercidor va a recibir con el user -->
<option value="user1 "> Seguidor </option>
<option value="user 2 "> Empresa </option>
<option value="user 3"> Otros</option>
</select>
</div>

<!—DATA LIST Y OPTION -->

<div class="form_input">
 <label>Referente
<input list="referente" name="referente ">
<datalist id="referente" name="type-of-user">
<!--le reemplazamos el select por datalist -->
<option value="Soy Dalto "> un creador de contenido </option>
<!-- tranquilamente no se puede cerrar las option ya que el
navegador lo cierra automaticamente -->
<option value="Una Empresa "> </option>
<!-- podemos tener los contenidos dentro de los values, quien
se va a hacer leido por el servidor es soy dalto no la descripcion -->
<option value="Otros"> </option>
</select>
</label>
</div>

<!-- TEXT AREA-->

<div class="form_input">
<label for="mensaje">Mensaje</label>
<textarea rows="8" placeholder="deja un comentario" id="
mensaje"></textarea>
<!-- PARA QUE FOCUSEA LOS CUADROS UTILIZAMOS LOS FOR="NOMBRE " Y
LOS ID -->
</label>
</div>
</form>

</body>

body {
margin: 0;
background-color: #ffffff;
}
h2 {
text-align: center;
margin: 0;
margin-bottom: 10px;
color: #ffffff;
}
form {
background-color: #222;
padding: 20px 0;
max-width: 600px;
 margin: auto; /* el formulario siempre se va a estar centrado */
box-shadow: 0px 0px 25px rgba(219, 31, 31, 0.133);
margin-top: 50px;
}
.form_input {
padding: 6px 20px;
}
input,
textarea,
select {
width: 100%;
/* podemos colocarl con classes para que puedan tener los mismos css*/
box-sizing: border-box;
padding: 6px 12px;
border: none;
border: 1px solid #999;
box-shadow: 0px 0px 15px rgba(227, 94, 94, 0.067);
background-color: transparent;
border-radius: 4px;
color: #ddd;
}
option {
background-color: #222;
padding: 10px;
}
textarea {
min-width: 100%; /* para que se ajuste a los cuadros de los demas*/
resize: vertical; /* solo para que se dezplase para la parte vertical*/
min-height: 100px; /* para cuando el contenido crece la caja tambien
crece */
font-family: sans-serif;
}
label {
font-size: 0.9em;
line-height: 2;
color: #ddd;
}

06:33:02 - Fieldset y Legend

Se usan para agrupar y etiquetar los elementos de un formulario como métodos de pagos
FIELDSET se usa para colocar un recuadro y LEGEND para poder colocar de que se trata

<body>
<form>
<!-- FIELDSET se utiliza para poder un recuadro asta donde queramos
mientras que LEGEND sirve para ver de que se trata -->
<fieldset>
<legend> INFORMACION PERSONAL</legend>
<input type="text" placeholder="Nombre">
<input type="text" placeholder="Apellido">
<input type="number" placeholder="edad">
</fieldset>
<fieldset>
<legend>INFORMACION DE CONTACTO</legend>
<input type="email" placeholder="email">
<input type="text" placeholder="Telefono">
</fieldset>
</form>

</body>

para que puedan tener los mismos css*/

box-sizing: border-box;
padding: 6px 12px;
border: none;
border: 1px solid #666;
box-shadow: 0px 0px 15px #003;
background-color: transparent;
border-radius: 4px;
color: #ddd;
margin: 6px;
}
fieldset {
margin: 20px 0;
border: 1px solid #ddd6;
 border-radius: 6px; /* para que se redondee los cuadros */
}
legend {
padding: 0 6px;
}

06:44:35 - Details y Summary

Son etiquetas que nos sirven para crear secciones de preguntas frecuentes o menús desplegables o
descripción desplegable.

<body>

<details>
<summary> Que ense;a dalto</summary>
<ul>
<li> html</li>
<li>css</li>
</ul>
</details>
</body>

body {
background-color: #333;
color: #ddd;
font-family: sans-serif;
}

details {
background-color: transparent;
border: 1px solid #ddd;
border-bottom: none;
}

details[open] {
/* usamos cuando se quiere abrir la descripcion para que se asome ded
otro color */
border: 1px solid #ddd;
 background-color: #6b2222;
font-weight: bold; /* que cuando damos clic se aparesca en negritas*/
}
summary {
background-color: transparent;
border-bottom: 1px solid #ddd; /*para colocar lo subrayado de una
palabra*/
padding: 9px;
}
ul {
font-weight: 100;
}

06:51:34 - Enlaces (Avanzado)

07:04:12 - Tablas
Las tablas siempre tienen filas y columnas

Se define con la etiqueta table

<table>

<tr> </tr> Arma una fila

<td> </td> Define celdas para esas filas

</table>

El objetivo de las tablas en poder presentar tablas tabuladas como por ejemplos tablas de costos

07:22:25 - Audio y Video

La tarjeta de video nos permite reproducir video y la tarjeta de audio nos permite reproducir audio.

[Link]
 <body>
<video controls loop autoplay muted src="video.mp4" <track
src="[Link]" default kind="subtitles" srclang="es"
label="Español (latinoamerica)"> navegador no soporta
</video>
<!--utilizamos la etiqueta video con src que es este caso va hacer el
video utilizamos autoplay para poder reproducir el video y contriol para
que aparesca el play y pausa, autoplay muted para que rerpodusca en
silencio y lo mimso es para el audio como mp3 -->

<!-- utilizamos track src="[Link]" para poder colocar subtitulos

en los videos si colocamos default
automaticamente se aparece los subtitulos al iniciar el video-->
<!-- loop significa bucle y colocamos srclang para escoger el idioma
-->
<!-- en el label podemos editar para que el texto salga en e;l idioma
espanol-->
</body>

video {
width: 500; /*largo*/
height: 500px;/*ancho*/
background-color: #000;
}

07:34:10 - Lazy Loading

Quiere decir que el contenido debe ir cargándose mientras el usuario se ba llegando a esas secciones,
por ejemplo, si la pagina web tiene muchas imágenes y se cargue de golpe, la pagina web se puede
hacerse lenta. Primero carga lo que el usuario va viendo

<img loading="lazy" src="../[Link]"></body>

07:49:10 - HTML Semántico

Significa utilizar específicamente que tenga un significado para dar un significado
07:57:42 - Accesibilidad WEB
La accesibilidad web es realizar páginas webs adaptables para todos. El objetivo de accesibilidad es crear
paginas con las condiciones igualitarias que todos sin importar sus discapacidades.

Nos mejora el ceo realizamos a la pagina mas accesibles, pagina web con mejor posicionamiento en
buscadores
Buscamos chrome vox para asi poder navegar la pagina un ciego

Para poder ver si la página es accesible inspeccionamos el código e ingresamos a lighthouse para ver
que puntuación nos da la pagina web

<body>
<img src="../[Link]" alt="imagen de algo ">
<!--utilizamos alta para que cuando una persona no novidente realice
click en la imagen dando a conocer que esta en la descripcion de la
imagen -->
<a href="[Link]" aria-label="enlace que redirige a la web
principal">home </a>
<!-- cuando queremos colocar una descripcion en el boton por ejemplo
home utilizamos aria-label-->
<nav> <!-- para que me reconosca como una barra de nagenacion
utilizamos nav -->
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>

</ul>
</nav>
<h2 aria-label="TITULO"> ADRIAN CHELA </h2>
<div id="slider" role="slider" aria-valuenow="3"> aria-valuemin="1"
aria-label="carrousel de imagenes">

</div>
</body>

--- CSS INTERMEDIO ---

08:19:58 - Selectores (Avanzado)
 Si Podemos seleccionar correctamente los elementos podemos dar estilo a lo que queramos.
 Podemos poner condiciones para dar estilos

SELECTOR POR ATRIBUTO

/* vamos a dar estilos a un elemento o a un atributo, o el atributo

especifico tenga un valor definido */
/* vamos a seleccionar una imagen que tenga un src que arranque con
algo ....... y termine con png, eso es lo que hace le signo de dólar
mientras que src^ arranca con dalto y termina con ...... */
img [src$="jpeg"] {
width: 10%;
}

img [src^="adrian"] {
width: 10%;
}

SELECCIONES DESCENDIENTES

/* aqui estamos dando estilo a li que esta dentro de

ul */
ul li {
color: red;
}

/* aqui estamos dando estilo a li que está dentro de

ul, y si queremos dar color a una sola palabra usamos strong */
ul strong {
color: rgb(51, 218, 255);
}

SELECTOR POR HIJO DIRECTO

li > em{
 color: #f00;
SELECTOR DE HERMANO ADYACENTE

Aquí estamos diciendo que vamos a dar un estilo a un p que esta después de de un h1 , solo va dar al
primer p

h1 + p {
color: blue;
}

SELECTOR DE HERMANOS GENERALES

Con esto vamos a dar a todos los p que vengan después de un h1

h1 ~ p {
color: red;
}

08:36:14 - Herencia
<body>
<div>
<h1> color red</h1>
<P>color blue</P>
</div>
</body>

/* el h1 va a heredar el color de body de igual manera si le doy al div

va a funcionar lo mismo porque dic es padre de h1 y p*/
body {
color: brown;
font-family: sans-serif;
}

div {
color: brown;
font-family: sans-serif;
}

h1 {
color: inherit; /* inherit es como vas a heredar el valor por defecto la
propiedad, ba a heredar el color del padre en este caso del div */
}
 Cascada y Especificidad
La cascada dice el orden que le damos a las propiedades si importa. Es el orden de prioridad que van a
tener lo elementos

Cuando la Especificidad este en 1 ahí está bien especificado.

La cascada ba a llegar por ultimo al navegador por ultimo va a dar el color de default del navegador

<body>
<h1 class="titulo" id="titulo" style="color: aqua;"> TITULO PRINCIPAL
</h1>
</body>

/* si colocamos el primer color a h1 y luego nuevamente va atomar el color

que se va implementando en este caso el color azul */

h1 {
color: blue;
}

/* Esto es lo mas importante que se pueda usar */

color: red !important;
}
h1 {
 color: rgb(55, 215, 71);
}
/* si seleccionamos por clases estamos siendo más específico css le de
prioridad */
.titulo {
color: blueviolet;
}
/* si utilizamos un ID va hacer mas espesifico*/
#titulo {
color: brown;
}

09:04:51 - Pseudoclases
Nos permite seleccionar un estado especifico de un elemento que seleccionamos.

<body>
<h1>TITULO</h1>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
<li>elemento 4</li>
<li>elemento 5</li>
 <li>elemento 6</li>
<li>elemento 7</li>
<li>elemento 8</li>
<li>elemento 9</li>
<li>elemento 10</li>
</ul>
<div>jfhkshsk</div>
<a href="[Link]
<a href="[Link]
G201Ls&list=RDCMUCtoo4_P6ilCj7jwa4FmA5lQ&start_radio=1"> curso</a>
<input type="email">
</body>

h1 {
color: #48e;
font-family: sans-serif;
margin: 30px;
}
/* es cuando colocamos por encima de la palabra el mouse se ba a cambiar
de color , over es una seudoclases que nos va a permitor a seleccionar un
estado especifico mouse over */
h1:hover {
background-color: #ccc; /* para colocar fondo */
color: #000;
}

/* define el color de un elemento cuano le damos click

camcia de color */
h1:active {
background-color: #999;
color: #ea0909;
}

/*SELECIONANDO EL PRIMER LI utilizamos first-child para seleccionar

solamente la primera */
li:first-child {
color: rgb(18, 250, 208);
}
/*PARA SELECCIONAR AL SEGUNDO ELEMENTO o cuaalquier elemento y si
colocamo 2n estamos pasando cada 2 */
li:nth-child(2n) {
color: chartreuse;
}
/*SELECCIONANDO EL ULTIMO LI*/
li:last-child {
color: blue;
}

/*SELECCIONAR ENLACES NO VISITADOS*/

a:link {
color: #ea0909;
}
/* SELECCIONANDO ENLACES VISITADOS los enlaces visitados de poner en color
verde*/
a:visited {
color: green;
}
/* para cuando ingresamos un correo invalido aparce de color rojo y si es
valido de collor verde aqui desimos al usuario si el correo es valido o
invalidoS*/
input:invalid {
color: red;
}
input:valid {
color: #48e;
}

09:30:38 - Pseudoelementos
09:37:51 - Metodología BEM
 Se compone de bloque, elementos y modificador nos permite reutilizar códigos
 Se resuelven problemas de especificidad

<body>
 <h1>INGREDIENTES</h1>
<!--para decir que estamoa aplicando la metodologia BEM se pone dos
guiones bajos y agregamos una clase modificadora que sería item y dos
guiones medio que significa que vamos a modificar esa parte -->
<ul class="lista">
<li class="lista__item item--danino">sal</li>
<li class="lista__item">papa</li>
<li class="lista__item item--importante">arina</li>
<li class="lista__item">agua</li>
</ul>

<ul class="lista lista--vieja">

<li class="lista__item item--danino">sal</li>
<li class="lista__item">papa</li>
<li class="lista__item item--importante">arina</li>
<li class="lista__item">agua</li>
</ul>
<ul class="lista">
<li class="lista__item item--danino">sal</li>
<li class="lista__item">papa</li>
<li class="lista__item item--importante">arina</li>
<li class="lista__item">agua</li>
</ul>
</body>

.lista {
border: 2px solid #000;
}
.lista__item {
color: grey;
margin: 10px 0;
list-style: square; /*para que mas vi;etas sean cuadrado*/
}
.lista--vieja {
opacity: 0.5;
background-color: #ddd;
}
.item--danino {
color: red;
}
.item--importante {
color: blueviolet;
}
09:49:33 - Display
Se utiliza para que un enlace se coloque en columna

<body>

<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="" class="nav__link">home</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">contact</a>
</li>
<li class="nav__item">
<a href="" class="nav__link">log In</a>
</li>
</ul>
</nav>
</div>
</body>

body {
margin: 0;
}
.nav {
background-color: #48e;
}
.nav__list {
margin: 0;
text-align: center;
}

.nav__item {
 display: inline-block; /* es una mescla de line y block trabajamos en
bloques pero unidos */
}
.nav__link {
color: #fff;
text-align: none;
display: inline-block;
padding: 10px;
background-color: #48e;
}
.nav__item:hover {
/* para colocar un color a pasar el mouse por encima de la palabra*/
background-color: #6af;
}

.link--button {
border: 1px solid #fff;
background-color: #fff;
padding: 4px 10px;
color: #48e;
border: 3px;
margin-left: 60px;
}
.link--button:hover {
background: transparent;
color: #fff;
}

10:03:21 - Posición Relativa

<body>
<div class="box"> caja</div>
<div class="box box--blue">caja 2</div>
 <div class="box"> caja 3 </div>
</body>

body {
margin: 0;
}
/*si damos positions RELATIVE a la caja podemos mover hacia arriba,
abajo, derecha, izquierda por ejemplo vamos a mover la caja de color azul
*/
.box {
width: 100px;
height: 100px;
background-color: orange;
color: #fff;
position: relative;
}
/* de igual manera se seguimos reservando el lugar de la caja */
.box--blue {
background-color: blue;
top: 40px;
left: 50px;
z-index: 40; /* utilizamos esta para que se tome el valor de
posiconamiento sobre encima de otra caja colocando el valor */
}
/* si le damos la position relative lo que esta asiendo es que la caja se
sigue posicionando en el mismo lugar, la caja le estamos moviendo */
.box:first-child {
top: 150px;
left: 30px;
background-color: red;
z-index: 20;
}

Posición Absoluta

<body>
<div class="contenedor">
 <div class="box"> caja</div>
<div class="box box--blue">caja 2</div>
<div class=" box box--red"> caja 3 </div>
</div>

</body>
body {
margin: 0;
background-color: #ededed;
font-family: sans-serif;
text-align: center;

.contenedor {
border: 3px solid #000;
margin: 10px;
}
}
.box {
width: 100px;
height: 100px;
background-color: orange;
color: #fff;
}
/*cuando le damos position absolute
nos damos cuenta que esta encima de la caja roja, porque la caja azul ya
no ocupa lugar , ya no tiene restricciones le podemos mover por todos
lados*/
.box--blue {
background-color: blue;
position: absolute;
bottom: 150x;
right: 20px;
}
.box--red {
background-color: red;
}

10:26:36 - Ventanas Modal

<body>
<!--utilizamos dialog para poder ya tener lla ventana avierta-->
<dialog open>
<div class="modal__content">
<h2 class="modal__title">VENTANA MODAL</h2>
<P class="modal__text">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Est eligendi neque ab
molestiae fuga expedita suscipit dolorum repellat! Voluptatum
cumque tenetur odit dolores magnam esse cum
corrupti omnis maxime ex.
</P>
<form method="dialog">
<button class="modal__close-button">X</button>
</form>
</div>
</dialog>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi atque
minima voluptatem tempora
doloribus sunt eligendi provident, qui, iure inventore accusamus nam.
Eligendi necessitatibus reiciendis tempore
omnis cumque magni aspernatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
assumenda ab neque. Repellendus vel mollitia,
consequuntur adipisci repellat accusantium modi corrupti fugiat
distinctio fuga impedit laboriosam delectus
accusamus
a molestias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In harum
ratione quibusdam sed similique, perferendis
fugiat
deserunt at repellendus ipsam nemo excepturi! Illum mollitia consequatur
eaque ad cupiditate, placeat accusantium.
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi atque
minima voluptatem tempora
doloribus sunt eligendi provident, qui, iure inventore accusamus nam.
Eligendi necessitatibus reiciendis tempore
omnis cumque magni aspernatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis
assumenda ab neque. Repellendus vel mollitia,
consequuntur adipisci repellat accusantium modi corrupti fugiat
distinctio fuga impedit laboriosam delectus
accusamus
a molestias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In harum
ratione quibusdam sed similique, perferendis
fugiat
deserunt at repellendus ipsam nemo excepturi! Illum mollitia consequatur
eaque ad cupiditate, placeat accusantium.

<!--<script>
[Link](".modal__close-button").
addEventListener("click", () => {
[Link](".modal").[Link] = "none"
})
</script> -->

</body>

body {

font-family: sans-serif;
}
.dialog {

background-color: #0009; /* fondo de color */

height: 100vh;
box-sizing: border-box;
}
.modal__content {
background-color: aqua;
padding: 10px 20px;
width: 80%;
margin: auto;
margin-top: 50px;
position: relative;
}
.modal__title {
margin-top: 10px;
}
.modal__close-button {
background-color: #000;
color: #fff;
position: absolute; /* esta posicionando respecto a la ventana */
top: 0; /* se va a la parte superior de la caja */
right: 0; /* se va a la patte superior derecha */
padding: 4px 12px;
}

10:35:20 - Posicion Fixed y

Sticky
Se usan más para poder realizar una notificación de se desplace a medida que se va bajando el texto

<body>
<div class="overlay">
</div>

<div class="contenedor">
<div class="box">
<h2>NECESITA ACCESO</h2>
<P>para tener acceso a vip reguistrate </P>
</div>
</div>

Lorem ipsum dolor sit amet cons

body {
margin: 0;
 font-family: sans-serif;
}
.overlay {
background: linear-gradient(to top, #fff, transparent);
position: absolute;
z-index: 20;
width: 100%;
bottom: 0;
height: 100%;
}
.contenedor {
padding: 150px;
background-color: #00f;
position: relative;
}

h2 {
font-size: 18px;
margin: 0;
}
p {
font-size: 14px;
margin: 0;
}
.box {
height: 60px;
width: 200px;
background-color: red;
position: fixed; /* si colocamos absoluto el cuadro se sube a la parte
superios */

right: 0;
background-color: #fff;
border: 2px solid #000;
border-right: 0;
box-shadow: 0px 0px 40px #000;
}
<body>
<div class="overlay">
</div>
<div class="box-fixed"></div>
<div class="contenedor">
<div class="box">
<h2>NECESITA ACCESO</h2>
<P>para tener acceso a vip reguistrate </P>
</div>
</div>

body {
margin: 0;
font-family: sans-serif;
}
.overlay {
background: linear-gradient(to top, #fff, transparent);
position: absolute;
z-index: 20;
width: 100%;
bottom: 0;
height: 100%;
}
.contenedor {
padding: 150px;
background-color: #00f;
position: relative;
}

h2 {
font-size: 18px;
 margin: 0;
}
p {
font-size: 14px;
margin: 0;
}
.box {
height: 60px;
width: 200px;
background-color: red;
position: fixed; /*hace que el elemento que quede pegado en una parte
se utiliza para un encabezado como la barra de youtube */
right: 0;
background-color: #fff;
border: 2px solid #000;
border-right: 0;
box-shadow: 0px 0px 40px #000;
z-index: 30;
}
.box-fixed {
height: 60px;
width: 200px;
background-color: #f00;
position: sticky; /* se comporta como relatve utilizamos para que en
cierta medida se aparesca el cuadro fija */
top: 20px;
z-index: 40;
}

10:43:28 - Transiciones
Cambio de propiedad entre una y otra
</head>
<div class="box"> box</div>

<body>

body {
margin: 0;

font-family: sans-serif;
}
.box {
width: 120px; /*ancho */
height: 120px; /* largo */
background-color: red;
/* margin: auto; /* centrado */
/*margin-top: 50px; para dar espacio de la parte superior
font-size: 60px; /tama;o de letra
text-align: center; /centrado te texto
font-weight: bold;
*/
/* la transition tiene que estar dentro de la cajacen la cual usamos la
transition propety para que cambie de color */
transition-property: left; /* cambio de color */

transition-duration: 1s; /* duracion de transicion */

/* transition-delay: 3s; cuanto va a tardear en la transicion*/
transition-timing-function: cubic-bezier(
0.14,
0.86,
0.32,
0.84
); /* arranca sube y termina suabe */
 color: red;
position: relative;
left: 0;
}
/*vamos hacer cuando ponemos el mouse el efecto va a sufrir la caja */
body:hover .box {
left: 400px;
/*background-color: blue; /* el color de la caja pasa de rojo a azul*/
}

10:56:53 - Desbordamiento
(overflow)
Determina como se maneja el contenido que sobresale de su contenedor

</head>
<div class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti sed
nostrum officiis sed, perferendis distinctio eum …….
exercitationem.
</div>

body {
margin: 0;
font-family: sans-serif;
height: 100vh;
background-color: #ccc;
}
.box {
 /* si nosotros definimos el ta;amo del cuadro si colocamos un texto mas
de recuadro va a salir el texto del cuadro*/
width: 220px;
height: 220px;
background-color: #fff;
margin-top: 50px;
color: red;
position: relative;
left: 0;
border: 2px solid #0009;
margin: auto; /* centrar el cuadro*/
margin-top: 50px;
overflow: visible; /*el contenido que sale del cuadro se ba a ver */
overflow: hidden; /* todo el contenido que sele no se ba haber */
overflow: scroll; /* aqui bamos a ver todo el texto mediante un
scroll*/
overflow-x: hidden; /* para poder borrar un scroll ya sea x p y se
utiliza esto*/
overflow: auto; /* para que se ajuste al cuadro*/
}

11:01:49 - Control de flujo del

texto

body {
margin: 0;
font-family: sans-serif;
background-color: #bbb;
}
.box {
width: 240px;
height: 240px;
margin: auto;
margin-top: 50px;
background-color: #fff;
border: 1px solid #000;
 /* white-space: normal; /*define como se comporta los espacios en blanco
norwap dice que no va haver saltos de lineas */
/* white-space: pre-wrap; /*cuando tenemos un texto de largo detecta y
coloca dando salto de lineas */
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;
}
h1 {
text-wrap: balance;
}

11:11:54 - Object fit y Object

position
Object fit cuando definimos la altura y el ancho a un elemento , ese elemento aun sigue teniendo un
contenido

Object fit nos permite determinar como se va a comportar el contenido de un elemento de este tipo
cuando definimos su alto i su ancho

11:16:34 - Contorno (outline)

11:25:13 – Emmet
Los puntos (.) son para las clases (>) esto dice que esta adentro y las comillas los contables
También Podemos crear snippet para realizar más rápido
 --- CSS FLEXBOX ---
11:43:11 - Introducción a
Flexbox
El eje principal está definido por flex-direction, que posee cuatro posibles valores:

 row
 row-reverse
 column
 column-reverse

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de
la línea.

Utiliza una caja contenedora a los contenidos que estas adentro, podemos cambiar las direcciones, los
Flex box son unidimensional y es unidireccional.

ROW-REVERSE: Podemos ordenar los elementos en filas de izquierda a derecha

ROW-REVERSE: esto va de derecha a izquierda

COLUMN y COLUMN -REVERSE: se va de arriba para abajo

11:56:29 - Flex Direction, Flex
Wrap y Flex Flow
FLEX DIRECTION: Al añadir la propiedad flex-direction en el contenedor flex nos permite
cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction:
row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo, el inicio y
final quedarán al revés del original.

…
Si cambiamos flex-direction a column el eje principal se cambiará y los ítems
aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán
nuevamente puestas al revés.

<body>
<div class="flexbox">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
body {
margin: 0;
font-family: sans-serif;
}
/*damos a la caja padre un FLEX para que sea flexible a caulquiere
ventana, se puede encoger pero no se puede agrandar */
.flexbox {
display: flex;
flex-direction: column-reverse;
}
.flex-item {
width: 100px;
background-color: #911;
margin: 10px;
color: #fff;
font-size: 40px;
text-align: center;
}
/* para decir el primer elemento utilizamos en first child*/
.flex-item:first-child {
background-color: blue;
}

FLEX WRAP Y FLEX FLOW

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean
repartidos en varias líneas. Haciendo esto, se deberá considerar cada línea como un nuevo
contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea,

<div class="flexbox">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

body {
margin: 0;
font-family: sans-serif;
}
/**/
.flexbox {
 display: flex;
flex-direction: column;
flex-direction: wrap;
height: 100vh;
}
.flex-item {
background-color: #911;
margin: 10px;
color: #fff;
font-size: 40px;
text-align: center;
width: 100px;
direction: rtl;
}
/* para decir el primer elemento utilizamos en first child*/
.flex-item:first-child {
background-color: greenyellow;
}

--- RESPONSIVE DESIGN ---

13:35:25 - Bloques y Multimedia flexible
<body>
<div class="flexbox">
<div class="bloque">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>

<div class="bloque">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>

</div>
<div class="bloque">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</body>

body {
margin: 0;
font-family: sans-serif;
}
div,
body {
box-sizing: border-box;
}

.flexbox {
/*para que los cuadros sean flexibles */
display: flex;
 flex-wrap: wrap;
justify-content: center;
max-width: 400px;
margin: auto;
}

.bloque {
/* para que los cuadros de adapten a la pagina, se pocisional uno a lado
de otro */
display: inline-block;
/*MAX-WIDTH utilizamos para que es cuadro se achique y el contenido se
adapte*/
min-width: 150px;

/*debemos colocar el min-height para que el contenido se adapte al

colocar max texto
min-height: 300px;*/
background-color: #7bf;
margin: auto;
width: 100%;
flex: 1;
font-size: 12px;
padding: 10px;
margin: 4px;
}
/* esto se hace para que el contenido de adapte al navegador */

13:56:07 - Atributos SRCSET y

SIZES
Son atributos que nos permite definir ciertas condiciones para cargar imágenes como por
ejemplo cargar una imagen con ahí zoom, son atributos para ser contenido que cargue envase a
la resolución de esta forma si el celular es peque; o cargamos una imagen que no pese mucho, y
si es para imagen les para pc le cargamos la imagen que se adapte a la computadora.

Son dos atributos de html que trabajas en conjunto para ofrecer soluciones mas avanzadas y
flexibles para poder cargar imágenes response, estos atributos lo que hacen es permitir al
navegador elegir cual debería ser la imagen adecuada según cierta condición por ejemplo si la
pagina tiene zoom, la ventana llega cierta cantidad de pixeles.

Que al agrandar la pantalla se posiciona la imagen conforme a la imagen.

<body>
<!-- esto esta para cargar las imagenes dependiendo al rabgo que le
demos -->
<img src="[Link]" srcset="[Link] 400w, [Link] 600w,
[Link] 1000w"
sizes="(max-with: 400w) 300px, (max-with: 400w) 500px, 900px">
<!-- le recomienda al navegador cual seria el maximo de altura que
puede trabajar.. si tu pantalla va a tener que son menores a 700px te
recomiedo que insertes una imagen que tenga asta 360px ya para patallas
grandes 900px-->
</body>
-CSS GRID -
15:05:11 - Introducción a Grid
 Es un diseño de sistema bidimensional que permite crear interfaces enteros complejos
de forma fácil y flexible.
 Nos va a permitir a trabajar con filas y columnas
GRID CONTAINER: Es el elemento padre que se define como un contenedor cuadricula es
decir si a un elemento le damos display grid ese elemento es grid container.
GRID ITEM:

que son los hijos directos del contenedor de la cuadricula, cada uno de estos elementos
puede ocupar uno o mas celdas en la cuadricula, cada uno de estos pequeños elementos es
un grid item
LINEAS DE LAS CUADRICULAS:

Se define como los bordes de las cuadricula y se separan las filas y las columnas

GRID TRACKS:
Que básicamente las filas y las columnas en el sistema de cuadriculas son tracks, un tracks puede ser una
fila o una columna.

CELDAS:

Es el espacio entre estas 4 líneas de cuadriculas yacentes o sea es la unidad básica donde se
puede colocar los elementos, grid cell es el espacio real que grid almacena para esa celda
puntual en la que se va a estar colocando el elemento, ya que el elemento puede ser así y acá
tendríamos el gris item sin embargo el grid.

GRID AREA:

Son parte del grid que están delimitadas por 4 líneas de grid o grid lines, pueden constar de una
o de mas celdas y se utilizan para colocar elementos de manera mas eficiente dentro de la
cuadricula

15:12:50 - Creando un Grid

<body>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>

body {
margin: 0;
font-family: sans-serif;
}

.grid {
display: grid;
/* si nosotros colocamos el 200px es el ancho que va a medir
y si agregamos otro 200 va a colocar otra columna, también podemos
colocar el ancho del cuadro*/
grid-template-columns: 60px 200px 400px;
/*aquí vamos a decir que la primera fila va a tener 100px de alto la
segunda 300ps de alto*/
grid-template-rows: 100px 200px;
}
.grid-item {
background-color: #48e;
margin: 10px;
padding: 10px;
font-size: 30px;
color: #fff;
width: 30%;
 display: inline-block;
}

15:24:54 - Unidades "auto" y

"fr"

<body>
<div class="grid">
<div class="grid-item">sssfsfsfsfs</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</body>

body {
margin: 0;
font-family: sans-serif;
}

.grid {
display: grid;
/* su la primera fila colocamos auto para asi cuando colocamos un texto
se puede ajustar */
height: 80vh;
grid-template-columns: auto 200px 300px;
/**/
grid-template-rows: auto auto;
}
.grid-item {
background-color: #48e;
 margin: 10px;
padding: 10px;
font-size: 30px;
color: #fff;
}

15:34:24 - Repeat y Minmax

REPEAD: que sirve para evitar repetir siempre la misma expresión.

MINMAX: que sirve para dar un mínimo y un máximo a una columna o una fila
15:42:18 - Grid implícito y
explícito
15:53:34 - Grid dinámico (y
responsive)
16:04:54 - Grid column y Grid
row
16:14:52 - Grid flow: Dense
16:19:34 - Grid areas
16:35:06 - Alineacion con grid
16:53:28 - Subgrid
17:02:14 - Creando una página
WEB }
 --- ANIMACIONES ---
TRANSICIONES REPASO
Te permite una transición entre un estado y otro estado

<body>
<div class="box">
<div class="barra"></div>
</div>
</body>

body {
margin: 0;
font-family: sans-serif;
background-color: #ccc;
}
div {
box-sizing: border-box;
}
.box {
margin: 20;
background-color: #fff;
border: 4px solid #48e;
padding: 6px;
border-radius: 30px;
transition: border .6s steps(6);
}

.barra {
padding: 30px;
background-color: #48e;
border-radius: 30px;
 width: 10%;
transition: width 0.6s steps(6), color 0.6s steps(); /* tiempo en
volver, LINEAR es para que la barra vaya en linea rrecta y STEPS para que
baya escalando*/
}
/*para que cuando estamos presionando*/
.barra:active {
width: 100%;
transition-duration: 3s; /* en ir*/
background-color: #f33; /*color de la barra para que cambie de color a
medida que se va incrementando */
}

.box:has(.barra:active){
border: 4px solid #f33;
}

18:13:13 - Animaciones
 Es un proceso que quiere generar una ilusión de movimiento, es coger una imagen sin animación
y animarlo
 Podemos cambiar más las animaciones
 Una animación podemos repetir las veces que queramos

Definimos el nombre de la animación y luego el FROM donde va a estar todas las propiedades que va a
tener los elementos cuando inicia la transición y en el TO va a tener cuando termina la animación.
<body>
<div class="box">
<div class="barra"></div>
</div>
</body>

body {
margin: 0;
font-family: sans-serif;
background-color: #ccc;
}
div {
box-sizing: border-box;
}
.box {
margin: 20;
background-color: #fff;
border: 4px solid #48e;
padding: 6px;
border-radius: 30px;
}
.barra {
padding: 30px;
background-color: #48e;
border-radius: 30px;
width: 10%;
animation-name: llenar-barra;
animation-duration: 3s;
animation-delay: -1s; /*esto nos dice cuanto va a tardar para
empesar*/
animation-fill-mode:forwards; /*aqui me decimos vas a quedar como
estabas antes
de la animación empieza con color rojo y regresa a azul, con BOTH solo
vamos a tener dos cambian */
animation-timing-function: linear;
animation-iteration-count: infinite; /* para que repita cuantas veces
tambien podemos dar cuantas veces queramos repetir con numero 4 etc*/
animation-direction:alternate ; /*va de atras para adelante*/

}
.barra:active{
animation-play-state: paused;/* que cuando damos click de pause*/
}
@keyframes llenar-barra {
from{ /* esto es todo lo que empieza*/
width: 0%;

}
to{
width: 100%;
background-color: #F33;
}
}

18:29:19 - Botones Animados

<body>
<div class="wrapper">
<div class="button-container">
<button class="btn btn-1">BUTTON</button>
</div>
<div class="button-container">
<button class="btn btn-2">BUTTON</button>
</div>
</div>
</body>

body {
margin: 0;
background-color: #222;
}
.wrapper {
display: flex;
flex-direction: column;
height: 80vh;
 justify-content: space-evenly; /*para que los botones se centren*/
align-items: center; /*para centrado*/
}
.btn {
padding: 10px 40px;
background-color: transparent;
color: #fff;
border-radius: 6px;
letter-spacing: 3px;
position: relative;
}
.btn-1 {
border: 1px solid #48e;
overflow: hidden; /*para que es cuadro se ingrese al boton */
}
.btn-1::before {
/* en el before siempre tiene que estar content para que funcione */
content: "";
background-color: #48e;
display: block;
height: 200%;
width: 140%;
position: absolute;
z-index: -1; /*para colocar el cuadro por debajo */
transition: top 0.6s, left 0.6s;
border-radius: 50%;
top: 100%;
left: 30%;
}
.btn-1:hover::before {
/* en el before siempre tiene que estar content para que funcione, cuando
el elemento 1 se le pasa el mouse por encima vamos a aceder a before*/
top: -35%;
left: -20%;
}

/******BOTTON 2*******/
.button-container:has(.btn-2){
filter: drop-shadow(0px 0px 20px #48e)
drop-shadow(0px 0px 20px #48e);
}

.btn-2 {
border: 1px solid #fff3;
color: #fff3;
}
.btn-2:hover {
animation: parpadear 3s infinite alternate backwards;
}
@keyframes parpadear {
0% {
color: #fff3;
border: 1px solid #fff3;
text-shadow: 0px;
box-shadow: 0px;
}
25% {
border-color: #48e;
color: rgb(111,168,255);
box-shadow: 0px 0px 6px #48e4, 0px 0px 16px #48e5;
text-shadow: 0px 0px 9px #48ee, 0px 0px 3px rgba(159, 197, 255,
0.454);
}
30% {
color: #fff3;
border: 1px solid #fff3;
text-shadow: 0px;
box-shadow: 0px;
}
35% {
border-color: #48e;
color: rgb(111,168,255);
box-shadow: 0px 0px 6px #48e4, 0px 0px 16px #48e5;
text-shadow: 0px 0px 9px #48ee, 0px 0px 3px rgba(159, 197, 255,
0.454);
}
50% {
color: #fff3;
border: 1px solid #fff3;
text-shadow: 0px;
box-shadow: 0px;
}
100% {
border-color: #48e;
color: rgb(111,168,255);
box-shadow: 0px 0px 6px #48e4, 0px 0px 16px #48e5;
text-shadow: 0px 0px 9px #48ee, 0px 0px 3px rgba(159, 197, 255,
0.454);
}
}
20:09:16 - Filter y Backdrop
Filter
20:29:30 - Transform
20:40:54 - Min, Max y Clamp
20:54:26 - Variables (custom
properties)
21:05:50 - Función Calc
21:14:58 - Propiedades del
Scroll
21:22:31 - Initial Letter
21:27:28 - Unidades del
Viewport (Large, Small y
Dynámic)
21:32:45 - Min-content, Max-
content y Fit-content
21:39:19 - Función Color Mix
---- PROYECTOS FINALES ----
21:49:41 - Sidebar Menu &
Chatbox (proyecto 1 y 2)
PRIMERO VAMOS A INTEGRAR UNA LIBRERÍA DE ICONOS

[Link]

[Link]

22.09

22:43:47 - Flip Card & One-

Page View (proyecto 3 y 4)
23:21:42 - Menú Acordeón
(proyecto 5) ---- COMO SEGUIR
---
23:42:39 - Como seguir
aprendiendo
[Link]