CURSOS de CSS

Curso de CSS3 completo en un vídeo de 5h.

El objetivo de este tutorial es conocer y practicar el framework Bootstrap. Se presentan primero los conceptos básicos y ejercicios para probarlos y modificarlos.
Se requiere tener conocimientos previos de HTML y CSS.

Contenidos:
1 - ¿Qué es Bootstrap?
2 - Sistema de grillas de Bootstrap
3 - Múltiples reglas a las columnas de una fila.
4 - Anidamiento de columnas
5 - Offset (desplazamiento) de columnas
6 - Contenedor: container y containter-fluid
7 - table : básica
8 - table : con filas con colores alternos
9 - table : con borde en cada celda.
10 - table : iluminar la fila donde se encuentra el mouse (hover)
11 - table : tabla condensada.
12 - table : adaptable.
13 - table : clases contextuales aplicadas a filas y celdas.
14 - form : controles input (text,password)
15 - form : control textarea
16 - form : controles checkbox y radio
17 - form : control select
18 - form : formulario en una línea
19 - form : formulario horizontal
20 - form : control y grupo de controles HTML deshabilitados
21 - button : estilos
22 - button : tamaño
23 - button : desactivo
24 - button : grupo de botones, barra de herramientas y tamaños.
25 - Tipografía : títulos
26 - Tipografía : colores según el contexto.
27 - Tipografía : listas
28 - Tipografía : citas de bloque
29 - Tipografía : abreviaturas e iniciales
30 - Tipografía : Código y bloques de código.
31 - Tipografía : Clases para el alineado, justificado, transformación de texto etc.
32 - Iconos
33 - Imágenes
34 - Componente : jumbotron
35 - Componente : panel
36 - Componente : navegación por pestañas
37 - Componente : paginación
38 - Componente : barra de progreso
39 - Componente : barra de navegación simple
40 - Componente : Menú desplegable (Javascript)

Curso de CSS en vídeos:
1.- Introducción al curso
2.- Entorno de trabajo
3.- La sintaxis
4.- Selectores básicos I
5.- Selectores basicos II
6.- HTML y CSS
7.- Integración CSS

Curso de CSS3 desde Cero 2014, desde los conceptos mas básicos hasta los mas avanzado en vídeos.
Contenidos:
1. Introducción
2. Un poco de historia de CSS
3. Conceptos Básicos
4. Selectores Básicos de CSS
5. Selectores Id y Class
6. Combinadores de Selectores
7. Selectores de Atributo
8. Introducción a las Pseudo Clases de CSS
9. Pseudo clases css de Links y Acciones
10. Pseudo Clases Estructurales Básicas
11. Pseudo clases :nth-child()
12. Pseudo clases :nth-of-type()
13. Pseudo clases Adicionales de CSS3
14. Pseudo clases UI o de Interfaz de Usuario
15. Pseudo Elementos, parte 1
16. Pseudo Elementos, parte 2 ::before y ::after
17. Unidades de Longitud Absolutas
18. Unidades de Longitud Relativas
19. Unidades de Longitud Viewport Relativas
20. Los Colores en CSS como tipos de valor
21. Otros tipos de valor en CSS
22. Las Propiedades Fonts
23. Utilizando el método Shorthand con las Propiedades Fonts
24. Propiedades de Textos
25. Uso de la propiedad text-shadow
26. Estilos de listas
27. "Modelo de caja CSS" padding, border y margin
28. "Modelo de caja CSS" Width y Height
29. Box-sizing Modificando el Modelo de caja predeterminado
30. La propiedad display
31. Propiedades Float y Clear
32. Propiedades Position y Z-index
33. Las Propiedades de Background Básicas
34. Las Propiedades de Background Avanzadas
35. Border-radius
36. Box-shadow
37. Border image
38. CSS3 Linear Gradients
39. CSS3 Radial Gradients
40. CSS3 Repeating Gradients
41. Entendiendo Flexbox de CSS3
42. Entendiendo las propiedades Multi-Column
43. Web fonts, Fuentes personalizadas con @font-face
44. Icon fonts, Iconos basados en Fuentes con @font-face de CSS3
45. Las Transiciones y sus Propiedades
46. Transformaciones 2D
47. Transformaciones 3D
48. Animaciones en CSS3

