Learning the skills you need for web design or web development is the first step toward working on the web— but that also means familiarizing yourself with the tools of the trade. That’s why I put together this list of Awwwesome free resources you’ll need for web development, web design, or both.

As you learn, keep this list handy.

🌐 Free Hosting:

• ⩥ Netlify

  Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

🔗 Netlify

• ⩥ Firebase

  Firebase is Google's mobile platform that helps you quickly develop high-quality apps and grow your business.

🔗 Firebase

• ⩥ Amazon Web Services (AWS)

  Whether you're looking for computing power, database storage, content delivery, or other functionality, AWS has the services to help you build sophisticated applications with increased flexibility, scalability, and reliability.

🔗 Amazon Web Services

• ⩥ Heroku

  Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.

🔗 Heroku

• ⩥ GitHub Pages

  Websites for you and your projects are hosted directly from your GitHub repository. Just edit, push, and your changes are live.

🔗 GitHub Pages

• ⩥ Vercel

  Deploy web projects with the best front-end developer experience and highest end-user performance.

🔗 Vercel

• ⩥ Surge

  Static web publishing for Front-End Developers. Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.

🔗 Surge

• ⩥ Render

  Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploy from Git.

🔗 Render

• ⩥ GitLab Pages | GitLab

  Learn how to use GitLab Pages to deploy a static website at no additional cost.

🔗 GitLab Pages

📕 Learning Platforms:

• ⩥ freeCodeCamp

  freeCodeCamp is a community of millions of people around the world who are learning to code together. You can learn to code with free online courses, programming projects, and interview preparation for developer jobs.

🔗 freeCodeCamp

• ⩥ Codecademy

  Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new career (or advance in their current one).

🔗 Codecademy

• ⩥ JavaScript 30

  Build 30 things with vanilla JS in 30 days with 30 tutorials

🔗

• ⩥ Frontend Mentor | Front-end coding challenges using a real-life workflow

  Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working with professional designs.

🔗 FrontendMentor

• ⩥ Test Automation University | Applitools

  Become a test automation superstar - Free!🌟

🔗 Test Automation University | Applitools

• ⩥ Coursera | Online Courses & Credentials From Top Educators. Join for Free

  Start, switch, or advance your career with more than 5,000 courses, Professional Certificates, and degrees from world-class universities and companies.

🔗 Coursera

• ⩥ Khan Academy | Free Online Courses, Lessons & Practice

  Khan Academy offers practice exercises, instructional videos, and a personalized learning dashboard that empower learners to study at their own pace in and outside of the classroom. We tackle math, science, computing, history, art history, economics, and more, including K-14 and test preparation (SAT, Praxis, LSAT) content. We focus on skill mastery to help learners establish strong foundations, so there's no limit to what they can learn next!

🔗 Khan Academy

• ⩥ Sololearn: Learn to Code

  SoloLearn apps provide you with the ability to choose what you will learn without the constraints of following existing curricula. They also let you learn wherever you happen to be, whether at home, in a café, or even on a bus or a train.

🔗 Sololearn

👨‍💻 Coding Challenge Platforms:

• ⩥ Codewars - Achieve mastery through coding practice and developer mentorship

  Coding practice for all programming levels – Join a community of over 3 million developers and improve your coding skills in over 55 programming languages!

🔗 Codewars

• ⩥ Topcoder

  Topcoder (formerly TopCoder) is a crowdsourcing company with an open global community of designers, developers, data scientists, and competitive programmers.

🔗 Topcoder

• ⩥ CodingGames and Programming Challenges to Code Better

  CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, and have fun.

🔗 CodinGame

• ⩥ HackerRank

  HackerRank is the market-leading technical assessment and remote interview solution for hiring developers. Learn how to hire technical talent from anywhere!

🔗 HackerRank

• ⩥ Project Euler

  Project Euler is a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve. Although mathematics will help you arrive at elegant and efficient methods, the use of a computer and programming skills will be required to solve most problems.

🔗 Project Euler

• ⩥ Coderbyte

  The industry’s #1 website for technical interview prep, coding challenges, and expert videos.

🔗 Coderbyte

