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

Suscríbete o identíficate para ver el vídeo al completo.

01 ¿Cómo planificar un nuevo proyecto? 02 Cocina tu código con ramas de git 03 Aprende testing unitario (TDD) con una kata de programación 05 Cuéntame un cuento y te monto una webapp 06 El caso real de una aplicación web: SAT 07 Crear las bases del backend #LiveCoding 1 08 Persistencia de datos con SQLite #LiveCoding 2 09 Primeros pasos de frontend con VueJS #LiveCoding 3 10 Reconvertir HTML+JS a una app de verdad VueJS #LiveCoding 4 12 Envío de formulario desde el frontend al backend desacoplado #LiveCoding 5 13 Refactorizando el backend con buenas prácticas #LiveCoding 6 15 Ajustes de front y despliegue en la nube #LiveCoding 7 17 Empezando con Git 18 Prototipando una aplicación web desde cero con Pencil 19 Primeros pasos con NuxtJS 20 Carga de datos en Nuxt (markdown, JSON) 21 Empezando con Tailwind CSS 22 Juntando las piezas con Nuxt, Tailwind y JSON 23 Así empezamos con Github Actions 25 Comando Coding 01: Calculadora de presupuestos con JavaScript 26 Trucos y puesta en producción del directorio de profesionales con NuxtJS 27 Comando Coding 02: Formulario Atrapahumanos con JavaScript 28 GraphQL para novatos (en WordPress) 30 Introducción a Laravel: Webapp de control de gastos 31 Comando Coding 03: Maquetando una tarjeta con CSS 32 Primeros pasos con Frontity 34 Jamstack y pruebas de concepto 36 Haz magia con los datos en frontend con Vuex 37 Crea una landing page con CSS y Heliblocks con Jesús Olazagoitia 38 Conoce las novedades de Vue 3 40 LivePremium: Docker
Para escribir comentarios puedes identificarte o suscribirte.