Let's get started by following these steps:

1. Let's create a Qt Widgets Application project and open up mainwindow.ui.
2. Drag and drop a PushButton from the Widget Box to the UI canvas:

3. Right-click on the PushButton and select Go to slot. A window will appear:

4. You will see a list of built-in slot functions available for the push button. Let's select the clicked() option and press OK. A slot function called on_pushButton_clicked() will now appear in both mainwindow.h and mainwindow.cpp. Qt Creator automatically added the slot function to your source code after you pressed the OK button on the Go to slot window. If you check out your mainwindow.h now, you should be able to see an extra function under the private slots keyword:

class MainWindow : public QMainWindow {
    Q_OBJECT
public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
private slots:
    void on_pushButton_clicked();
private:
    Ui::MainWindow *ui;
};

5. The same goes for mainwindow.cpp, where the on_pushButton_clicked() function has been added for you:

void MainWindow::on_pushButton_clicked()
{
}

6. Now, let's add a QMessageBox header to the top of your source file:

#include <QMessageBox>

7. Then, add the following code within the on_pushButton_clicked() function:

void MainWindow::on_pushButton_clicked() {
    QMessageBox::information(this, "Hello", "Button has been clicked!");
}

8. Now, build and run the project. Then, click on the push button; you should see that a message box pops out: 

9. Next, we want to create our own signals and slots functions. Go to File | New File or Project, then create a new C++ Class under the Files and Classes category:

10. Then, we need to name our class MyClass and make sure that the base class is QObject:

11. Once you have created the class, open up myclass.h and add the following code, which is highlighted here for clarity:

#include <QObject>
#include <QMainWindow>
#include <QMessageBox>
class MyClass : public QObject {
    Q_OBJECT
public:
    explicit MyClass(QObject *parent = nullptr);
signals:
public slots:
    void doSomething();
};

12. Then, open up myclass.cpp and implement the doSomething() slot function. We'll copy the message box function from the previous example:

#include "myclass.h"

MyClass::MyClass(QObject *parent) : QObject(parent) {}
void MyClass::doSomething() {
    QMessageBox::information(this, "Hello", "Button has been clicked!");
}

13. Now, open up mainwindow.h and include the myclass.h header at the top:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include "myclass.h"

namespace Ui {
class MainWindow;
}

14. Also, declare a doNow() signal in myclass.h:

signals:
    void doNow();

private slots:
    void on_pushButton_clicked();

15. After that, open up mainwindow.cpp and define a MyClass object. Then, we'll connect the doNow() signal that we created in the previous step with our doSomething() slot function:

MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow){
    ui->setupUi(this);
    MyClass* myclass = new MyClass;
    connect(this, &MainWindow::doNow, myclass, &MyClass::doSomething);
}

16. Then, we have to change the code of the on_pushButton_clicked() function to something like this:

void MainWindow::on_pushButton_clicked() {
    emit doNow();
}

17. If you build and run the program now, you will get a result that is similar to what's shown in the previous example. However, we have placed the message box code in the MyClass object instead of in MainWindow.