Cosas nuevas que aprendí en el Curso Definitivo de HTML y CSS

gonzalovidal2020

14568

Hola a todos estos son los apuntes de cosas nuevas e importantes que tomé de este curso del profe Diego de Granda (se los recomiendo totalmente)

<!--Lo siguiente sirve para que los robots del navegador me ayuden a posicionar mi
página web en ese buscador--><head><metaname="robots"content="index, follow"><head><!--Me ayuda a darle una descripción a una imagen o citar su fuente--><figure><figcaption>Esta es una imagen X</figcaption></figure><!--Se utiliza para que cargue el video apenas cargue la pág web--><videopreload="auto"></video><!--Se usa para que el navegador tenga el mismo video en el formato que pueda renderizar--><videopreload="auto"><sourcesrc="./videoX.mp4" /><sourcesrc="./videoX.mpg" /></video><!--Formulario con un input tipo calendario (fecha+hora)--><formaction=""><labelfor="calendario"><span>Calendario</span><inputtype="datetime-local"id="calendario"name="calendario"></label><inputtype="submit"></form>

Cuando se tiene el valor de atributo - inherit va a heredar el valor de ese atributo del padre más cercano que tenga ese atributo escrito explícitamente
ejm: Font-size:inherit, buscara del padre más proximo que tenga font-size:30px;

Para que el fondo cubra todo el height aunq se cambie la altura de la ventana, poner:
height: 100vh;

Tamaños relativos

<!--Si le ponemos a:-->
html {
 font-size: 62.5%
}
body {
 font-size:1.6 rem;
}
<!--
entonces ese 1.6rem equivaldría a 16 pixeles, es decir el porcentaje sería más fácil de calcular, si es 3.5rem sería 3.5x10=35px;--><!--

Propiedad: Display
En un elemento con display:inline no se puede usar margin ni padding arriba ni abajo, solo derecha e izquierda. Tampoco se puede aplicar width o height.
En un elemento con display:block el contenido del elemento toma el 100% del width, se puede usar margin y padding por todos los lados.
En un elemento con display:inline-block, se puede usar margin y padding por todos lados, así como darle width y height, y el contenido es del mismo tamaño que el elemento.

Etiquetas como p y div vienen por Default con un display:block
Etiquetas como span viene por Default con un display:inline

Display: inline,inline-block y block; se aplican y actúa sobre los hijos
Display: flex; se aplica a los padres y actúa sobre sus hijos

Display: flex;
Align-items: baseline Va a dejar el box del tamaño del contenido que tenga
Flex-grow: 1; se aplica al mismo hijo es para que rellene el espacio vacío

Imágenes Responsive
Imágenes Responsive: con ésta buena práctica los sitios webs cargaran óptimamente las imágenes según el dispositivo o tamaño de viewport que tenga el usuario
Solamente renderizará la imagen justa y necesaria:

<main><picture><sourcemedia="(min-width:1300px)"srcset="./imgs/large.jpg" /><sourcemedia="(min-width:1000px)"srcset="./imgs/medium.jpg" /><imgsrc="./imgs/small.jpg"alt="Esuna imágen de ejemplo" /></picture></main>

Accesibilidad

Semántica en HTML, ya que hay programas que dicen a usuarios con problemas visuales en que sección o espacio de la web están navegando, por eso es bueno usar las étiquetas correspondientes, como main, header, footer, etc.
Textos, se recomienda usar tamaños de fuentes relativa (rem) en vez de un tamaño absoluto (px), ya que permite modificar el tamaño de nuestra web automáticamente en el navegador.
El atributo label ayuda a enfocarme diréctamente en el input y nos ayuda a que otro software pueda indicar el contenido de este al usuario.
El atributo alt permite mediante screen readers leer una imagen que haya en la pag web y también si se nos rompe el enlace figure la descripción de esa
imagen.
El atributo title es una pequeña descripción de un elemento tipo imagen o link que aparece al hacerle hover a este.

hace 5 años