INTRODUCCIÓN
HTML/CSS
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
HTML --> Hyper Text Markup Language
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
1980 --> Tim Berners-Lee
1991 --> 18 etiquetas HTML
1995 --> HTML 2
1997 --> HTML 3.2 - HTML 4
2015 --> HTML 5
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Elementos: <etiqueta>contenido</etiqueta>
Atributos
DOM --> Document Object Model
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
src
alt:
disable:
href:
id
style:
title:
<img src="jointDeveloper.png" alt="Joint Developer">
<a href="http://jointdeveloper.com/">Enlace</a>
<p style="color:blue;"></p>
<p title="saludo inicial">Hola</p>
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
HTML / HTML 5
<header>
<footer>
<article>
<section>
<canvas>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Cascading Style Sheets
1996 --> CSS1 - Bert Bos , Hakun Wiun
1998 --> CSS2
1999 --> CSS3
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Los elementos de HTML se generan sobre cajas.
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Selectors
Media Queries
Rounded corners
Border image
Gradients
Backgrounds
Animations
Images
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Se usan para seleccionar el elemento al que se le desea cambiar o dar estilo.
.class
#id
element
element, element
element > element
:first-child
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Se usa para crear sitios responsive
Agregar puntos de quiebre
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
Frameworks
Responsive
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com
developerjoint@gmail.com
/jointDeveloper
/jointDev
jointdeveloper.com