Una lista de recursos web que suelo usar habitualmente y recomiendo.
- ♿ Accesibilidad
- 🥋 Admin Templates
- 👢 Animaciones
- 🛣️ APIs
- 🪡 Arquitectura
- 🔭 Astro
- 🎖️ Auth
- 🃏 Bases de datos
- 🌡️ Blogs y actualidad dev
- 🥋 Bootcamps
- 📸 Capturas de código
- 📺 Codepens Top
- 🎙️ Content Creator
- 💳 CSS
- 🕜 Design
- 💅 Design Systems
- 🧪 Ejercicios programación
- 📧 Emails
- ❓ Entrevistas tech
- 📼 Git
- 📈 Gráficas
- 🛩️ Herramientas globales
- 🔧 Herramientas y recursos Dev
- 👨🎨 HTML
- 🤖 IA
- 🃏 Iconos
- 📺 Ideas Proyectos
- 📃 Illustrations
- ✨ Inspiración para proyectos
- 👾 Juegos Dev
- 🎍 Librerías
- 📙 Libros dev
- 🥷 Línea comandos
- 🗺️ Mapas
- 🔏 Mocks
- 🔮 Newsletters
- 🧮 Notion
- 🏡 Nuxtjs
- 🎃 Performance
- 🎙️ Podcast
- 🖼️ Presentaciones
- ⚛️ React
- 🛤️ Roadmap Frontend
- 🥊 Style Guides
- 🧬 Tailwindcss
- 🥌 Team building
- 🧪 Testing
- 🪜 TypeScript
- 🏑 Utils
- 🌝 Vue.js
Incluye JavaScript, CSS, HTML
- https://a11y-style-guide.com/style-guide/section-forms.html
- https://github.com/ing-bank/lion
- https://www.a11yproject.com/content-style-guide/#links
- https://a11yphant.com/
- https://www.a11yproject.com/checklist/
- https://www.webaccessibility.com/
- Evalúa si tus colores son accesibles → abc useallfive
Incluye JavaScript, Frontend, Vue.js, HTML
Incluye CSS, JavaScript
- AniJS, Declarative handling library for CSS animations
- Free loaders & spinners for your next project
- Animate performs a keyframes or spring animation.
- Favorite scroll animation library
- https://bejamas.io/blog/what-is-view-transitions-api/
Incluye Tools, JavaScript, open source
- https://www.thecocktaildb.com/api.php
- https://imgflip.com/api
- https://apis.guru/
- NASA Open APIs
- API for placeholder images
- Free Fake REST API → JSONPlaceholder
- Weather API
- Listado de APIs gratuitas
- Lista con más de 300 APIs gratuitas
Incluye JavaScript
- https://www.youtube.com/watch?v=pqSZ5en1BQ8&ab_channel=midudev
- https://www.youtube.com/watch?v=NpjecaAgcVQ&ab_channel=Autentia
- https://dev.to/bespoyasov/clean-architecture-on-frontend-4311
Incluye JavaScript, HTML, CSS, Blog
- https://docs.astro.build/es/tutorial/0-introduction/
- https://github.com/markteekman/accessible-astro-starter
- https://starlight.astro.build/es/
Incluye JavaScript
Incluye Tools
Incluye JavaScript, CSS, Vue.js, HTML, Testing, React, Architecture
- Creative front-end resources and inspiration for web professionals
- Fastest growing online community for developers to stay updated on the best developer news
- https://css-tricks.com/
- https://frontendfront.com/
- https://bestofjs.org/
- https://alligator.io/
Incluye Learn
Incluye Tools
- https://ray.so/
- https://carbon.now.sh/
- https://chalk.ist/
- https://snappify.io/
- https://codetoimg.com/
- https://www.terminalgif.com/
- https://kod.so/
- https://app.codeimage.dev/
- https://snippetbuilder.com/
Incluye CSS, JavaScript
- Spicy Slider - HTML + CSS + JS
- For The Love Of Coffee
- Decode text animation (on hover)
- The aurora only with CSS - Using mix-blend-mode
- Bottom bar animado
- Simple Waves solo con CSS y HTML
- Sencillo star rating solo con HTML y CSS
- Destaca tu texto al hacer scroll
Incluye otros, Tools
- Descargar videos de tiktok sin marca de agua
- Música free sin copyright
- Editor de video gratuito
- Descargar videos de Instagram sin marca de agua
- Diseña posts para RRSS gratis → contentdrips . com
- Crea miniaturas fácil y con templates gratis → thumbzstudio . com
- Safe area templates para comprobar que el contenido se verá correcto
- Green screen memes gratuitos
- Escala y mejora imágenes con IA
- Crea increibles mockups gratis → shots . so
- Transforma videos en blog, clips cortos, etc. → videotap
- Editor de imágenes online → photoroom
Incluye CSS, grid layout, css frameworks, loaders, flexbox, svg, HSL, colors, box shadow, gradients
- https://ishadeed.com/article/defensive-css/?utm_source=CSS-Weekly&utm_campaign=Issue-484&utm_medium=RSS
- https://cssloaders.github.io/
- https://dev.to/lupitacode/guia-completa-y-practica-sobre-posicionamiento-css-fundamentos-17c
- https://grid.layoutit.com/
- https://svgsprit.es/
- https://www.uifrommars.com/que-es-hsl/
- CSS Shadow Palette Generator
- Listado de gradientes y ejemplos de webs
- Colección de recursos ui como botones, formularios, etc hechos con CSS y Tailwind → universe
- Herramienta para generar paletas de colores de CSS de manera random
- Flowbite - Librería OpenSource con más de 450 componentes UI, secciones y páginas creadas con Tailwind CSS y diseñadas en Figma.
- https://csslayout.io/
- Colección de bonitos gradientes para poder usar directamente en Tailwind CSS o CSS.
- CSS Tips for Better Web Development
- https://css-tip.com/
- Juego entretenido para practicar selectores de CSS → CSS Diner
- Colección gratuita de SVG skeleton para la carga de elementos UI → UI Skeleton Gallery
- https://github.com/micromata/awesome-css-learning
Incluye UX, UI, Figma, colors
- https://www.uxdatabase.io/free-product-design-course
- https://es.coursera.org/professional-certificates/google-ux-design
- https://www.figma.com/resources/learn-design/
- https://www.refactoringui.com/book
- https://fffuel.co/pppalette/
- https://www.checklist.design/
- https://penpot.app/
- Un juego para saber qué diseño es más correcto → can’t unsee
- Galería de footers → footer design
- Extrae los colores de cualquier imagen → imgcolorpicker
- Recursos de diseño por categorías → toools design
Incluye Design
- https://github.com/glrodasz/cero-components
- https://designsystemsrepo.com/
- https://www.carbondesignsystem.com/
- https://github.com/holaluz/margarita
- https://ui.supabase.io/
- https://vercel.com/design
- https://histoire.dev/
- https://thedesignsystem.guide/resources
- Base de datos con los mejores sistemas de diseño → designsystem surf
Incluye JavaScript, CSS, HTML
- https://t.co/pvCT7FlwqB?amp=1
- https://t.co/7btIKemWDl?amp=1
- https://t.co/32EKRkXtzn?amp=1
- https://t.co/zGtq9ZvDI7?amp=1
- https://retos.dev/
- https://www.frontendmentor.io/challenges
- https://www.codewars.com/
- https://github.com/luanribeiros/daily-code
- https://devchallenges.io/
- https://aprendejavascript.dev/
- https://nodeschool.io/es/
- https://retosdeprogramacion.com/
- https://codember.dev/
- Practica tus habilidades en programación con pruebas técnicas de empresas reales → pruebastecnicas . com
- Aprende la lógica de JavaScript, matemáticas y expresiones resolviendo puzzles en un simple grid visual → mathsuniverse
- Recrea páginas webs de compañías reales y mejora en frontend → frontendpractice
- Retos frontend diarios → iCodeThis
Incluye Tools, email frameworks
- https://mjml.io/
- https://masopego.medium.com/maquetando-e-mail-con-superpoderes-1d235caad29f
- https://www.caniemail.com/
- https://get.foundation/emails.html
- https://maizzle.com/
- https://beefree.io/
- https://github.com/leemunroe/responsive-html-email-template/blob/master/email.html
Incluye JavaScript, CSS, HTML, Design, Accesibilidad, Testing, performance
- Collection of problems and solutions for Google interview.
- https://github.com/h5bp/Front-end-Developer-Interview-Questions
- https://twitter.com/midudev/status/1380521633820069889?s=20
- https://github.com/jwasham/coding-interview-university
- https://h5bp.org/Front-end-Developer-Interview-Questions/translations/spanish/
- https://www.techinterviewhandbook.org/
- https://github.com/DevCaress/guia-entrevistas-de-programacion
Incluye Git
Incluye Tools, JavaScript, HTML, CSS
- https://apexcharts.com/
- https://chartscss.org/
- https://echarts.apache.org/en/index.html
- https://www.tradingview.com/lightweight-charts/
Incluye Tools
- https://getterms.io/
- https://www.bannerbear.com/demos/github-social-preview-generator-tool/
- Crea tu CV super rápido y sencillo → resumake
Incluye Tools, JavaScript, HTML, open source
- Colección de cheatsheets de desarrollo web.
- Apuntes sobre lenguajes y temas de programación
- https://github.com/sindresorhus/awesome
- Herramientas de navegador de código abierto para uso diario
- Galería de componentes de los mejores sistemas de diseño.
- https://frontendchecklist.io/
- Colección de recursos para devs
- Herramientas dev para frontend. Gradientes, extensiones de chrome, iconos…
- https://jsoncrack.com/
- https://musicforprogramming.net/
- Easy README editor with templates
- Colección de snippets de código → 30secondsofcode
- JavaScript Playground - Prueba cualquier cosa que necesites de una manera rápida y fácil
- Comparte tu aplicación web con una url accesible para todo el mundo → tiiny . host
- https://github.com/jbranchaud/til
- Libros gratuitos para Developers por freeCodeCamp
- Awesome-vscode - Lista de extensiones y recursos para Visual Studio Code
- Listado super completo con recursos para developers - free for dev
- Templates gratuitos con HTML, Tailwindcss, Nuxt, React, Astro y más → htmlrev
- Cheat sheet JavaScript → htmlcheatsheet
Incluye HTML, utils
- https://domevents.dev/
- https://caninclude.glitch.me/
- https://metatags.io/
- https://www.typeform.com/es/
- https://htmlreference.io/
Incluye Inteligencia artificial, Tools
Incluye Tools, CSS, images, svg
- https://heroicons.com/
- https://phosphoricons.com/
- https://fonts.google.com/icons?selected=Material+Icons
- https://remixicon.com/
- https://akaricons.com/
- https://icons.getbootstrap.com/
- https://super.so/icons
- https://icones.js.org/
- https://feathericons.com/
- Iconos tech gratis para tus proyectos →
- Iconbuddy - más de 100k iconos open source
- Devicons - Iconos gratis sobre lenguajes y herramientas de programación
- Más de 100k iconos gratis. Edita, guarda en SVG o descarga. → freeicons
Incluye JavaScript
- https://www.freecodecamp.org/news/learn-javascript-form-validation-by-making-a-form/
- https://www.freecodecamp.org/news/javascript-projects-for-beginners/
Incluye illustrations, svg
- https://www.drawkit.com/
- https://undraw.co/illustrations
- https://icons8.com/illustrations
- Ilustraciones gratuitas para las páginas 404.
- Ilustraciones al estilo Peeps solamente con CSS → css-peeps
Incluye Platforms, Design
- Dribble - Discover the top designers and creative professionals
- Siteinspire - Web design inspiration
- Awwwards - winning websites
- Web design inspiration - the best website design inspiration gallery
- Bestwebsite - The most beautiful websites handpicked for you
- Convierte cualquier web a un Figma totalmente editable - html to design
Incluye CSS, JavaScript
- https://warriorjs.com/
- http://www.flexboxdefense.com/
- https://t.co/zBB93Uql6i?amp=1
- https://flukeout.github.io
- https://cssgridgarden.com
- https://flexboxfroggy.com
- https://flexboxzombies.com
- https://t.co/kONitD1rll
- https://www.guess-css.app/
- https://t.co/G0a77jhNzu
- https://css-speedrun.netlify.app/
- Juega a averiguar las clases de tailwindcss → css2wind
Incluye JavaScript, Frontend, Tools
- Animación de confeti en el navegador →
- Biblioteca en Vanilla JS que permite crear tours de usuarios (onboardings).
- https://github.com/williamtroup/Calendar.js
- Es un bonito Syntax Highlighter - Shiki
- Pequeño paquete de calendario - cally
Incluye JavaScript, Design
- https://exploringjs.com/impatient-js/
- https://eloquentjs-es.thedojo.mx/
- https://ebooks.humanwhocodes.com/promises
- https://ebooks.humanwhocodes.com/promises
- https://atomicdesign.bradfrost.com/
Incluye commands
Incluye Tools, JavaScript
- https://developers.google.com/maps/documentation/maps-static/overview
- https://www.mapbox.com/maps/streets
- https://leafletjs.com/
- https://chartkick.com/mapkick-js
Incluye JavaScript, Testing, Tools
Incluye Others
- https://weekly-vue.news/
- https://www.noticias.dev/
- https://dev.to/newsletter
- https://javascriptweekly.com/
- https://www.cuarzo.dev/
- https://www.dailycodingproblem.com/
Incluye Organización
Incluye Vue.js, NuxtJS
Incluye JavaScript, images
Incluye JavaScript, Frontend, Programación, Accesibilidad, Testing
- República Web | Podcast en español para diseñadores y desarrolladores web
- Your weekly celebration of JavaScript and the web.
- https://thebigbranchtheorypodcast.github.io/
- https://podcast.carlosble.com/
- https://www.ivoox.com/podcast-nosolotech-podcast_sq_f1851397_1.html
- https://www.ladybug.dev/
- https://www.danielprimo.io/podcast
- https://developertea.com/
- https://trabajoenremoto.com/podcast
- https://open.spotify.com/show/1Et8hZk1DwKw6PtBFGpwSD?si=ed6f278a0f064f3e
Incluye Tools
Incluye React
- https://egghead.io/courses/the-beginner-s-guide-to-react
- https://github.com/airbnb/javascript/tree/master/react
- http://airbnb.io/javascript/react/
- Open source Admin Template for React.
- React.js Wiki - Preguntas típicas sobre React.js con respuesta y solución
- https://www.tremor.so/
- Toast component para React
Incluye CSS, HTML, Testing, React, JavaScript
- https://www.freecodecamp.org/
- https://roadmap.sh/
- https://web.dev/learn/css/
- https://es.javascript.info/
- https://andreasbm.github.io/web-skills/
- https://github.com/thedaviddias/Front-End-Checklist
- https://component-party.dev/#reactivity
- https://github.com/iLoveCodingOrg/javascript-cheatsheet
- 100+ Most Useful Github Repositories Every Programmer Needs
- Choose a modern JavaScript UI Framework
- Curso de JavaScript para principiantes (aprendiendo.dev)
- Certificación “Programming with JavaScript” por Meta.
- Curso CSS gratis - Magic of CSS - Adam Schwartz →
- Curso JavaScript para principiantes en Codecademy
- Explicación interactiva sobre los patrones de diseño → refactoring.guru
- Aprende React, Redux, Nodejs, MongoDB, GraphQL y Typescript de una sola vez. Curso de desarrollo web → fullstackopen
- Colección de ideas de proyectos para mejorar como frontend → dom-projects
- Manual para ser Web Developer → thevalleyofcode
Incluye JavaScript, CSS, HTML, Vue.js, Testing
- https://google.github.io/styleguide/jsguide.html
- https://github.com/airbnb/javascript
- https://cssguidelin.es/
- https://github.com/airbnb/css
- https://docs.gitlab.com/ee/development/fe_guide/style/scss.html
- https://google.github.io/styleguide/htmlcssguide.html
- https://docs.gitlab.com/ee/development/fe_guide/style/html.html
- https://v3.vuejs.org/style-guide/
- https://docs.gitlab.com/ee/development/fe_guide/style/vue.html
- https://docs.gitlab.com/ee/development/testing_guide/
Incluye CSS, css frameworks
- https://github.com/rogden/tailwind-config-viewer
- https://headlessui.dev/
- https://daisyui.com/
- HyperUI - Free Open Source Tailwind CSS Components
- https://preline.co/index.html
- Cheatsheet Tailwind CSS con todas las utilidades fácilmente accesibles
- https://flowbite.com/
- https://gradienty.codes/
- Genera paletas de colores con Tailwind css → uicolors . app
- Componentes customizables para Vue y React → Lunar UI
- Cheatsheet con todos los colores por defecto de Tailwindcss → tailscan
Incluye Tools, comunicación
Incluye JavaScript
- Playground de testing para Testing Library
- Guía completa para JavaScript y Node.js sobre buenas prácticas en testing
- https://docs.gitlab.com/ee/development/testing_guide/end_to_end/
- Generate unit tests using AI
- Libro con conceptos básicos de testing en frontend → frontend-testing
- Curso introducción al testing por Google → web dev
Incluye TypeScript
Incluye JavaScript, regex, images
Incluye Vue2, Vue3, Vuex
- Combing ESLint and Prettier make large scale Vue 3 apps clean and error free
- Collection of essential Vue Composition Utilities
- Master UI in Vue.js with this advanced guide to Storybook, a tool for isolating and testing your components for beautiful apps.
- https://modules.nuxtjs.org/
- https://github.com/jdonsan/estudiando-vue-js
- https://dev.to/marinamosti/hands-on-vuejs-for-beginners-part-1-2j2g
- https://formkit.com/
- https://learnvue.co/
- Elige la mejor librería UI para tus proyectos con Vue 3 y Nuxt 3.
- Librería de Vue para visualizar datos. → vue data ui
- Componentes gratuitos y customizables → shadcn-vue
- Introducción a Vue Patterns → patterns dev