QUIENES SOMOSGERARDO MORALES Diseñador Gráfico especialista en desarrollo front-end Actualmente trabaja en Digital Bond, agencia especializada en campañas de marketing digital en donde desarrolla sitios web.
RODRIGO ACEVEDO Comunicador Multimedia, desarrollador web Se desempeña como director Digital de EspinacaBWF, donde estratégicamente lidera campañas de marketing digital.
Es un lenguaje para la elaboración de sitios web, se caracteriza por utilizar una estructura y sintaxis simple.
SINTAXIS
<p><strong>Hola Workshop</strong> Digital</p>
Elemento <p> tiene en su interior un <strong>
<!DOCTYPE html> <html lang="en">
<head> <title>Sitio de ejemplo</title>
</head> <body>
<p>Texto de ejemplo</p> </body>
</html>
TAGS RECURRENTESDía a día utilizamos etiquetas en html que se repiten continuamente
Títulos
Cajas
Textos e imágenes
h1, h2, h3, h4, h5, h6
div
p, a, strong, em e img
Listas ul y ol
li
TAGS RECURRENTESDía a día utilizamos etiquetas en html que se repiten continuamente
Formularios input, textarea, label
VENTAJAS
•Utiliza un conjunto de buenas prácticas.
•Utiliza HTML5 y CSS3.
•Utiliza una grilla de 12 columnas.
•Es una herramientas sencilla y ágil para
construir sitios web e interfaces.
GRID SYSTEMContenedor de columnas fluido
<div class=“container-fluid”> <div class=“row”>
… </div>
</div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div> <div class=“col-md-1”>.col-md-1</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-8”>.col-md-8</div> <div class=“col-md-4”>.col-md-4</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4”>.col-md-4</div>
</div> </div>
GRID SYSTEMEjemplos de columnas
<div class=“container”> <div class=“row”>
<div class=“col-md-6”>.col-md-6</div> <div class=“col-md-6”>.col-md-6</div>
</div> </div>
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-4”>.col-md-4</div> <div class=“col-md-4 col-md-offset-4”>.col-md-4 .col-md-offset-4</div>
</div> </div>
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset-3</div> <div class=“col-md-3 col-md-offset-3”>.col-md-3 .col-md-offset-3</div>
</div> </div>
GRID SYSTEMOffsets
<div class=“container”> <div class=“row”>
<div class=“col-md-6 col-md-offset-3”>.col-md-6 .col-md-offset-3</div> <div class=“col-md-6 col-md-offset-3”>.col-md-6 .col-md-offset-3</div>
</div> </div>
MEDIA QUERIESVariables de CSS que utiliza para lograr la visualización que quiero obtener según el
dispositivo
Bootstrap • Inglés • Español
Bootstrap O’Reilly Media
• Amazon
Top Related