Volver a recursos

🔗 Enlaces de CSS

Enlaces recomendados para ampliar el aprendizaje del curso CSS.

MDN Learn CSS
developer.mozilla.org
web.dev Learn CSS
web.dev
lenguajecss.com (Manz): Keyframes
lenguajecss.com
W3C - CSS Snapshot
w3.org
VS Code Docs
code.visualstudio.com
CodePen Docs
blog.codepen.io
CodePen
codepen.io
CSS Gradient
cssgradient.io
W3Schools: Menú adaptable
w3schools.com
normalize.css
necolas.github.io
A Modern CSS Reset (Andy Bell)
piccalil.li
Josh Comeau - Interactive Guide to Flexbox
joshwcomeau.com
¿Que es el Box Model?🤔 - Blog de Código Facilito
codigofacilito.com
CSS-Tricks: A Complete Guide to CSS Grid
css-tricks.com
Lección HTML: listas y semántica
/curso/html/leccion/html-semantica-basico
Lección HTML: tablas
/curso/html/leccion/html-tablas-basico
Herramientas: oklch.com
oklch.com
Evil Martians - OKLCH in CSS
evilmartians.com
Herramientas: Coolors (generador de paletas)
coolors.co
V-Fonts - Repositorio de fuentes variables
v-fonts.com
Chrome for Developers: Introducing the CSS anchor positioning API
developer.chrome.com
GetCSSScan - ejemplos de sombras
getcssscan.com
Can I Use
caniuse.com
▶ Vídeo: Aprende a usar la metodología BEM (Dorian Desings)
youtube.com
SitePoint - How to Center with CSS Grid
sitepoint.com
Practica jugando: Flexbox Froggy
flexboxfroggy.com
Practica jugando: Grid Garden
cssgridgarden.com
CSS Grid Generator
cssgrid-generator.netlify.app
Smashing Magazine - Designing Card Components
smashingmagazine.com
Tailwind CSS - Card Components
tailwindcss.com
Bootstrap - Cards Documentation
getbootstrap.com
Animista
animista.net
Cubic-bezier
cubic-bezier.com
Scroll-driven Animations Debugger
scroll-driven-animations.style
Astro - View Transitions
docs.astro.build
Resilient Web Design - Jeremy Keith
resilientwebdesign.com
Get BEM
getbem.com
CUBE CSS
cube.fyi
PostCSS
postcss.org
postcss-preset-env
github.com
Sass Guide
sass-lang.com
En esta web: Sintaxis CSS
/curso/css/leccion/css-sintaxis-basico
En esta web: La cascada
/curso/css/leccion/css-cascada-basico
En esta web: Especificidad
/curso/css/leccion/css-especificidad-basico
En esta web: Modelo de caja
/curso/css/leccion/css-modelo-caja-basico
En esta web: Unidades
/curso/css/leccion/css-unidades-basico
En esta web: Color
/curso/css/leccion/css-color-basico
Practica jugando: CSS Diner
flukeout.github.io
Herramientas: Comprobador de contraste de WebAIM
webaim.org
CSSWG Drafts
drafts.csswg.org
En esta web: OKLCH
/curso/css/leccion/css-oklch-pro
En esta web: Degradados
/curso/css/leccion/css-degradados-pro
En esta web: Modo oscuro
/curso/css/leccion/css-modo-oscuro-pro
En esta web: Generador de paletas y degradados
/curso/css/leccion/css-generador-paletas-degradados-pro
En esta web: Fondos
/curso/css/leccion/css-backgrounds-pro
En esta web: Sombras
/curso/css/leccion/css-sombras-medio
En esta web: Filtros
/curso/css/leccion/css-filters-pro
En esta web: Generador de sombras
/curso/css/leccion/css-generador-sombras-pro
En esta web: Flexbox
/curso/css/leccion/css-flexbox-pro
En esta web: CSS Grid
/curso/css/leccion/css-grid-pro
En esta web: relative y absolute
/curso/css/leccion/css-position-relative-absolute-pro
En esta web: fixed y sticky
/curso/css/leccion/css-position-fixed-sticky-pro
lenguajehtml.com (Manz): La etiqueta <picture>
lenguajehtml.com
En esta web: Media queries y diseño adaptable
/curso/css/leccion/css-media-queries-responsive-medio
Herramienta: Squoosh (optimizar imágenes)
squoosh.app
En esta web: Selectores avanzados
/curso/css/leccion/css-selectores-avanzados-avanzado
En esta web: El selector :has()
/curso/css/leccion/css-has-selector-avanzado
En esta web: Pseudoelementos
/curso/css/leccion/css-pseudoelementos-pro
En esta web: Variables CSS
/curso/css/leccion/css-variables-medio
En esta web: Tipografía
/curso/css/leccion/css-tipografia-medio
En esta web: Animaciones
/curso/css/leccion/css-animaciones
Herramientas: google-webfonts-helper (descargar fuentes de Google)
gwfh.mranftl.com
Herramientas: Type Scale
typescale.com
En esta web: Componente tarjeta
/curso/css/leccion/css-componente-card-pro
En esta web: Variantes de tarjetas
/curso/css/leccion/css-componente-cards-variantes-pro
En esta web: Cabecera
/curso/css/leccion/css-componente-header-pro
En esta web: Menú adaptable
/curso/css/leccion/css-navbar-responsive-pro
En esta web: Pie
/curso/css/leccion/css-componente-footer-pro
En esta web: Galería
/curso/css/leccion/css-componente-galeria-pro
En esta web: Arquitectura y metodologías
/curso/css/leccion/css-arquitectura-metodologias-avanzado
Curso de JavaScript
/curso/javascript
Lección CSS: display y position
/curso/css/leccion/css-display-position-basico
Lección CSS: responsive moderno
/curso/css/leccion/css-responsive-pro
Lección CSS: tablas
/curso/css/leccion/css-tablas-basico
Lección CSS: listas
/curso/css/leccion/css-listas-basico
Recurso

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com