In our community in Telegram the question was recently raised: how to link Python with HTML and CSS to get a real website?
The answer is simple — with the help of Flask, one of the most popular microframeworks. This article is your first step to creating a website with Python: from installation to launch, with all the explanations and examples.
🐍 Why Flask?
Flask is a minimalist framework for creating web applications. Its advantages:
✅ Easy start
✅ Simple architecture
✅ Support for HTML templates (Jinja2)
✅ Flexibility — you decide how to build a project
⚙️ What do you need to install?
Before you start, make sure you have Python 3.7 or higher installed.
pip install flaskInstallation check:
python -c "import flask; print(flask.__version__)"📁 Project structure
my_website/
├── app.py
├── templates/
│ └── index.html
└── static/
└── style.csstemplates — for HTML, static - for CSS, JS and images.
🧠 Step 1: Flask application (app.py)
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)🖼 Step 2: HTML template (templates/index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт на Flask</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>Привет из Flask!</h1>
<p>Это наш первый сайт на Python с HTML и CSS 🐍</p>
</body>
</html>🎨 Step 3: CSS Styles (static/style.css)
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f5f5f5;
color: #333;
text-align: center;
margin-top: 80px;
}
h1 {
color: #0077cc;
font-size: 36px;
}
p {
font-size: 20px;
color: #555;
}🚀 How to launch a project?
Open the terminal and go to the project folder:
cd my_websiteStart the server:
python app.pyGo to the browser: http://127.0.0.1:5000
🔍 How is it all connected?
Component | What it does |
|---|---|
Flask | Accepts a request from the user |
HTML template | Gives the browser a page |
CSS | Gives a stylish design |
Python | Manages logic, routes and data |
🧱 What can be improved?
➕ Add more routes
🧾 Transfer data to templates
📄 Connect Bootstrap or Tailwind
🗃 Add forms and database work
👀 Mini life hack
@app.route("/hello/<name>")
def hello(name):
return f"<h2>Hello, {name}!</h2>"Now when you switch to /hello/Кодик you will receive a greeting 🖐
Want more practice? Kodik app There are courses on Python, HTML, and other technologies. Complete tasks, go through mini-projects and communicate with other developers in our Telegram community.
💬 Write in the comments if you want a continuation — forms, database or deployment on hosting!