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 😍
• Open Trivia Database f...
********************************************
DOWNLOAD STARTER FILES:
github.com/MariyaSha/TriviaGa...
PyQt5 Documentation:
www.riverbankcomputing.com/st...
COMPLETE PROJECT:
github.com/MariyaSha/TriviaGame
MY NEW BLOG:
www.mariyasha.com/
(also pythonsimplified.ca)
CONNECT ON LINKEDIN:
/ mariyasha888
FOLLOW ON INSTAGRAM:
/ 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

[@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.

[@arkie87]

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!

[@lmnts556]

Why does almost no one do this? It is so important to tell viewers what the code actually does so we can understand it. So annoying lol.

[@Viewer-tq9lt]

@@lmnts556 IFKR, I hate most other tutorial videos because they skip over so many crucial details. Later on I learn them on my own, go back and watch the videos thinking, WHY DIDN'T THEY JUST SAY THIS

[@dhavalshinde4332]

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 !!

[@mohsinnoor2262]

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.!!!

[@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!

[@oreh350]

Took me an hour to do it, thank you for your efforts. Шикарный английский! Using this way makes it look much better than Tkinter module.

[@mt03adventures]

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

[@deanharris-martin1849]

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

[@andreconnelly9579]

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.

[@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!

[@PythonSimplified]

Wow, thank you so much for the incredible feedback Raphi!!! I sometimes wonder if all this hard work is worth it - and then seeing comment such as yours gives me a huge motivation boost!! You've made my day, thank you!!! ❤️❤️❤️

[@raphisteve]

@@PythonSimplified I am happy to hear that! I maybe have an idea for your channel. I saw many ppl typing in your comments that they started to program their own stuff because of you. If you want to you could do a video format and start a playlist about you looking over your comunity's programs and tell them what they need to improove! Ofc you only need to show programs where you think the creators or viewers will learn a lot from but at the end you need to decide what you think is best haha I would love this kind of format if it doesnt take too much time and afford from you! 😊 It maybe makes your Comunity even stronger followers and consumer bc yk.. nowadays a lot og programmers only do their thing and comunitys are not asked many times. But don't let it overwhelm you! I don't want you beeing in need for breaks from making yt because one of my ideas makes you unhappy. 😅😳😂 Ps: I would probably be the first person sending you something because i am unsure about the logic of my programmed stuff. (Its kinda hard for me to read stuff from the internet and put the things into my programs that it works. Thats why i need exampls like your video 😩😂) Hope your day went as good as the motivation you got! 😌

[@dataengineer4424]

“I’m not here because i am a simp…” LOL 😂

[@raphisteve]

@@dataengineer4424 simp memes have been such a nice thing back in the times i wrote the comment. ^^

[@cinquecento1985]

Also..not indian.

[@DanielRios549]

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

[@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

[@albertovidalfernandez112]

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.

[@aabhaskrjha]

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

[@sakshamkumar5302]

I have been studying from these videos and OMG these are amazing !!!!!!!!!!!! Why don't universities teach python???? Its such a great language!! Hope you become a famous youtuber!! Keep it up!

[@kholmsk20]

I'm waiting! Cheers from Japan.

[@PythonSimplified]

Thank you Domino Sniper, I'll see you in the live chat once the premiere begins! 😁 Cheers from beautiful British Columbia!

[@pashka3k]

Прикольная))) продолжай в том же духе! Как ux designer смотрю на это все😅 Какие оказывается возможности есть для стайлинга. Я в Германии по немецки так не шпарю как ты по английски 😂👍

[@PythonSimplified]

Hahaha spasibo bolshoie Pablues!! Ja zivu v Kanade uze po4ti 8 let, ho4esh neho4esh - Angliskii viu4ish o4en horosho za eto vremja 🤣🤣🤣 i nemezkii na mnogo trudneie 4em Angliskii, ja pomnu pitalas sama evo u4it (4tob lutshe ponimat pesni Rammstein) no ne kak ne smogla! tak 4to - it's not really apples to apples 😁

[@jhalmu]

I'm sold. Thanks.

[@abhishekpurohit8867]

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

[@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?

[@cgme9535]

Great video! Thanks for putting this together.

[@fezacongo1692]

You are helping alots people around the world. God bless you young lady

[@AlexAlex-ei7zf]

привет, веселая чувиха с отличными видео - уроками) Как давно я Тебя не смотрел. Рад видеть Тебя и рад, что у Тебя все хорошо и Ты как всегда на позитиве!

[@AleemAhmed]

I have learned something new here. Thanks for making this video :)

