06 | Website Build Project

Assignment 06 covers the concepts of a programmer building a workable program based on a personal desire to create something with some ChatGPT helps. It also demonstrated some of the concepts that we have learned over the course so far, and some concepts introduced in the same session as the assignment demonstration.

Additionally, the assignment introduces the basics of CSS and HTML to those students that have yet to work with web technologies.

The primary goal is to grasp the basic concepts but also be able to assemble the code blocks into a program that will work for you. You should be able to output a simple HTML/CSS site after combining the blocks and running the program.

For each of the 10 items below, make a comment in the code indicating where this type of code is being used:

for loop
f-string
the with open() as file
file.write
coding for a directory to be created
coding regular expression
if
the pass statement(you can comment that there was a pass statement where the pass statement was)
dictionary
method(s)

You should also alter the CSS or the list so that it is not exactly the same as the demonstration so that you get the gist of what you can do with a "build tool."

Change, in some fashion, at least four of the following in the Styles:

Change the font-family.
Change the the items in the list to customize the page titles.
Change the primary blue background color of the page.
Change the background color of the white background color, or remove it.
Change the header background color.
Change the active class from white.
Change the margin or padding. (You can do this in the dictionary or the f-string output or both.)
Create a variable in any of the .content class code and then add the key value pair in the dictionary of the function
Anything else you would like to change.

Comment at least of these four that you change.

Therefore, you should have at least 4 changes and 14 total comments.

When you have finished this assignment, post your folder as assignment_06 in to your class GitHub folder.

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"

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()

06 | Website Build Project

Code for project​

Import OS and Regular Expression Modules​

Slugify Function​

Generate Navigation Function​

Create HTML file Function​

Create CSS file function​

Main Function​

Build CSS Function​

Unused code that was redundant​