HTML y CSS para principiantes

C1)Que aprenderás sobre HTML y CSS?

C11)Tipos de imágenes?

C12)Optimización de imágenes:
En promedio las imágenes para las paginas deberían pesar 70kb.
Las paginas que el curso ofrece son:
C13)Etiqueta img:

C14)Etiqueta figure:
Esta etiqueta se utiliza en conjunto con la etiqueta de img, laa
etiqueta de figure es una etiqueta contenedora.

C15)Etiqueta video:
Manera de usar la etiqueta:

En caso de que no sepamos que tipo de video usa el navegador

(mp3,mp4,mp5,m4v), haremos lo siguiente:

EN ESTE CASO LE DA LA POTESTAD AL NAVEGADOR DE ELEGIR EN QUE

FORMATO CARGAR EL VIDEO

C16)Etiqueta FORM e IMPUT:

Manera de usar la FORM E INPUT:
Inputs que se pueden usar:
input type=hidden
input type=text
input type=search
input type=tel
input type=url
input type=email
input type=password
input type=date
input type=month
input type=week
input type=time
input type=datetime-local
input type=number
input type=range
input type=color
input type=checkbox
input type=radio
input type=file
 input type=submit
input type=image
input type=reset
input type=button

C17)Calendar:
Manera de hacer un formulario como CALENDARIO:  

De la siguiente manera se haria un calendario, con solo un input:

C18)Autocomplete y require:
Manera de hacer un formulario  con el AUTOCOMPLETE Y
REQUIRE:  

C19)Select:

Hacer un COMBO_BOX  (esta no es la mejor manera de hacerlo):

Hacer un COMBO_BOX  (esta es la mejor opcion): este hara la

busqueda mientras el usuario coloca lo que desea de los cursos.
C20)Input type submit vs. Button tag:

EN AMBOS CASOS FUNCIONAN IGUAL

La etiqueta de botón, es mejor usarla para funciones distintas a
enviar.

C21)¿Qué es CSS?
C22)¿Cómo utilizamos CSS?: por etiqueta, selector, class
y por ID:
POR ETIQUETA (SELECTOR):

POR CLASE:

POR ID:

C23)Pseudo clases y Pseudo elementos:

Cómo nombrar las clases:
😗* cómo nombrar correctamente las clases.
Solo usa clases. Las nombra siguiendo el siguiente patrón:
BLOQUE__ELEMENTO—MODIFICADOR (son 2 guiones, se usa 1
guión para separar palabras).
Bloque: sección que puede funcionar por sí sola.
Elemento: forma una de las partes del bloque.
Modificador: variaciones de un mismo bloque/elemento.

Crear estilos a etiquetas dentro de clases:

Si tienes etiquetas dentro de la etiqueta a la que le estás aplicando
estilos y le pones una clase, puedes aplicar estilos únicamente a las
etiquetas dentro de esa clase de la siguiente manera: .clase
etiqueta {}

Usa background-color para ver las cajas de los

elementos.

Pseudo clases:
Define el estilo de un estado especial de un elemento.
Agregar al final de la clase :nombreAccion
hover : cuando pasa el cursor sobre el link
active : cuando se selecciona el link
Lista de Pseudo Clases

Pseudo Elementos:
Define el estilo de una parte específica de un elemento.
Agregar al final de la clase ::nombreAccion

    Lista de Pseudo Elementos

C24)Anatomia de una regla de CSS:

C25)Modelo de caja:
Mientras que el border-box es el encargado de que no exista ningún scroll en
pantalla.

C26)Harencia:

Es el codigo en CSS que se le va a pasar de un padre a un hijo.

C27)Orden de declaracion:
Calculo_para_la_especificidad
C28)Demo de especificidad y orden en selectores:
COMANDO PARA CREAR UN MENU DE NAVEGACION:
header>nav>ul>li*4>a + TAB
Esta imagen muestra la ESPECIFICIDAD DE LOS DISTINTOS ESTILOS
QUE EXISTEN, de arriba hacia abajo.
C29)Mas sobre los selectores:
A diferencia de la imagen anterior, en este caso estamos
trabajando con puras clases (lo de poner ids en cada etiqueta es
mala practica)
C30)Combinadores: Adjacent Siblings(combinators):
HERMANO ADYACENTE O CERCANO:

C32)Combinadores: HIJO y DESCENDIENTE:

HIJO:
DESCENDIENTE:

C33)Medidas:
Medida absoluta: el valor de este no cambia y siempre sera el
mismo así la pagina cambie su tamaño, las medidas absolutas son:
mm = milímetros
cm = centímetros
 in = pulgada
pc = picas
px = pixel

Medidas relativas: estas medidas heredan el tamaño o se basan en