[@miladsm4325]

Today I discovered your channel randomly iam loving it, greetings from Iran

[@PythonSimplified]

Thank you Milad, I'm glad you like my tutorials! 😁 Greetings from Canada! (and Nowruz Mubarak!)

[@aikota18]

Thankyou! I'm waiting for part 2

[@ydv1984]

Beautiful teacher ( teaching coding ) very nice 😁😁😁 full attendance in class ❤️😀

[@erremazo]

Hi. I love your videos. You are a very good programmer. Thnaks a lot from Colombia.

[@jimbauer9508]

(Another) Excellent Video! Very well organized and super informative. Looking forward to Part 2 already!!

[@PythonSimplified]

Thank you so much Jim! 😃 I've already uploaded the complete code to Github if you want to have a peek. I'll go over it in lots of detail in the upcoming tutorial, but I thought it would be nice to include it in case people are curious 😉

[@jimbauer9508]

@@PythonSimplified Nope! That's no fun :) I am gonna wait for the video - much better to learn that way :) Thanks though!

[@PythonSimplified]

@@jimbauer9508 it's actually my favourite kind of answer!! thank you! 😃

[@Music_PsyQuake]

@@PythonSimplified i love you

[@getmarriedchangjae4756]

u explained this so well T_____T THANK YOU SO MUCH!

[@houssamrassi]

Mariya , Just in case no one has told you today , YOU ARE A GREAT TEACHER ! ... keep on being awesome.

[@PythonSimplified]

Thank you so much!!! 😃😃😃

[@YeeiPlay]

Tnanks very great way to explain and great tutorial.

[@xkaitomusic5775]

Thank you for this content, u definitely deserve more subscribers

[@DFPercush]

I've been meaning to check out Qt for a while, great topic!

[@PythonSimplified]

Definitely check it out! I have a feeling you're gonna love it! 😃 I can't even think about Tkinter since I've discovered it! I find PyQt5 to be so much nicer in terms of styling, element placement and interactivity - it's an incomparable experiance!

[@luricci8471]

great presentation! Thumbs up 👍🏻😃

[@jean-francoisveneau5553]

Excellent vidéo. Thank you very much.

[@canallegal2364]

I'm loving your classes! You and beautiful! From Brazil!

[@PythonSimplified]

Thank you so much CanaL Legal! Greetings from Canada! 😃

[@tj9382]

Great video, nice teaching style.

[@arezki1778]

thanks for all this work...Best regards.

[@kelvinoo123]

clean code and clear explanation. Great tutorial video!

[@PythonSimplified]

Thank you so much, glad you liked it! :D

[@cryinkfly]

This video is made so great. 👌

[@Sol_Naif]

Excellent explanation, very useful

[@selagee7550]

omggg I wish I found this video sooner its amazing

[@PythonSimplified]

Thank you so much Sela! 😀 I'm glad you ended up finding it, even if slightly late!😉

[@stephentelian2919]

nice work, love the enthusiasm

[@bodeokunfolami9501]

A beautiful teacher that has beautiful contents

[@cristianfernandoaspivilleg9961]

the best programmer of world :D i learn fast with you

[@olli1492]

Very nice tutorial. Love the content!

[@PythonSimplified]

Thank you so much Oliver! 😊

[@raghuveershinde5728]

Please make more projects using pyqt5 designer you are a good teacher

[@omarzaouak2552]

Thanks for the valuable lessons

[@pauloconci4196]

This inspired me to create my own app, thank you very much.

[@PythonSimplified]

Yeeeeey!!! Thank you Paulo, I'm super glad I've lighted an entrepreneur spark in you 😉 Let me know how your app turns out! 🙂

[@invisiblegame899]

Эх, красиво печатает😍

[@dustyarcher]

Wonderful thank you, 💕 it!

[@Utube2Itube]

You are simply amazing 🙌🏻

[@mohamedpedrou2898]

