Taller de CSS y Bootstrap
En el capitulo anterior
En el capitulo anterior
<!DOCTYPE html>
<html>
<head lang='es'>
<meta charset='utf-8'>
<title>
To-do List
</title>
</head>
<body>
<header>
<h3>To-do List</h3>
<button>Crear nueva tarea</button>
</header>
<section>
<ul>
<li>
<input type="checkbox">
<label>Comprar entradas para el estreno de Civil War woo</label>
<button>Editar</button>
<button>Programar</button>
</li>
<li>
<input type="checkbox">
<label>Ver el primer capítulo de GOT</label>
<button>Editar</button>
<button>Programar</button>
</li>
<li>
<input type="checkbox">
<label>Comprar tiquetes para el JSConf</label>
<button>Editar</button>
<button>Programar</button>
</li>
</ul>
</section>
</body>
</html>Factores clave
- SEO
- UX
- Costo
Metodologia del Workshop
Definiendo Estilos
<label style="color:red;">Contenido</label>Text
Declaración
<label style="color:red; font-size:16px; margin-left:14px;">
Contenido
</label>Regla
Selectores
#todo-list{
/*declaraciones*/
}Text
id (#attr)
.item-list{
/*declaraciones*/
}class (.attr)
h1{
/*declaraciones*/
}tag (h1)
Selectores
#todo-list{
/*declaraciones*/
}Text
id (#attr)
.item-list{
/*declaraciones*/
}class (.attr)
h1{
/*declaraciones*/
}tag (h1)
Tipos de Display
Text
- inline
- block
- inline-block
Bootstrap
¿Tienes alguna pregunta?
Si tienes dudas ahora es el momento de resolverlas
Taller de CSS y Bootstrap: Añadiendo estilos nuestra interfaz gráfica
By CucutaJS
