CSS Moderno

CSS Moderno

39,00

CSS puede parecer simple al principio, pero no te dejes engañar, esa simplicidad desaparece al enfrentarte a escenarios reales. Eso es lo que vas a aprender en este curso: CSS Moderno en situaciones reales.

Gracias al curso de CSS aprenderás:

  • Las bases imprescindibles de CSS que todo desarrollador/desarrolladora debe conocer.
  • Características esenciales como el modelo de caja, la especificidad o los modos de display.
  • Novedades de CSS 3.
  • Nuevos modos de posicionamiento como Flex o GRID.
  • Fundamentos de animación CSS.
  • Mejores prácticas de estructura CSS, como BEM.
  • Nuevas funciones CSS con variables y calc().
  • Dar estilo a un proyecto real, desde cero, utilizando CSS.
  • Práctica final evaluada por el profesor de forma individual y personalizada.

Al finalizar el curso sabrás aplicar tus propios estilos visuales y patrones de animación a cualquier elemento en la Web.

Para aprovechar al máximo el curso de CSS, debes tener conocimientos esenciales de HTML, la actitud correcta, ganas de aprender y 30 minutos al día.

El curso de CSS Moderno va dirigido a cualquier persona que quiera seguir profundizando en el apasionante mundo del desarrollo front-end y acceder a nuevas oportunidades profesionales.

Garantía ESAT
SKU: course-34 Categoría: Etiquetas: , , , ,

Descripción

Introducción.

  • ¿Qué significa CSS? Una breve introducción a los contenidos del curso de CSS.

CSS fundamental

  • Selectores. Los selectores CSS nos permiten manipular propiedades visuales y de comportamiento en determinadas condiciones y combinaciones de elementos HTML.
  • Cascada. La cascada es uno de los conceptos más importantes de CSS. En esencia, define en qué orden es ejecutado nuestro código CSS.
  • Herencia. Algunas propiedades CSS se pueden heredar de padres a hijos, haciéndonos la vida más fácil. Veamos cómo funciona la herencia CSS.
  • Especificidad. La especificidad es otro de los grandes conceptos CSS que debes entender. Sin él, CSS puede parecer mucho más confuso de lo que realmente es.
  • Modelo de caja. El modelo de caja (box model) CSS define cómo se muestran visualmente los elementos HTML en el navegador.
  • Imágenes inline. Es complicado encontrar un documento HTML que no tenga al menos una imagen. Veamos cómo se pueden manipular con CSS.
  • Imágenes de fondo. Otra de las formas de añadir imágenes a nuestros elementos HTML es como fondo. Una técnica muy útil en algunos casos. CSS tiene varias propiedades específicas para esta tarea.
  • Sprites. CSS permite utilizar sprites (imágenes combinadas en una sola) de formas creativas.
  • Color. CSS se encarga del aspecto visual de nuestro documento HTML, por ello permite gestionar y expresar el color usando diferentes escalas.
  • Degradados. CSS permite definir degradados lineales y radiales de forma nativa. Veamos cómo.
  • Tipografía. Por supuesto, CSS dispone de varias propiedades para gestionar diferentes familias tipográficas y establecer sus valores más importantes.
  • Espaciado tipográfico. Existen dos propiedades CSS principales que te permitirán ajustar el espacio en la tipografía.
  • Display. Los modos de display es un concepto troncal CSS que debes entender ya que controla cómo se relacionan los elementos HTML unos entre otros.
  • Posicionamiento relative y absolute. En CSS, los elementos se posicionan teniendo en cuenta su modelo de caja y siguiendo el flujo natural de documento. Sin embargo, es posible alterar ese orden natural y re-posicionar un elemento a tu antojo.
  • Posicionamiento fixed y sticky. Dos valores muy comunes en el CSS escrito hoy en día ya que forman parte de patrones UX que todos utilizamos.
  • Z-index. El índice Z añade la tercera dimensión (profundidad) a nuestro documento HTML. Con esta propiedad es posible controlar la superposición de elementos HTML.
  • Desbordamiento. ¿Qué ocurre cuando el contenido de un elemento HTML sobrepasa su contendor?. La propiedad overflow define este comportamiento.
  • Elementos flotantes. Una de las primeras aproximaciones en pos de conseguir layouts multi-columna fue flotar los elementos HTML a izquierda/derecha, logrando el objetivo pero añadiendo un nuevo set de dificultades y efectos secundarios que debes conocer.
  • Despejar elementos flotantes. Cuando usemos float muy probablemente debamos “despejar” el elemento contenedor. Veamos cómo.
  • Pseudoclases más comunes. Con las pseudoclases CSS puedes seleccionar elementos HTML en base a condiciones especiales como posición, relación o estado.
  • Pseudoclase nth. Con nth-* puedes llegar a los elementos que se encuentren en posiciones intermedias o incluso generar patrones de selección basados en rangos y desplazamientos.
  • Pseudoelementos. Los pseudoelementos CSS permiten seleccionar partes específicas de elementos HTML.
  • Selectores de atributo. Otra forma de seleccionar elementos HTML es en base la presencia y/o valores de atributos CSS.
  • Selectores de combinación. Alternativamente, también se pueden seleccionar elementos HTML en base a su relación con otros elementos adyacentes.