You are the best 😍 I love your Tutorials

[@PythonSimplified]

Thank you Mohamed, I'm glad you like my videos! 😃

[@oniadrian]

great video, thank you!

[@DanielRios549]

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

[@tj9382]

Should, or perhaps could.

[@DanielRios549]

@@tj9382 Yeah, could were more appropriated

[@jntb3000]

This sounds fun. I like to start my own channel. Could you share the tips/steps .. and specifically what tools (cam, software) are needed? Thanks

[@nucluster]

Good English speaking! 👍(hello from South Ural😉)

[@LeoDMello]

Muito obrigado Maria!

[@scale1982]

Thank you , love your videos

[@PythonSimplified]

Thank you so much Basel, enjoy! 😊

[@bgill7475]

This is so cool, thank you so much :)

[@PythonSimplified]

Thank you B Gill, enjoy! 😀

[@brandonhult3665]

Awesome! I had just done this in tkinter but less efficient. I'm gonna try to use the same logic for my tkinter project!

[@PythonSimplified]

You absolutely gonna love PyQt5, Brandon!! it will allow you much more customisation and interactivity, especially if you're a fan of CSS! 😁 I'd love to see what you come up with, let me know how your project turns out! 😃

[@emreeren1752]

You are amazing!!!!!!!

[@insanetvshort7076]

All my years in python. I have never taken the time to learn PyQt till a client said he needs a desktop app. I love python.

[@PythonSimplified]

Hahahaha I hear ya! PyQt is nothing short of magical! 😊 Trust me, you would have had a different opinion about Python GUI if you went the Tkinter way instead 😁

[@nurhesen]

Doesn't it cost 550$?

[@angy586]

Really interesting, Hello from Belgium !

[@ellukayou]

Nice, I am learning a lot

[@TheMariaku]

Thank you - you are doing awwwwesome stuff! (And without music it’s so so much better - just a tip. For mus background ppl speech with music doubles the brain work)

[@delliott8749]

im very excied for your new vidwo. i AM big fan. #1. you are the best

[@PythonSimplified]

Thank you so much D Elliot! 😊 I'm glad you're enjoying my videos!

[@avazart614]

Why you do not use *.ui files and Designer (or Qt Creator) ? For window you can use QMainWindow.

[@okoeroo]

Nicely explained.

[@leweed3049]

oh yeah i am SOO ready

[@portinho199]

I simply turned fan! Subscripted immediately!!! lol My english is not really very good, but you explain with clarity, calm and one form that is very easy to understand you! Particularly, I would like to learn PyQt in a complete project. If it's possible you to make it, I'll be very thankful. Best regards from Brazil

[@PythonSimplified]

Muito Obrigado Luis! Thank you so much! 😀 I'm so happy you find my English easy to understand! I'm always trying to speak as clearly as possible to make sure nobody gets confused because of my accent hahah 😊 Did you have a chance to see the second part of this project? this will connect a Trivia questions database to the interface and complete the app: kzbin.info/www/bejne/qGO9f2OjiamhhsU And then once you finished building it and would like to learn how to convert it to an .exe file, you can checkout another video of mine (much shorter this time 😅 hahaha): kzbin.info/www/bejne/j2Grf2yqmbGogNE Good luck and welcome aboard! 😁

[@portinho199]

​@@PythonSimplified ahahahah, you risked to write in Portuguese...Very Nice! Yes, I'll see all videos and try to learn about PyQt becouse it's in my opinion the best and beautiful GUI for Python program. Thanks a lot for your attention and care!

[@larryvincentregencia8362]

With regards to the styling, you can also create a separate python file specifically for it right and just import them especially if your dealing with multiple styles for buttons or whatever widget?

[@MrYankyfanky]

Однозначно like!

[@PythonSimplified]

Sposibo bolshoie Zahar! 😃

[@marketing-vendas1125]

Awesome!

[@TheSantosManu]

Nice work, amazing timestamps index

[@samjebaraj24]

Thanks for the amazing tutorial

[@PythonSimplified]

You're welcome Sam! I'm glad you liked it! 😊

[@Swanicorn]