El objetivo de este tutorial es conocer y practicar con las nuevas propiedades que nos presenta el css3. Disponemos de un concepto teórico, un ejercicio resuelto y la vista en ejecución de la página con su hoja de estilo.
Contenidos:
1 - Bordes redondeados (border-radius)
2 - Bordes redondeados de alguno de los vértices (border-top-left-radius etc.)
3 - Sombras (box-shadow)
4 - Sombras múltiples (box-shadow)
5 - Sombras interiores (box-shadow)
6 - Sombras con transparencias (box-shadow)
7 - Sombras de texto (text-shadow)
8 - Transformaciones 2D: rotación (transform:rotate)
9 - Transformaciones 2D: punto de origen (transform-origin)
10 - Transformaciones 2D: escalado (transform:scale)
11 - Transformaciones 2D: translación (transform:translate)
12 - Transformaciones 2D: torcer (transform:skew)
13 - Transformaciones 2D: múltiples transformaciones en forma simultanea
14 - Opacidad (opacity)
15 - Opacidad (color)
16 - Múltiples columnas (column-count)
17 - Múltiples columnas dinámicas (column-width)
18 - Múltiples columnas y su separación (column-gap)
19 - Múltiples columnas y línea separadora (column-rule)
20 - Importar una fuente no disponible en el navegador (@font-face)
21 - Imágenes de fondo (background-image)
22 - Imágenes de fondo en diferentes posiciones (background-position)
23 - Imágenes de fondo (background-size)
24 - Imágenes de fondo (background-origin)
25 - Transiciones de una propiedad (transition)
26 - Transiciones de múltiples propiedades (transition)
27 - Transiciones (funciones de transición)
28 - Transiciones (tiempo de demora en iniciar la transición)
29 - Transiciones (otra sintaxis para hacer lo mismo)
30 - Animaciones (sintaxis básica)
31 - Animaciones (animation-iteration-count y animation-direction)
32 - Animaciones (animation-timing-function y animation-delay)
33 - Animaciones (animation-play-state)
34 - Animaciones (definición de más de 2 keyframes)

Este es un manual de Responsive Web Design, la técnica que permite hacer webs adaptables a las condiciones del ordenador o dispositivo que las está accediendo. También las conocemos como técnicas adaptativas, focalizadas principalmente a las dimensiones de la pantalla.
Responsive Web Design no es una única técnica, sino son un conjunto de ellas que nos sirven para hacer diseños adaptables al medio donde se van a consumir. Por tanto, este manual no tiene un principio y un fin que pudiera estar perfectamente definido, sino que se podría ampliar su contenido en función de las necesidades de los sitios web en la actualidad, experiencia de los escritores o las novedades en los estándares como HTML y CSS para facilitar la adaptabilidad del diseño web.
En Internet no hemos encontrado una información completa y ordenada de principio a fin, en español, sobre Responsive Web Design, por lo que nos hemos decidido a escribir este texto que esperamos sirva de referencia para quien comienza a interesarse por la adaptabilidad del diseño o incluso para quien ya aplica el "Responsive".

