Integrazione di HTML, CSS e JavaScript
Comprenda come le tecnologie web standard costituiscano la base dell’interfaccia utente di Electron, consentendo di utilizzare le competenze già acquisite nello sviluppo web.
Integrazione di HTML, CSS e JavaScript è una lezione Electron Desktop App Development gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Electron Desktop App Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Electron Desktop App Development include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Integrazione di HTML, CSS e JavaScript» è gratuita?
Sì — il testo completo di «Integrazione di HTML, CSS e JavaScript» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Electron Desktop App Development, passa a CoddyKit PRO. Il corso Electron Desktop App Development include 4 lezioni in totale.
Cosa imparerò in «Integrazione di HTML, CSS e JavaScript»?
Comprenda come le tecnologie web standard costituiscano la base dell’interfaccia utente di Electron, consentendo di utilizzare le competenze già acquisite nello sviluppo web. Eserciti Electron Desktop App Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Electron Desktop App Development?
Non è richiesta alcuna esperienza precedente. Electron Desktop App Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Integrazione di HTML, CSS e JavaScript»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Electron Desktop App Development?
Sì. Ogni lezione Electron Desktop App Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Integrazione di HTML, CSS e JavaScript
- Utilizzo dei framework frontend
- Design desktop responsivo
- Temi e supporto alla modalità scura