• ⩥ CodeChef

  CodeChef promotes constant learning and friendly programming competitions for its users, along with the support of its large community of problem curators.

🔗 CodeChef

• ⩥ Exercism

  Learn, practice, and get world-class mentoring in over 50 languages. Solve coding exercises and get mentored to gain true fluency in your chosen programming languages. Exercism is open-source and not-for-profit.

🔗 Exercism

• ⩥ LeetCode - The World's Leading Online Programming Learning Platform

  Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview.

🔗 LeetCode

• ⩥ SPOJ

  The SPOJ platform is centered around an online judge system, which serves for the automatic assessment of user-submitted programs. Some of its most important features include support for more than 45 programming languages and compilers, including C, C++, Pascal, JAVA, C#, Perl, Python, Ruby, Haskell, Ocaml, and esoteric languages.

🔗 SPOJ

👨‍🎓 Freelancing platforms:

• ⩥ Toptal

  Toptal is an exclusive network of the top freelance software developers, designers, finance experts, product managers, and project managers in the world. Top companies hire Toptal freelancers for their most important projects.

🔗 Toptal

• ⩥ Upwork

  Upwork connects businesses with independent professionals and agencies around the globe. Where companies and freelancers work together in new ways that unlock their potential.

🔗 Upwork

• ⩥ Freelancers

  Find & hire top freelancers, web developers & designers inexpensively. World's largest marketplace of 50m. Receive quotes in seconds. Post your job online now.

🔗 Freelancers

• ⩥ People Per Hour

  Access global talent on the freelancer website trusted by over 1 million businesses worldwide.

🔗 People Per Hour

• ⩥ SimplyHired

  Browse SimplyHired for jobs, view local and national salary information, discover companies, and learn about the job market in a specific city.

🔗 SimplyHired

• ⩥ Envato - Top digital assets and services

  Join millions and bring your ideas and projects to life with Envato - the world’s leading marketplace and community for creative assets and creative people.

🔗 Envato

• ⩥ Guru - Hire Freelancers Online and Find Freelance Jobs Online

  Guru is one of the best freelance websites to find & hire Freelancers online and get work done. Freelancers can also search jobs for freelance work and get hired.

🔗 Guru

• ⩥ Fiverr - Freelance Services Marketplace for Businesses

  Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories.

🔗 Fiverr

• ⩥ Hireable

  Your job is our job. Visit Hireable today and search for thousands of jobs in your area.

🔗 Hireable

📌 List of websites to find remote jobs:

• ⩥ FlexJobs: The Best Remote Jobs, Work from Home Jobs & More

  The #1 job search site for hand-screened flexible and remote jobs (work-from-home jobs) since 2007. Plus get resume, coaching, and career help. Join today!

🔗 FlexJobs

• ⩥ Remote Jobs

  Looking for a remote job as a developer, customer service rep, recruiter, designer, or sales professional? Browse openings in those categories and more below. We hand curate this list to showcase the best remote job opportunities in the most recruited job categories. Find a remote job here to launch your work anywhere career.

🔗 Remote Jobs

• ⩥ JustRemote

  Discover Remote Jobs from around the world. Give up the commute, work remotely and do what you love, daily, from anywhere. Find your perfect remote development, design, sales, or marketing job today.

🔗 JustRemote

• ⩥ We Work Remotely

  We Work Remotely is the largest remote work community in the world. With over 3M visitors, WWR is the number one destination to find and list incredible remote jobs.

🔗 We Work Remotely

• ⩥ RemoteOk

  Remote Jobs in Programming, Design, Sales, and more #OpenSalaries in August 2022 Looking for a remote job? Remote OK® is the #1 Remote Job Board and has 50,927+ remote jobs as a Developer, Designer, Copywriter, Customer Support Rep, Sales Professional, Project Manager, and more!

🔗 RemoteOk

• ⩥ Jobspresso

  Jobspresso is the easiest way to find high-quality remote jobs in tech, marketing, customer support, and more. 100% of our jobs are hand-picked, manually reviewed, and expertly curated.

🔗 Jobspresso

• ⩥ EU REMOTE JOBS

  Remote jobs in Europe, the Middle East & Africa time zones. With the best remote companies in the world

🔗 EU REMOTE JOBS