Tal vez ya conoces las bases de CSS pero, ¿sabes aprovechar al máximo este lenguaje? Este curso te presenta 50 trucos prácticos, organizados temáticamente y que van desde las bases: CSS para fondos, textos, gráficos, listas o bordes, entre muchos otros usos. Aprende a personalizar tus proyectos web con efectos gráficos complejos y animación y a optimizar los tiempos de carga conociendo los secretos de los CSS.
Contenidos:
Introducción a 50 trucos con CSS
1.- Qué debes saber antes de empezar 50 trucos con CSS
Fundamentos de CSS
1.- Cómo incluir correctamente CSS en un documento
2.- Importar estilos entre documentos
3.- Creación de estilos exclusivos para impresión
4.- Creación de estilos exclusivos para móviles
5.- Creación de estilos adaptables y responsive
6.- Estandarización gráfica con hojas de estilos
Posicionamiento con CSS
1.- Problemas de flotado en CSS
2.- Administrar profundidad de objetos
3.- Centrado horizontal y vertical de elementos con CSS
4.- Escala, rotación y transparencia de elementos
Efectos de CSS con fondos
1.- Fondos con gradientes en CSS
2.- Fondos con imágenes en CSS
3.- Fondos con elementos múltiples en CSS
4.- Efecto parallax
CSS para textos
1.- Tipografías personalizadas con CSS
2.- Modificar el color del texto seleccionado en CSS
3.- Crear efecto de renglones en CSS
4.- Gradientes de color en textos con CSS
5.- Usar tipografías como iconos en CSS
6.- Mostrar en mayúscula la primera letra de un texto
7.- Decorar la primera letra de un texto en CSS
8.- Separación de línea con palabras largas
9.- Texto con efecto 3D en CSS
10.- Agregando texto adicional con CSS
Listas en CSS
1.- Personalizar listas en CSS
2.- Seleccionando elementos pares o impares en CSS
3.- Crear un menú basado en listas con CSS
Formularios en CSS
1.- Marcando elementos erróneos y correctos con CSS
2.- Validación en tiempo real con CSS
3.- Modificar estilos del elemento placeholder
4.- Modificar apariencia de los checkbox
5.- Eliminar la sombra de los inputs
Crear gráficos con CSS
1.- Dibujar con CSS
2.- Crear figuras geométricas en CSS
3.- Crear burbujas de diálogo en CSS
4.- Efectos de imágenes en los bordes
5.- Efecto long shadow en CSS
6.- Crear figuras de etiquetas en CSS
Imágenes en CSS
1.- Bordes redondeados en imágenes
2.- Doble borde de imágenes
3.- Imágenes con formas personalizadas
4.- Optimizando la velocidad de carga de imágenes
Animación con CSS
1.- Transiciones de elementos con CSS
2.- Animación CSS con imágenes
3.- Ciclos de animación con CSS
Efectos especiales con CSS
1.- Animaciones SVG en CSS
2.- Reflejos en CSS
3.- Efecto de desenfoque en CSS
Optimización en CSS
1.- Herramientas de optimización de CSS
2.- Minificar código

Guía básica de introducción a Sass.
Vídeos:
1.- Introducción
2.- Instalar Sass
3.- Primeros Pasos en Sass
4.- Anidación de Código (Nesting)
5.- Los Comentarios en Sass
6.- Las Variables
7.- Los mixins
8.- Extender Estilos con extend y Placeholder
9.- La regla import y los Partials
10.- Funciones de Color
11.- Los Media Queries
12.- Interpolación de variables
13.- Directivas de control If y Else
14.- Directiva de control For
15.- Directiva de control While
16.- Directiva Each
17.- El uso de Operadores
18.- Las Variables

