• Ir a navegación principal
  • Ir al contenido principal
SiliCodeValley

SiliCodeValley

Cursos online de diseño y desarrollo WordPress

  • Cursos
  • Tutoriales
  • Directos
  • Cuenta
    • Tu membresía
  • Acceder
  • Empieza gratis

CSS Grid

Como no podría ser de otra manera una vez visto Flexbox es momento de aprender a utilizar CSS Grid.

CSS Grid nos permite trabajar de una forma muy distinta a la que estamos acostumbrados y además te ayudará a prescindir de frameworks frontend como Bootstrap de una vez por todas.

Si bien éstos han sido de gran ayuda durante mucho tiempo, es momento de dejar paso a módulos CSS como Flexbox y CSS Grid que hacen su trabajo de una forma más eficiente y sobre todo separando lo que es el diseño (CSS) de la estructura y semántica (HTML).

A lo largo de este curso aprenderás a utilizar todas propiedades de CSS Grid gracias a ejemplos sencillos y una vez hayas asimilado su uso pasaremos a ejemplos más elaborados que podrás aplicar en proyectos reales.

Además, veremos que Flexbox y CSS Grid no son enemigos y pueden trabajar juntos en harmonía y aportar lo mejor de cada uno.

También veremos cómo CSS Grid nos permite prescindir en ciertas ocasiones de las media queries y por último añadir que vamos a estar utilizando un navegador muy molón que posee herramientas específicas para el uso de CSS Grid.

Requisitos del curso

  • Es recomendable haber realizado antes el curso de Flexbox ya que en algún momento lo compararé con CSS Grid.
  • Aunque no es requisito obligatorio te recomiendo que realices el curso de Gulp, ya que vamos a estar utilizándolo para añadir los vendor prefixes a nuestro código.

Módulos

Propiedades de CSS Grid

Lecciones

  • Entorno de desarrollo
  • Cómo crear una cuadrícula
  • Auto VS Fraction
  • Filas explícitas e implícitas
  • Mover y cambiar de tamaño los ítems grid
  • Nombrando líneas
  • Definiendo áreas
  • Lista contenido responsive en formato rejilla sin necesidad de media queries
  • Galería de imágenes
  • Alineación de elementos

Caso práctico: Blog de Viajes

Lecciones

  • Preparamos el entorno de desarrollo
  • Dinamizamos la Home
  • Definimos los estilos de la Home
  • Redefinimos los layouts de Genesis Sample con CSS Grid
  • Ancho amplio y completo con CSS Grid
  • Finalizamos nuestro tema

Introducción a Gulp
Desarrollo de plugins de WordPress

  • Blog
  • Acerca
  • Contacto
  • Privacidad
  • Términos
  • Aviso Legal
  • Cookies

Utilizamos cookies propias y analíticas para darte la mejor experiencia en nuestra web.

Puedes informarte más sobre qué cookies estamos utilizando o desactivarlas en los AJUSTES.

Resumen de privacidad
SiliCodeValley

Esta web utiliza cookies propias y analíticas para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Cookies analíticas

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Mostrar detalles
Nombre Proveedor Propósito Duración
_ga Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 2 años
_gat Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para limitar el porcentaje de solicitudes. 1 minuto
_gid Google Analytics Cookie de terceros persistente con fines analíticos. Se usa para distinguir a los usuarios. 24 horas
Política de cookies

Más información sobre nuestra política de cookies