Web Development Tools

Cool, Useful, Efficient

1.NewProject.html

Blank file with basic HTML, CSS, Javascript structured in this html file. Make life easy for starting a prototype very quickly.

2.NewProjectWithBootstrap.html

This template is for starting a web app based on Bootstrap very quickly.

3.HeroImage/

This is an example to get a full screen head image on webpage.

4.Options/

This is an example to get the total price when making extra choices. You can give the checkboxs multiple options or single option.

5.D3js_Gallery/

Some easy charts for interacting with simple data set.

CSS Lint

Help you to write more DRY css code. Get shortcut by click here[http://csslint.net/#results]

Compatibility of the web element on different browsers

Help me use the right API [https://caniuse.com/#home]

Browser Inspector

• I always use Google Chrome developement tool
• While doing the Performance Test, I always use Safari on iPhone. I prefer to use the Inspector feature from the real machine to find the wrong issue.
  • Step 1 : iOS Settings > Safari > Advanced
  • Step 2 : Turn on Web Inspector and follow the instruction to enable the Develop menu feature of Safari on MacOS
    
  • Step 3 : Visit the test URL from the Safari on your iOS
  • Step 4 : Open the Safari > Develop > iPhone, then you will find the right page list under this section.

REST API

A simple knowledge base about REST can be found https://restfulapi.net[https://restfulapi.net] A Demo[https://restfulapi.net/create-rest-apis-with-jax-rs-2-0/#demo]

An easy client-side-fetch-example is 6.to-do/