Dare I say you are the better version of TheCodingTrain for me. They are a bit too advanced for someone just hopping on to their train. I love your format. You make programming less scary by using the simplest forms of the instructions and breaking them into separate lines. QUESTION: you are hard coding the margins, padding and window size. Do you have any video on how to automatically scale the parameters based on the resolution of the end user's device? Or maybe if the end user tries to resize the window which then causes the various button to scale and squish together or expand depending on the window size, kind of like how KZbin video player does when you resize the browser window. Is that even possible to do easily?

[@deanb500]

These videos are excellent, really easy to follow along to, well thought out and interesting for green as grass beginners like myself. If i had one negative thing to say it would be to please take the mic off of the desk - im a headphone user and every keystroke sounds like a dubstep wub wub.

[@PythonSimplified]

Thank you for the lovely feedback Dean! The sound recording for this video in particular is unfortunatley very bad! 😭 you could hear my computer in the background so I had to correct it with a bunch of filters - the result unfortunatley included horrific keypress sounds... But the audio on other videos is a thousand times better!! this one is a one time oopsie! 😀

[@deanb500]

@@PythonSimplified I’m looking forward to part 2 of this one while I work through part 2 of the PDF extractor app you made. It’s actually turned out to be quite useful for work!

[@blindeagle7469]

Great video!! Very helpful 🔥🔥

[@PythonSimplified]

Thank you so much Blind Eagle! Glad you liked it! 😄

[@egorkomarov4719]

Thanks! I love your videos =)

[@PythonSimplified]

большое спасибо Егор!!! 😁😁😁

[@egorkomarov4719]

@@PythonSimplified 😱😍

[@wingsoftechnology5302]

Awesome ....!!

[@yeetpizza7452]

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,

[@saidneder41]

You are amazing!

[@aaroncatolico7550]

You look like Mary-Kate and Ashley Olsen ('Olsen twins') from the 90's tv show - 'Full House'. Anyhow, great tutorial, kiddo. 👍👍

[@michaelonyando2373]

Great video, great code. I just have one problem, after calling the start_game method in the button widget, when I try running the program, it only shows frame2

[@ExelGamboa]

Thank you!

[@hussainabbas1341]

Nice video style I like it

[@erikvansoest9926]

Very well done. Nice video and excellent presentation.

[@PythonSimplified]

Thank you so much Erik, I'm glad you liked my tutorial! 😀

[@Team_BSE]

Nice to see greatings from every corner in the world. Little kisses out of Germany!

[@PythonSimplified]

I agree, it's absolutely amazing how international we are on this channel! 😃 Hugs from Canada! (sorry, I'm not single enough to send online kisses to strangers 🤣🤣🤣)

[@Team_BSE]

@@PythonSimplified : That was just little kidding, didn't want to get u to personal. Its nearly 2pm in Germany and i'm melting my brain with this silly rats of permissions in Linux...

[@PythonSimplified]

No worries,@@Team_BSE, I was also joking! :) I'm actually writing you this comment from my old laptop that was magically fixed with Linux and foam tape! :D I'm only beginning to discover how AMAZING this OS is (even though I'm struggling myself with all the "sudo" stuff and drivers 😅). I really wish they had Adobe products available on it though, I can't fully give up on Windows until they do so... good luck with the permissions! :)

[@TheGrudge80]

you could use QStackedWidget to implement the "frames". Also a tripple quoted f-string could be used for the stylesheet :-)

[@chrisray1567]

Wait, triple quote strings can be f strings?

[@giuliadavila9013]

Hi! you have really good content. I´m using Qt Designer with PyQt5, so I dont have to build the GUI from 0 on. Is there any chance that you have a video using both together? I´m new in this world. Thank you!

[@flioink]

Done this one, took longer to complete because the css styling adds level of confusion if one hasn't used it.

[@rohitkumarsir387]

Congratulations for +20k subscribe

[@emilie1977]

Thanks. How deploy this app? Is it possible to have an executable file?

[@Voltaje_YT]

I wish a PyQt6 tutorial now, wonder what kind of new stuff it can do Xd.

[@ambientsoda106]

You tutorial is amazing - but is there a way to create custom window bar and close button?

[@occupytheweb8855]

Bravo 👏💙

[@idukunda_lengo]

Well explained!!!

[@PythonSimplified]

Thank you so much! 😊