/web-dev-resources

The complete web development resources you ever need. More than 150+ resources for your web development.

MIT LicenseMIT

This is a complete web development resource you need to build your next project. More than 150+ resources are included here. Feel free to explore and use in your projects.

Contents

Resources

💻 DEVELOPER ROADMAPS

  • Frontend - Frontend Development Roadmap.
  • Backend - Backend Development Roadmap.
  • React - React Development Roadmap.
  • Andriod - Android Development Roadmap.
  • DevOps - DevOps Roadmap.

📚 DOCUMENTATIONS AND CHEATSHEETS

🎭 DESIGN TOOLS

  • 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.
  • Undesign - Collection of free design tools and resources for makers, developers and designers.

🌐 HOW THE WEB WORKS?

🖼 HTML AND CSS

  • freeCodeCamp - Free course to learn Web Development.
  • Interneting Is Hard - Friendly web development tutorials for complete beginners.
  • Learn to Code HTML & CSS - The guide covers a variety of web design and development topics, ranging from beginner to advanced skill levels.
  • HTML Elements - HTML elements reference by MDN.
  • HTML Entity - HTML Entity Reference by CSS-Tricks.
  • HTML Shark - Smart moves and dirty tricks for coding websites, effects and elements in HTML.
  • CSS3 Properties - CSS reference by MDN.
  • CSS Reference - A free visual guide to CSS.
  • CSS Layout - A collection of popular layouts and patterns made with CSS.
  • Modern CSS Solutions - A series examining modern CSS solutions to problems.
  • CSS Diner - A fun game to help you learn and practice CSS selectors.
  • Flexbox Froggy - A game that helps you to learn CSS Flex.
  • CSS TRICKS - Flexbox - A Complete Guide to Flexbox.
  • Grid by Example - Everything you need to learn CSS Grid Layout.
  • Grid Garden - A game for learning CSS Grid.
  • CSS TRICKS - A Complete Guide to Grid - 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 - A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.
  • Can I Use - Up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • CSS Effects - CSS animations.
  • UI Snippets - Even more CSS animations.
  • Keyframes - Create basic or complex CSS @keyframe animations with a visual timeline editor.
  • Animista - Play with a collection of ready to use CSS animations.
  • BEM - BEM naming cheat sheet.
  • Autoprefixer - Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes.
  • CSS Formatter - 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.
  • DevProjects - Practice your coding skills with free HTML/CSS projects. Projects vary from beginner to advanced level.
  • HTML Cheat Sheet - A Complete HTML Cheat Sheet to help you master HTML.
  • CSS Cheat Sheet - Brush up on your CSS Skills with this comprehensive Cheat Sheet.
  • HTML and HTML5 Interview Questions - A Complete list of HTML Interview Questions to help you ace your interview.

🖥 FRONT END CHALLENGES OR SKILLS

  • 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.

🖋 FONTS AND TYPOGRAPHY

  • 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.
  • Font Playground - Play with variable fonts.
  • Font Anything - Type Anything is a free and awesome typography tool to create and test font combinations for your projects.

🌈 COLORS AND TOOLS

  • Coolors - Generate or browse beautiful color combinations for your designs.
  • 0to255 - A color tool that makes it easy to lighten and darken colors.
  • ColorBox - Create amazing color sets superfast.
  • 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.
  • Picular - The color of anything.
  • Colorable - Choose font colors based on your background color.
  • Happy Hues - Curated colors in context.
  • Branition Colors - Hand-curated collection of color pallets best fitted for branding.

📷 IMAGE RESOURCES

  • 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.

🎨 ILLUSTRATIONS

  • 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.
  • Illustrations figma - More than 5000 vector illustrations you can use inside Figma. All the figma illustrations are in SVG & PNG formats and includes styles like flat, lined, abstract and more.
  • Vector Illustrations - Search over 5000 vector illustrations and more than 70 design styles, with an integrated editor to adjust the design at you wish.