• ⩥ RemoteHub

  Find jobs on RemoteHub, the global workplace, and the professional community.

🔗 RemoteHub

• ⩥ 6nomads for Engineers

  Find a full-time remote job in a tech company.

🔗 [6nomads(6nomads.com)

🏞 Photos:

• ⩥ Unsplash

  Beautiful, free images and photos that you can download and use for any project. Better than any royalty-free or stock photos.

🔗 Unsplash

• ⩥ Pixabay

  Find your perfect free image or video to download and use for anything. ✓ Free for commercial use ✓ No attribution required ✓ High-quality images.

🔗 Pixabay

• ⩥ Pexels

  Free stock photos & videos you can use everywhere. Browse millions of high-quality royalty-free stock images & copyright-free pictures. No attribution is required.

🔗 Pexels

🌈 Illustrations:

• ⩥ unDraw

  The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products, and applications with your color, for free.

🔗 unDraw

• ⩥ DrawKit - Beautiful vector illustrations

  Free and premium vector SVG illustrations for you to use on your next project, no attribution required! Vector illustrations, packs, icons, and more.

🔗 DrawKit

• ⩥ Ouch

  If you're like most designers and marketers, you search for illustrations in Google Images or on some stock image website. With us, you get trendier, more professional, and better-matching illustrations that enhance your projects and bring visual harmony into the world.

🔗 Ouch

• ⩥ IRA Design by Creative Tim

  Build your amazing illustrations.

🔗 IRA Design

• ⩥ Interfacer

  300+ free design resources. Interfacer is a collection of high-quality free Design Resources created by the most talented and awesome people on the Internet. You can use all of them in commercial projects.

🔗 Interfacer

• ⩥ Blush: Illustrations for everyone

  Blush makes it easy to add free illustrations to your designs. Play with fully customizable graphics made by artists across the globe.

🔗 Blush

🔠 Icons:

• ⩥ Font Awesome

  Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. The world’s most popular and easiest-to-use icon set just got an upgrade. More icons. More styles. More Options.

🔗 Font Awesome

• ⩥ Flaticon

  Free Icons and Stickers - Millions of resources to download Download Free Icons and Stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD, and CSS formats

🔗 Flaticon

• ⩥ ICONS8

  Download design elements for free: icons, photos, vector illustrations, and music for your videos. All the assets made by designers → consistent quality ⚡️

🔗 ICONS8

• ⩥ Material Symbols and Icons - Google Fonts

  Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

🔗 Material Icons

• ⩥ iconmonstr

  Free simple icons for your next project

🔗 iconmonstr

✍️ Fonts:

• ⩥ Google Fonts

  Making the web more beautiful, fast, and open through great typography

🔗 Google Fonts

• ⩥ FontSpace

  Free downloads of legally licensed fonts that are perfect for your design projects. The best place in the universe to search for amazing fonts.

🔗 fontspace.com

• ⩥ 1001 Fonts ❤ Free Fonts Baby!

  39509 free fonts in 21894 families · Free licenses for commercial use · Direct font downloads · Mac · Windows · Linux

🔗 1001 Fonts

• ⩥ Font Squirrel

  Free Fonts! Legit Free & Quality » Font Squirrel Handpicked free fonts for graphic designers with commercial-use licenses.

🔗 Font Squirrel

▶ Youtube Channels:

• ⩥ Traversy Media

  Traversy Media features the best online web development and programming tutorials for all of the latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python, and PHP

🔗 Traversy Media

• ⩥ FreeCodeCamp

  freeCodeCamp is a nonprofit community that helps millions of people learn to code 100% for free helping thousands of people find their first coding job

🔗 FreeCodeCamp

• ⩥ The Net Ninja

  Blackbelt your web development skills. Over 1000 free programming tutorials about:

• Modern JavaScript (beginner to advanced)

• Node.js
• React
• Vue.js
• Firebase
• MongoDB
• HTML & CSS
• PHP & MySQL
• Laravel
• React Native
• Flutter ...And many more topics as well :)

🔗 The Net Ninja

• ⩥ Google Chrome Developers - Making the web more awesome.

🔗 Google Chrome Developers

