Web-Development-Resources icon indicating copy to clipboard operation
Web-Development-Resources copied to clipboard

verified publisher icon Fueler-io
→

Metadata

One and only place on the internet for all Web Development Resources.

Hero Image

Table of Contents

  • 👩🏻‍💻 Code Editor
  • 🛄 Coding Challenge Platforms
  • 👻 Credit
  • 🆎 Fonts
  • 🛒 Free Domain Name
  • 🎨 Free Illustration Design
  • 🆓 Free Hosting
  • 🛫 Freelancing Platforms
  • 📷 Free Quality Photos
  • 😎 Helpful Chrome Extensions
  • 🔼 Icons
  • 👨🏻‍🏫 Learning Platforms
  • 🎙️ Podcasts
  • 🏜️ Resources for CSS
  • 🈴 Resources for JavaScript
  • 🏢 Websites to find Remote Jobs
  • 📚 Web-Dev Library
  • ⛓️ YouTube Channels

Free Hosting:

Learning Platforms:

  • http://freecodecamp.org/
  • http://codecademy.com/
  • http://javascript30.com/
  • http://frontendmentor.io/
  • http://testautomationu.applitools.com/
  • http://coursera.org/
  • http://khanacademy.org/
  • http://sololearn.com/
  • http://codedamn.com/
  • https://frontendmasters.com/
  • https://w3schools.com/
  • https://htmldog.com/
  • https://www.traversymedia.com/
  • https://edx.org/
  • https://wornoffkeys.com/
  • https://webdevsimplified.com/
  • https://theodinproject.com/
  • https://fullstackopen.com/en/
  • https://tutorial.djangogirls.org/
  • https://www.educba.com/
  • https://openclassrooms.com/
  • https://www.programiz.com/
  • https://javascript.info/
  • https://www.geeksforgeeks.org/
  • https://programminghub.io/
  • https://www.tutorialspoint.com/
  • https://www.javatpoint.com/
  • https://www.guru99.com/
  • https://fullstackui.com/
  • https://www.tutorialsteacher.com/
  • https://www.fireship.io/
  • https://java5ript.com/
  • https://pluralsight.com/

Youtube Channels:

Podcasts:

Playgrounds:

Code Editors:

  • Apache Netbeans
  • Atom
  • Brackets
  • Bluefish
  • Codespaces
  • Emacs
  • Espresso
  • JetBrains WebStorm
  • Notepad++
  • Sublime Text
  • Vim
  • Visual Studio Code [VS Code]
  • Komodo editor

Coding Challenge Platforms:

  • http://codewars.com
  • http://topcoder.com
  • http://codingame.com
  • http://hackerrank.com
  • http://projecteuler.net
  • http://coderbyte.com
  • http://codechef.com
  • http://exercism.io
  • http://leetcode.com
  • http://spoj.com
  • https://codeforces.com
  • https://open.kattis.com
  • https://www.hackerearth.com
  • https://practice.geeksforgeeks.org/

Freelancing platforms:

  • http://toptal.com
  • http://upwork.com
  • http://freelancer.com
  • http://peopleperhour.com
  • http://simplyhired.com
  • http://envato.com
  • http://guru.com
  • http://fiverr.com
  • http://hireable.com
  • http://6nomads.com
  • https://www.indeed.com
  • https://www.monster.com
  • https://talent.hubstaff.com
  • https://www.truelancer.com

List of websites to find remote jobs:

  • http://flexjobs.com
  • http://remote.co/remote-jobs
  • http://justremote.co
  • http://weworkremotely.com
  • http://remoteok.io
  • http://jobspresso.co
  • http://europeremotely.com
  • http://wfh.io
  • https://hired.com/
  • https://bergamot.io/
  • https://arc.dev/
  • https://www.virtualvocations.com/
  • https://pangian.com/job-travel-remote/
  • https://remotive.io/
  • https://www.skipthedrive.com/
  • https://angel.co/jobs
  • https://yellowjobs.org

Free Quality Photos:

  • http://unsplash.com
  • http://pixabay.com
  • http://pexels.com
  • https://stocksnap.io
  • https://freephotos.cc
  • https://kaboompics.com
  • https://www.istockphoto.com/

