WebPart Design Page Overview
The WebPart Design Page is comprised of different sections.
1) Toolbox, Datasource, Entities/Tree View
The left panel contains tabs at the bottom to switch between a few useful tools to be used on the WebPart Canvas. The toolbox will the most useful to begin with because you can drag Containers, Datasources, and Web Controls out of the toolbox to use on your WebPart Canvas.
Once a Datasource is created, you can view it in the Datasource tab. This is an expanded look at your datasource. You can expand the nodes within the datasource and drag a desired node to the WebPart canvas. This creates a WebControl based on that data source value.
2) WebPart Canvas
This is the main area of the WebPart Design Page. This is the working area of the WebPart. It represents all aspects of the WebPart you are building visually. There is an area for the Datasources and the WebPart area which contains all sections and Web Controls.
3) Property Editor
Any item selected (WebPart, Section, Web Control) has associated properties. This Property editor allows you to view the properties of whatever is selected and edit them.
4) Tab Selector
These tabs will always be open: Canvas, Desktop View, Phone View, and Logs.
Desktop View allows the developer to see what the WebPart will look like once displayed on the WebPage. This will generate logs so it can be also used for debugging the process logic.
Log allows the developer to see the logs for the WebPart. This is the same as the Application Logs screen, but it is automatically filtered to only show the results from the WebPart that is open.
The help icon in the upper right allows you to click it, and then click on another field - opening the help page for that field.