Building a Web Page for McCance Foundation Contractor Using Python

Creating a Web Page for McCance Foundation Contractor Using Python

A professional web presence is essential for any business, including McCance Foundation Contractor. In this blog, we'll walk through creating a simple web page using Python with the Flask framework, HTML, and CSS.

Step 1: Install Flask

To get started, install Flask using pip:

pip install flask

Step 2: Project Structure

Create a project folder and organize it as follows:

mcCance_website/
│── static/
│   ├── style.css
│── templates/
│   ├── index.html
│── app.py

Step 3: Create the Flask App (app.py)

Create a file named app.py and add the following code:

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)

This code sets up a basic Flask application that renders an HTML page.

Step 4: Create the HTML File (templates/index.html)

Inside the templates folder, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>McCance Foundation Contractor</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>Welcome to McCance Foundation Contractor</h1>
    </header>
    <section>
        <p>Providing top-tier foundation and drainage solutions in Hampshire, UK.</p>
    </section>
</body>
</html>

Step 5: Add CSS Styling (static/style.css)

Inside the static folder, create a style.css file:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;
}
header {
    background-color: #004080;
    color: white;
    padding: 20px;
}
section {
    margin: 20px;
    font-size: 18px;
}

Step 6: Run the Application

Navigate to the project folder and run:

python app.py

Open http://127.0.0.1:5000/ in your web browser to see your McCance Foundation Contractor web page.

Conclusion

With just a few lines of code, we’ve created a simple web page for McCance Foundation Contractor using Python and Flask. This setup provides a foundation for expanding the website with more features like contact forms, service listings, and client testimonials.

Want to add more features? Let us know!

Building a Web Page for McCance Foundation Contractor Using Python and Flask