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
- Developer Roadmaps
- Documentations and Cheatsheets
- Design Tools
- How the WEB works?
- HTML and CSS
- Front End Challenges or Skills
- Fonts and Typography
- Colors and Tools
- Image Resources
- Illustrations
- Icons
- Generators
- Accessibility
- Site Analyzers
- Terminals for Windows
- Online IDE, Editor
- JavaScript
- Node.js
- Python
- React
- APIs
- Developer Tools
- Online Learning Resources
- Resume
- Others
- Developer Blog Sites
- YouTube Channels
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
- 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.
- CSS Grid Cheat Sheet - Your ultimate CSS grid visual guide.
- OverAPI - Collection Of Cheat Sheets.
- Awesome Cheatsheets - Awesome cheatsheets for popular programming languages, frameworks and development tools.
- GitSheet - A dead simple git cheatsheet.
- HTML5 Doctor - This is a quick reference of elements that are new or have been redefined in HTML5.
- HTML5 Canvas Cheat Sheet - HTML5 Canvas Cheat Sheet.
- Cheatography - Programming Cheat Sheets.
- CSS 3, Media Queries Cheat Sheet - CSS 3, Media Queries Cheat Sheet.
- SEO Cheat Sheet - The Web Developer's SEO Cheat Sheet.
- Bootstrap 5 Cheat Sheet - ThemeSelection's Bootstrap 5 Cheat Sheet.
🎭 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.
- FlyonUI - The Easiest Components Library For Tailwind CSS.
🌐 HOW THE WEB WORKS?
- How the Internet Works Video - How does the Internet Works?
- How the Internet Works Brief Videos - A brief explanations on, how does the Internet works?
- DNS - How DNS works?
- HTTPS - How HTTPS 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.
- ReadyTools HTML Structure Generator - Generate HTML Structures in seconds. Use Bootstrap or your style/javascript.
- ReadyTools Components Generator - Generate HTML Components easily.
- ReadyTools Generated Buttons - Copy fancy buttons with one click and use it on your website.
- ReadyTools HTML Minifier - Compress your HTML files for faster loading times and better performance.
- HTMLrev - HTMLrev provides free HTML templates for websites and landing pages.
🖥 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 on 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.
-
Color Picker - Get a free color picker with color names, hex, rgb and hsl codes.
-
Color Palettes - Free categorized Color Palettes for your projects. Get hex and rgb codes.
-
Color Contrast Checker - Check color contrast easily to ensure your designs are accessible and visually appealing.
-
Color Gradient Generator - Create stunning color gradients effortlessly.
📷 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.
- Pyrexp - Online visual 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.
- ReadyTools HTML and CSS Generator - Effortlessly create HTML and CSS code with ReadyTools Code Hub. Enhance your website's appearance by copying generated buttons.
👓 ACCESSIBILITY
- 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.
📉 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
- freeCodeCamp - Best free resource to learn JavaScript interactively.
- Codecademy - Free course to learn JavaScript interactively.
- JavaScript.info - Modern JavaScript Tutorial.
- JavaScripture - JavaScripture.com is a testing ground and reference for all JavaScript APIs.
- Eloquent JavaScript - This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here.
- JavaScript30 - 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
- JavaScript Tutorial - Learn important concepts in JavaScript such as operators, loops, functions, OOPs, and much more.
- DOM Manipulation Reference
- JavaScript Design Patterns
- RegexOne - Learn Regular Expressions with simple, interactive exercises.
- Scaler - Best Free Resources to learn JavaScript by top geeks.
- JavaScript Cheat Sheet- A Complete JavaScript Cheat Sheet to help you master JavaScript.
- JavaScript Interview Questions - A Complete list of top JavaScript Interview Questions to help you ace your interview.
⚡ NODEJS
- Node.js Tutorial - Node.js Crash Course Tutorial by Net Ninja.
- Mixu's Node book - A book about using Node.js.
- Node JS - Node.js original documentation.
- 30 Days of Node - 30 days of node, a node.js tutorial series.
- 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.
- 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.
- Node.js Interview Questions - A Complete list of top Node.js Interview Questions to help you ace your interview.
⚡ 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 PRO - Offers a curated learning path for Python beginners that provides structured, in-depth courses with interactive quizzes, coding challenges, and real-world projects.
- 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
- Python Developer Skills - Boost your tech career with 20+ Python developer skills you need in 2024.
⚡ 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.
- Awesome React - A collection of awesome things regarding React ecosystem.
- React Icons - Include popular icons in your React projects easily with react-icons.
- React Interview Questions - A Complete list of top React Interview Questions to help you ace your interview.
- 100+ React Redux Interview Questions and Answers (2023)-A collection of React Redux Questions and answers.
🎮 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.
- JSONing - Instantly Mock a REST API from a JSON Object for Testing and Prototyping.
- 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.
- Bold Coder - Best place to learn Java programming with online tutorials, examples and interview questions.
- 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.
- Scaler Blogs - Navigate the tech career with comprehensive roadmap articles, guiding the tech aspirants from the beginner to expert level in the ever-evolving tech industry.
- PerfectBugReport.io - A simple checklist of the essential items to include in bug reports.
🧑 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.