Crea una landing page con CSS y Heliblocks con Jesús Olazagoitia

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

1. (00:00:54) Consejos de diseño utilizando Adobe XD.
2. (00:09:26) Apilando sombras.
3. (00:12:32) Trabajando con tamaños de texto con unidad pixel.
4. (00:18:06) Usar la función clamp().
5. (00:21:26) Trabajando con CSS Grid layout.
6. (00:30:27) Posicionamiento de capas con grid-area.
7. (00:33:00) Degradados con linear-gradient().
8. (00:35:31) Compatibilidad de navegadores y @supports (width: fit-content).
9. (00:38:41) Organización de elementos en el grid grid-template-columns.
10. (00:48:20) Uso de variables en CSS.
11. (00:52:44) ¿Qué es inline-flex?
12. (00:56:16) Diseñando patrón de puntos.
13. (01:01:37) Trabajando con line-height: interlineado del h1.
14. (01:03:40) Pesos visuales.
15. (01:09:54) Trabajando con SVG.
16. (01:13:53) Retazos de animaciones.
17. (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.