web-development.md

Web Development

IMPORTANT

If you are completely new to web development, DONOT proceed ahead without visiting these links:

Roadmap to Web Development:

• kamranahmedse/developer-roadmap

---

Table of Contents

• Table of Contents
  • Offline Documentation
  • Command Line
  • Git
  • Programming Languages
    • Front-End Programming Languages
    • Back-End Programming Languages
  • Web Frameworks
    • Front-End Web Frameworks
    • Back-End Web Frameworks
  • Static Site Generators
  • DataBases
  • Text Editors and IDEs
  • Regular Expressions
  • Extra Resources

---

Offline Documentation:

• Devdocs.io
• readthedocs.org
• Zeal - Linux/Windows
• Velocity - Windows only
• Dash - Mac/iOS

---

Command Line:

• Sites/
  • jlevy/the-art-of-command-line
  • SS64 (Command line reference - Database and OS scripting)

---

Git:

• Sites/

  • git - the simple guide
  • Getting Git Right - Git Cheat Sheet
  • freeCodeCamp/how-to-contribute-to-open-source
  • Git Reference

• GitHub/

  • arslanbilal/git-cheat-sheet
  • git-tips/tips
  • Good First Issues - opportunities for contributing to open projects on GitHub

---

Programming Languages:

Front-End Programming Languages

• HTML+CSS+JavaScript:

  • Sites/
    • Mozilla Developer Network(MDN) Docs(Highly Recommended) - everything you need to learn to develop web applications. Probably the only resource you'll need to learn web development. It also contains well organized guides to Django Web Framework, Express and Node.js.
    • freeCodeCamp.org(Highly Recommended) - an excellent open source resource for learning web development in an interactive way. Recommended by MDN and also covers React and Redux, Node, Express, D3.js, Bootstrap, Sass, jQuery, JSON and MongoDB.
    • The Odin Project - another excellent open source resource similar to the freeCodeCamp project. Covers Ruby, RubyOnRails.
    • w3schools - While this site is pretty decent for quick syntax lookup and reference, I DO NOT recommend this over MDN to learn how to program. Before choosing w3schools over above resources, please go through this hackernews thread and this site by the mods of r/learnprogramming. This site also has references to Ajax, Node, PHP, SQL, XML, Java, Python, ASP, Angular, jQuery, Bootstrap, C++ and Raspberry Pi.
    • Deep Dive Into Modern Web Development - University of Helsinki - React, Node, Express, GraphQL
    • HTML Dog - HTML, CSS, JavaScript
    • Scrimba - Interactive way to learn and test HTML, CSS and JavaScript code and lessons on React, Vue and Angular frameworks.
    • SoloLean - Learn HTML, CSS, JavaScript, PHP, Ruby, SQL, jQuery, Java, C, C++, C#, Swift on the Web or their Mobile App Google Play | App Store
    • LambdaSchool Free Online Web Mini Bootcamp - HTML, CSS, JS
    • Can I use... Support tables for HTML5, CSS3, etc
    • CSS-Tricks
    • CodePen - Build, Test, and Discover Front-end Code
    • CodeSandbox - Online Code Editor Tailored for Web Application Development
    • Scrimba - Learn to Code with Interactive Tutorials

• JavaScript:

  • Sites/

    • The Modern JavaScript Tutorial
    • Eloquent JavaScript
    • JavaScript30(GitHub - wesbos/JavaScript30)

  • GitHub/

    • javascript-tutorial/en.javascript.info (Website - The Modern JavaScript Tutorial)
    • You Don't Know JS by Kyle Simpson
    • 30-seconds/30-seconds-of-code
    • leonardomso/33-js-concepts
    • trekhleb/javascript-algorithms
    • airbnb/javascript
    • mbeaudru/modern-js-cheatsheet
    • sorrycc/awesome-javascript
    • trekhleb/javascript-algorithms

  • YouTube/

    • The Coding Train(Website)

• HTML/CSS:

  • Sites/

    • What The Flexbox - a set of 20 free videos to learn CSS flexbox layout by Wes Bos. Also check his command line power user videos.
    • CSSGrid.io - a set of 20 free videos to learn CSS grid layout by Wes Bos.
    • CSS-TRICKS
    • Grid by Example.
    • HTML periodic table
    • All The Tags

  • GitHub/

    • 30-seconds/30-seconds-of-css

  • YouTube/

    • Traversy Media (Website)
    • Kevin Powell

