Gradientes

https://www.joshwcomeau.com/css/make-beautiful-gradients/

https://www.smashingmagazine.com/2022/01/css-radial-conic-gradient/

https://uigradients.com/#MistyMeadow

https://bennettfeely.com/gradients/

https://cssgradient.io/gradient-backgrounds/

https://webgradients.com/

Usar gradientes para hacer gráficos de tarta:

https://www.sitepoint.com/create-css-conic-gradients-pie-charts/

Animados (muchos usan JS)

https://bashooka.com/coding/30-css-animated-gradient-examples/

CSS Grid

Un paso más allá del flexbox es utilizar el CSS Grid, que nos permite utilizar una cuadrícula en la página, y que los elementos se posicionen en las coordenadas que queramos:

https://www.w3schools.com/css/css_grid.asp

Aquí tenemos una guía completa de cómo usar CSS grid:

https://css-tricks.com/snippets/css/complete-guide-grid/

Otra guía, en castellano y bien explicada:

https://www.ionos.es/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/

Y otra más también muy bien explicada:

https://medium.com/@alexcamachogz/dominando-css-grid-ff916434f85a

Buenas prácticas:

https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/

Un juego para practicar grid:

https://cssgridgarden.com/#es

Usar flexbox o grid?

https://blog.logrocket.com/flexbox-vs-css-grid/

https://programacion.net/articulo/css_grid_vs_flexbox_cual_es_mas_practico_1771

Media queries para dispositivos

En w3school:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Ejemplos:

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Tutorial bastante completo:

https://www.adictosaltrabajo.com/2012/10/11/css3-media-queries/

En css trick:

https://css-tricks.com/a-complete-guide-to-css-media-queries/

Lista de resoluciones para todos los dispositivos:

Media Queries for Standard Devices

Las más comunes:

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Un artículo muy bueno sobre uso de media query.

https://www.toptal.com/designers/responsive/introduction-to-responsive-web-design-pseudo-elements-media-queries

 

Qué es el diseño responsive:

https://i.workana.com/glosario/que-es-el-diseno-responsive/

Ejemplos responsive:

https://web.dev/responsive-web-design-basics/

9 principios del diseño responsive:

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

Menú hamburguesa solo CSS:

https://codepen.io/alvarotrigo/pen/MWEJEWG

Ejercicio Layout

Crear un layout con flex (y todos los conocimientos adquiridos) parecido a este:

No tiene por qué ser igual, mucho menos el mismo tema, pero sí que tenga esas secciones, divisiones, etcétera. No tiene que ser responsive porque todavía no hemos hecho media queries.

Flexbox

Hoy hemos visto una manera más eficiente de maquetar, utilizando la propiedad Flexbox. En w3schools la explican bien:

https://www.w3schools.com/css/css3_flexbox.asp

http://www.emenia.es/flexbox-la-caja-flexible-css3/

Podemos ver las propiedades de una manera muy visual aquí:

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

Aquí lo podemos ver animado:

https://jstutorial.medium.com/flexbox-the-animated-tutorial-8075cbe4c1b2
Flexbox el tutorial animado

Y aquí otra guía completa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Templates con flexbox:

https://www.quackit.com/html/templates/css_flexbox_templates.cfm

Cómo calcular como crecen y se encogen los elementos (no es tan sencillo como parece):

https://ed.team/blog/guia-definitiva-de-flexbox-2-flex-basis-flex-frow-flex-shrink

Ejemplos prácticos de cómo hacer cosas con flexbox:

https://www.sketchingwithcss.com/samplechapter/cheatsheet.html

18 recursos interesantes:

https://bashooka.com/coding/css3-flexbox-resources/

https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/

Un juego para aprender flexbox:

https://codepip.com/games/flexbox-froggy/