Newsletter para devsEntra
Masterclass

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

Nuestro primer invitado a un directo LiveGuest nos deleita con una clase magistral de CSS.

Jesús Olazagoitia
Mira el trailer

Duración total: 01:32:17

Código descargable

Acceso 100% online

Descripción de la masterclass

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.

Podrás ver a:

Imagen de Jesús Olazagoitia

Jesús Olazagoitia

Frontend developer

Explora los capítulos

1. Presentación [32:17]

Presentación

[00:54]

Consejos de diseño utilizando Adobe XD

[08:32]

Apilando sombras

[03:06]

Trabajando con tamaños de texto con unidad pixel

[05:34]

font-size: clamp()

[03:20]

Trabajando con CSS Grid layout

[09:01]

grid-area para posicionamiento de capas

[02:33]

linear-gradient() : degradados.

[02:31]

@supports (width: fit-content): abordando compatibilidad con navegadores

[03:10]

grid-template-columns: organización de elementos en el grid

[09:39]

Uso de variables en CSS

[04:24]

display: inline-flex

[03:32]

Diseñando patrón de puntos

[05:21]

Trabajando con line-height: interlineado del h1

[02:03]

Pesos visuales

[06:14]

Trabajando con SVG.

[03:59]

transition / transform: trabajando con animaciones

[07:49]

Heliblocks: trasladando nuestro diseño a WordPress

[10:35]

Descubre todo lo que puedes conseguir sucribiéndote a Web Reactiva

Contenido nuevo todas las semanas

Una comunidad de developers colegas en telegram

Desafíos y retos de programación para que mejores tus habilidades

400 horas de contenido en audio y vídeo

Entrevistas y masterclass en directo con los/las mejores profesionales

Precio

24€Matrículaplus15€Al mes

  • Contenido disponible 24/7
  • Audios y videos
  • Retos y desafíos
  • Todo el código descargable
  • Comunidad de developers
  • Acceso premium completo