💧 ICONS

  • 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.
  • Icones - Icons collection.
  • 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.
  • Get Emoji - ✂️ Copy and 📋 Paste Emoji 👍.
  • Ikonate - Customizable icons pack.
  • useAnimations - Free animated icons.
  • 3dicons - A collection of over 5000 3D icons and characters with 4k resolution, each icon delivered in 5 color palettes, front and perspective views.
  • Iconshock - The biggest icon pack with over 2 million professional icons in +400 icon sets with more than 30 design styles: material, flat, 3d, realistic, iOS, and more.

⚙ GENERATORS

  • 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.
  • i Hate Regex - i Hate Regex is a regex cheat sheet that also explains the commonly used expressions so that you understand it.
  • 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.
  • CSS Scroll Shadows - Adjust the controls (👇) and see the CSS scroll shadows change.
  • CSS Shadow Generator - Make a smooth shadow.
  • Haikei - Generate unique SVG design assets.
  • transform - Transform | A polyglot web converter.
  • Perflink | JS Benchmarks - JavaScript performance benchmarks you can share via URL.
  • Optimizeimages - Optimize images online with this free tool, compress & convert images in PNG, JPEG, SVG, AVIF, WebP and GIF formats, and even get picture HTML tags for correct implementation.

👓 ACCESSIBILITY

📉 SITE ANALYZERS

  • web.dev - 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.

📄 TERMINALS FOR WINDOWS

📝 ONLINE IDE, EDITOR

⚡ JAVASCRIPT

⚡ NODEJS

⚡ PYTHON

  • Learn Python Programming - This site contains materials and exercises for the Python 3 programming language.
  • PY4E - Python for Everybody.
  • Dive Into Python 3 - Dive Into Python 3 covers Python 3 and its differences from Python 2. Compared to Dive Into Python, it’s about 20% revised and 80% new material. The book is now complete.
  • Codecademy - Free course to learn Python interactively.
  • Programiz - Learn Python Programming.
  • Awesome Python - A curated list of awesome Python frameworks, libraries, software and resources.
  • Flask Tutorial - The Flask Mega-Tutorial by Miguel Grinberg.
  • Scaler Topics - Free Resources to learn Python by top geeks.
  • Python Interview Questions - A Complete list of top Python Interview Questions to help you ace your interview.
  • Python Cheat Sheet- A Comprehensive Cheat Sheet to help you master Python.
  • Python Tutorial - Python Tutorial: A Comprehensive Guide for Beginners

⚡ REACT

🎮 APIs

  • 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.
  • Rapid API - Rapid api contains is one of the largest API tool suite which contains lots of free APIs along with their documnetation, a dedeicated section called Rapid API learn, which contains guides and tutorials about using and creating APIs.

🛠 DEVELOPER TOOLS

  • 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.

📖 ONLINE LEARNING RESOURCES

  • 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.
  • Scaler Topics - Understand how programming works, Learn Python, Java, Data Structure, C/C++ and other popular programming languages with easy to follow tutorials and example programs.
  • InterviewBit - Level up your programming skills with our comprehensive guide containing interview questions, practice problems, coding challenges and alot more.

🧑 RESUME

  • ResumeGenius - The only online resume builder that'll land you interviews. Create a professional resume in minutes, download, and print.
  • resume.io - 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.
  • Overleaf - Overleaf is a LaTeX editor which can be used to create ATS friendly resumes.
  • Resume Worded - Resume Worded can be used to check whether your resume is ATS friendly or not.
  • Open Resume - Open Resume is an open source Resume builder and parser.

📦 OTHERS

  • mailsac - Disposable testing email inbox service.
  • Ethereal Email - Ethereal is a fake SMTP service, mostly aimed at Nodemailer users (but not limited to).
  • 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.
  • Themeselection - Selected high quality, modern design, professional and easy-to-use Free Admin Dashboard Template, HTML Themes and UI Kits to create your applications faster.
  • TshirtDesigns - Create your own t shirt and apparel mockups with this free mockup builder.

📔 DEVELOPER BLOG SITES

  • 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.

📺 YOUTUBE CHANNELS