Create A Basic SharePoint-Hosted Add-In By Using Napa Office 365 Development Tools

Please refer to the link given below for more information.

1. Register the O-365, using screen, which is given below.
   
   
   
   
2. Create developer site from SharePoint admin portal.
   
   
   
   
3. Access your new site collection. 
   
   To install Napa, open your developer site and choose site contents > add an add-in > SharePoint store. In the store, search for Napa and install it. (If you have a Office 365 developer site, Napa may have already been installed when the site was created and you will see it on the site contents page.)
   
    

• Open the Napa, add-in on the Office 365 page.
• Choose the Add New Project tile and then choose the Add-in for SharePoint tile.
• Name the project Test SharePoint Add-in and then choose the Create button.
• The code editor opens and shows the default Webpage, which already contains some sample code that you can run without doing anything else.
• From here, we can access our online tool.
  
  
  
  In the left side, multiple options are there, where we can manage ourcode. We can manage our code from app.js.