Create GUI App with PyQt5 - PART 1

In this video we'll use PyQt5 to create the graphic interface of "Who Wants to be a Programmer???";
a computer science trivia game, which determines who is truly worthy of the title!
We'll design the first two frames of this game and learn how to switch from one to the other effortlessly.
We'll also discuss in detail all the important widgets (text, image, button) , we'll go over styling and layout commands, as well as adding interactivity to clickable elements (this is probably my favourite part of PyQt5 - it allows you to create hover events and utilize your pro CSS skills to their full extent!).

This is PART 1 of the complete project, where we focus on creating the GUI.
In the upcoming PART 2, we will load a database of trivia questions and connect all its functionality to our interface.

😍 WATCH PYQT5 TRIVIA APP - PART 2 😍

********************************************

DOWNLOAD STARTER FILES:

PyQt5 Documentation:

COMPLETE PROJECT:

MY NEW BLOG:

CONNECT ON LINKEDIN:

FOLLOW ON INSTAGRAM:

************************************
⭐⭐⭐ TIMESTAMPS ⭐⭐⭐
************************************
00:00 - Intro
00:59 - Starter files walkthrough
************************************
1. CREATE WINDOW OBJECT
************************************
01:15 - initialize GUI app
01:31 - create QWidget window
01:46 - set window title
02:09 - set window width
02:22 - set window background color
02:58 - open window
03:05 - terminate app
************************************
2. RUN APP WITH TERMINAL
************************************
03:25 - open Anaconda or other terminal
03:29 - activate working environment
03:35 - change directory
03:57 - run app
04:12 - initialize grid layout
04:23 - apply grid layout
************************************
3. CREATE LOGO WIDGET
************************************
04:36 - load png image
05:00 - create label widget
05:10 - place image inside label
05:23 - place logo on grid
05:48 - set window position (fix)
06:36 - align label to center
06:56 - set label margin
************************************
4. CREATE BUTTON WIDGET
************************************
07:33 - create button widget
07:53 - set button cursor
08:32 - set button CSS style
10:05 - place button on grid
11:09 - set button padding and margin
12:02 - mouse hover event
************************************
5. CREATE FRAME FUNCTION
************************************
13:10 - create frame function
13:39 - call frame function
13:52 - create global dictionary of empty lists
14:40 - append local widgets to global dictionary
15:12 - place global variables on the grid
************************************
6. DESIGN FRAME 2
************************************
15:55 - define frame 2 function
16:09 - create text widget
16:53 - create wrapping text widget
17:36 - set word wrap
18:45 - place label on grid
19:26 - set column span
19:58 - fix typos and parameters
************************************
7. CREATE IDENTICAL BUTTONS
************************************
20:28 - create a button widget
21:05 - store button widget in a function
21:51 - return button from function
22:09 - add buttons to global dictionary
22:18 - call button function many times
23:17 - customize parameters for each button
24:20 - update function call with new parameters
************************************
8. SWITCH FRAMES
************************************
26:02 - define callback function
26:13 - hide all widgets
26:43 - reset global dictionary
27:49 - button callback
28:23 - switch frames continuously
************************************
29:54 - THANKS FOR WATCHING!
************************************

#python #pythonprogramming #learnpython #creategui #gui #graphicuserinterface #pythontutorial #programming #createapp #createpythonapp #interface #designinterface

[arkie]

I've watched many tutorials on PyQt5 and python in general, and you are the only one to actually explain what the code you write means and does! Keep up the good work and you earned a subscriber!

[gecsus]

I want to praise you for taking note of corrections. This is a superior trait and I admire you more for your ability to learn and progress.
The example you set, will influence your students and followers to do the same by following your good example. Kudos.

[raphisteve]

I hope that you'll get more attention because your tutorials have good quality.
What i mean when talking about quality:
- No waste of time ( You do everything very precise and fast)
- Good audio quality
- Very clear informations about why you are doing what you're doing

I'm not here because i am a simp, your content just speaks for itself. Hopefully you keep your channel active for some years with financial profit and teaching ppl your way how to be better programmers!

[dhavalshinde]

HEY, mam, these are genuenly the most helpful tutorial videos i have encountered !! i have been following ur content since last month now, and am especially amazed on this GUI APP. it is really quite classy and useful and, i observed that this code is really very clean and PYTHONIC as one can expect, nowhere, on the INTERNET or other sources did i found this program explained so well !!

[oreh]

Took me an hour to do it, thank you for your efforts. Шикарный английский!

Using this way makes it look much better than Tkinter module.

[mtadventures]

Thank you very much, your idea to save the history in a global dictionary of lists of widgets is amazing :). I also like this way of using PyQt5 more than using in an object orientated way

[mohsinnoor]

Hi there,
I have listened and watched few of your lessons about Python and I would like to appreciate you about how you politely describe the lessons and sometimes I used to smile on your reactions and expressions, want to have more lectures, Appreciation from Pakistan.!!!

[BJCP]

Loving the content, thanks for making some great videos! I'm following along and I noticed that the hover styling includes when the cursor is over the margin of the button. Is there a way to have the margin but only have the hover over the button it self?

[deanharris-martin]

Fantastic video and great run through of the functions and how to change them to achieve our own tailored display quiz windows. Thank you 💙

[DanielRios]

The possibility to add Style Sheet is simply awesome (it is Qt Style Sheet, not Cascading Style Sheet, but it is very similar)

[henchhank]

I found your vídeo randomly before take a sleep, I'm Lucky for dont fall asleep now hahaha. You made a Superb TimeStamp on description and looks like PyQt5 Will be more useful than TKinter for a Project! Thanks!

[andreconnelly]

I done all work of Part 1 PyQt5 to create the graphic user interface. You an excellent work design greatness job. That first Part 1.

[aabhaskrjha]

been trying to find this since a long time thank you so much

[albertovidalfernandez]

Expectacular, te seguire viendo! Buen trabajo

[ray_ho]

Interesting, this is my first time looking at PyQt. Having done some simple CSS and javascript on websites before, this all makes sense.

[selagee]

omggg I wish I found this video sooner its amazing

[AICMan]

Excellent tutorial and I appreciated your explanations on what the code is doing. Thank you, you have a subscriber. Look forward to part 2

[DanielRios]

In the stylesheet method, you should use f-strings with multi-line string (triple quotes)

[yeetpizza]

Im doing something similiar to this but using a class, but i have a problem, my problem is when i have my grid layout setup my buttons dont have rounded corners like they should do, i do have some edit line widgets and they have rounded corners (they are like a text input) im using this to make a login form and id appreciate any help getting the style to work with my buttons,

[abhishekpurohit]

Thank you for this amazing and informative video, it helped me a lot in making my first GUI application.