INICIO

CHULETA DE CÓDIGOS FRECUENTES HTML / CSS PARA DESARROLLADORES WEB

Cuando trabajamos en el desarrollo web hay elementos que tenemos que utilizar una y otra vez.

He creado esta super lista como algo personal, pero puedes guardarla en marcadores y tenerla abierta durante tus proyectos para copiar lo que necesites.

Estructura básica de un documento HTML5

Para que copies y pegues.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Super Título</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
...
</body>
</html>

Y por supuesto, la mayoría de las veces necesitarás:

Incluir FontAwesome desde un CDN

Esta es la versión más reciente de fontawesome.

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>

Ahora ya podrás jugar con bichos raros o darte una super ducha.

Clic para abrir en nueva pestaña: Lista completa de iconos disponibles.

Incluir un archivo CSS

Esta es simple pero por si acaso

<link rel="stylesheet" href="./ruta/al/documento.css">

Ah, y no, no hace falta especificar el type=”html/css”, el navegador ya sabe hacerlo.

Reset básico de CSS

Yo suelo añadir este fragmento al inicio de la definición de estilos en mis proyectos, para trabajar con valores por defecto estándares en todos los navegadores.

Así no tengo que llevarme sorpresa.

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
font-size:16px;
font-family:Ubuntu,Helvetica,Arial,sans-serif;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

*, *:before, *:after{
color:inherit;
text-decoration:none;
margin:0;
padding:0;
font-weight:normal;
border:0;
outline:none;
z-index:1;
vertical-align:top;
-webkit-box-sizing:inherit;
-moz-box-sizing:inherit;
box-sizing:inherit;
}

Nótese que he establecido el modelo de cajas border-box, que es mucho más cómodo que el antiguo.

Seguiré actualizando la lista, así que no olvides de añadirla a marcadores.