Web Development

Note: This file only contains resources that are NOT in the ./knowledge-repositories file.

If you are completely new to web development, I HIGHLY RECOMMEND you visit these links first:

Roadmap to Web Development:

• kamranahmedse/developer-roadmap

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
• Data Visualization
• Static Site Generators
• DataBases
• Text Editors and IDEs
• Regular Expressions and Algorithms
• Developer Tools
• Other Resources

Offline Documentation:

• Velocity - Windows only

Command Line:

• Sites/
  • SS64 (Command line reference - Database and OS scripting)

Git:

• Sites/

  • Atlassian Git Tutorial - Git Tutorials and Training.
  • Git Cheat Sheet
  • GitKraken Git Tutorials

• GitHub/

  • Good First Issues - opportunities for contributing to open projects on GitHub

• Git Clients/

  • Sourcetree - Free Git GUI for Mac and Windows closed-source
  • Sublime Merge - Git Client, done Sublime freemium
  • GitKraken freemium

Programming Languages:

Front-End Programming Languages

• HTML+CSS+JavaScript:

  • 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
  • Box-shadow generator - This tool lets you construct CSS box-shadow effects, to add box shadow effects to your CSS objects.
  • Codrops - Web Dev and Design News.

• JavaScript:

  • The Modern JavaScript Tutorial
  • Eloquent JavaScript
  • JavaScript30(GitHub - wesbos/JavaScript30)
  • JavaScript in 14 minutes
  • William Vincent's JavaScript Guide
  • Web Dev Simplified Blog - Kyle Cook.
  • BabelJS ES2015 Guide
  • Rodrigo Pombo's Blog

• HTML/CSS:

  • HTML Reference - A free guide to HTML.
  • CSS Reference - A free visual guide to CSS.
  • Marksheet - A free HTML and CSS Tutorial.
  • 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
  • Mozilla Grid Playground - Learn about CSS Grid Layout and the Firefox DevTools layout panel.
  • Grid by Example.
  • Flexbox Froggy - a simple 24 level game learn CSS flexbox.
  • Flexbox Defense - Learn CSS Flexbox by playing a tower defense game.
  • Grid Garden - Learn CSS Grid Layout by playing 28 different levels of Grid Garden.
  • HTML periodic table
  • All The Tags
  • STRML
  • Web Design in 4 minutes - Learn the basics of web design in 4 minutes with this interactive tutorial
  • CSS Gradient - free tool that lets you create a gradient background for websites and technical articles.
  • CSS3 Cheat Sheet

Back-End Programming Languages

• Python:

  • Official Python Docs - the official and easy to understand documentation of the Python programming language.
  • Python Wiki
  • Python for Non-Programmers
  • Python for Programmers
  • Python Tutor - Visualize Python, Java, C, C++, JavaScript, TypeScript, and Ruby code execution.
  • pythonprogramming.net
  • How To Think Like A Computer Scientist - a free online book recommended by MIT OpenCourseWare
  • RealPython (GitHub: realpython/materials)
  • Google's Python Class
  • Python Discord
  • Full Stack Python
  • William Vincent's Blog
  • Ned Batchelder's Blog
  • Trey Hunner's Blog
  • Python Developer’s Guide - A comprehensive resource for contributing to Python.

• Ruby:

  • Ruby Docs
  • The Ruby Style Guide

• PHP:

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

Web Frameworks:

Front-End Web Frameworks:

• Bootstrap(CSS):

  • Bootstrap Documentation

• Bulma(CSS):

  • Bulma Documentation

• React(JavaScript):

  • Official React Docs
  • Official Tutorial for building a small game using React
  • React Tutorial by MDN
  • Overreacted - Dan Abramov, Creator of ReduxJS.
  • Josh W. Comeau - Josh W. Comeau, Developer @GatsbyJS.

• Redux(JavaScript):

  • Official Redux Tutorial

• Angular(JavaScript):

  • Angular Docs

• Vue(JavaScript):

  • Vue Docs
  • Vue Tutorial by MDN
  • VueSchool - Learn Vue.js from core-team members and industry experts.

Back-End Web Frameworks:

• Django(Python):

  • Sites/

    • Official Django Tutorial
    • Django Tutorial by MDN - a library catalog website in Django.
    • Django Girls
    • Django Tutorial by sentdex.
    • Learn Django by William Vincent.

  • 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/ExpressJS(JavaScript):

  • Node.js Docs
  • NodeJs Tutorial from MDN - a library catalog website in NodeJS/ExpressJS.
  • Node.js resources- Stack Overflow
  • ExpressJS Documentation

• Ember(JavaScript):

  • Ember Tutorial by MDN

• RubyOnRails(Ruby):

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

See Also HotFrameworks

Data Visualization

• D3js/
  • ObservableHQ D3.js Tutorial - Mike Bostock, Creator of D3.js.

