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 😍 https://www.youtube.com/watch?v=r2ZN0mTDnPc ******************************************** DOWNLOAD STARTER FILES: https://github.com/MariyaSha/TriviaGame/tree/main/Trivia%20-%20Starter%20Files PyQt5 Documentation: https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html COMPLETE PROJECT: https://github.com/MariyaSha/TriviaGame MY NEW BLOG: https://www.mariyasha.com/ (also pythonsimplified.ca) CONNECT ON LINKEDIN: https://www.linkedin.com/in/mariyasha888/ FOLLOW ON INSTAGRAM: https://www.instagram.com/mariyasha888/ ************************************ ⭐⭐⭐ 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