algún tamaño que se haya seleccionado y el valor ira cambiando
según si la pagina cambia de tamaño, las medidas relativas son :

%
em
rem

PAGINA_CONVERTIR_MEDIDAS

C34)Medidas EM:
EM siempre tomara la medida del padre directo.

C35)Medidas REM (esta es la que recomienda el

profesor):
Por que poner en la etiqueta HTML el 62.5%?
De esta manera, sabremos que cuando usemos el font-size de
alguna etiqueta no tendremos que sacar cuentas. SABREMOS
QUE 1.5rem SERAN 15PX.
SIEMPRE IR EN PROYECTO (VER PUNTO 25 MODELO DE CAJA)

C36)Max?Min width:
Min-height: se utiliza para definir la altura mínima de un
elemento dado. Impide que el valor de la propiedad height
llegue a ser más pequeña que la especificada en la altura
mínima ( min-height ). Se refiere a la altura del bloque
contenedor.
Max-height: se utiliza para definir la altura máxima de un
elemento dado. Impide que el valor de la altura pueda llegar a
ser más grande que la de max-height . Porcentajes: se refiere a
la altura del bloque contenedor.
Min-width: se usa para determinar la anchura mínima de un
elemento. Previene que la propiedad width pueda ser inferior
que min-width . Aplicable a: elementos de tipo bloque.
Porcentajes: se refieren a la anchura del bloque contenedor.
 Max-width: define el ancho máximo que un elemento puede
tener, max-width cambia el tamaño del elemento si el valor de
width es mayor que el de max-width.
ESTO HARA QUE LA FORMA DE LA SECCION, TENGA UN ANCHO
MAXIMO Y UN ANCHO MINIMO

ESTO HARA QUE LA FORMA DE LA SECCION, SEA DEL MISMO

LARGO DE LA INFORMACION QUE CONTIENE:
C37)Position:
EJEMPLOS:
ESTA ES LA POSICION ORIGINAL: con la posición STATIC,
por defecto

POSICION ABSOLUTA: en este caso el recuadro 2 se posa sobre el

recuadro 3 y no deja verlo

POSICION RELATIVA: en este paso ya se permite el uso de las etiquetas de

(TOP, BOTTOM, LEFT, RIGHT)
 CON ESTE TIPO DE POSICION YA SE PEUDE JUGAR CON LA
POSICION DE LOS CONTENEDORES DE CUALQUIER COSA

C38)Display:
Display BLOCK = para este caso las etiquetas 'DIV' y  'P' por
default, son elementos en display block. Lo que eso quiere decir
es que va a utilizar el 100% del espacio que tiene por delante,
sin importar si el contenido tiene o no ese espacio utilizado.   

En este caso le podemos agregar el MARGIN y el PADING

Display INLINE = para este caso lo que usamos es una etiqueta 'SPAN',
solamente usara el espacio que tenga su contenido....si queda espacio delante
de el, este permitirá colocar otras etiquetas a su lado.

En este caso cabe recalcar que no se puede

hacer el MARGIN o PADIN en la parte de arriba
ni en la parte de abajo, pero si puede usar para
la parte izquierda y derecha.
Tampoco se le podrá dar ni un WIDHT ni un
HEIGHT, ya que es algo lineal.
 Display INLINE-BLOCK = esta es la unión de los tipos de display anteriores

EN ESTE CASO, LAS COSAS LE PUEDE

COLOCAR UNA AL LADO DE LA OTRA, Y
TAMBIEN SE LE PUEDE AGREGAR UN WIDHT Y
HEIGHT

C39)Desafío_ Layout 1:COMPLETADO

C40)Display Flex: EN ESTE VIDIO, SE PUEDE VER COMO USA

DOS CLASES PARA UNA SOLA ETIQUETA
El DISPLAY-FLEX se usa en una etiqueta padre (QUE TENGA
HIJOS A SU DISPOSICION) de modo que cuando se le coloque
esta condicion los hijos se comporten de una manera no usual. 
 
Así mismo si usamos la función  "FLEX-WRAP" en WRAP, esto hará que los
contenedores se muevan y ordenen dependiendo del tamaño de la ventana.

También como función esta la "JUSTIFY-CONTENT : CENTER", lo que hará es que

los hijos se posicionen en el centro de la pantalla.

Otra:
 LA MISMA PERO DEJANDO LA MISMA DISTANCIA DE ESPACIO
ENTRE LOS HIJOS:

