cft

Web Development Resources

This is a complete web development resource you need to build your next project.


user

Ismile Hossain

3 years ago | 5 min read

This is a complete web development resource you need to build your next project. More than 150+ resources for your web development.

This is a shortlist of my Github Web Dev Resources repo. To get all the resources, visit my repo.

๐ŸŒŸ Resources

๐Ÿ’ป DEVELOPER ROADMAPS

  • Frontend - Frontend Development Roadmap.
  • Backend - Backend Development Roadmap.
  • React - React Development Roadmap.

๐Ÿ“š DOCUMENTATIONS

๐ŸŽญ 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.

๐ŸŒ HOW THE WEB WORKS?

๐Ÿ–ผ HTML AND CSS

๐Ÿ–‹ 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
  • FontPair - Font Pair helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.

๐ŸŒˆ 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
  • 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

๐Ÿ“ท IMAGE RESOURCES

  • Unsplash - Free images and photos.
  • Pexels - Free stock photos.
  • Pixabay - Free image or video.
  • 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.

๐ŸŽจ 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.
  • freepik - Free graphic resources.

๐Ÿ’ง 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.
  • icons8 - Download free icons in PNG and SVG.
  • flaticon - Free vector icons in SVG, PSD, PNG, EPS format or as ICON FONT

โš™ GENERATORS

๐Ÿ‘“ 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 into your site's performance.

๐Ÿ“„ TERMINALS FOR WINDOWS

๐Ÿ“ ONLINE IDE, EDITOR

โšก JAVASCRIPT

โšก NODEJS

  • Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
  • nodebestpractices - 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.
  • Express.js Security Tips - How You Can Save and Secure Your App.

โšก PYTHON

  • Codecademy - Free course to learn Python interactively.
  • Programiz - Learn Python Programming.
  • Awesome Python - A curated list of awesome Python frameworks, libraries, software, and resources.

โšก REACT

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

๐ŸŽฎ APIs

  • 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 an easy way to access the data.

๐Ÿ›  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.

๐Ÿ“– ONLINE LEARNING RESOURCES

  • freeCodeCamp - Learn to code at home. Build projects. Earn certifications.
  • w3schools - The world's largest Web Developer site. Tutorials references, examples, exercises, certificates.
  • Codecademy - Learn the technical skills you need for the job you want. As leaders in online education and learning to code.
  • 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.

๐Ÿ“ฆ OTHERS

  • HTTP Status Codes - HTTP Status Code directory, with definitions, details and helpful code references.
  • 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.

Originally published here.

Upvote


user
Created by

Ismile Hossain


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles