Build stunning and advanced desktop applications that matters - with web technologies you already know or heard of (HTML, CSS and Javascript). Desktop applications is a billion dollar business and it's only going to keep on growing as companies like WhatsApp, Skype, Adobe, Microsoft, GitHub among other top companies are still pushing a lot into desktop application development. The only down side is that, there are fewer desktop developers than web developers and that is where you come in.
Master Electron Framework And Build 5 Advanced Desktop Apps
8h 13m 6s
English
Paid
Now is the best time for you to learn desktop application development and put yourself at the forefront of this billion dollar industry.
Whether you want to get a job as a desktop application developer or build the next billion dollar desktop application that matters. Whether you’re an advanced web developer or you’re now starting out.
Now is your best time to enroll in this electron course and learn everything you need, from setup to building traditional desktop applications, all the way to building system tray applications and even packaging and distributing your desktop apps on all operating systems including windows, macOS and linux.
What you’ll build in this course
A Fully Fledged Text Editor: We're going to cover the moving parts of an electron application by building this very first app. We’ll cover concepts like main and renderer process, Inter process communication (IPC), Dialogs among others, which should get you familiar with how electron apps are built.
A Complex Music Player: We will take things a step further by building a complex music player which has playlist, can pause, play next, play previous etc.
A System Tray Music Player: We will then convert our music player from a traditional desktop application to a system tray app. At the end, we should be able to start and stop our music player from the system tray.
A Top Headlines News Reader: We will then have some fun with a news reader application which also has the complexity of multiple categories and article search. We will learn how to launch multiple “pages” in our app.
A Radio Streaming App: I can now stream my favourite radio stations with this app almost every time I code. We’ll build this radio streaming app from scratch, which you can also use.
Packaging: We will package and distribute the music player app we built in this course for windows, macOS and Linux. After this section, you should know how to package and distribute your application for all operating systems.
We’re Going To Cover Topics Like:
Setting up your PC for building electron apps
Packaging and distributing your electron applications for all operating systems
Designing stunning and native interface for your desktop apps
Creating traditional desktop applications
Creating desktop applications that run in the system tray
Building applications with multiple “pages”
The history behind electron and what it's all about
Using the electron documentation
After Taking This Course You Should Be Able to:
Design and Build electron applications that matters.
Package and distribute your electron application for windows, linux and macOS
Secure an electron desktop application developer position
Use the electron documentation for any desktop app feature that isn’t covered in this course
This is a hands-on practical electron course that get's you up to speed with building cross platform native desktop applications with web technologies you're already familiar with. Learn everything you need to become a master electron desktop application developer
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 85 lessons
0:00
/ #1: What You Have to Know About Electron
All Course Lessons (85)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | What You Have to Know About Electron Demo | 06:05 | |
| 2 | Recommended Resources For Learning HTML, CSS, JS | 04:19 | |
| 3 | What is Node JS? | 02:17 | |
| 4 | Installing Node JS on macOS and Linux | 03:25 | |
| 5 | Installing Node JS on Windows | 04:19 | |
| 6 | Summary | 00:20 | |
| 7 | Demo of Electro Editor | 02:54 | |
| 8 | Installing Electron v5 With npm | 05:47 | |
| 9 | Main.js And Running Electron | 09:51 | |
| 10 | Adding our Renderer Process | 05:44 | |
| 11 | Introduction to Photon UI Kit | 04:22 | |
| 12 | Building Renderer With Photon Kit | 13:14 | |
| 13 | Building Renderer With Photon Kit (Continuation) | 05:09 | |
| 14 | Increasing and Decreasing The Font Size | 05:52 | |
| 15 | Getting The Text Logged | 05:11 | |
| 16 | All About Inter Process Communication (IPC) | 07:26 | |
| 17 | Sending Data to The Main Process | 08:09 | |
| 18 | Node Integration - Watch Out!!! | 03:59 | |
| 19 | Writing Content to File | 07:21 | |
| 20 | Adding The Save Dialog | 13:33 | |
| 21 | Showing The Save Dialog First Time Only | 08:00 | |
| 22 | Sending Data Back to The Renderer Process | 06:47 | |
| 23 | Adding a Save Status Alert to Renderer | 05:19 | |
| 24 | Native Menu in Electron - The Template | 09:08 | |
| 25 | Making Menu Compatible with macOS | 15:14 | |
| 26 | Finishing Up Our Menu | 08:46 | |
| 27 | Adding Menu Keyboard Shortcut | 07:32 | |
| 28 | Wrap Up With Electro Editor Desktop App | 03:47 | |
| 29 | Demo of Electron Music Player | 05:30 | |
| 30 | Init npm And Install Electron v5 | 04:59 | |
| 31 | Setup Main and Renderer Process | 05:42 | |
| 32 | Building The Renderer | 02:49 | |
| 33 | Button Click to Choose Songs | 06:51 | |
| 34 | Get Songs and Intro to mm Package | 07:53 | |
| 35 | Using The mm Package to Get Data From Songs | 10:04 | |
| 36 | Displaying All Songs in Our Renderer Process | 06:14 | |
| 37 | Playing The Song | 11:46 | |
| 38 | Showing Current Playing Song Title | 02:31 | |
| 39 | Making Our Play-Pause Button Work | 09:38 | |
| 40 | The Previous And Next Song Buttons | 08:24 | |
| 41 | Showing The Current Song Time and Total Duration | 11:08 | |
| 42 | Let's Clear The Playlist | 06:14 | |
| 43 | Wrap Up With Music Player | 01:41 | |
| 44 | NEW!!! Adding Volume Control | 09:23 | |
| 45 | NEW!!! Style Your App Challenge | 04:42 | |
| 46 | Introduction To Tray Applications | 03:25 | |
| 47 | Demo of Tray Player | 01:52 | |
| 48 | Tray in The Docs and Setup | 04:05 | |
| 49 | Adding The Tray Icon | 04:06 | |
| 50 | Fix Disappearing Icon and Remove App Frame | 04:49 | |
| 51 | Hide App on Blur and Remove From Dock | 04:29 | |
| 52 | Icon And Application Bounds | 13:19 | |
| 53 | Adding a Context Menu and Tooltip | 05:54 | |
| 54 | We're Almost There | 01:09 | |
| 55 | DESKTOP NOTIFICATIONS!!! - Adding notification to our App | 08:51 | |
| 56 | Demo of Electro News App | 02:20 | |
| 57 | npm Init and Install Electron | 04:02 | |
| 58 | Starting The Electron Process | 05:54 | |
| 59 | Building The Renderer Process | 02:51 | |
| 60 | Intro and Installing NewsAPI | 05:44 | |
| 61 | Getting Top Headlines From NewsAPI | 06:33 | |
| 62 | Showing All News In Renderer | 09:18 | |
| 63 | Reading Articles | 04:41 | |
| 64 | Let's Add News Categories | 09:24 | |
| 65 | Some Highlight to The Active Category | 02:39 | |
| 66 | Let's Not Forget The News Search | 08:57 | |
| 67 | Wrap Up With Electro News App | 01:17 | |
| 68 | Demo of Electro Radio | 02:04 | |
| 69 | Let's Setup | 04:10 | |
| 70 | Main and Renderer Process | 03:52 | |
| 71 | Finish Renderer and Intro to FM API | 05:44 | |
| 72 | Getting All Radio Stations | 06:51 | |
| 73 | Showing all Stations in the Renderer | 04:23 | |
| 74 | Streaming The Radio Stations | 05:34 | |
| 75 | Some Highlight to Current Station | 05:25 | |
| 76 | Wrap Up With Electro Radio App | 01:06 | |
| 77 | Let's Package Our Music Player | 01:21 | |
| 78 | Requirements for Windows Operating System | 01:24 | |
| 79 | Requirements for macOS and Linux | 03:06 | |
| 80 | Packaging Electron Apps for Windows Operating System | 12:16 | |
| 81 | Packaging Electron Apps for macOS | 04:42 | |
| 82 | Packaging Electron Apps for Linux | 04:30 | |
| 83 | Shortcuts to Make Everything Simpler | 08:19 | |
| 84 | Electron Docs: Everything Else You Need | 02:30 | |
| 85 | Bonus Lecture | 00:51 |
Unlock unlimited learning
Get instant access to all 84 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 2y agoDesktop apps with Angular, Firestore and Electron
By: UdemyThis course takes you on a developer journey where you'll be building a complete desktop application that runs on any platform (Windows, Mac.11h 28m -
Updated 2y agoElectron From Scratch: Build Desktop Apps With JavaScript
By: Udemy, Brad TraversyCreate 3 useful desktop applications with web technologies using Electron. This is a hands on.5h 48m5/5 -
Updated 2y agoAdvanced Projects in Electron 4, React, and Redux
By: UdemyWould you love to use your web development skills to build best-selling desktop apps? In recent years developers have shifted from desktop apps to web or mobile3h 1m5/5
Frequently asked questions
What prerequisites should I have before enrolling in this course?
Before enrolling in this course, you should have a basic understanding of HTML, CSS, and JavaScript, as these web technologies are foundational to the concepts taught in the course. Familiarity with Node.js is also beneficial, as the course includes lessons on installing and using Node.js to support Electron development.
What types of applications will I learn to build in this course?
The course guides you through building five advanced desktop applications using the Electron framework. Examples include the Electro Editor, which involves text editing capabilities, and the Electron Music Player, which features song selection and playback controls. These projects leverage web technologies and demonstrate key features like inter-process communication and native menus.
Who is the target audience for this course?
This course is designed for web developers who want to expand their skills into desktop application development using technologies they are already familiar with, such as HTML, CSS, and JavaScript. It is particularly suitable for developers interested in leveraging their web development skills to create desktop applications.
Does this course cover the Photon UI Kit?
Yes, the Photon UI Kit is covered in the course. Lessons include building the renderer with the Photon Kit and continuing to develop UI components, which help in crafting visually appealing desktop applications with Electron.
What is not covered in this course?
The course does not cover advanced backend development or server-side programming. It focuses specifically on using Electron for desktop application development, utilizing web technologies and Node.js for application logic and rendering.
How much time should I commit to completing this course?
The course consists of 85 lessons. While the total runtime is not specified, students should plan to invest significant time in both watching the lessons and applying the concepts through the hands-on projects, such as developing the Electro Editor and Electron Music Player.
How can the skills learned in this course benefit my career?
The skills acquired in this course can significantly benefit your career by enabling you to create cross-platform desktop applications. This ability is valuable in the tech industry as companies continue to invest in desktop applications. Mastery of Electron can also open up opportunities in companies that use or develop desktop applications, such as Adobe, Microsoft, and GitHub.