Here is an example folder structure of a dynamic web project: 
As you can see, all static files are placed as subfolders in the WebContent folder. By named convention, .css files are places in the css subfolder. JavaScript.js files are placed in the js subfolder, and any image files, such as .jpeg or .png, are placed in the images subfolder. I also have an additional lib subfolder where I placed the angularjs library to be used.
By default, after creating a dynamic web project, your web.xml file looks like this:
`<welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file>`
means that when you first start the application, it will first call the listed default name files. This is why most projects will name the files as index.html or index.jsp . NOTE: my index.html file is located directly under the WebContent folder, not in a subfolder
Finally, you can call / include your static files (.css.js and image files) from your 'index' file as follows:
<link rel="stylesheet" href=css/bootstrap.min.css> <link rel="stylesheet" href=css/bootstrap-theme.min.css> <script type="text/javascript" src="lib/angular.min.js"></script> <script src="js/contactsApp.js"></script>
Also your .java files will be correctly placed in Java resources β src β {here java files are here}
source share