Skip to content

Latest commit

 

History

History
754 lines (578 loc) · 20.7 KB

README.md

File metadata and controls

754 lines (578 loc) · 20.7 KB
Raw

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:

List of websites to find remote jobs:

Free Quality Photos:

Free Illustration Design:

3D Illustrations:

Web Dev Library

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

Coding Challenges:

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

Fueler.io

Fueler: Home for Generalists