Speakers: Yan Arlex Vallejo

  • Yan Arlex Vallejo: Buenas Practicas CSS

    WordPress TuluáSpeaker: Yan Arlex Vallejo

    June 1, 2021 — La idea de este meetup es empezar a conocer un poco más lo que nos ofrece CSS, una pieza clave a la hora de realizar nuestros sitios web, empezaremos por una corta introducción, mencionaremos tres conceptos que si o si debemos conocer como son la herencia, cascada, especificidad y finalmente hablaremos de varias buenas practicas que nos llevara a un nivel superior a la hora de escribir código CSS.

    Presentation Slides »

  • Yan Arlex Vallejo: Haz CSS decían, será fácil decían

    WordCamp Spain 2020Speaker: Yan Arlex Vallejo

    May 9, 2020 — Introducción a CSS donde se verán desde conceptos fundamentales y buenas prácticas hasta cosas hermosas de CSS.

    La charla estará dividida en cuatro partes:

    1. Introducción
    Algo rápido para entrar en calor:

    Regla CSS
    Bloque declarativo
    Selector (Clases, Id, Tag html)
    Selectores Avanzados
    Selector de hijos
    Selector adyacente
    Selector de hermanos
    Selector de atributos
    . Selector de atributos iguales
    . El atributo contiene un selector
    . El atributo comienza con el selector
    . El atributo termina con el selector
    . Selector espaciado de atributos
    . Selector de atributos con guiones
    Propiedad
    Valor
    Dejare una lista de términos que seria interesante conocer (Links para que visiten)
    Pseudo-clases (:link, :visited)
    . acción del usuario (:hover, :active, :focus )
    . Estados de Interfaz de usuario (:enabled, :disabled, :checked, :indeterminate)
    . Estructural y posición (:first-child, :last-child, & :only-child, :first-of-type, :last-of-type, & :only-of-type, :nth-child(n) & :nth-last-child(n), :nth-of-type(n) & :nth-last-of-type(n))
    . Target (section:target {…})
    . Empty (div:empty {…})
    . Negation (div:not(.awesome) {…})
    Pseudo-elementos
    . Textual (:first-letter, :first-line)
    . Generated Content (:after, :before)
    . Fragmento (::selection)
    2. Conceptos fundamentales
    Conoceremos algunos conceptos fundamentales como:

    Herencia
    Especificidad
    Cascada
    3. Buenas practicas
    Estilos en linea (Prohibido)
    ID (Prohibido)
    @import (Prohibido)
    !important (Prohibido)
    Usar Floats para construir un Layout (Prohibido)
    Usar la Convención de nomenclatura apropiada (Algo como Bem es una buena opción)
    Shorthand CSS
    Combinar Elementos CSS
    4. Cosas hermosas de CSS
    Algunas cosas por conocer de CSS (links para que visiten):

    FlexBox
    Gutters para Flexbox
    CSS Grid – SubGrid
    Multi-column Layout
    Modos de escritura
    Animaciones
    object-fit
    clip-path
    blend-mode
    Masking
    shapes
    Fuentes Variables
    Scroll Snapping
    Houdini
    CSS Art

    Presentation Slides »