• ⩥ The New Boston

  Tons of sweet computer-related tutorials and some other awesome videos too!

🔗 The New Boston

• ⩥ Derek Banas

  I make tutorials based on your requests. I will cover any topic you can imagine.

🔗 Derek Banas

• ⩥ Academind

  There's always something to learn! We (Max & Manuel) create courses and tutorials that teach you everything related to web development. No matter if it's programming languages like JavaScript, runtimes like NodeJS, or popular frameworks like ReactJS, Angular, or VueJS (and much more!). We got you covered. :-)

🔗 Academind

• ⩥ Sonny Sangha

  I've been coding for over 10 years now. As a Full Stack developer, I've worked both with startups and large corporations to help build & scale their companies. Along the journey, I realized my passion existed for helping others excel and pursue their dreams as upcoming developers and if that’s not enough I have cloned most of the applications you have used in your life! 🌟

🔗 Sonny Sangha

• ⩥ Clever Programmer

  You can find awesome programming lessons here! Also, expect programming tips and tricks that will take your coding skills to the next level.

🔗 Clever Programmer

🎙 Podcasts:

• ⩥ Syntax

  Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

🔗 Syntax

• ⩥ Fullstack radio

  A podcast for developers interested in building great software products. Hosted by Adam Wathan.

🔗 Fullstack radio

• ⩥ The Changelog

  Conversations with the hackers, leaders, and innovators of software development hosted by Adam Stacoviak and Jerod Santo.

🔗 The Changelog

• ⩥ The Laracasts Snippet

  The Laracasts snippet, each episode, offers a single thought on some aspect of web development.

🔗 The Laracasts Snippet

• ⩥ Front End Happy Hour

  A software engineering podcast featuring a panel of Software Engineers from Netflix, Twitch, & Atlassian talking over drinks about Frontend, JavaScript, and career development.

🔗 Front End Happy Hour

• ⩥ JavaScript Jabber Archives

  A weekly discussion by top-end JavaScript developers on the technology and skills needed to level up on your JavaScript journey.

🔗 JavaScript Jabber Archives

• ⩥ Commit Your Code!

  Commit Your Code motivates and inspires developers of all levels to reach their goals in tech. We will be sharing stories and interviewing developers that have gone through this and made it to their dream jobs!

🔗 Commit Your Code!

• ⩥ Shop Talk

  A weekly podcast about just building websites from Dave Rupert and Chris Coyier.

🔗 Shop Talk

• ⩥ Ladybug Podcast

  We started the Ladybug Podcast as a few ladies Twitter acquaintances looking to add our voices to the male-dominated tech podcast space. 🔗 Ladybug Podcast

• ⩥ CodePen Radio

  The CodePen team talks about the ins and outs of running a web software business.

🔗 CodePen Radio

• ⩥ JAMStack Radio

  A show all about the JAMstack, a new way to build fast and secure apps or websites.

🔗 JAMStack Radio

• ⩥ Modern web

  Modern Web is a podcast that explores next-generation frameworks, standards, and techniques. Visit modern-web.org for more.

🔗 Modern web

🚀 Code Editors:

• ⩥ Visual Studio Code [VS Code]

  Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

🔗 VS Code

• ⩥ CSublime Text

  Sublime Text is a sophisticated text editor for code, markup, and prose. You'll love the slick user interface, extraordinary features, and amazing performance.

🔗 Sublime Text

• ⩥ Atom

  At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

🔗 Atom

• ⩥ Brackets

  Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like getting presents all year long.

🔗 Brackets

• ⩥ Vim

  Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X

🔗 Vim

🎨 Color Palettes:

Coolors - The super fast color palette generator!

Generate or browse beautiful color combinations for your designs.

🔗 coolors.co

• ⩥ Color Hunt

  Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

🔗 colorhunt.co

• ⩥ Paletton - The Color Scheme Designer

In love with colors, since 2002. A designer tool for creating color combinations that work together well. Formerly known as Color Scheme Designer. Use the color wheel to create great color palettes.

🔗 Paletton

• ⩥ Color-Hex

  Color-hex gives information about colors including color models (RGB, HSL, HSV, and CMYK), Triadic colors, monochromatic colors, and analogous colors calculated on the color page. Color-hex.com also generates a simple CSS code for the selected color.