Free Illustration Design:

  • http://undraw.co/illustrations
  • http://drawkit.io
  • http://icons8.com/ouch
  • http://iradesign.io
  • http://interfacer.xyz
  • http://blush.design
  • https://iconscout.com/illustration-pack/indian-doodle
  • https://openpeeps.com
  • https://app.streamlinehq.com/illustrations/milano
  • https://growwwkit.com/illustrations/phonies/
  • https://storyset.com/
  • https://www.pixeltrue.com/
  • https://www.manypixels.co/
  • https://www.humaaans.com/
  • https://isometric.online/

3D Illustrations:

  • http://isometriclove.com
  • http://handz.design
  • http://free3dicon.com
  • https://www.behance.net/rafalutinski
  • https://bamdesign.gumroad.com/l/bamillu
  • https://www.behance.net/gallery/110088245/Free-3D-Slam-Illustrations
  • https://3dicons.co
  • https://www.behance.net/gallery/111365565/THIS-IS-CHLOE
  • https://10clouds.com/valentine-illustrations
  • https://amritpaldesign.com/toy-faces
  • https://kukla-kit.wannathis.one/
  • https://minima.market/faticons-medicine
  • https://homies3d.com/
  • https://loops.wannathis.one/
  • https://www.artify.co/3d-lettering
  • https://humans.wannathis.one/
  • https://threedee.design/
  • https://superscene.pro/
  • https://www.shapefest.com/

Web Dev Library

Icons

  • http://fontawesome.com
  • http://flaticon.com
  • http://icons8.com
  • http://material.io/resources/icons
  • http://iconmonstr.com
  • https://akaricons.com/
  • https://thenounproject.com/
  • https://www.iconfinder.com/
  • https://remixicon.com/
  • https://heroicons.com/
  • https://friconix.com/
  • https://iconscout.com/
  • https://freeicons.io/
  • https://findicons.com/
  • https://feathericons.com
  • https://icons.getbootstrap.com
  • https://iconic.app/
  • https://ionic.io/ionicons/v4
  • https://www.fontisto.com/icons

Fonts:

  • http://fonts.google.com
  • http://fontspace.com
  • http://1001fonts.com
  • http://fontsquirrel.com
  • https://nerdfonts.com/
  • https://fonts.adobe.com
  • https://urbanfonts.com
  • https://dafont.com

Resources for CSS

  1. Color Hunt https://colorhunt.co

  2. Coolors https://coolors.co

  3. HTML color codes https://htmlcolorcodes.com

  4. UI Gradients https://uigradients.com/#Bupe

  5. Gradient generator https://cssgradient.io

  6. Encycolorpedia https://encycolorpedia.com

  7. WebFx https://webfx.com/web-design/color-picker/

  8. Radial Gradient https://css-gradient.com

  9. COLORS https://clrs.cc

  10. Flat UI colors 2 https://flatuicolors.com/

  11. Colormind http://colormind.io/

  12. Cssbuttons.io https://cssbuttons.io/

CODE SNIPPETS

  1. Web tools https://webcode.tools/css-generator

  2. Little snippets https://littlesnippets.net

  3. Enjoy CSS https://enjoycss.com

  4. CSS Tricks https://css-tricks.com/snippets/css/

  5. CSS Deck https://cssdeck.com

  6. W3 How to https://w3schools.com/howto/

  7. Snipplr https://snipplr.com

  8. Stack overflow https://stackoverflow.com/questions/tagged/css

  9. Codepen https://codepen.io/collection/DYpwPE

  10. Code my UI https://codemyui.com/

  11. React Cheatsheet https://devhints.io/react

DOCUMENTATION AND NOTES

  1. W3 Schools https://w3schools.com/css/

  2. MDN https://developer.mozilla.org/en-US/docs/Web/CSS

  3. DevDocs https://devdocs.io/css/

  4. Geeks for geeks https://geeksforgeeks.org/css-tutorials/

  5. Tutorials point https://tutorialspoint.com/css/index.html

  6. CSS Reference https://cssreference.io/

CSS GENERATORS

  1. CSS button creator https://cssbuttoncreator.com

  2. Blob Maker https://blobmaker.app

  3. Waves maker https://getwaves.io

  4. Enjoy CSS https://enjoycss.com

  5. Neumorphic UI https://neumorphism.io/#e0e0e0

  6. Glassmorphism Generator https://glassmorphism.com

  7. Keyframes https://keyframes.app

  8. Animista https://animista.net

  9. Fancy border https://9elements.github.io/fancy-border-radius/

  10. CSS Generators tool https://cssgenerator.org/

  11. CSS 3 maker https://css3maker.com

  12. CSS clip path maker https://bennettfeely.com/clippy/

  13. CSS shapes generator https://coveloping.com/tools/css-shapes-generator

  14. Pattern generator http://patternify.com

  15. Background image generator http://bg.siteorigin.com

  16. Box-Shadow Generator https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator

  17. Color Contrast Checker https://colourcontrast.cc/

  18. Color Palette AI Generator http://khroma.co/

  19. Shape Divider Generator https://www.shapedivider.app/

DESIGN INSPIRATION

  1. CSS design awards https://cssdesignawards.com

  2. Awwwards https://awwwards.com/websites/css3/

  3. CSS nectar https://cssnectar.com

  4. Design modo https://designmodo.com/css-website-designs/

  5. CSS winner https://csswinner.com

  6. Dark mode Inspiration https://www.darkmodedesign.com/

  7. Lookup Design https://lookup.design/

  8. Design Checklist https://www.checklist.design/

YOUTUBE TUTORIALS

  1. Free code camp https://youtube.com/watch?v=1Rs2ND1ryYc

  2. Traversy media https://youtube.com/watch?v=yfoY53QXEnI

  3. Coding artist https://youtube.com/channel/UC15exV5s79D_aYGADudlwpQ

  4. Edureka https://youtube.com/watch?v=3_9znKVNe5g

  5. Red Stapler https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg

GITHUB REPO

  1. Awesome CSS https://github.com/awesome-css-group/awesome-css

  2. 30 seconds of CSS https://github.com/30-seconds/30-seconds-of-css

  3. CSS Protips https://github.com/AllThingsSmitty/css-protips

  4. Awesome flexbox https://github.com/afonsopacifer/awesome-flexbox

  5. Understanding flexbox https://github.com/ohansemmanuel/Understanding-Flexbox

CHROME EXTENSIONS

  1. CSS Peeper https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en

  2. Pesticide https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/eipbgplchlidkojmppclhkechkhmlefi?hl=en

  3. Stylebot https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en

  4. Perfect Pixel https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

  5. Colorpick eyedropper https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en