Colección de tutoriales de CSS y CSS3. Contiene 90 vídeos.
Contenidos:
1. Curso Django 12 - HTML y CSS
2. Curso Twitter Bootstrap CSS - 1: Introducción
3. FIN de Curso Twitter Bootstrap CSS - 56: Nuevas caracteristicas a Bootstrap 3
4. Curso Twitter Bootstrap CSS - 55: Links de ayuda!
5. Curso Twitter Bootstrap CSS - 54: Imágenes de fondo
6. Curso Twitter Bootstrap CSS - 53: Degradados radiales
7. Curso Twitter Bootstrap CSS - 52: Esquemas de colores con less dinamicos
8. Curso Twitter Bootstrap CSS - 51: Iconos vectoriales con less
9. Curso Twitter Bootstrap CSS - 50: Lanfding page
10. Curso Twitter Bootstrap CSS - 49: Degradados con Less
11. Curso Twitter Bootstrap CSS - 48: Escribiendo mi propio CSS
12. Curso Twitter Bootstrap CSS - 47: Cambio de apariencia del menu
13. Curso Twitter Bootstrap CSS - 46: Tipo de fuente de Google Font
14. Curso Twitter Bootstrap CSS - 45: Personalizar Bootstrap
15. Curso Twitter Bootstrap CSS - 44: Entorno de trabajo con mis estilos
16. Curso Twitter Bootstrap CSS - 43: Compular desde Sublime text
17. Curso Twitter Bootstrap CSS - 42: Flujo de trabajo con bootstrap-less
18. Curso Twitter Bootstrap CSS - 41: Import
19. Curso Twitter Bootstrap CSS - 40: Reglas anidadas en less
20. Curso Twitter Bootstrap CSS - 39: Mixin en less
21. Curso Twitter Bootstrap CSS - 38: Variables en less
22. Curso Twitter Bootstrap CSS - 37: Nodejs y less
23. Curso Twitter Bootstrap CSS - 36: Código fuente y estructura de directorios
24. Curso Twitter Bootstrap CSS - 35: Carrusel o slide JS
25. Curso Twitter Bootstrap CSS - 34: Cassusel o slide
26. Curso Twitter Bootstrap CSS - 33: Colapsable o acordeon
27. Curso Twitter Bootstrap CSS - 32: Buttons radio y checkbox
28. Curso Twitter Bootstrap CSS - 31: Popover eventos JS
29. Curso Twitter Bootstrap CSS - 30: Popover
30. Curso Twitter Bootstrap CSS - 29: Tooltips
31. Curso Twitter Bootstrap CSS - 28: Tabs
32. Curso Twitter Bootstrap CSS - 27: Modal JS
33. Curso Twitter Bootstrap CSS - 26: Modal
34. Curso Twitter Bootstrap CSS - 25: Utilidades generales
35. Curso Twitter Bootstrap CSS - 24: Listados de registros
36. Curso Twitter Bootstrap CSS - 23: Barras de progreso
37. Curso Twitter Bootstrap CSS - 22: Notificaciones
38. Curso Twitter Bootstrap CSS - 21: Thumbnails
39. Curso Twitter Bootstrap CSS - 20: CSS labels y badged
40. Curso Twitter Bootstrap CSS - 19: Paginación
41. Curso Twitter Bootstrap CSS - 18: Breadcrumb
42. Curso Twitter Bootstrap CSS - 17: Menu navbar
43. Curso Twitter Bootstrap CSS - 16: Listas nav verticales
44. Curso Twitter Bootstrap CSS - 15: Listas nav
45. Curso Twitter Bootstrap CSS - 14: Grupos de botones
46. Curso Twitter Bootstrap CSS - 13: Íconos vectoriales con awesome font
47. Curso Twitter Bootstrap CSS - 12: Íconos
48. Curso Twitter Bootstrap CSS - 11: Imágenes
49. Curso Twitter Bootstrap CSS - 10: Botones
50. Curso Twitter Bootstrap CSS - 9: Formularios
51. Curso Twitter Bootstrap CSS - 8: Tablas
52. Curso Twitter Bootstrap CSS - 7: Zen Coding en sublime text
53. Curso Twitter Bootstrap CSS - 6: Ocultar elementos segun dispositivo
54. Curso Twitter Bootstrap CSS - 5: Responsive design
55. Curso Twitter Bootstrap CSS - 4: Columnas anidadas
56. Curso Twitter Bootstrap CSS - 3: Grid para maquetar
57. Curso Twitter Bootstrap CSS - 2: Cómo se usa
58. Crea un Tema de WordPress: Parte 13 - Retoque CSS veloz
59. 18. Tutorial CSS: Position
60. 17. Tutorial CSS: Márgenes
61. 16. Tutorial CSS: Degradados
62. 15. Tutorial CSS: Colores
63. Curso Completo - Página web en HTML5 y CSS
64. 13. Tutorial CSS: Backgrounds
65. Crea una Página Web en HTML5 y CSS - Parte 15: Validación HTML5 (ÚLTIMA PARTE!)
66. Crea una Página Web en HTML5 y CSS - Parte 14: Navegación
67. Crea una Página Web en HTML5 y CSS - Parte 13: Fuentes Personalizadas
68. Crea una Página Web en HTML5 y CSS - Parte 12: CSS en Media
69. Crea una Página Web en HTML5 y CSS - Parte 11: Media
70. 13. jQuery: Clases de CSS
71. Crea una Página Web en HTML5 y CSS - Parte 10: CSS en Formulario
72. Crea una Página Web en HTML5 y CSS - Parte 9: Formulario de Contacto II
73. 12. jQuery: Método CSS
74. Crea una Página Web en HTML5 y CSS - Parte 8: Formulario de Contacto
75. Crea una Página Web en HTML5 y CSS - Parte 7
76. Crea una Página Web en HTML5 y CSS - Parte 6
77. Crea una Página Web en HTML5 y CSS - Parte 5 - Configurando Canvas
78. Crea una Página Web en HTML5 y CSS - Parte 4 - Footer
79. Crea una Página Web en HTML5 y CSS - Parte 3 - Aplicando CSS al Index
80. Crea una Página Web en HTML5 y CSS: Parte 2
81. Crea una Página Web en HTML5 y CSS: Parte 1
82. 10. Tipos de Letra en CSS
83. 8. Tamaño en CSS
84. 7. Prefijos en CSS
85. 6. Pseudo Elementos en CSS
86. 5. Pseudo Clases en CSS
87. 4. Curso de CSS - Selectores
88. 3. Aplicar CSS a una página web
89. 2. Curso de CSS - Sintaxis
90. 1. Curso de CSS - Introducción

