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

En español

Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.

!Courses from!

10$

On Udemy

There are 4d 08:17!


Udemy

!Courses from!

4$

In Academy

View courses

!Books from!

1$

See the books
¡Become an affiliate on Gumroad!