Resources for JavaScript

  1. MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript

  2. W3 Schools https://w3schools.com/js/

  3. DevDocs https://devdocs.io/javascript/

  4. JavaScript Info https://javascript.info

  5. JavaScript Garden https://bonsaiden.github.io/JavaScript-Garden/?ref=java5cript.com

  6. Code Academy https://codecademy.com/learn/introduction-to-javascript

  7. Udemy https://udemy.com/course/the-complete-javascript-course/

  8. Coursera https://coursera.org/learn/javascript

  9. Plural Sight https://pluralsight.com/courses/quick-start-javascript-1-1870

  10. Scrimba https://scrimba.com/topic/javascript

  11. Geeks For Geeks https://geeksforgeeks.org/javascript-tutorial/

  12. Java Point https://javatpoint.com/javascript-tutorial

  13. Tutorial Points https://tutorialspoint.com/javascript/index.htm

  14. The Odin Project https://theodinproject.com/courses/javascript

  15. Learn JS https://www.learn-js.org/

  16. JavaScript Wikipedia https://en.wikibooks.org/wiki/JavaScript/Introduction

  17. JavaScript 30 https://javascript30.com

  18. JavaScript for Cats http://jsforcats.com

  19. Java5cript https://java5cript.com

  20. Scotch io https://scotch.io/tag/javascript

  21. JavaScript Mastery https://youtube.com/watch?v=g7T23Xzys-A

  22. Clever Programmer https://youtube.com/watch?v=Qqx_wzMmFeA

  23. Edureka https://youtube.com/watch?v=o1IaduQICO0

  24. Coursera https://youtube.com/watch?v=o1IaduQICO0

  25. Freecodecamp https://www.youtube.com/watch?v=PkZNo7MFNFg&ab_channel=freeCodeCamp.org

  26. Web Dev Simplified https://youtube.com/watch?v=YeFzkC2awTM&list=PLZlA0Gpn_vH9k5ju1yq9qCDqvtuTVgTr6

  27. Traversy Media https://youtube.com/watch?v=hdI2bqOjy3c&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX

  28. Edureka https://youtube.com/watch?v=IljVmcDDrOg

  29. Hitesh Choudhary https://youtube.com/watch?v=2md4HQNRqJA&list=PLRAV69dS1uWSxUIk5o3vQY2-_VKsOpXLD

  30. Simon Høiberg https://www.youtube.com/watch?v=yU0Gh9T7sq8&ab_channel=SimonH%C3%B8iberg

  31. Eloquent JS https://eloquentjavascript.net

  32. JS Design pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/

  33. The JavaScript Beginner's Handbook https://flaviocopes.com/page/javascript-handbook/

  34. Learn JavaScript with Ease https://pdfdrive.com/javascript-javascript-for-beginners-learn-javascript-programming-with-ease-in-half-the-time-everything-about-the-language-coding-programming-and-web-pages-you-need-to-know-e158299863.html

  35. Human JavaScript https://read.humanjavascript.com

  36. Modern JavaScript tutorials https://github.com/javascript-tutorial/en.javascript.info

  37. Awesome JS Learning https://github.com/micromata/awesome-javascript-learning

  38. JS by example https://github.com/bmkmanoj/js-by-examples

  39. 33 JS concepts https://github.com/leonardomso/33-js-concepts

  40. 30 seconds of code https://github.com/30-seconds/30-seconds-of-code

  41. 10 JS projects in 10 hours https://youtube.com/watch?v=dtKciwk_si4

  42. 15 JS projects https://youtube.com/watch?v=3PHXvlpOkf4

  43. Build 7 games using JS https://youtube.com/watch?v=lhNdUVh3qCc

  44. 50 projects in 50 days https://udemy.com/course/50-projects-50-days/

  45. JavaScript Projects for Beginners https://jsbeginners.com/javascript-projects-for-beginners/

  46. 30 days of JavaScript https://github.com/Asabeneh/30-Days-Of-JavaScript

  47. JavaScript The Good Parts https://andersonguelphjs.github.io/OReilly_JavaScript_The_Good_Parts_May_2008.pdf

  48. JavaScript Promises https://www.udacity.com/course/javascript-promises--ud898

  49. ES6 - JavaScript Improved https://www.udacity.com/course/es6-javascript-improved--ud356

  50. Clean Code for Typescript https://labs42io.github.io/clean-code-typescript/

  51. Clean Code for Javascript https://github.com/ryanmcdermott/clean-code-javascript

  52. Mastering JS https://masteringjs.io/

  53. New Resources are coming soon

Helpful Chrome Extensions

  1. Responsive Web Design Tester https://chrome.google.com/webstore/detail/responsive-web-design-tes/enhcpefphhaiikpobimgcakinhabgiib/related?utm_source=chrome-ntp-icon
  2. Full Page Screen Capture https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?utm_source=chrome-ntp-icon
  3. Light House https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?utm_source=chrome-ntp-icon
  4. Css Peeper https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?utm_source=chrome-ntp-icon
  5. ColorPick Eyedropper https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?utm_source=chrome-ntp-icon
  6. What Font https://chrome.google.com/webstore/detail/what-font-find-font/djgfpbegnihdgbngpmhjnlchgglngcdn?utm_source=chrome-ntp-icon
  7. Fonts Ninja https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh
  8. Window Resizer https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/
  9. BrowserStack https://chrome.google.com/webstore/detail/browserstack/nkihdmlheodkdfojglpcjjmioefjahjb
  10. Lorem Ipsum Generator https://chrome.google.com/webstore/detail/lorem-ipsum-generator-def/mcdcbjjoakogbcopinefncmkcamnfkdb
  11. Wappalyzer https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en
  12. What Font https://chrome.google.com/webstore/detail/what-font-find-font/djgfpbegnihdgbngpmhjnlchgglngcdn?utm_source=chrome-ntp-icon

Free Domain

  • https://www.freenom.com/en/index.html?lang=en

Coding Challenges:

  1. #100DaysOfCode https://www.100daysofcode.com/
  2. #JavaScript30 https://javascript30.com/
  3. #100DaysCSS https://100dayscss.com/

Fueler.io

Fueler: Home for Generalists

← Metadata

95
Stars
61
Forks
Watchers

Owner

verified publisher icon Fueler-io

Metadata

One and only place on the internet for all Web Development Resources.

Back