Back-End Programming Languages

• Python:

  • Sites/

    • Official Python Docs - the official and easy to understand documentation of the Python programming language.
    • The Hitchhiker's Guide to Python - The best practice to installation, configuration and usage of Python on a daily basis.
    • Automate the Boring Stuff with Python by Al Sweigart. His other free to read online books- Invent Your Own Computer Games With Python, Making Games With Python and PyGame and Cracking Codes With Python.
    • Awesome Python (GitHub - vinta/awesome-python) - A curated list of awesome Python frameworks, packages, software and resources.
    • Python Wiki
    • Python for Non-Programmers
    • Python for Programmers
    • Python Tutor - Visualize Python, Java, C, C++, JavaScript, TypeScript, and Ruby code execution.
    • Dive Into Python 3 by Mark Pilgrim.
    • pythonprogramming.net (YouTube - sentdex)
    • How To Think Like A Computer Scientist - a free online book recommended by MIT OpenCourseWare
    • RealPython
    • PythonDataScienceHandbook (GitHub - jakevdp/PythonDataScienceHandbook)
    • Python Discord
    • Chris Albon's Python Data Science Notes

  • GitHub/

    • karan/Projects
    • keon/algorithms
    • TheAlgorithms/Python
    • vinta/awesome-python (Website - Awesome Python)
    • satwikkansal/wtfpython
    • mahmoud/awesome-python-applications
    • geekcomputers/Python

  • YouTube/

    • Corey Schafer (GitHub)
    • sentdex (Website)

• Ruby:

  • Sites/
    • Ruby Docs
    • The Ruby Style Guide

• PHP:

  • Sites/
    • Official PHP Manuals
    • PHP Pastebin - Collection of PHP links

---

Web Frameworks:

Front-End Web Frameworks:

• Bootstrap:

  • Sites/
    • Bootstrap Documentation

• React:

  • Sites/
    • Official React Docs
    • Official Tutorial for building a small game using React
    • Overreacted - A blog by Dan Abramov

• Redux:

  • Sites/
    • Official Redux Tutorial

• Angular:

  • Sites/
    • Angular Docs

• Vue:

  • Sites/
    • Vue Docs

Back-End Web Frameworks:

• Django(Python):

  • Sites/

    • Official Django Tutorial
    • Django Girls
    • [Django Tutorial by sentdex](https://pythonprogramming.net/)
    • Django cheatsheet

  • YouTube/

    • Django Blog Tutorial by Corey Schafer

• Flask(Python):

  • Sites/
    • Official Flask Tutorial
    • The Flask Mega Tutorial
  • YouTube/
    • Flask Blog Tutorial by Corey Schafer

• NodeJS(JavaScript):

  • Sites/
    • Node.js Docs
    • Node.js resources- Stack Overflow

• RubyOnRails(Ruby):

  • Sites/
    • Offcial RubyOnRails Guides
    • Ruby on Rails Tutorial (Rails 5) by Michael Hartl

---

Static Site Generators:

• Sites/

  • StaticGen - Top Open Source Static Site Generators
  • headlessCMS - Top Content Management Systems for JAMstack sites

---

DataBases:

• SQL:

  • Sites/
    • SQL Tutorial
    • SQLBolt
    • SQLZOO

• PostgreSQL:

  • Sites/
    • PostgreSQL Documentation

---

Text Editors and IDEs:

See text-editors-and-ides.md

---

Regular Expressions:

• Sites/

  • pythex.org - a quick way to test your regular expressions.
  • Regex101 - Online Regex Tester and Debugger.
  • Regex Crossword

• GitHub/

  • ziishaned/learn-regex

---

Extra Resources:

• Sites/

  • Learn-Anything
  • Tutorials | DigitalOcean
  • Learn X in Y Minutes - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
  • Move the Web Forward (GitHub - h5bp/movethewebforward)
  • Lorem Ipsum
  • Lorem Picsum
  • Rosetta Code
  • JSONPlaceholder - Fake online REST API for developers
  • JAMstack | JavaScript, APIs, and Markup
  • SWAPI - The Star Wars API
  • GeeksforGeeks - A computer science portal for geeks

• GitHub/

  • bmorelli25/Become-A-Full-Stack-Web-Developer
  • sindresorhus/awesome
  • mtdvio/every-programmer-should-know
  • danistefanovic/build-your-own-x
  • jnv/lists

• YouTube/