Google armó un curso increíble para aprender maquetado web utilizando CSS. Este curso es ideal para Diseñadores o simplemente personas que quieren ganar dinero haciendo páginas web.
Aprenderás los fundamentos de CSS, como el modelo de caja, cascada y especificidad, flexbox, cuadrícula y z-index. Y, junto con estos fundamentos, aprenderás acerca de las funciones, tipos de color, gradientes, propiedades lógicas y la herencia para hacer que un desarrollador front-end bien redondeado, listo para asumir cualquier interfaz de usuario.
Cada módulo está repleto de demostraciones interactivas y autoevaluaciones para que pongas a prueba tus conocimientos. Además de aprender a través de la lectura y las demostraciones, hay un episodio de podcast que acompaña a cada tema como otra forma de aprender y seguir ampliando sus conocimientos.
Este curso ha sido creado tanto para desarrolladores de CSS principiantes como avanzados. Usted puede ir a través de la serie de principio a fin para obtener una comprensión general de CSS de arriba a abajo, o se puede utilizar como referencia para temas específicos de estilo. Para los nuevos en el desarrollo web en general, echa un vistazo a la introducción al curso de HTML de MDN para aprender todo acerca de cómo escribir marcado y vincular sus hojas de estilo.
Esto es lo que aprenderás:
Modelo de caja
Todo lo que se muestra en CSS es una caja. Entender cómo funciona el Modelo de Caja CSS es, por lo tanto, una base fundamental de CSS.
Selectores
Para aplicar CSS a un elemento necesitas seleccionarlo. CSS te proporciona un número de diferentes maneras de hacer esto, y puedes explorarlas en este módulo.
La cascada
A veces pueden aplicarse a un elemento dos o más reglas CSS que compiten entre sí. En este módulo descubrirás cómo el navegador elige cuál utilizar y cómo controlar esta selección.
Especificidad
Este módulo profundiza en la especificidad, una parte clave de la cascada.
Herencia
Algunas propiedades CSS se heredan si no se especifica un valor para ellas. Descubre cómo funciona esto y cómo utilizarlo en tu beneficio en este módulo.
Color
Existen varias formas de especificar el color en CSS. En este módulo echaremos un vistazo a los valores de color más utilizados.
Unidades de tamaño
En este módulo descubrirás cómo dimensionar elementos utilizando CSS, trabajando con el medio flexible de la web.
Maquetación
Una visión general de los distintos métodos de diseño que tienes para elegir cuando construyes un componente o el diseño de una página.
Flexbox
Flexbox es un mecanismo de diseño diseñado para disponer grupos de elementos en una dimensión. Aprenda a utilizarlo en este módulo.
Cuadrícula
CSS Grid Layout proporciona un sistema de maquetación bidimensional, controlando la maquetación en filas y columnas. En este módulo descubre todo lo que la rejilla tiene que ofrecer.
Propiedades Lógicas
Las propiedades y valores lógicos, relativos al flujo, están vinculados al flujo del texto, más que a la forma física de la pantalla. Aprende a aprovechar este nuevo enfoque de CSS.
Espaciado
Descubre cómo seleccionar el mejor método para espaciar elementos, teniendo en cuenta el método de maquetación que estés utilizando y el componente que necesites construir.
Pseudoelementos
Un pseudo-elemento es como añadir o apuntar un elemento extra sin tener que añadir más HTML. Tienen una variedad de funciones y puedes aprender sobre ellos en este módulo.
Pseudo-clases
Las pseudo-clases te permiten aplicar CSS basado en cambios de estado. Esto significa que su diseño puede reaccionar a la entrada del usuario, como una dirección de correo electrónico no válida.
Bordes
Un borde proporciona un marco para tus cajas. En este módulo descubrirás cómo cambiar el tamaño, estilo y color de los bordes utilizando CSS.
Sombras
Hay varias formas de añadir sombras a texto y elementos en CSS. En este módulo aprenderás a utilizar cada opción y las tareas para las que fueron diseñadas.
Enfoque
Comprende la importancia del enfoque en tus aplicaciones web. Descubrirás cómo gestionar el enfoque y cómo asegurarte de que el recorrido por tu página funciona tanto para las personas que utilizan el ratón como para las que utilizan el teclado para navegar.
Z-index y contextos de apilamiento
En este módulo descubrirás cómo controlar el orden en el que las cosas se superponen, mediante el uso de z-index y el contexto de apilamiento.
Funciones
CSS tiene una serie de funciones incorporadas. En este módulo descubrirás algunas de las funciones clave y cómo utilizarlas.
Degradados
En este módulo aprenderás a utilizar los distintos tipos de degradados disponibles en CSS. Los degradados pueden utilizarse para crear toda una serie de efectos útiles, sin necesidad de crear una imagen utilizando una aplicación gráfica.
Animaciones
La animación es una forma estupenda de resaltar elementos interactivos y añadir interés y diversión a tus diseños. En este módulo descubrirás cómo añadir y controlar efectos de animación con CSS.
Filtros
Los filtros en CSS te permiten aplicar efectos que sólo son posibles en una aplicación gráfica. En este módulo podrás descubrir todo lo que hay disponible.
Modos de mezcla
Crea efectos de composición mezclando dos o más capas y aprende a aislar una imagen con un fondo blanco en este módulo sobre modos de fusión.
Listas
Una lista, estructuralmente, se compone de un elemento contenedor de lista lleno de elementos de lista. En este módulo, aprenderás a aplicar estilo a todas las partes de una lista.
y mucho más.
