Interactive LearningBeginner
Flexbox Froggy
Interactive game to learn CSS Flexbox by positioning frogs
flexboxfroggy.comDev Tools
Resources for Devs
A curated collection of tools, courses, platforms and references I recommend for anyone getting started in development. All free or with a free tier.
80 resources found
Interactive LearningBeginner
CSS Grid Garden
Game to learn CSS Grid by tending a virtual garden
cssgridgarden.comInteractive LearningBeginner
Frontend Mentor
Frontend challenges with professional designs for practice
www.frontendmentor.ioInteractive LearningBeginner
DevChallenge
Development challenges in Brazilian Portuguese
devchallenge.com.brInteractive LearningBeginner
Exercism JavaScript
Hands-on JavaScript exercises with community mentorship
exercism.orgInteractive LearningBeginner
Frontend Practice
Recreate famous real websites and learn by doing
www.frontendpractice.comInteractive LearningBeginner
App Ideas Collection
Project ideas list organized by difficulty level
github.comInteractive LearningBeginner
1-Line Layouts
10 modern CSS layouts in just one line of code each
1linelayouts.glitch.meInteractive LearningBeginner
CSS Diner
Interactive game to learn CSS selectors by solving puzzles
flukeout.github.ioInteractive LearningBeginner
CodeCombat
Learn Python and JavaScript by playing an adventure RPG
codecombat.comInteractive LearningIntermediate
CodinGame
Solve coding challenges by playing games and creating AI bots
www.codingame.comInteractive LearningIntermediate
CheckiO
Collaborative coding challenges with friends in game format
checkio.orgFree CoursesBeginner
Lógica de Programação — DevAprender
Complete programming logic course with Python
www.youtube.comFree CoursesBeginner
Lógica com Python — Curso em Vídeo
Complete Python logic playlist by Gustavo Guanabara
www.youtube.comFree CoursesBeginner
Lógica com JS — Gustavo Neitzke
Programming logic playlist using JavaScript
www.youtube.comFree CoursesBeginner
Front-End Completo — Vida FullStack
Complete front-end course from zero to advanced
www.youtube.comFree CoursesBeginner
HTML5 e CSS3 — Matheus Battisti
HTML5 and CSS3 course with hands-on projects
www.youtube.comFree CoursesBeginner
HTML e CSS — Curso em Vídeo
Complete HTML and CSS course by Gustavo Guanabara
www.youtube.comFree CoursesBeginner
HTML Completo — Programação Web
Complete HTML playlist by Programação Web channel
www.youtube.comFree CoursesBeginner
JavaScript — Matheus Battisti
Complete JavaScript course with practical projects
www.youtube.comFree CoursesBeginner
JavaScript Completo — DevAprender
Complete JavaScript course in a single video
www.youtube.comFree CoursesIntermediate
JS Moderno — Willian Justen
Modern JavaScript with ES6+, more advanced
www.youtube.comFree CoursesBeginner
Figma do Zero — Cursae
Free Figma course: from scratch to final prototype
www.cursae.com.brFree CoursesBeginner
Imersão CSS — Alura
Free CSS immersion by Alura to create your personal page
www.alura.com.brLearning PlatformsBeginner
Fundação Bradesco
Virtual school with free technology courses and certificates
www.ev.org.brLearning PlatformsBeginner
W3Schools
Tutorials and references for HTML, CSS, JS and more
www.w3schools.comLearning PlatformsBeginner
JavaScript.info
Complete modern JavaScript tutorial, from basics to advanced
javascript.infoLearning PlatformsBeginner
Origamid — Guia Flexbox
Complete visual CSS Flexbox guide in Portuguese
www.origamid.comLearning PlatformsBeginner
Aprenda Mais (MEC)
Official MEC platform with free courses and certificates
aprendamais.mec.gov.brLearning PlatformsBeginner
Oracle ONE
100% free program with 700h+ content and Oracle certificate
www.oracle.comLearning PlatformsBeginner
Rocketseat Discover
Free Rocketseat track to get started in coding
www.rocketseat.com.brLearning PlatformsBeginner
The Odin Project
Complete free full stack web development curriculum
www.theodinproject.comLearning PlatformsBeginner
freeCodeCamp
Complete curriculum with globally recognized free certifications
www.freecodecamp.orgLearning PlatformsBeginner
Microsoft Learn
Free Microsoft courses with certificates and guided paths
learn.microsoft.comDev ToolsIntermediate
Relume
Component library and AI sitemap builder for rapid wireframing
www.relume.ioDev ToolsIntermediate
Sanity.io
Real-time headless CMS with customizable studio and flexible API
www.sanity.ioDev ToolsIntermediate
Directus
Open-source data platform with visual dashboard and REST/GraphQL API
directus.ioDev ToolsIntermediate
Strapi
Open-source headless CMS with admin panel and customizable Node.js API
strapi.ioLearning PlatformsBeginner
DataCamp
Interactive platform to learn data science, Python, R, SQL and AI with hands-on exercises
www.datacamp.comFree CoursesBeginner
Coursera
Courses and certificates from universities like Stanford, Google and IBM — many free to audit
www.coursera.orgDesign & ColorsBeginner
Behance
Design portfolios and creative projects for inspiration
www.behance.netDesign & ColorsIntermediate
LottieFiles
Lightweight Lottie animations, ready for the web
lottiefiles.comDesign & ColorsIntermediate
Clippy
Visual CSS clip-path generator for element clipping
bennettfeely.comComponent LibrariesIntermediate
21st.dev
Modern AI-powered UI components, ready to copy and use
21st.devComponent LibrariesIntermediate
Aceternity UI
Animated components with Tailwind CSS and Framer Motion
ui.aceternity.comComponent LibrariesIntermediate
Magic UI
Animated components for landing pages and modern interfaces
magicui.designComponent LibrariesIntermediate
Inspira UI
UI components inspired by modern designs (Vue)
inspira-ui.comReferences & DocsIntermediate
RESTful API Guide
Complete guide on REST API concepts and best practices
restfulapi.netReferences & DocsIntermediate
Defensive CSS
Practical defensive CSS tips to avoid visual bugs
defensivecss.dev