sine99 / resources

A collection of learning resources for web development.

Resources for Web Development

This repository is a collection of all the resources and useful links me and other contributors know of. It's still a work in progress and incomplete. To contribute please create a pull request or email me at [email protected].

---

• JavaScript
• Libraries
• Resources
• Tooling
  • Code Editors
  • Git
  • Troubleshooting
• Miscellaneous
  • Big Lists

---

Resources

• Interneting Is Hard: Friendly web development tutorials for complete beginners.
• HTML Validator: Ensures a given document is valid HTML5 or not. Works via URL or direct text input. Reports back an itemized list of issues.
• CSS Validator: Ensures a given stylesheet is valid CSS or not. Works via URL or drirect text input. Reports back an itemized list of issues.
• Flexbox Frogger: Game that introduces and teaches the fundementals of Flexbox.
• Grid Garden: Game that introduces and teaches the fundementals of grid.
• Codewars: Programming exercises and challenges.
• The Complete Illustrated Flexbox Tutorial
• CSS Grid Explained Quickly
• HTTP Status Code Cheat Sheet
• HTTP Headers

Tooling

• Chrome DevTools
• Node Version Manager (nvm): Recommended method of installing Node.js and npm. Allows you to easily switch between versions as well as lock a project down to a specific version using an .nvmrc file.
• Windows Subsystem for Linux (WSL): I strongly recommend anybody on Windows 10 to start using WSL. If you're unsure which distrobution of Linux to run I recommend Ubuntu. This is not a resource hungry virtual machine. It will give you an environment much closer to what Linux and macOS users have and will reduce headaches moving forward.

Code Editors

• Visual Studio Code: Strongly recommend the use of VS Code for web development. In my experience it's the most popular and also has the strongest ecosystem of plugins.
  • ESLint: Enforces functional and cosmetic rules to a code base. Can integrate with a code editors linting plugin to provide MS Word-like suggestions (red / green underlines).
  • EditorConfig for VS Code: EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. It enforces rules around tabs, spacing, and line endings across an entire project. Requires an .editorconfig file as seen as this sample.
  • VS Live Share: Enables you to collaboratively edit and debug with others in real time similar to what you can expect from Google Docs. This includes having the ability to allow somebody to take control of your terminal when explict additional permission is granted.
  • Debugger for Chrome: Debug your JavaScript code running in Google Chrome.
• Atom
• Sublime Text
• WebStorm

Git

• Cheat Sheet

Tutorials

• Git Immersion
• Resources to Learn Git

Articles

• New Developer? You should’ve learned Git yesterday.
• Git makes software development, well, easier – Atlassian
• The Git Parable
• The Case for Git Rebase

Repository Hosting Services

• GitHub
• GitLab
• BitBucket

Troubleshooting

• Blink (Chrome) Debugger Video Walkthrough
• `Postman HTTP Client

Miscellaneous

• Teach Yourself Programming in Ten Years
• A re-introduction to JavaScript
• Rico's Cheatsheets
• Markdown Cheatsheet's
  • Markdown Guide
  • Adam P

Big Lists

• Public APIs
• superhero.js: articles, videos, and presentations on JavaScript.
• Free Programming Playgrounds
• Frontend Case Studies: A curated list of technical talks and articles about real-world enterprise frontend development.
• Awesome Lists: List of lists.
• Free Programming Books