Static Site Generators:

• Sites/
  • StaticGen - Top Open Source Static Site Generators.
  • headlessCMS - Top Content Management Systems for JAMstack sites.
  • NetlifyCMS - Open source content management for your Git workflow.
  • Forestry - A static CMS that commits.
  • GatsbyGuides - Build blazing fast web applications with Gatsby 101.

DataBases:

• SQL:

  • Sites/
    • SQL Tutorial
    • SQLBolt
    • SQLZOO

• PostgreSQL:

  • Sites/
    • PostgreSQL Documentation

• SQLite:

  • Sites/
    • SQLite Docs

Text Editors and IDEs:

• Sublime Text

• Interactive Online Code Editors:

  • repl.it
  • Scrimba - HTML, CSS, JavaScript.
  • JSFiddle - HTML, CSS, JavaScript, CoffeeScript.
  • CodePen - HTML, CSS, JavaScript.
  • SoloLearn - HTML, CSS, JavaScript.

Regular Expressions and Algorithms:

• Sites/
  • pythex.org - a quick way to test your regular expressions.
  • Regex101 - Online Regex Tester and Debugger.
  • Regular-Expressions.info
  • RexEgg
  • Regex Crossword
  • RegexOne

Developer Tools:

• Sites/

  • MDN CSS Color Picker Tools (DuckDuckGo Instant Answer/Google)
  • Dan's Tools - Collection of various tools helpful for developers.
  • Who is my ISP?

• Design Tools/

  • NoDesign.dev - A collection of tools for developers who have little to no artistic talent.
  • ColorBox - a color tool to produce color sets.
  • LogoMakr freemium
  • Figma - collaborative interface design tool closed-source freemium
  • svgator - SVG Animation Creator commercial
  • Neumorphism.io - Soft UI CSS shadow generator.
  • Canva - Create beautiful designs with your team.

• Speed Test/

  • Speedtest.net by Ookla
  • Fast.com by Netflix

• Fake APIs/

  • JSONPlaceholder - Fake online REST API for developers

• Text Generators/

  • Lorem Ipsum

• Images/SVGs/

  • unDraw - Open-source illustrations for every project you can imagine
  • Lorem Picsum - The Lorem Ipsum for photos.
  • Flat UI Colors - 280 handpicked colors ready for COPY & PASTE.
  • Unsplash - The internet’s source of freely usable images.

• Patterns/

  • Heropatterns - A collection of repeatable SVG background patterns for you to use on your web projects.
  • Cool Backgrounds - collection of tools to create compelling, colorful images for blogs and websites.

• Deployment/

  • Cloudflare - The Integrated Global Cloud Platform.
  • Heroku - Build data-driven apps with fully managed data services.
  • Netlify - Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.
  • GitHub Pages
  • GitLab Pages
  • ZEIT Now - The easiest way to deploy websites.
  • surge - Static web publishing for Front-End Developers.
  • Render - unified platform to build and run all your apps and websites with free SSL, a global CDN, private networks and auto deploys from Git.

• VPS

  • DigitalOcean
  • Linode

• CI/CD

  • Travis-CI
  • circleci

• API Testing/

  • Postman - The Collaboration Platform for API Development.

• UI Inspiration/

  • Webframe - Beautiful Screenshots showing webapp designs.

• Payment Processing

  • Stripe
  • Buy Me a Coffee

• Technology Lookup Tools

  • Wappalyzer
  • BuiltWith

• Miscellaneous

  • Okta
  • Sizzy
  • BrowserStack

Other Resources:

• Magazines/

  • Smashing Magazine - For Web Designers And Developers.
  • Increment Magazine - print and digital magazine about how teams build and operate software systems at scale.

• Codepen Profiles/

  • Chris Coyier - Founder of CSS-Tricks.
  • Florin Pop
  • Hakim El Hattab - Creator of reveal.js.

• Dribble Profiles/

  • Google

• Sites/

  • web.dev - learn to build for the modern web.
  • sitepoint
  • Extension Workshop - Get help creating and publishing Firefox add-ons that make browsing smarter, safer, and faster.
  • The changelog
  • Glitch
  • DigitalOcean Community Tutorials
  • freeCodeCamp Guide - articles about all things related to programming.
  • Rosetta Code
  • JAMstack - JavaScript, APIs, and Markup
  • GeeksforGeeks - A computer science portal for geeks
  • tuts+
  • thoughtbot Blog - Giant Robots Smashing Into Other Giant Robots.
  • Twilio Tutorials
  • scotch.io - fun and practical web development tutorials.
  • Pusher Developer Tutorials
  • Cooperpress - Weekly email newsletters to developers and software engineers.
  • RisingStack Blog
  • A List Apart

• Pastebins

  • GitHub Gists - Instantly share code, notes, and snippets.
  • Pastebin
  • Ubuntu Pastebin