Web development

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

If you are completely new to web development, I recommend studying the web developer roadmap first.

Offline documentation

• Velocity Windows only

Command line

• SS64 - Command line reference - Database and OS scripting.

Git

• 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
  • freeCodeCamp.org
  • The Odin Project
  • w3schools - While this site is pretty decent for quick syntax lookup and reference, I don't 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.
  • Deep Dive Into Modern Web Development - University of Helsinki.
  • HTML Dog
  • Scrimba
  • SoloLean
  • LambdaSchool Free Online Web Mini Bootcamp
  • 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
  • Learn CSS
  • HTML Reference
  • CSS Reference
  • Marksheet
  • What The Flexbox - a set of 20 free videos to learn CSS flexbox layout by Wes Bos. See also: Command line power user
  • 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
  • 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 docs
• Bulma (CSS)
  • Bulma docs
• React (JavaScript)
  • React docs
  • Official Tutorial for building a small game using React
  • React Tutorial by MDN
  • Overreacted - Dan Abramov.
  • Josh W. Comeau - Josh W. Comeau.
• 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)
  • Django docs
  • 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)
  • 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 docs
• Ember (JavaScript)
  • Ember Tutorial by MDN
• Ruby on Rails (Ruby):
  • Offcial RubyOnRails Guides
  • Ruby on Rails Tutorial by Michael Hartl

See also: HotFrameworks

Data visualization

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

Static site generators

• Sites
  • Jamstack.org
  • 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
  • SQL Tutorial
  • SQLBolt
  • SQLZOO
• PostgreSQL
  • PostgreSQL docs
• SQLite
  • SQLite docs

Text editors and IDEs

• Sublime Text
• Interactive online code editors
  • repl.it
  • Scrimba
  • JSFiddle
  • CodePen
  • SoloLearn

Regular expressions and algorithms

• pythex.org
• Regex101
• Regular-Expressions.info
• RexEgg
• Regex Crossword
• RegexOne

Developer tools

• 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.
  • illlustrations - open source illustrations kit.
• 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

Miscellaneous

• 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