Comando Coding 03: Maquetando una tarjeta con CSS

Este video dura 01:31:40. Solo puedes acceder al contenido completo si te suscribes a la zona premium.

Maquetar una sencilla card con una fotografía, un título y una descripción es muy sencillo.

Es verdad, puede ser demasiado sencillo.

Pero es un punto ideal para empezar a trabajar con las hojas de estilo CSS.

Un concepto básico del desarrollo web que muchas veces se va olvidando por falta de práctica. Y porque cualquier otro sistema parece hacerlo más fácil que nosotros.

No es este el caso.

En este directo vemos todas estas cosas:

  • Estilos en línea (y por qué no es bueno usarlos)
  • Importar una fuente
  • Shorthands en las reglas de estilo
  • Los estilos por defecto del navegador
  • Display flex (lo básico)
  • Clases, IDs y selectores
  • Selectores hijo y descendentes
  • Especificidad
  • BEM y buenas prácticas (Episodio de WRP)

Puedes ver el código final aquí.

Suscríbete o identíficate para ver el vídeo al completo tal cuál se emitió en directo y acceder al código de la sesión.

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 38 Conoce las novedades de Vue 3 40 LivePremium: Docker 42 Comando Coding 04: POO con PHP 44 Comando Coding 05: API Rest con PHP (I) 45 Comando Coding 05: API Rest con PHP (II)

No hay comentarios aún, ¿te animas?

Para escribir comentarios puedes identificarte o suscribirte.