Electron Desktop App Development · Leçon

Intégrer HTML, CSS et JavaScript

Comprenez comment les technologies Web standard constituent la base de l’interface d’Electron et vous permettent de réutiliser votre expertise existante en développement Web.

Intégrer HTML, CSS et JavaScript est une leçon Electron Desktop App Development gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Electron Desktop App Development, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Electron Desktop App Development comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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.

Questions Fréquemment Posées

La leçon « Intégrer HTML, CSS et JavaScript » est-elle gratuite ?

Oui — le texte complet de « Intégrer HTML, CSS et JavaScript » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Electron Desktop App Development, passe à CoddyKit PRO. Le cours Electron Desktop App Development comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Intégrer HTML, CSS et JavaScript » ?

Comprenez comment les technologies Web standard constituent la base de l’interface d’Electron et vous permettent de réutiliser votre expertise existante en développement Web. Tu pratiques Electron Desktop App Development avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Electron Desktop App Development ?

Aucune expérience préalable n'est requise. Electron Desktop App Development sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Intégrer HTML, CSS et JavaScript » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Electron Desktop App Development ?

Oui. Chaque leçon Electron Desktop App Development inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Intégrer HTML, CSS et JavaScript
Utiliser des frameworks frontend
Conception de bureau adaptative
Thèmes et prise en charge du mode sombre

← Retour à Electron Desktop App Development