Mengintegrasikan HTML, CSS, JavaScript
Pahami bagaimana teknologi web standar menjadi fondasi UI Electron, sehingga Anda dapat memanfaatkan keahlian pengembangan web yang sudah dimiliki.
Mengintegrasikan HTML, CSS, JavaScript adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Electron Desktop App Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Electron Desktop App Development mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
Web UI with HTML, CSS, JS
Welcome! In Electron, you build desktop app interfaces using the same technologies you'd use for a website: HTML, CSS, and JavaScript.
This means your existing web development skills are directly transferable. Let's see how!
Meet the Renderer Process
An Electron app has a Main Process and one or more Renderer Processes.
- The Main Process handles native OS interactions.
- The Renderer Process is essentially a Chromium web browser instance. It's where your HTML, CSS, and JavaScript run, forming your app's user interface.
Think of each Electron window as its own renderer process.
HTML for Structure & Content
HTML (HyperText Markup Language) is the backbone of any web page, including your Electron app's UI.
It defines the structure and content:
- Headings (
<h1>,<h2>) - Paragraphs (
<p>) - Buttons (
<button>)
It's like the blueprint for your app's layout.
Displaying HTML Content
Your Electron main process loads an HTML file into a renderer process (a new window). This HTML file becomes your app's initial view.
Here's how `main.js` loads a simple `index.html` file:
The `index.html` might contain:<h1>Hello Electron!</h1><p>My first desktop UI.</p>
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
// Load the index.html file
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});CSS for Styling Your UI
CSS (Cascading Style Sheets) is used to control the presentation of your HTML content. It dictates how your app looks.
With CSS, you can define:
- Colors and backgrounds
- Fonts and text sizes
- Layout (margins, padding, positioning)
It turns your HTML blueprint into a visually appealing interface.
Linking & Applying Styles
You link a CSS file to your HTML using a <link> tag in the <head> section of your `index.html`.
For example, to style the previous `h1` element:
Your `index.html` would include:<link rel="stylesheet" href="style.css">
And `style.css` could contain:h1 { color: #3366ff; text-align: center; }
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});JavaScript for Interactivity
JavaScript (JS) adds dynamic behavior and interactivity to your Electron app's UI.
It allows you to:
- Respond to user actions (clicks, key presses)
- Manipulate HTML content and CSS styles
- Fetch data from APIs
JS turns a static page into a dynamic, responsive application.
Implementing UI Logic with JS
You can embed JavaScript directly in your HTML using <script> tags or link external .js files.
Let's add a button and make it display an alert when clicked:
Your `index.html` would include:<button id="myButton">Click Me!</button><script>document.getElementById('myButton').addEventListener('click', () => { alert('Hello from Electron!'); });</script>
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
});
win.loadFile(path.join(__dirname, 'index.html'));
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});HTML, CSS, JS: A Unified Stack
Together, HTML, CSS, and JavaScript form a powerful and familiar stack for building Electron user interfaces.
- HTML provides the content and structure.
- CSS defines the visual presentation.
- JavaScript adds interactivity and dynamic behavior.
This allows web developers to leverage their existing knowledge to create robust desktop applications.
Web Tech Roles
Which of the following statements correctly describe the role of HTML, CSS, and JavaScript in an Electron renderer process?
Recap: Web UI Basics
Today, we learned that Electron uses familiar web technologies – HTML, CSS, and JavaScript – to build desktop application user interfaces.
- The renderer process is where these web technologies run.
- HTML structures the content.
- CSS styles the appearance.
- JavaScript adds dynamic behavior.
You now understand the fundamental building blocks of an Electron UI. Next, we'll explore how to integrate popular frontend frameworks.
Belajar JavaScript dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 12
- Pelajaran
- 47
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Mengintegrasikan HTML, CSS, JavaScript” gratis?
Ya — teks lengkap “Mengintegrasikan HTML, CSS, JavaScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Electron Desktop App Development, upgrade ke CoddyKit PRO. Kursus Electron Desktop App Development mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Mengintegrasikan HTML, CSS, JavaScript”?
Pahami bagaimana teknologi web standar menjadi fondasi UI Electron, sehingga Anda dapat memanfaatkan keahlian pengembangan web yang sudah dimiliki. Kamu berlatih Electron Desktop App Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Electron Desktop App Development?
Tidak diperlukan pengalaman sebelumnya. Electron Desktop App Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Mengintegrasikan HTML, CSS, JavaScript” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Electron Desktop App Development ini?
Ya. Setiap pelajaran Electron Desktop App Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengintegrasikan HTML, CSS, JavaScript
- Menggunakan Kerangka Kerja Frontend
- Desain Desktop Responsif
- Dukungan Tema dan Mode Gelap