Manual de CSS avanzado dividido en:
Capítulo 1. Técnicas imprescindibles
1.1. Propiedades shorthand
1.2. La propiedad hasLayout de Internet Explorer
1.3. Limpiar floats
1.4. Elementos de la misma altura
1.5. Sombras
1.6. Transparencias
1.7. Sustitución de texto por imágenes
1.8. Sustitución de texto por Flash
1.9. Esquinas redondeadas
1.10. Rollovers y sprites
1.11. Texto
Capítulo 2. Buenas prácticas
2.2. Comprobar el diseño en varios navegadores
2.3. Mejora progresiva
2.4. Depuración
2.5. Hojas de estilos
2.6. Rendimiento
2.7. Recursos imprescindibles
Capítulo 3. Selectores
3.1. Selector de hijos
3.2. Selector adyacente
3.3. Selector de atributos
3.4. Pseudo-clases
3.5. Pseudo-elementos
3.6. Selectores de CSS 3
Capítulo 4. Propiedades avanzadas
4.1. Propiedad white-space
4.2. Propiedad display
4.3. Propiedad outline
4.4. Propiedad quotes
4.5. Propiedad counter-reset
4.6. Propiedad counter-increment
4.7. Propiedad content
Capítulo 5. Frameworks
5.1. El framework YUI
5.2. Primeros pasos con el framework YUI
5.3. Inicializando estilos con el framework YUI
5.4. Texto con el framework YUI
5.5. Layouts con el framework YUI
5.6. Otros frameworks
Capítulo 6. Técnicas avanzadas
6.2. Mapas de imagen
6.3. Variables en las hojas de estilos
6.4. Estilos alternativos
6.5. Comentarios condicionales, filtros y hacks
6.6. Selector de navegador
En formato pdf. Contiene 151 páginas.