Essential Tools for Front-End and UI Development or Tools to improve your Web Design
As an UI and Front-end developer, i am using many time different tools for better performance, consistency in UI elements, quick HTML developments and so on, but the actual and best tools outcomes from past experiences from this tools.
Here i am listing best of only tools which are most essential for beginner and intermediate level of UI and Front-end Developer to get you started.
1. Dreamweaver or Sublime Text Editor
Dreamweaver and Sublime Text Editor both have numbers of features. Sublime is light weighted in size and have very simple installation process, while Dreamweaver is very large in size. This two are the best editor for HTML, CSS, JavaScript, JQuery, PHP, SASS, and many other languages.
- Code Hint and formatting
- Multiple cursors property
- Shortcuts for many code snippets and tags
- Very Enhanced Search and Replace Options
- Bracket and div highlighting
2. Chrome Developer and Mozilla Firebug Tool
Both Chrome Developer Tool and Firebug provide live or run time debugging facility, it will be great if you could edit your HTML and CSS in real-time, or debug your JavaScript, all while viewing a thorough performance analysis of your website. By Pressing F12 you can start or open debug window.
Both tool have very reach debugging option with the help of them you can test your web page on many device simulators also. Both have a huge list of different browser agent and devices.
3. Font Awesome Icons
It’s really an awesome CSS library for icons, Instead of using icon images you can use simple css icon. With the help using Font Awesome you can also reduce your page load time and HTTP request. Font Awesome has a large number of icon list.
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
4. Some Useful Addons and Extension
There are number of Browser Addons for different purpose and need Here i am listing some most useful addons.
- What Font– What is the easiest way to find out the fonts used in a webpage or section.
- FireShot or Awesome Screen Soot – Makes full web page screenshots or specific Section.
- ColorZilla – Color Picker, Eye Dropper, Gradient Generator and many additional advanced color tools.
5. Adobe Photoshop
Photoshop is one of the most important tool for image creation, wire-frame and mockup creation. The web design landscape is constantly changing, but Photoshop is still a classic. Designers use it to create UI elements, web graphics, wireframes, and functional mockups.
6. CSS and JS frameworks and libraries
Number of CSS and JS frameworks and libraries are available for build different type of websites for many kind of need according to business nature. You can chose some of theme to build your site. here i am listing few commonly and CSS, JS frameworks and libraries.
CSS
- Bootstrap – Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- Zurb Foundation – Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.
Java Script
- jQuery – jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
- Angular 2- Angular is a development platform for building mobile and desktop web applications.
[paypal-donation]
