Here I will share everything you will need to ace your web development work and be more productive. Everthing at one place!
- 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.
- Font Awesome: 100000+ icons and svgs! Everything you ever need!
- Icon Works: A large collection of FREE icons!
- Flaticon: A huge collection of over 3 Million icons and SVGs!
- SiteInspire: A site that will inspire you to create your own site!
- Dribbble: A ton of designs to choose from!