Fueler Io Web Development Resources Save

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

Project README

Hero Image

Table of Contents

Free Hosting:

Learning Platforms:

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:

Freelancing platforms:

HTML EMAIL Resources

  1. Cerberus Email https://www.cerberusemail.com

  2. Campaign Monitor https://www.campaignmonitor.com/dev-resources/guides/coding-html-emails

  3. MJML Article https://mjml.io/getting-started/1

  4. My Github Repo for HTML EMAIL https://github.com/Siddharth-Rai-06/HTML-EMAIL-Template.git

List of websites to find remote jobs:

Free Quality Photos:

Free Illustration Design:

3D Illustrations:

Web Dev Library

Web Dev Tutorials

Icons

Fonts:

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/

  9. Design inspiration https://dribbble.com/

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

  6. React Developer Tools https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

  7. VisBug https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc/related

  8. ColorZilla https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en-US

BONUS CSS RESOURCES

  1. CSS clip-path maker https://bennettfeely.com/clippy/

  2. CSS Easing functions https://easings.net/

  3. CSS for People Who Hate CSS https://paulcpederson.com/articles/css-for-people-who-hate-css/

  4. CSS Reference https://tympanus.net/codrops/css_reference/

  5. 30 CSS Selectors You Must Memorize https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

  6. CSS Diner (Awesome way to learn CSS Selectors) https://flukeout.github.io/

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. JavaScript Design Patterns https://www.patterns.dev/posts/classic-design-patterns/

  54. DOM Manipulation Reference https://youmightnotneedjquery.com/

  55. Javascript Questions https://github.com/lydiahallie/javascript-questions

  56. Clean Code JavaScript https://github.com/ryanmcdermott/clean-code-javascript

Resources for React

  1. Beta React JS https://beta.reactjs.org/learn

  2. josh w comeau https://www.joshwcomeau.com/

  3. Routing v6 https://reactrouter.com/en/v6.3.0/getting-started/overview

  4. Javatpoint https://www.javatpoint.com/reactjs-tutorial

  5. Freecodecamp https://www.freecodecamp.org/news/react-tutorial-build-a-project/

  6. Guru99 https://www.guru99.com/reactjs-tutorial.html

  7. Ibaslogic https://ibaslogic.com/react-tutorial-for-beginners/

  8. Geeks For Geeks https://www.geeksforgeeks.org/reactjs-tutorials/

Helpful Chrome Extensions

  1. Responsive Web Design Tester :Live Link
  2. Full Page Screen Capture :Live Link
  3. Light House :Live Link
  4. Css Peeper :Live Link
  5. ColorPick Eyedropper :Live Link
  6. What Font :Live Link
  7. Fonts Ninja :Live Link
  8. Window Resizer :Live Link
  9. BrowserStack :Live Link
  10. Lorem Ipsum Generator :Live Link
  11. Wappalyzer :Live Link
  12. What Font :Live Link

Free Domain

Coding Challenges:

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

HTML Forms

  1. #Web3Forms https://web3forms.com/

Fueler.io

Fueler: Home for Generalists

Open Source Agenda is not affiliated with "Fueler Io Web Development Resources" Project. README Source: Fueler-io/Web-Development-Resources
Stars
96
Open Issues
11
Last Commit
11 months ago
Repository
Fueler-io/Web-Development-Resources
Homepage
http://fueler.io
Tags
Hacktoberfest Hacktoberfest Accepted Hacktoberfest Starter Webdesign Webdev Webdevelopment

Open Source Agenda Badge

Open Source Agenda Rating
Submit Review Review Your Favorite Project
Submit Resource Articles, Courses, Videos
Submit Article Submit a post to our blog

From the blog

Dec 11, 2022

How to Choose Which Programming Language to Learn First?

From the blog

Dec 11, 2022

How to Choose Which Programming Language to Learn First?