Código a tener en cuenta al usar CSS

Código  para aplicar a páginas web desde cero

*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html{

    font-size: 62.5%; /* para usar los rem sin problema*/

    font-family: 'DM Sans', sans-serif ;

}

Metodología BEM para CSS

 BEM: Bloques, elementos, modificadores

Link útil para BEM: https://9elements.com/bem-cheat-sheet/

Dividir lógicamente las piezas de las que se compone una web

.bloque{}

.bloque__elemento{}

.bloque--modificador{}

Ejemplo:

Propiedad css para dimensionar imagen en un contenedor

Esta propiedad indica como se puede redimendionar para ajustarse a un ocntenedor, en este caso vamos a ver el "object-fit:cover"

En esta propiedad el contenido se dimensiona para mantener su relación de aspecto pra llenar el contenido al que pertenece, esto puede ser muy útil para una imagen en el contenido de una página o carrusel.

Cómo insertar un texto en css en la posición que deseamos

Con text indent establecemos la sangría que queremos en el texto

.texto{
 text-indent:0px;
   margin-left: 75px;

}

Cómo saber el tipo de letra en una Página web

Para conocer qué tipo de letra usa una página hay que hacer lo siguiente:

Ctrl+shift+l  o vamos a los tres puntos que aparecen en Chrome, buscamos la opción "Más Herramientas" y hacemos click en Herramiendas del desarrollador.

Luego de esto buscamos allí la pestaña Style en donde buscaremos Font-Family, allí sabremos que tipo de letra usa una página web.

Cómo saber la tipografia de un sitio web

Cómo aumentar tamaño a la letra y espacio entre lineas en CSS

Estas dos líneas de código nos sirven de referencia para aplicar a nuestra página web y crear textos mas grnades, los cuales se debe tener en cuenta que a mayor tamaño en el font size, mayor line-height debe haber para mejor visualización. Tener en cuenta el tema responsive en este caso.

font-size: 20px; line-height: 40px;

Cómo hacer botones responsive para tu web con desplazamiento horizontal

Cuando desarrollamos un sitio web es normal que para algunas funciones tengamos varios botones y en este caso es importante tener en cuenta la visualización responsive, ya que puede ser muy molesto para los usuarios entrar por celular a una página web que se vean muchos botones hacia abajo, lo cual podría generar que estas personas dejen de entrar al sitio solo pro el hecho de que nuestra web no tiene buena experiencia de usuario. Para esto haremos lo siguiente

Dentro del código css  añadiremos estas dos líneas de código. No olvidar darle un nombre class al div para poder que el css tome el valor. Aquí veremos un ejemplo:

.resp{

Overflow:auto;
White-Space:nowrap;
}