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

Continue the discussion

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Published

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 »

Rate this:

Event

WordCamp Spain 2020 61

Speakers

Yan Arlex Vallejo 1

Language

Spanish/Español 983

Download
MP4: Low, Med, High
OGG: Low
Subtitles
Subtitle this video →
Producer
%d bloggers like this: