How to Create a Modern User Interface Using HTML, CSS, and JS in Python 😍
Tags: python, ui, programming, tutorial
Published: 2024-01-01 23:00:00

## Hi 🙂🖐

In this tutorial, we will learn how to create a modern user interface using HTML, CSS, and JS in Python. We will start by creating a basic HTML structure, then we will add CSS to style the elements, and finally, we will add JS to add interactivity.

In this tutorial, I will use a module called **eel**
Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.

## Install eel 

`pip install eel`

## Step 1
Create HTML, CSS, JS files and save them into folder named web


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqaklmub4n5zty92rojv.PNG)


## Step 2

Create `main.py` file

```python
import eel

eel.init('web')

eel.start('index.html')
```

## result


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0u9u6gzhnk0glvgxko71.PNG)


Change Height and width of eel window
```python
import eel

eel.init('web')

eel.start('index.html', size = (800, 500))
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9kd6orn16z811pnj0nb.PNG)


# Step 3
Add some CSS style and div

CSS File:
```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.text {
    font-weight: bold;
    margin: 100px auto;
    width: 80%;
    background-color: beige;
    text-align: center;
    padding: 20px;
    font-size: 22px;
}
```

HTML File:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
    <body>

        <div class="text">
            Hello, World
        </div>
        
     
    </body>
</html>
```

## result

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn4ccfew0tre93wucyo5.PNG)


## Add javascript and get returned value from python function

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
    <body>

        <div class="text">
            Hello, World
        </div>
        

        <script src="/eel.js"></script>
        <script src="main.js"></script>
    </body>
</html>

```

In addition to the files in the frontend folder, a Javascript library will be served at /eel.js. You should include this in any pages

`main.py`

```python
import eel

eel.init('web')


@eel.expose
def hello():
    return 'Hello World From Pyhton'

eel.start('index.html', size = (800, 500))
```

`main.js`

```javascript
let text = document.querySelector('.text');

async function get_value_from_python () {
    let msg = await eel.hello()();
    text.textContent = msg
}

get_value_from_python()
```

## result



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3fr7yswp3ddxxmd1k00.PNG)


## Send data from Javascript to Python 

`main.js`

```javascript

eel.expose(js_random);
function js_random() {
  return Math.random();
}
```

`main.py`

```python
import eel

eel.init('web')


def print_num(n):
    print('Got this from Javascript:', n)

# Call Javascript function, and pass explicit callback function
eel.js_random()(print_num)

eel.start('index.html', size = (800, 500))
```

learn more: https://github.com/python-eel/Eel



**Now we're done 🤗**

**Don't forget to like and follow 🙂**

**Support me on PayPal 🤗**
https://www.paypal.com/paypalme/amr396