DEVELOPER ROADMAPS
- Frontend 113 - Frontend Development Roadmap.
- Backend 60 - Backend Development Roadmap.
- React 37 - React Development Roadmap.
- Andriod 20 - Android Development Roadmap.
- DevOps 28 - DevOps Roadmap.
- MDN Web Docs 5 - The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
- DevDocs 3 - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
- DEVHINTS 3 - A modest collection of cheatsheets.
- FLEX - Malven 8 - A visual cheatsheet for CSS flex layout.
- GRID - Malven 4 - A visual cheatsheet for CSS grid layout.
- Figma 10 - Figma helps teams create, test, and ship better designs from start to finish.
- Adobe XD 4 - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one place.
- Sketch 1 - Create, prototype, collaborate, and bring your ideas to life with the design platform used by over one million people — from freelancers, to the world’s largest teams.
- Whimsical 1 - Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.
- How the Internet Works Video 7 - How does the Internet Works?
- How the Internet Works Brief Videos 3 - A brief explanations on, how does the Internet works?
- DNS 6 - How DNS works?
- HTTPS 8 - How HTTPS works?
- freeCodeCamp 9 - Free course to learn Web Development.
- Interneting Is Hard 3 - Friendly web development tutorials for complete beginners.
- HTML Elements 3 - HTML elements reference by MDN.
- HTML Entity 1 - HTML Entity Reference by CSS-Tricks.
- CSS3 Properties 2 - CSS reference by MDN.
- CSS Reference 3 - A free visual guide to CSS.
- Flexbox Froggy 2 - A game that helps you to learn CSS Flex.
- CSS TRICKS - Flexbox 1 - A Complete Guide to Flexbox.
- Grid Garden 1 - A game for learning CSS Grid.
- CSS TRICKS - A Complete Guide to Grid 3 - A comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
- Learn CSS Grid 3 - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
- Can I Use 1 - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- CSS Effects 5 - CSS Animations.
- Keyframes 4 - Create basic or complex CSS @keyframe animations with a visual timeline editor.
- Animista 3 - Play with a collection of ready to use CSS animations.
- BEM 2 - BEM naming cheat sheet.
- Autoprefixer 1 - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
- CSS Formatter 2 - Online CSS Formatter, CSS Beautifier.
- Placeholder - How To Use Our Placeholders. Just specify the image size after our URL and you'll get a placeholder image.
- CodePen 3 - Build, share, and learn JavaScript, CSS, and HTML with our online code editor
- Frontend Mentor 2 - Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
- Good Code 3 - Browse through dozens of front end coding challenges, complete with Adobe XD files and styleguides.
- codier 3 - Explore and attempt front-end coding challenges.
- CSSBattle 4 - CSS code-golfing is here! Use your CSS skills to replicate targets with smallest possible code. Feel free to check out the targets below and put your CSS skills to test.
- Google Fonts - The #1 resource for free and easy-to-use webfonts.
- Fonts Arena 1 - Free fonts, free alternatives to premium fonts, done-for-you-research articles.
- Fontjoy 1 - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
- FontPair 3 - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
- Coolors 1 - Generate or browse beautiful color combinations for your designs.
- 0to255 1 - A color tool that makes it easy to lighten and darken colors.
- color x color 1 - A tool to create accessible color systems for UIs
- Colors and Fonts 1 - Find colors and typography combinations ready to copy paste in one click.
- ColorSpace 1 - Generate nice Color Palettes.
- CSS Gradient 1 - Free css gradient generator tool.
- uiGradients 2 - A handpicked collection of beautiful color gradients for designers and developers.
- Unsplash 5 - Free images and photos.
- Pexels 2 - Free stock photos.
- Pixabay - Free image or video.
- LOADING.IO 3 - Free spinner for your projects.
- LottieFiles 3 - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
- removebg 3 - Remove Image Background.
- Remove Photo Data 3 - Remove personal data from photos before sharing them on the internet.
- befunky 2 - BeFunky's all-in-one online Creative Platform has everything you need to easily edit photos, create graphic designs, and make photo collages.
- unDraw 4 - Browse to find the illustrations that fit your needs and click to download.
- manypixels 2 - Free illustrations to power up your projects. Use them in a commercial or non-commercial way for your landing pages, blog posts, email newsletters, social media graphics and more.
- DrawKit 3 - Hand-drawn vector illustration and icon resources, perfect for your next project.
- freepik 1 - Free graphic resources.
- Ionicons 5 - Open-Sourced and MIT licensed icon pack.
- Font Awesome 3 - Vector icons and social logos.
- Material Icons 2 - Material icons are delightful, beautifully crafted symbols for common actions and items. Download on desktop to use them in your digital products for Android, iOS, and web.
- icons8 - Download free icons in PNG and SVG.
- flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT.
- Tabler Icons - Fully customizable free SVG icons.
- icofont - 2100+ free icons to spice up your creative designs.
- Simple Icons - 1463 Free SVG icons for popular brands.
- Lorem Ipsum 2 - Lorem Ipsum generator.
- RealFaviconGenerator 2 - Favicon generator
- Favicon Maker 1 - Free Favicon maker.
- Meta Tags 3 - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter and more!
- Clippy 2 - CSS clip-path maker.
- Regex101 1 - Online regex tester.
- Web Code Tools 1 - Generate HTML5, CSS3, Microdata, JSON-LD, Twitter Cards, Open Graph and more!
- Carbon - Create and share beautiful images of your source .
- CSS Grid Generator 3 - Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
- Accessibility Blog - Medium - Seven easy-to-implement guidelines to design a more accessible web.
- Accessibility Blog - Dev - 13 ways to level up your site's accessibility.
- Accessibility Cheatsheet - Practical approaches to Universal Design for making your website/webapp accessible to everyone.
- web.dev 3 - See how well your website performs. Then, get tips to improve your user experience.
- Lighthouse Metrics - Lighthouse Metrics provides easy insights for your site's performance.
- freeCodeCamp 9 - Best free resource to learn JavaScript interactively.
- Codecademy 2 - Free course to learn JavaScript interactively.
- JavaScript.info 2 - Modern JavaScript Tutorial.
- Eloquent JavaScript 1 - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
- JavaScript30 2 - 30 days vanilla JS coding challenge. Build 30 things in 30 days with 30 tutorials.
- How JavaScript works
- JavaScript Reference By MDN
- JavaScript Event Reference
- DOM Manipulation Reference
- JavaScript Design Patterns
- Node.js Tutorial 2 - Node.js Crash Course Tutorial by Net Ninja.
- nodebestpractices 1 - Huge list of best practices for building node apps. Important for big projects.
- The Node Way - An entire philosophy of Node.js best practices a0nd guiding principles exists for writing maintainable modules, scalable applications, and code that is actually pleasant to read.
- You Don't Know Node.js
- Awesome Nodejs - Delightful Node.js packages and resources.
- Express.js Security Tips - How You Can Save and Secure Your App.
- Codecademy 3 - Free course to learn Python interactively.
- Programiz 2 - Learn Python Programming.
- Awesome Python 1 - A curated list of awesome Python frameworks, libraries, software and resources.
- Flask Tutorial 2 - The Flask Mega-Tutorial by Miguel Grinberg.
- React 3 - Official site documentations, tutorial.
- Codecademy 4 - Free React course of Codecademy.
- freeCodeCamp 9 - Free web development resourse, where you can also learn react.
- React Tutorial 3 - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
- React Beach Resort 1 - React Beach Resort project by Coding Addict.
- Awesome React 2 - A collection of awesome things regarding React ecosystem.
- React Icons 1 - Include popular icons in your React projects easily with react-icons.
- Public APIs 1 - A collective list of more than 1000 Free Public and Open REST APIs for developers.
- JSONPlaceholder 1 - Free to use fake Online REST API for testing and prototyping.
- OpenWeather - Simple and fast and free weather API from OpenWeatherMap you have access to current weather data, hourly, 5- and 16-day forecasts.
- SWAPI - The Star Wars API.
- Quotes REST API 1 - They Said So has more than 1 million+ quotes in the database, the largest such database in the world. And Quotes API gives easy way to access the data.
- Postman 1 - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
- Insomnia 1 - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.
- JSON Server 2 - Get a full fake REST API with zero coding in less than 30 seconds (seriously). Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.
- npm trends - Which NPM package should you use? Compare NPM package download stats over time. Spot trends, pick the winner.
- BUNDLEPHOBIA 2 - Find the cost of adding a npm package to your bundle.
- freeCodeCamp 6 - Learn to code at home. Build projects. Earn certifications.
- w3schools 6 - The world's largest Web Developer site. Tutorials references, examples, exercies, certificates.
- Codecademy 1 - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
- Real Python 1 - Learn Python online: Python tutorials for developers of all skill levels, Python books and courses, Python news, code examples, articles, and more.
- Study Tonight 2 - Best place to learn Engineering subjects like Core Java, C++, DBMS, Data Structures etc through Hand-written simple Tutorial, Tests, Video tutorials.
- Programiz 3 - Learn to code in Python, C/C++, Java, and other popular programming languages with our easy to follow tutorials, examples, online compiler and references.
- JavaScript Info 2 - The Modern JavaScript Tutorial.
- Command Line Tutorial 2 - Basic UNIX commands tutorial.
- Try Git 3 - An interactive series of challenges to learn about and experiment with Git. RESUME
- ResumeGenius 4 - The only online resume builder that'll land you interviews. Create a professional resume in minutes, download, and print.
- resume.io 2 - Free online resume maker, allows you to create a perfect resume in minutes. See how easy it is to write a professional resume and apply for jobs today!
- Resume Now 2 - It Only Takes A Few Minutes. An online resume maker shouldn't take long to use—and our free-to-use resume builder doesn't.
- Canva - With Canva's free resume builder, applying for your dream job is easy and fast. Choose from hundreds of free.
- novoresume 1 - Make a perfect resume in 2020 and get your dream job using the free resume builder. Select a template. Personalize it.
- RX-Resume 2 - Easily build your resume.
- mailsac - Disposable testing email inbox service.
- HTTP Status Codes 1 - HTTP Status Code directory, with definitions, details and helpful code references.
- Play With Docker - A simple, interactive and fun playground to learn Docker.
- Tiny Helpers - A collection of free single-purpose online tools for web developers.
- Free for Developers - This is a list of software and other offerings that have free tiers for developers.
- Dev Resources 1 - Dev Resources has everything for your developer journey, all presented in curated lists.
- DEV 2 - A constructive and inclusive social network. Open source and radically transparent.
- Medium 2 - Medium is an open platform where readers find dynamic thinking, and where expert and undiscovered voices can share their writing on any topic.
- Hacker News 2 - Get the latest from Hacker News!
- Hacker Noon 2 - Hacker Noon reflects the technology industry with unfettered stories and opinions written by real tech professionals.
- freeCodeCamp News 1 - Free Code Camp community news.
- Smashing Magazine 2 - Smashing Magazine — for web designers and developers.
- Hashnode 4 - Hashnode is a free content creation platform and community that allows you to publish articles on your own domain.
