Giter VIP home page Giter VIP logo

web-development-resources's Introduction

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

web-development-resources's People

Contributors

01xharshu avatar abn15 avatar aquibj0 avatar ashandilya avatar blazing-mike avatar chetan639 avatar devgupta-ikr avatar finallyobsolete avatar harshchandwani avatar heismanish avatar jamslylm avatar jhumeey avatar magbanum avatar malimirkec avatar mananmakwana avatar navansh avatar pixabuddy avatar prantikseal avatar rajspeaks avatar ramsesgarate avatar ritika-pandey01 avatar ronentgreat avatar sambatlim avatar sanket9918 avatar saurav50 avatar shubham976 avatar siddharth-rai-06 avatar sumansourabh14 avatar susmita-dey avatar thebestninja avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

web-development-resources's Issues

Addition : Issue templates πŸ› 

What i am suggesting to add ?

I am suggesting to add Issue Templates to the repository, it can be as many categories as needed - primary categories of issues are mostly : bugs, docs, general feature and so on.

Why to add it ?

Adding an issue Template allows you to organize the issues made by folks in a much better way.

  • We can know if someone wants to add a feature.
  • We can know if someone wants to write a test or maybe fix something in the website
  • Here's a general idea :

image

image

Can i work on it ?

Yes, i will be glad to help an Opensource project grow more !

Add respective Links to Code Editor section in Readme file

Code Editor section contains a lot of code editor list but they are not embedded links.
New comers may find it tough to search externally for those.
Will add the official page link to each item.

Kindly assign me under HACKTOBERFEST :)

Add playgrounds to the table of contents

Hello, add some playgrounds to the resources, however, I forgot to add it to the table of contents, we could leave it as an issue and add the labels first-timers-only and good-first-issue.

Greetings.

Contribute

Hello, I would like to know how to collaborate in this project, I have two resources to add, one is a remote work page and the other is a free hosting

Broken link at the end

The link at the end of the markdown file redirects to a 404 error

I'm pretty sure it should be "Fueler.io" - i can make the contribution

Develop a website

Develop a website to showcase all these amazing resources based on different categories.

Need Help

I need help to build a website like this. Any one any idea?

Add new resource section

I'd like to add a new resource section, Playgrounds, which allows you to write code, run it, and share it with others. I think it is a good resource that every developer should have.

I have a list of 5 that I always use, I would like you to assign me this problem to add them.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.