105 Web Development Resources I Find Useful

Web development resources I find useful for creating website. Instead of bookmark in the browser and forget about it. I document them here as a reference and share to people who might need them.

Navigate to the topic with table of contents and press home in your keyboard to back to the table of contents. Hold Ctrl and click the link will open in new tab in your browser.

Table of Contents

1. Text Editor
2. Online Text Editor
3. General
4. CSS - Tips & Tricks
5. About Colours
6. Visual
7. CSS Framework
8. Font / Font Pairing
9. Symbols / Entities
10. Emoji
11. Icon
12. Stock Image, Video & Music
13. Images Optimazation
14. Design System
15. JavaScript
16. JavaScript Framework / Library
17. Static Site Generator
18. Reactjs
19. Database API
20. Version Control / Hosting
21. Server or Serverless Web Hosting & Deployment
22. Web Development Learning Platform
23. Web Development Forum
24. Web Development News
25. Learn Markdown
26. Search Library
27. Create Presentation

Text Editor

I suggest you try out every text editor listed below. Find the one you like the most and stick to it until it becomes your second nature. Every text editor environment is different. Getting used to the environment make you a faster coder.

If you ask me, I would recommend you to choose VS Code.

1. VS Code - Best free text editor by Microsoft.
2. Atom - A hackable free text editor for the 21st century.
3. Sublime Text - A sophisticated free or paid text editor for code.
4. WebStorm - The smartest JavaScript IDE.

Online Text Editor

You could perform a quick test of a feature, function or block of code with online editor. If you are using VS Code and looking for an almost similar environment, try out CodeSandbox.

1. CodeSandbox - Work almost similar like VS Code.
2. Codepen - Online text editor playground.
3. JSFiddle - Online code playground.

General

1. VS Code Can Do That - Pro tips of using VS Code
2. Caniuse - To find out whether the newest features are supported by the browsers
3. Light house - Audit your website performance, SEO and best practices
4. Accessible patterns

CSS - Tips & Tricks

1. CSS-Trick - Pro CSS tips & resources
2. CSS selector - 30 often use CSS selector
3. CSS selectors from level 1 to 4
4. Smooth shadows
5. Visual cubic bezier modifier
6. Chrome default CSS - The user agent stylesheet

About Colours

1. Adobe Color - Colour palette generator
2. Colorsinspo - Colour palette
3. CSS Gradient - Gradient colour palette
4. ColorSpace - Gradient colour generator

Visual

1. Seperator - Customize section seprator in visual and copy to CSS code to your project
2. getwave - Genarate wave and download SVG
3. Blobmaker - Make SVG shape

CSS Framework

1. Bootstrap
2. Tailwind
3. Bulma
4. Foundation
5. Semantic UI
6. Ionic
7. Mini CSS

Font / Font Pairing

1. Google Fonts - Main stream free fonts download or API
2. Font Pair - Font pairing reference
3. Font Joy - Font pairing generator, mixing google fonts for good visual
4. Modulars Scale - Font pairing generator, mixing google fonts for good visual
5. Type Scale - Find the right type scale for better viewing experience

Symbols / Entities

1. Character Entity Reference Chart - Character, symbols, punctuation entity in one page
2. Html arrow - Html Symbols, entities, and ASCII character codes

Emoji

1. Emojiperia

Icon

1. Font Awesome - Icon API
2. Material Design Icon
3. Icomoon
4. Flaticon
5. Boxicons
6. CSS Icons
7. Ikonate
8. Animated Icon

Stock Image, Video & Music

1. Unsplash - High quality free stock photo. Download or API. Credit the photographer if you can
2. Lorem Picsum - Free stock photo with API. You can do some transformation with the API
3. Coverr - High quality free stock video.
4. Mixkit - Free video assets for creating video such as stock video, stock music video template
5. Pexels - Stock image & video shared by the community
6. Moose Photo Creator - Create your own stock photo with the assets available in the website
7. Faces - Genarate a non exist human face for profile picture. To test your web app
8. Pixabay - Free stock photo

Image Optimazation

1. Squoosh.app - Free web app. Edit your image and preview the changes on live. A lot of customization option. It compress your image without lossing much of the quality. You can even change your image file format
2. Shrinkme.app - Free web app tool to compress and reduce your image sizes while keeping the image quality
3. Removebg - Free web app to remove image background

Video Optimazation

1. Unscreen - Automatically remove video background

Design System

1. Google Material - Mimic paper and ink
2. Shopify Polaris - Uses colors to communicate how things function in the interface.
3. Salesforce Lighting
4. Microsoft Fluent
5. Design System Repo - List of the design system

JavaScript

1. Node.js - JavaScript runtime built on Chrome’s V8 JavaScript engine
2. NPM - Node package manager
3. Deno - A secure runtime for JavaScript and TypeScript

JavaScript Framework / Library

1. React.js - A JavaScript library for building user interfaces
2. Vue.js - The Progressive JavaScript Framework
3. Angular.js - One framework for Mobile & desktop
4. Svelte - Cybernetically enhanced web apps
5. Threejs - 3D animation
6. Editorjs - Input editor
7. Popperjs - For tooltips

Static Site Generator

1. Staticgen - Netlify’s list of static generators

Reactjs

1. React Resources

Database API

1. The Movie Database
2. Pokemon API

JavaScript Game Development

1. Phaser

Version Control / Hosting

1. Git version control - The official git website
2. GitHub - Most popular git remote hosting site
3. GitLab - Alternative git remote hosting
4. BitBucket - Alternative git remote hosting

Server or Serverless Web Hosting & Deployment

1. Netlify
2. Firebase
3. Vercel (formerly ZEIT)
4. Heroku
5. Surge

Web Development Learning Platform

1. FreeCodeCamp
2. Mozilla Developer Network
3. Code Academy
4. Scrimba - Interactive Learning
5. Treehouse
6. Pluralsight
7. Udemy

Web Development Forum

1. StackOverFlow
2. FreeCodeCamp Forum

Web Development News

1. Dev
2. FreeCodeCamp News
3. Hashnode

Learn Markdown

1. Markdown Guide
2. MDX Guide

Search Library

1. Fuse.js - A powerful, lightweight fuzzy-search library, with zero dependencies.

Create Presentation

1. Reveal.js - The HTML presentation framework
2. Slide - The official Reveal.js presentation editor. Create presentation without coding.