Animación y transformación CSS

  • Transiciones. Las transiciones CSS permiten realizar cambios en algunas propiedades de forma gradual (animación).
  • Transition shorthand. Igual que en muchas otras propiedades CSS, existe una propiedad acortada para realizar transiciones.
  • Transformaciones 2D. Con las transformaciones 2D es posible alterar la posición y rotación de los elementos HTML en los ejes X e Y.
  • Animation. CSS permite crear “líneas de tiempo” con una duración y puntos clave donde se especifican propiedades CSS, formando una animación.
  • Animation shorthand. Una vez más CSS pone a nuestra disposición la propiedad acortada para expresar animaciones es una única sentencia.
  • Perspectiva. No existe efecto 3D sin perspectiva. La propiedad perspective define el punto de fuga del que parte toda escena.
  • Transformaciones 3D. Al añadir el eje Z (profundidad) al X e Y, estamos transformando un elemento en 3 dimensiones.
  • Transform origin. CSS permite alterar el origen de las transformaciones 2D y 3D.
  • Transform-style. ¿Qué ocurre cuando un elemento con transformaciones 3D contiene otros elementos con transformaciones 3D?. La respuesta no es lo que esperas.
  • Backface-visibility. En ocasiones es útil ocultar la parte de atrás de los elementos HTML cuando los rotamos y esta queda frente al espectador.
  • Carta 3D. Pequeña demo/ejercicio donde usaremos parte de lo aprendido en este módulo.
  • Cubo 3D. Práctica más elaborada donde poner en juego todo lo aprendido sobre animación y transformación.
  • Perspective origin. Tras ser consciente de todo el contexto 3D y cómo funciona, podrás entender sin problemas cómo cambiar el punto de fuga de una escena.

CSS Moderno

  • Margin collapse. El colapso de márgenes es esencial para acabar de entender cómo funciona el modelo de caja.
  • Calc. Con la función calc puedes realizar operaciones matemáticas y utilizar los resultados como valores de medida.
  • Flexbox. El modelo de caja flexbible (flexbox) es un soplo de aire fresco en la maquetación CSS. Veamos por qué.
  • Flexbox: propiedades parent. Vamos a analizar cuáles son las propiedades más importantes de los elementos contenedores flex.
  • Flexbox: propiedades children. Veamos ahora cómo funciona flexbox a nivel de elementos que viven dentro de un flex container.
  • Flexbox demo. Pongamos en práctica todo lo aprendido sobre Flexbox en un sencillo ejercicio.
  • GRID. Con el modo de display GRID por fin podemos crear rejillas auto-adaptables en CSS de forma nativa.
  • GRID básico. A través de una demostración vamos a aprender cómo funciona GRID y cuáles son sus principales propiedades.
  • GRID intermedio. Ahora que ya sabemos los fundamentos GRID, vamos a dar un paso más allá entrando en conceptos más avanzados.
  • GRID avanzado. Utilizando todo lo aprendido sobre GRID llega el momento de conocer algunas de las características avanzadas.
  • GRID packing mode dense. El valor “dense” del “auto-placement algorithm” de GRID permite que todos los GRID tracks/cells tengan su correspondiente GRID item.
  • Viewport. Con viewport controlamos la escala del escenario “visible” donde podemos mostrar nuestro contenido Web.
  • Alinear cualquier cosa con CSS. Ahora que ya conoces cómo funciona el modelo de bloque y la caja flexible, examinemos diferentes escenarios donde es necesario alinear elementos en ambos ejes.
  • Media queries. Las media queries se han convertido en la herramienta imprescindible para realizar sitios web responsive.
  • Unidades em y rem. A parte de las unidades fijas (como píxeles), CSS dispone de unidades relativas al tamaño de fuente, entre otras.
  • CSS Variables. CSS soporta de forma nativa las llamadas variables, aunque en realidad son propiedades personalizadas.
  • Unidades relativas a viewport. Las unidades vh, vw, vmin y vmax son relativas al tamaño de viewport, característica que abre un nuevo abanico de posibilidades.
  • Responsive Web design. El diseño y desarrollo “responsive” (que responde) es el estándar hoy en día. Veamos cuáles son sus fundamentos y qué significa “mobile first”.
  • Arquitectura CSS (BEM). Aprender un sistema de arquitectura CSS siempre es buena idea. BEM (Block Element Modifier) es uno de los más sencillos y potentes.

Despedida

  • Siguientes pasos. Ha llegado el momento de despedirse y quiero hacerlo dándote las GRACIAS por tu atención y algún consejo sobre cómo seguir aprendiendo y practicando CSS en tu carrera digital.

No te pierdas ninguno de nuestros cursos online
sobre desarrollo Web y App

Si no quieres perderte todo el material que estamos preparando te recomendamos que te suscribas a nuestra newsletter. Así, además de ayudarnos a conocerte –y por lo tanto a ayudarte– mejor, serás el primero en enterarte de los detalles de todo lo que esté desarrollando.

Preguntas frecuentes

  • No tengo claro si este curso es para mí. Lo entiendo ya que hay muchos otros curso de CSS, sin embargo no todos están impartidos por especialistas en el mundo Web y que además están en activo. Además, ten en cuenta que CSS puede ser confuso si el material que eliges no está bien estructurado, lo cual puede añadir caos donde realmente no tendría que haberlo.
  • No tengo claro si debo invertir en un curso más económico. Siempre hay opciones más económicas. Sin embargo estoy seguro que de coincidirás conmigo en que precisamente en la educación es el último lugar donde escatimar.
  • No sé si dispondré del tiempo suficiente. Sólo necesitas 30 minutos al día aproximadamente. Si piensas que que no dispones de ellos es que te estás engañando a ti mismo/a.
  • Me da miedo dejar este curso a la mitad, como muchos otros anteriormente. Dudo mucho que te ocurra en este caso ya que he sintetizado todo lo que debes saber sobre CSS moderno en lecciones breves, directas y que presenten un reto razonable para ti.
  • No me queda por qué este curso es mejor que los demás. No puedo decir que sea mejor que los demás, pero si que puedo asegurarte de que si inviertes en tu futuro profesional y me das la oportunidad, te ayudaré a que domines CSS a tu antojo.