Nuestro primer invitado al directo nos deleita con una clase magistral de CSS que puedes ver en el vídeo de más arriba.
Jesús Olazagoitia es diseñador y frontend developer.
Nos acompañó ya en el podcast Web Reactiva y también en Web Reactiva Premium, justo al comenzar su andadura con Heliblocks.
En esta sesión diseña una landing page y construye los elementos necesarios para maquetarla en HTML y CSS.
Sin frameworks.
Sin historias.
La potencia brutal de CSS directamente desde el navegador.
Cuando termina ese trabajo es muy pocos clics genera un nuevo bloque en Heliblocks que luego puede insertar en WordPress a través del editor de bloques.
Fácil, sencillo y potente.
Guía de tiempos
- (00:00:54) Consejos de diseño utilizando Adobe XD.
- (00:09:26) Apilando sombras.
- (00:12:32) Trabajando con tamaños de texto con unidad pixel.
- (00:18:06) Usar la función
clamp()
. - (00:21:26) Trabajando con CSS Grid layout.
- (00:30:27) Posicionamiento de capas con
grid-area
. - (00:33:00) Degradados con
linear-gradient()
. - (00:35:31) Compatibilidad de navegadores y
@supports (width: fit-content)
. - (00:38:41) Organización de elementos en el grid
grid-template-columns
. - (00:48:20) Uso de variables en CSS.
- (00:52:44) ¿Qué es inline-flex?
- (00:56:16) Diseñando patrón de puntos.
- (01:01:37) Trabajando con line-height: interlineado del h1.
- (01:03:40) Pesos visuales.
- (01:09:54) Trabajando con SVG.
- (01:13:53) Retazos de animaciones.
- (01:21:42) Heliblocks: trasladando nuestro diseño a WordPress.
Enlaces de la sesión
- Código de la sesión
- Bloque en Heliblocks
- Heliblocks
- Plugin de Heliblocks para WordPress
- Shadows Builder
Suscríbete o identíficate para ver el vídeo al completo.
Para escribir comentarios puedes identificarte o suscribirte.