C41)FLEX-BOX:
Flex es un tipo de display que permite que el contenedor padre sea
flexible a los cambios que puedan tener los elementos hijos en su
alineación.
Una vez tengamos el elemento padre con display: flex tenemos
otras propiedades que podremos usar para nuestro beneficio.
Flex-direction: Te permite elegir la alineación de los
elementos hijos sea en vertical (column) u horizontal (row), esta
alineación viene por defecto.
Justify-content: Esta propiedad nos permite alinear el
contenido de forma horizontal
Valores:
Flex-start: Alinear items del flex desde el comienzo.
Flex-end: Alinear items desde el final.
Center: Alinear items en el centro del contenedor.
Space-between: Distribuir items uniformemente, el
primer items al inicio, el último al final.
Space-around: Distribuir items uniformemente, estos
tienen el mismo espacio a su alrededor.
 Space-evenly: Distribuye uniformemente el espacio
entre los items y su alrededor.
Align-items: Sirve para alinear los elementos hijos de forma
vertical.
Valores:
Flex-start: Se alinean desde arriba.
Flex-end: Se alinean desde abajo.
Center: Alinea los item al centro del eje y del
contenedor.
Stretch: Estira el alto de los elementos hijos al 100% del
alto del elemento padre.
Baseline: Escala el alto del elemento al tamaño de su
contenido.
Flex-wrap: Permite que un elemento cuyo tamaño sea mayor
al de la página haga un salto de línea sin salirse del
contenedor, pues este se agranda.
Order: Especifica el orden utilizado para disponer los
elementos en su contenedor flexible. Los elementos estarán
dispuestos en orden ascendente según el valor de order.
Flex-grow: Especifica qué cantidad del espacio restante
dentro del contenedor flexible, debería ocupar el ítem en
cuestión según su dirección principal, esta última determinada
por flex-direction.
Flex-basis: Especifica el tamaño inicial de un elemento flexible.
flex-flow: se puede colocar wrap y column separados con
espacios.
flex-align: alinea el texto de forma transversal a direction.
Tiene varios valores como stretch que hace que ocupe el 100%
de la pantalla. O baseline que ocupa solo el tamaño del texto
que se esté usando.
 order: n da un orden de ubicación colocando un número.
Funciona con positivos y negativos. Los que no tengan un
order tienen por defecto el 0.
flex-grow: 1 hace crecer a las cajas para ocupar todo el
espacio restante en responsive. Se sobre escribe a space-
evenly.
TENGO QUE HACER EL RETO CON EL FLEX-BOX

C42)Varibles: Guardarle un valor a una variable para no tener que

repetir mucho codigo
DE ESTA MANERA SE LE DAN LOS VALORES A LAS VARIABLES:

DE ESTA MANERA SE UTILIZAN LAS VARIABLES:

C43)Web-Font:
PAGINA DE GOOGLE PARA FONTS

C44)Responsive-Design:
MEDIA QUERIES:

SIEMPRE EMPEZAR POR LOS DISPOSITIVOS MAS PEQUENOS

C45)Estrategias de responsive:
Patrones:
1.
 2.

3.

C46)Implementando mostly flui:

C47)Layout shifter CSS:

C48)Column drop:

C49)Buenas practicas y ejemplos de resposive:

ESTA PAGINA FUNCIONA PARA VER LAS DIMENSIONES QUE SE

ESTAN MANEJANDO EN EL MUNDO ACTUAL
device.io

C50)Imágenes responsive:
 En este caso, el código que tenemos en la imagen funciona y se
adapta al tipo de pantalla necesario.

C51)Semántica:
SIEMPRE TENER EN CUENTA LAS ETIQUETAS, ESTAS NOS
AYUDAN A LEER LA PANTALLA DE MANERA QUE EL USUARIO
SEPA EN QUE SECCION ESTA.

C52)Textos:

ESTA CONFIGURACION LO QUE HACE ES QUE CUANDO EL USUARIO

(POR ALGUNA U OTRA RAZON), CAMBIE EL TAMANO DE LA FUENTE
USADA, ESTAS SE AJUSTEN Y SE HAGAN DEL TAMANO QUE EL LO
SOLICITO. EL TEXTO SE INCREMENTA
C53)Labels, alt y title:
Etiqueta LABEL: Funciona para que cuando el usuario
presione el label, automáticamente el cursor active el lugar
en donde debe rellenar la información.

Etiqueta ALT: Funcionara para que cuando no se pueda

cargar la imagen en pantalla, se muestre una descripción
de lo que se suponía la imagen era.

Etiqueta TITLE: Funciona para que cuando se pase el curso por donde se
quiera, este muesstre un mensaje con lo que es.
ESTA ULTIMA ETIQUETA PUEDE SER UTILIZADA EN TODO LO QUE
SE DESEE, MIESTRA SE USE ESA ETIQUETA

TERMINE POR FIN ESTE CURSO MENOR, ESTOY FELIZ XDDDDD