Complete Web Development Resources 2021

Web Development RoadMap 2021

Complete Web Development Resources 2021
  • MDN Web Docs - 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 - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app.
  • DEVHINTS - A modest collection of cheatsheets.
  • FLEX - Malven - A visual cheatsheet for CSS flex layout.
  • GRID - Malven - A visual cheatsheet for CSS grid layout.
  • Figma - Figma helps teams create, test, and ship better designs from start to finish.
  • Adobe XD - 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 - 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 - Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.
  • CodePen - Build, share, and learn JavaScript, CSS, and HTML with our online code editor
  • Frontend Mentor - Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
  • Good Code - Browse through dozens of front end coding challenges, complete with Adobe XD files and styleguides.
  • codier - Explore and attempt front-end coding challenges.
  • CSSBattle - 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 - Free fonts, free alternatives to premium fonts, done-for-you-research articles.
  • Fontjoy - Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing.
  • FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
  • Coolors - Generate or browse beautiful color combinations for your designs.
  • 0to255 - A color tool that makes it easy to lighten and darken colors.
  • color x color - A tool to create accessible color systems for UIs
  • Colors and Fonts - Find colors and typography combinations ready to copy paste in one click.
  • ColorSpace - Generate nice Color Palettes.
  • CSS Gradient - Free css gradient generator tool.
  • uiGradients - A handpicked collection of beautiful color gradients for designers and developers.
  • Unsplash - Free images and photos.
  • Pexels - Free stock photos.
  • Pixabay - Free image or video.
  • LOADING.IO - Free spinner for your projects.
  • LottieFiles - LottieFiles is a collection of animations designed for Lottie - gone are the days of bugging your developer.
  • removebg - Remove Image Background.
  • Remove Photo Data - Remove personal data from photos before sharing them on the internet.
  • befunky - BeFunky's all-in-one online Creative Platform has everything you need to easily edit photos, create graphic designs, and make photo collages.
  • unDraw - Browse to find the illustrations that fit your needs and click to download.
  • manypixels - 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 - Hand-drawn vector illustration and icon resources, perfect for your next project.
  • freepik - Free graphic resources.
  • Ionicons - Open-Sourced and MIT licensed icon pack.
  • Font Awesome - Vector icons and social logos.
  • Material Icons - 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 - Lorem Ipsum generator.
  • RealFaviconGenerator - Favicon generator
  • Favicon Maker - Free Favicon maker.
  • Meta Tags - Meta Tags generator, preview how your webpage will look on Google, Facebook, Twitter and more!
  • Clippy - CSS clip-path maker.
  • Regex101 - Online regex tester.
  • Web Code Tools - Generate HTML5, CSS3, Microdata, JSON-LD, Twitter Cards, Open Graph and more!
  • Carbon - Create and share beautiful images of your source .
  • CSS Grid Generator - Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
  • - 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.
  • React - Official site documentations, tutorial.
  • Codecademy - Free React course of Codecademy.
  • freeCodeCamp - Free web development resourse, where you can also learn react.
  • React Tutorial - React Tutorial - Fundamentals, Hooks, Context API, React Router, Custom Hooks by Coding Addict.
  • React Beach Resort - React Beach Resort project by Coding Addict.
  • Awesome React - A collection of awesome things regarding React ecosystem.
  • React Icons - Include popular icons in your React projects easily with react-icons.
  • Public APIs - A collective list of more than 1000 Free Public and Open REST APIs for developers.
  • JSONPlaceholder - 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 - 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 - Postman makes API development easy. Simplify each step of building an API and streamline collaboration so you can create better APIs—faster.
  • Insomnia - Leading Open Source API Client, and Collaborative API Design Platform for GraphQL, and REST.
  • JSON Server - 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 - Find the cost of adding a npm package to your bundle.
  • freeCodeCamp - Learn to code at home. Build projects. Earn certifications.
  • w3schools - The world's largest Web Developer site. Tutorials references, examples, exercies, certificates.
  • Codecademy - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
  • Real Python - Learn Python online: Python tutorials for developers of all skill levels, Python books and courses, Python news, code examples, articles, and more.
  • Study Tonight - Best place to learn Engineering subjects like Core Java, C++, DBMS, Data Structures etc through Hand-written simple Tutorial, Tests, Video tutorials.
  • Programiz - 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 - The Modern JavaScript Tutorial.
  • Command Line Tutorial - Basic UNIX commands tutorial.
  • Try Git - An interactive series of challenges to learn about and experiment with Git. RESUME
  • ResumeGenius - The only online resume builder that'll land you interviews. Create a professional resume in minutes, download, and print.
  • - 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 - 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 - Make a perfect resume in 2020 and get your dream job using the free resume builder. Select a template. Personalize it.
  • RX-Resume - Easily build your resume.
  • mailsac - Disposable testing email inbox service.
  • HTTP Status Codes - 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 - Dev Resources has everything for your developer journey, all presented in curated lists.
  • DEV - A constructive and inclusive social network. Open source and radically transparent.
  • Medium - 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 - Get the latest from Hacker News!
  • Hacker Noon - Hacker Noon reflects the technology industry with unfettered stories and opinions written by real tech professionals.
  • freeCodeCamp News - Free Code Camp community news.
  • Smashing Magazine - Smashing Magazine — for web designers and developers.
  • Hashnode - Hashnode is a free content creation platform and community that allows you to publish articles on your own domain.