Electron Desktop App Development · Aula

Integração de HTML, CSS e JavaScript

Entenda como as tecnologias web padrão formam a base da interface do Electron, permitindo que você use sua experiência existente em desenvolvimento web.

Integração de HTML, CSS e JavaScript é uma aula grátis de Electron Desktop App Development no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Electron Desktop App Development, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Electron Desktop App Development inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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.

Perguntas Frequentes

A aula “Integração de HTML, CSS e JavaScript” é grátis?

Sim — o texto completo de “Integração de HTML, CSS e JavaScript” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Electron Desktop App Development, atualize para CoddyKit PRO. O curso de Electron Desktop App Development inclui 4 aulas no total.

O que vou aprender em “Integração de HTML, CSS e JavaScript”?

Entenda como as tecnologias web padrão formam a base da interface do Electron, permitindo que você use sua experiência existente em desenvolvimento web. Você pratica Electron Desktop App Development com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Electron Desktop App Development?

Nenhuma experiência prévia é necessária. Electron Desktop App Development no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Integração de HTML, CSS e JavaScript”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Electron Desktop App Development?

Sim. Cada aula de Electron Desktop App Development inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Electron Desktop App Development