🔗 Color Hex

• ⩥ ColorSpace

  Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients, and much more! Your space for everything that has to do with color!

🔗 ColorSpace

❇ UI Inspiration:

• ⩥ UI Garage - Specific UI Design inspiration & Patterns for your design.

  Daily UI inspiration & patterns for designers, and developers to find inspiration, tools, and the best resources for your project.

🔗UI Garage

• ⩥ Collect UI

  Daily inspiration is collected from the daily UI archive and beyond. Based on Dribbble shots, hand-picked, updated daily.

🔗 Collect UI

• ⩥ Screenlane

  Only the best mobile and web UI design inspiration, right in your inbox

🔗 Screenlane

📔 Docs:

• ⩥ W3Schools Free Online Web Tutorials

  W3Schools offers free online tutorials, references, and exercises in all the major languages on the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

🔗 W3schools

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

🔗 Developer Mozilla

• ⩥ DevDocs

  Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app including HTML, CSS, JavaScript, PHP, Ruby, Python, Go, C, C++, and many more.

🔗 DevDocs

• ⩥ W3docs

  HTML CSS JavaScript jQuery AJAX XML SQL Tutorials References Examples

🔗 W3docs

💫 Animation Libraries:

• ⩥ CSShake

  Some CSS classes to move your DOM! Easy-to-use classes that will add different kinds of shakes to each part of your site.

🔗 CSShake

• ⩥ Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. 🔗 Animate.css

• ⩥ AnimeJS

  AnimeJS (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects.

🔗 AnimeJS

• ⩥ GreenSock (GSAP)

  Professional-grade JavaScript animation for the modern web

🔗 GreenSock (GSAP)

• ⩥ Magic Animations

  Magic CSS is a set of simple animations to include in your web or app projects.

🔗 Magic Animations

• ⩥ Hover CSS

  A collection of CSS3-powered hover effects to be applied to links, buttons, logos, SVG, featured images, and so on. Easily apply to your elements, modify or just use them for inspiration. Available in CSS, Sass, and LESS.

🔗 Hover CSS

• ⩥ AniJS - A Library to Raise your Web Design without Coding

🔗 AniJS

• ⩥ Wicked CSS

  WickedCSS. For the ones looking to spice up their sites with some sweet animation effects. Find all you need here on the site and download the CSS file.

🔗 Wicked CSS

• ⩥ Tuesday - It's Tuesday A quirky CSS Animation Library.

🔗 Tuesday

• ⩥ Mo.js

  Fast. Silky smooth animations and effects for staggering user's experience. ; Retina Ready. Screen density-independent effects look good on any device. ; Simple.

🔗 Mo.js

• ⩥ Bounce.js

  Bounce.js is a tool and JS library for generating beautiful CSS3-powered keyframe animations. The tool on bouncejs.com allows you to generate static keyframes that can be used without any extra JavaScript, but if you'd like your application to generate these on the fly, you can use the Bounce.js library.

🔗 Bounce.js

📊 Charts / Data Visualization:

• ⩥ Chart.js

  Simple, clean, and engaging HTML5-based JavaScript charts. Chart.js is an easy way to include animated, interactive graphs on your website for free.

🔗 Chart.js

• ⩥ D3.js

  D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

🔗 https://d3js.org/

• ⩥ 📊 three.js

  Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL

🔗 https://threejs.org/

⚙ Chrome Extensions:

• ⩥ Web Developer

  The Web Developer extension adds a toolbar button to the browser with various web developer tools. This is the official port of the Web Developer extension for Firefox.

🔗 Web Developer

• ⩥ CSSViewer

  CSSViewer is a simple CSS properties viewer originally made by Nicolas Huon as a Firefox add-on (2006-2008).

🔗 CSSViewer

• ⩥ Wappalyzer

  Find out the technology stack of any website. Create lists of websites that use certain technologies, with company and contact details. Use our tools for lead generation, market analysis, and competitor research.

🔗 Wappalyzer

• ⩥ JSONView

  JSONView · Pretty-prints JSON instead of prompting to download it or rendering it as text. · Collapsible array and object sections for easy navigation.

🔗 JSONView

• ⩥ Lorem Ipsum Generator

  The Lorem Ipsum Generator quickly delivers default text to complement your amazing design. The default settings are optimized to be used right after installation, but you can easily customize a few settings to get the perfect text for your taste. Each sentence is randomly generated to simulate real text.

🔗 Lorem Ipsum Generator

⚡ Website Optimization Tools:

• ⩥ Google PageSpeed Insights - Make your web pages fast on all devices ;

🔗 Google PageSpeed Insights

• ⩥ GTmetrix

  GTmetrix was developed by Carbon60 as a tool for customers to easily test the performance of their webpages

🔗 GTmetrix

• ⩥ WebPageTest

  Test. Optimize. Repeat! Instantly test your site’s speed, usability, and resilience in real browsers, devices, and locations around the world.

🔗 WebPageTest

• ⩥ Yslow

  YSlow is an open-source tool that analyzes your website and gives you suggestions to improve its performance.

🔗 Yslow

🏟 Code Playground

• ⩥ CodePen

  CodePen is a playground for the front-end side of the web. It’s all about inspiration, education, and sharing. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding. CodePen is great for building a reduced test case to demonstrate and figure out a bug.

🔗 codepen.io

• ⩥ CSSDesk

  CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. There are line numbers and syntax highlighting appears in the text box as you type. One of the greatest things is that it allows users to share their code with others as well.

🔗 cssdeck.com

• ⩥ Google’s Code Playground

  Google’s Code Playground is a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box

🔗 developers.google.com/oauthplayground

• ⩥ JS Bin

  It provides an environment to build apps and assists to test the snippets of HTML and CSS. It allows you to edit the code and also you can also debug the code if any error you find. Once you finalized the code you may send it to a peer for review.

🔗 jsbin.com

• ⩥ JSFiddle

  jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow, Vanilla). Also, if there is, you can add a complementary framework like jQuery UI or MooTools. A great feature is the ability to save & share the code created with a unique URL generated. Optionally, jsFiddle has an embedding feature too. It is an almost perfect platform for trying & sharing your JavaScript code without the need for a website.

