Skip to main content

Website Build Project

Help Information: Website Build project at Google Slides

Code for project​

Import OS and Regular Expression Modules​

import os
import re

Slugify Function​

def slugify(title):
    """Convert the page title to a filename-friendly slug."""
    if title.lower() == "home":  # Ensure 'Home' becomes 'index.html'
        return "index.html"
    return re.sub(r'\W+', '-', title.strip().lower()) + ".html"

Generate Navigation Function​

def generate_nav(titles, active_title):
    """Generate a dynamic navigation bar with an active page highlight."""
    nav_links = ""
    for title in titles:
        filename = slugify(title)
        active_class = ' class="active"' if title == active_title else ""
        nav_links += f'\t\t\t<a href="{filename}"{active_class}>{title}</a>\n'
    return nav_links.strip()

Create HTML file Function​

def create_html_file(title, titles, output_dir="build"):
    """Generate and write HTML content based on the page title."""
    filename = slugify(title)
    nav = generate_nav(titles, active_title=title)

    html_content = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{title}</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            {nav}
        </nav>
        <div class="content">
            <h1>{title}</h1>
            <p>This is the {title.lower()} content.</p>
        </div>
    </body>
    </html>
    """

    output_path = os.path.join(output_dir, filename)
    os.makedirs(output_dir, exist_ok=True)  # Ensure the directory exists

    with open(output_path, 'w') as file:
        file.write(html_content)

    print(f"Created {filename} in the '{output_dir}' directory.")

Create CSS file function​

def create_css_file():
    pass

Main Function​

def main():
    """Main function to generate pages and styles. MUST HAVE HOME!!!"""
    titles = ["Home", "About Me", "My Experience", "My Projects"]

    # Create HTML files for each title
    for title in titles:
        create_html_file(title, titles)

    # Create the style.css file
    #create_css_file() 
    # uncomment the create_css_file() function if you add the function.

if __name__ == "__main__":
    main()

Build CSS Function​

def create_css_file(output_dir="build"):
    """Generate and write the style.css file based on a dictionary of styles."""
    styles = {
        "font-family": "Calibri",             # font family
        "body-background": "#7BAFD4",     # Background color for .content
        "nav-background": "#13294B",          # Background color for nav
        "nav-a-color": "#4B9CD3",              # Text color for nav links
        "nav-a-active-color": "#ffffff"
    }

    css_content = f"""
    * {{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: {styles["font-family"]};
    }}

    body {{
        background-color: {styles["body-background"]};
    }}

    nav {{
        background-color: {styles["nav-background"]};
        padding: 10px;
    }}

    nav a {{
        color: {styles["nav-a-color"]};
        margin-right: 10px;
        text-decoration: none;
    }}

    nav a.active {{
        color: {styles["nav-a-active-color"]};
        font-weight: bold;
    }}

    .content {{
        background-color: #F8F8F8;
        padding: 20px;
        margin: 20px;
    }}
    """

    css_path = os.path.join(output_dir, "style.css")
    with open(css_path, 'w') as file:
        file.write(css_content)

    print(f"Created style.css in the '{output_dir}' directory.")

Unused code that was redundant​

Included here because ChatGPT suggested building the site with a list which included tuples. See this site: https://www.geeksforgeeks.org/python-create-a-list-of-tuples/

def create_html_file(filename, title, h1, body_content):
    html_content = f"""
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{title}</title>
    </head>
    <body>
        <nav>
            <a href="index.html">Home</a>
            <a href="page1.html">Page 1</a>
            <a href="page2.html">Page 2</a>
            <a href="page3.html">Page 3</a>
        </nav>
        <div class="content">
            <h1>{h1}</h1>
            <p>{body_content}</p>
        </div>
    </body>
    </html>
    """

    with open(filename, 'w') as file:
        file.write(html_content)
        
# https://www.geeksforgeeks.org/python-create-a-list-of-tuples/
def main():
    pages = [
        ('index.html', 'Home', 'Welcome to our website', 'This is the homepage.'),
        ('page1.html', 'Page 1', 'Page 1', 'This is page 1 content.'),
        ('page2.html', 'Page 2', 'Page 2', 'This is page 2 content.'),
        ('page3.html', 'Page 3', 'Page 3', 'This is page 3 content.')
    ]

    for page in pages:
        filename, title, h1, body_content = page
        create_html_file(filename, title, h1, body_content)
        print(f"Created {filename}.")

if __name__ == "__main__":
    main()