Free Resources For Web Development

This collection has everything you need to kickstart your next web development project. With over 150 resources, you have a wealth of tools and materials at your fingertips. Take your time to explore and use whatever suits your needs.

Here you’ll find developer roadmap, helpful documents, and cheat sheets for different programming languages. You’ll also find design tools, fonts and typography, image and icon resources, online IDEs, developer tools, resume-building sites, code challenge platforms, and a variety of free resources to learn new technologies.

Developer Roadmaps

Developer roadmaps are comprehensive guides that outline the skills, tools, and knowledge needed for individuals to progress in their software development careers. These roadmaps typically provide a step-by-step path, starting from beginner concepts and moving towards more advanced topics. They cover various domains such as front-end development, back-end development, DevOps, mobile app development, and more.

  • Frontend – Frontend Development Roadmap.
  • Backend – Backend Development Roadmap.
  • Full-stack – Fullstack Development Roadmap.
  • React – React Development Roadmap.
  • Andriod – Android Development Roadmap.
  • DevOps – DevOps Roadmap.

Documentations and Cheat Sheets

  • MDN Web Docs – The MDN Web Docs site is a comprehensive resource for web developers, providing in-depth information and tutorials on Open Web technologies. It covers a wide range of topics including HTML, CSS, and JavaScript, which are the foundational technologies for building modern web applications. Additionally, MDN offers extensive documentation on web APIs, enabling developers to create dynamic and interactive web experiences.
  • DevDocs – DevDocs is a fast, offline-capable, and free documentation browser designed specifically for developers. It consolidates over 100 different documentation sources into a single web application, making it convenient for developers to search and reference documentation across various programming languages, frameworks, libraries, and tools without needing to visit multiple websites.
  • 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 is a powerful, web-based design tool used for interface design, prototyping, and collaboration. It is widely utilized by designers, developers, and teams to create user interfaces for websites, applications, and other digital products.
  • Adobe XD – It is used by designers to create user interfaces for mobile and web applications.
  • Sketch – Sketch is a powerful and widely-used design tool primarily focused on user interface (UI) and user experience (UX) design. It is particularly popular among web and mobile app designers due to its simplicity, efficiency, and robust feature set.
  • 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?

  • How the Internet Works Video – Understanding how the Internet works involves exploring a complex system of interconnected networks that allows for the global exchange of data and communication.
  • How the Internet Works Brief Videos – A brief explanations on, how does the Internet works?
  • DNS – What is DNS and how it works?
  • HTTPS – All about HTTP and how it 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.

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

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

📉 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 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

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

📺 YOUTUBE CHANNELS