HTML, CSS und JavaScript integrieren
Verstehen Sie, wie standardmäßige Webtechnologien das Fundament der Electron-Oberfläche bilden und Ihnen die Nutzung Ihrer vorhandenen Webentwicklungserfahrung ermöglichen.
HTML, CSS und JavaScript integrieren ist eine kostenlose Electron Desktop App Development-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Electron Desktop App Development-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 12
- Lektionen
- 47
Häufig gestellte Fragen
Ist die Lektion „HTML, CSS und JavaScript integrieren“ kostenlos?
Ja — der vollständige Text von „HTML, CSS und JavaScript integrieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Electron Desktop App Development-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Electron Desktop App Development-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „HTML, CSS und JavaScript integrieren“?
Verstehen Sie, wie standardmäßige Webtechnologien das Fundament der Electron-Oberfläche bilden und Ihnen die Nutzung Ihrer vorhandenen Webentwicklungserfahrung ermöglichen. Du übst Electron Desktop App Development mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Electron Desktop App Development zu starten?
Keine Vorkenntnisse erforderlich. Electron Desktop App Development auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „HTML, CSS und JavaScript integrieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Electron Desktop App Development-Lektion Code schreiben und ausführen?
Ja. Jede Electron Desktop App Development-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- HTML, CSS und JavaScript integrieren
- Frontend-Frameworks verwenden
- Responsives Desktop-Design
- Themes und Unterstützung für den Dark Mode