🔗 jsfiddle.net

• ⩥ Dabblet

  Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites, and share it with others. It currently only supports modern versions of Chrome, Safari, and Firefox. All posted code belongs to the poster and no license is enforced. Dabblet itself is open-source software and is distributed under an NPOSL-3.0 license.

🔗 dabblet.com

• ⩥ Editr

  Editr is an HTML, CSS, and JavaScript playground that you can host on your server. It is based on ACE Editor. It is super easy to set up. It supports multiple instances on one page. Configurations are available via JS object or HTML attributes. Editr supports 3 layout views: horizontal, vertical, and single. The first two are for live editing. The third one is for presentation. Editr is licensed under MIT License.

🔗 lab.kasper.io/editr

• ⩥ Livewave

  Liveweave is an HTML5, CSS3 & JavaScript playground and a real-time editor for web designers and developers. It is a great tool to test, practice, and share your creations. It has resizable panels so that you can write your code (or weave, as we call it) the way you want. Liveweave also has built-in context-sensitive code-hinting for HTML5 and CSS3 tags/attributes that makes life a lot easier.

🔗 liveweave.com

• ⩥ Tech.io

  Techio is a collaborative platform to discover and share unique perspectives on any technology through open-source playgrounds. Empower others to learn by crafting hands-on tutorials on topics that matter to you.

🔗 tech.io

• ⩥ PlayCode

  PlayCode is a website where you can type in code and it immediately shows you what you programmed in a little extra tab.

🔗 playcode.io

• ⩥ CodeSandbox

  CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

🔗 codesandbox.io

• ⩥ StackBlitz

  StackBlitz is an online IDE where you can create Angular & React projects that are immediately online & shareable via link… in just one click. 😮 It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type.

🔗 stackblitz.com

• ⩥ Glitch

  With working example apps to remix, a code editor to modify them, and instant hosting and deployment - anybody can build a web app on Glitch.

🔗 glitch.com

Thank you for reading 😇

If you like this list and want to contribute then link is in below

• 💠Contribute to this repository

  Don't forget to star the repo 😉