Second app built in Electron.js: HTML and a bit of CSS
A basic application in Electron.js, it is pure HTML as we showed before, of course, we can integrate this HTML with Electron to provide it with operating system functionalities such as menus, window management, etc., but, everything begins with a simple HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: purple;
}
h1 {
text-align: center;
}
#customId{
display: block;
width: 100%;
}
section{
background-color: #FFF;
font-family: Georgia;
padding: 25px;
margin-top: 10px;
}
</style>
</head>
<body>
<main>
<h1>Page Detail</h1>
<img id="customId" src="https://cdn.pixabay.com/photo/2022/08/16/20/02/wallpaper-7391054__340.jpg" alt="">
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dicta nulla asperiores, similique iure quas
optio! Error quasi doloremque illo voluptatem, fugiat voluptate exercitationem, qui repudiandae officiis
ipsa corrupti animi.</p>
</section>
</main>
</body>
</html>In this example, as you can see, we are placing HTML and CSS content, which are the fundamental pieces in any web development and in Electron, it cannot be the exception when executing the application, we will have:
Remember that the main.js code is the same as the one used in the first application. Remember that the previous material is part of my complete course on Electron.js
Remember that the previous material is part sobre mi curso completo sobre Electron.js
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter