Source Code

index.html (version 1)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>Hello, World!</title>
    </head>
    <body>
        Hello, World!
        <h1>Main Title (Largest)</h1>
        <h2>Section Title</h2>
        <h3>Subsection Title</h3>
        <h4>Sub-subsection Title</h4>
        <h5>Small Title</h5>
        <h6>Smallest Title</h6>
        <p>This is a paragraph of text.</p>
        <strong>Bold text</strong>
        <em>Italic text</em>
        <u>Underlined text</u>
        <br>
        <hr>
        <ul>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ul>
        <ol>
            <li>First step</li>
            <li>Second step</li>
            <li>Third step</li>
        </ol>
    </body>
</html>

styles.css

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

/* Header styles */
#main-header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

#main-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 1.2rem;
    font-weight: 300;
}

/* Main content */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.content-section {
    background-color: white;
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.content-section h2 {
    color: #2c3e50;
    margin-bottom: 1rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

.highlight {
    background-color: #fff3cd;
    padding: 1rem;
    border-left: 4px solid #ffc107;
    margin: 1rem 0;
}

/* Skills list */
.skills-list {
    list-style: none;
}

.skills-list li {
    background-color: #3498db;
    color: white;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    display: inline-block;
    margin-right: 1rem;
}

/* Footer */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}

index.html (version 2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Styled Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header id="main-header">
        <h1>Welcome to My Website</h1>
        <p class="subtitle">A beautifully styled page</p>
    </header>

    <main>
        <section class="content-section">
            <h2>About Me</h2>
            <p>I'm learning CSS and loving how it transforms plain HTML!</p>
            <p class="highlight">This paragraph stands out from the rest.</p>
        </section>

        <section class="content-section">
            <h2>My Skills</h2>
            <ul class="skills-list">
                <li>HTML</li>
                <li>CSS</li>
                <li>Python and Flask (coming soon!)</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 My Website</p>
    </footer>
</body>
</html>

app.py (version 1)

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == '__main__':
    app.run(debug=True)

app.py (version 2)

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run(debug=True)

app.py (version 3)

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route('/user/<username>/<int:age>')
def show_user(username, age):
    return render_template('index.html', username=username, age=age)

if __name__ == '__main__':
    app.run(debug=True)

index.html (version 3)

<!DOCTYPE html>
<html>
    <head>
        <title>User Info</title>
    </head>
    <body>
        <h1>User Profile</h1>
        <p><strong>Username:</strong> {{ username }}</p>
        <p><strong>Age:</strong> {{ age }}</p>
    </body>
</html>

app.py (version 4)

from flask import Flask, render_template, request, redirect
import sqlite3

app = Flask(__name__)

def get_db_connection():
    conn = sqlite3.connect('database.db')
    conn.row_factory = sqlite3.Row
    return conn

def init_db():
    conn = get_db_connection()
    conn.execute('''
        CREATE TABLE IF NOT EXISTS tasks (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            title TEXT NOT NULL
        )
    ''')
    conn.commit()
    conn.close()

init_db()

@app.route("/")
def index():
    conn = get_db_connection()
    tasks = conn.execute("SELECT * FROM tasks").fetchall()
    conn.close()
    return render_template("index.html", tasks=tasks)

@app.route("/add", methods=["POST"])
def add():
    title = request.form["title"]
    conn = get_db_connection()
    conn.execute("INSERT INTO tasks (title) VALUES (?)", (title,))
    conn.commit()
    conn.close()
    return redirect("/")

@app.route("/delete/<int:id>")
def delete(id):
    conn = get_db_connection()
    conn.execute("DELETE FROM tasks WHERE id = ?", (id,))
    conn.commit()
    conn.close()
    return redirect("/")

index.html (version 4)

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <h1>To-Do List</h1>
    <form action="/add" method="post">
        <input name="title" placeholder="Enter task" required>
        <button type="submit">Add</button>
    </form>

    <ul>
        {% for task in tasks %}
            <li>
                {{ task['title'] }}
                <a href="/delete/{{ task['id'] }}">[Delete]</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

PreviousActivities NextHTML Basics

Last updated 4 months ago