Here I will share everything you will need to ace your web development work and be more productive. Everthing at one place!

Code Editors:

Visual Studio Code: This is the best editor for web development in my opinion. I have been using VS Code since a long time. What makes VS Code special is the extension marketplace. You can make this editor as your own with different themes, fonts and wide variety of extension.
Sublime Text: Sublime, a very light-weight text editor, great for beginners and intermediate web developers, it too has a wide variety of extensions and themes. It can be used for quick fixes in your code.
Atom: Atom is also a good text editor if you are starting out.
Vim: Vim is code editor mainly focused on using keyboard. It has many shortcuts that can help you to code fast, but its not well recommended for web development.

Figma: Figma is a very useful tool for web designs. Many UI/UX designers use it and its my top choice.
Sketch 3: Another great web designing tool.
Adobe XD: (free and paid) Adobe XD is another great tool for web design.

Adobe Illustrator: (paid) Adobe Illustrator might be the best logo desgning tool, helps you create high quality SVG logos.
Tailor brands: (free and paid): Enables you to create high quality logo, free version is good to get started.
Wix Logo Maker: (free and paid) Wix Logo Maker helps you create logos, it has a very inexpensive premium membership, but the free version is also good to get started.
Logo Maker: (paid) If your main priority is to create a logo quickly and make it look good, then Logo Maker is the place to go.

Coolors: Coolors is the best website to choose colors in my opinion. You can create your own color palletes or discover the popular ones. Its easy!
Social Colors: Social Colors provide the primary colors of all social media sites.
Flat UI Colors: Discover different color palletes and choose the best color for your website.
0to255: This website provides a lots of color and their shades.
UI Gradients: UI Gradients provides you the coolest gradients, allows you to customize them and more!

Live Server: Live Server reloads the browser everytime you save any file, making you more productive and saves a ton of time.
HTML CSS Support: Enables you to write faster HTML CSS code using snippets.
Bracket Pair Colorizer: If you work in web development, chances are you will spend a lot of time finding the pair for a brackets. Bracket Pair Colorizer colorizes each pair of brackets making it easier to distinguish them.
Prettier: Prettier is a code formatter that formats your code, making it readable. You can change its settings to make the code look the way you want!

Udemy: (free and paid) Udemy is my favorite learning platform. Top courses, by top instructors, at low cost right on any device!
Youtube: (free) YouTube is the largest video uploading platform on The Internet, you can take courses for anything on youtube!
Coursera: (free and paid) Coursera is another website where there are tons of courses!
w3schools: (free) w3school provide articles for almost anything in web development and beyond!
freecodecamp: (free) Offers high quality courses to enhance your skills!

Color Picker Eye Dropper: With this tool, you can pick color from any website, pixel by pixel!
What Font: This tool allows you to see what font a specific website is using just by hovering over the text!
JSON Formatter: We mostly get data from API in JSON format. This tool parses the JSON code making it easier to read.
CSS Viewer: CSS Viewer allows you view the styles for any element in a website just by hovering over it! Its simple and powerful!
React Dev Tools: If you are learning react, or are a react developer, this extension will help you. This extension brings two new menus to the 'Chrome Dev Tools', 'Components' and 'Profiler' to help you do react development easily!
Kontrast: This tool enables you to check the contrast of the foreground and background, and tells if its suitable and is good for the eyes.