Build a Dayhome Website with Flask

Build a styled multi-page website using Python and Flask.

Introduction

30 Second Summary

Every small business needs a website. If you run a dayhome or just want to learn how web development works, building one from scratch is the best way to understand what happens behind the scenes.

In this project, you will build a two-page dayhome website that runs on your computer. You will use Python and Flask to create pages, add navigation between them, and style everything with CSS.

What You'll Build

A locally running Flask web application with two styled HTML pages, shared navigation, and a base template for consistent layout.

By the end of this project, you'll have:

  • A Flask application file (app.py) that defines your website's pages and routes.
  • Two HTML templates with a shared base layout that provides consistent navigation and a footer across pages.
  • A CSS stylesheet that gives your site a clean, professional look with a colored navigation bar and readable fonts.
  • Secret Mission: Add a third page to your website entirely on your own, proving you can extend the site independently.

Are there any prerequisites?

Nope. This project assumes you have Python installed and PyCharm ready to open. If you know the basics of logic like loops and variables from block coding or any other language, you are good to go.

Set Up Your Project in PyCharm

Before you can build your dayhome website, you need a workspace where your code lives and the tools it depends on. PyCharm gives you a professional code editor with a built-in terminal and project management, all in one window.

In this step, you'll create a new project with an isolated Python environment, then install Flask (the framework that turns your Python code into a website you can view in a browser).

In this step, get ready to:
  • Create a new project in PyCharm with a virtual environment.
  • Install Flask in your project.
  • Verify Python and Flask are working correctly.
Open PyCharm and create a new project

PyCharm organizes your code into projects. Each project gets its own folder and its own isolated Python environment, so packages you install here won't interfere with other projects on your computer.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type PyCharm and press Enter to open it.
  • On the Welcome screen, click New Project.
  • In the Location field, change the project name at the end of the path to dayhome-website.
  • Under Python Interpreter, keep the default Project venv option selected.
  • Click Create.

First time opening PyCharm?

PyCharm may ask you to accept a User Agreement, choose data sharing preferences, or import settings. Accept the defaults for each prompt until you reach the Welcome screen.

What is a virtual environment?

A virtual environment is a private copy of Python that belongs only to this project. Any packages you install go into this environment instead of your computer's main Python installation.

This keeps your projects independent. If one project needs Flask version 3 and another needs version 2, they won't conflict with each other.

PyCharm opens your new project with the file explorer on the left and a code editor area on the right. You should see your dayhome-website folder at the top of the Project panel.

Install Flask in your project

Flask is a lightweight web framework that handles the job of turning your Python code into web pages. You install it using Python's package manager, pip, from PyCharm's built-in Terminal.

  • Click the Terminal tab at the bottom of the PyCharm window to open the terminal panel.

Don't see the Terminal tab?

You can also open it from the menu. Click View, then Tool Windows, then Terminal.

  • Install Flask by running this command in the Terminal:
pip install Flask==3.1.3

What does this command do?

pip install tells Python's package manager to download and install a package. Flask==3.1.3 specifies the exact version to install, so everyone following this project gets the same behaviour.

  • Wait for the installation to finish. You should see output ending with a "Successfully installed" message that includes Flask.

Seeing a permission error or timeout?

Make sure you're typing the command in PyCharm's Terminal (the panel at the bottom), not in a code file. The terminal should show your virtual environment name in parentheses at the start of the line.

If you see a network timeout, check your internet connection and try running the command again.

help me fix a pip install error in PyCharm

Verify everything works

Two quick checks confirm that Python and Flask are ready to go.

  • Check your Python version by running this command:
python --version

You should see Python 3.13 or Python 3.14 followed by a patch number. Either version works for this project.

  • Confirm Flask is installed by running:
pip show flask

Look for the line that says Version: 3.1.3 in the output. This confirms Flask is installed in your virtual environment at the correct version.

Seeing a different version or no output?

If python --version shows a version lower than 3.13, your terminal may be using a different Python installation than the one in your virtual environment. Close the terminal tab and reopen it to make sure PyCharm activates the venv.

If pip show flask says the package is not found, run pip install Flask==3.1.3 again and check for error messages in the output.

help me fix my Python or Flask setup in PyCharm

Your workspace is ready. Next up, you'll write your first Flask application and see it running live in your browser.

Create Your First Flask App

Your project is set up and Flask is ready to go. Now it's time to write your first Flask application.

Flask apps start as a single Python file that tells your computer how to respond when someone visits your website. You'll create this file, write a few lines of code, and see your website appear in a browser.

In this step, get ready to:
  • Create your main Flask application file.
  • Run a local web server on your computer.
  • View your website in a browser.
Create the main application file

Every Flask website needs an entry point. This is a Python file that defines your app and tells Flask which pages to serve.

  • In PyCharm's Project panel on the left, right-click the project root folder (dayhome-website).
  • Select New, then Python File.
  • Name the file app and press Enter.

PyCharm creates an empty app.py file and opens it in the editor.

  • Write your Flask application by pasting the following code into app.py:
# Import Flask to create your web application
from flask import Flask

# Create a new Flask app
app = Flask(__name__)


# Define the home page route
@app.route("/")
def home():
    return "Welcome to Little Stars Dayhome!"


# Run the app when this file is executed directly
if __name__ == "__main__":
    app.run(debug=True)

What does this code do?

  • from flask import Flask brings in the Flask class so you can create a web application.
  • app = Flask(__name__) creates your app. The __name__ part tells Flask where to find your project's files.
  • @app.route("/") is a route. It connects a URL path (in this case, the homepage /) to a Python function.
  • def home() is the function that runs when someone visits your homepage. It returns the text they see.
  • app.run(debug=True) starts a local web server on your computer. Debug mode automatically reloads the server when you change your code.
  • Save app.py by pressing Ctrl+S.
  • Confirm the file appears in the Project panel on the left with the name app.py.

Don't see app.py in the Project panel?

  • Make sure you named the file app (without the .py extension). PyCharm adds .py automatically for Python files.
  • If you accidentally created it in a subfolder, drag it to the project root (dayhome-website) in the Project panel.

Help me create a Python file in PyCharm's Project panel.

✔️ Awesome, I've got everything!

Great. Make sure you've saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the complete app.py file. Make sure yours matches exactly:

from flask import Flask

app = Flask(__name__)


@app.route("/")
def home():
    return "Welcome to Little Stars Dayhome!"


if __name__ == "__main__":
    app.run(debug=True)
Run your app

Your code is ready. Time to start the server and see your website in action.

  • In the Terminal panel at the bottom of PyCharm, run your app by typing this command:
python app.py

You should see output that includes a line like this:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

What does this output mean?

Flask started a local web server on your computer. The address http://127.0.0.1:5000 is a special URL that points back to your own machine. Only you can see this website right now.

The 5000 is the port number Flask uses by default. Think of it like a specific door on your computer that the server is listening at.

  • Open your web browser (Chrome, Edge, Firefox, or any browser you prefer).
  • Type http://127.0.0.1:5000 in the address bar and press Enter.

You should see the text "Welcome to Little Stars Dayhome!" displayed on the page.

Don't see the welcome message?

  • Make sure the server is still running in PyCharm's Terminal. If you see the regular command prompt instead of server output, run python app.py again.
  • Double-check the URL is exactly http://127.0.0.1:5000 with no extra characters or spaces.
  • If you see a "SyntaxError" in the Terminal, check that your code matches the double-check tab above.

Help me get my Flask app running in the browser.

Stop and restart the server

Whenever you make changes to your Python code, you need to stop the server and start it again to see the updates. Debug mode helps with this, but knowing how to manually stop the server is essential.

  • Switch back to PyCharm's Terminal panel.
  • Press Ctrl+C to stop the server.
  • You should see the command prompt return, meaning the server has shut down.

Why stop and restart?

While debug=True auto-reloads for most Python file changes, there are times it does not catch everything. Getting in the habit of stopping with Ctrl+C and restarting with python app.py ensures you always see your latest code.

Your first Flask app is alive. In the next step, you'll replace that plain text with proper HTML templates to build a real-looking website.

Add HTML Templates

Your Flask app works, but right now it just sends a plain text string to the browser. Real websites need HTML pages with structure, navigation, and content.

Flask uses a template engine called Jinja2 to turn HTML files into web pages. In this step, you will create HTML templates and connect them to your Flask app.

In this step, get ready to:
  • Create a base template with shared page structure.
  • Create the home page template.
  • Update app.py to render HTML templates.
Create the templates folder and base template

Flask loads HTML files from a folder called templates by default. A base template defines the structure that every page on your site will share.

  • Right-click the project root (the top-level dayhome-website folder) in the Project panel on the left.
  • Select New > Directory.
  • Name it templates and press Enter.
  • Right-click the new templates folder, select New > File.
  • Name it base.html and press Enter.
  • Copy the following code into base.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Stars Dayhome</title>
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>Little Stars Dayhome - A safe and loving place to grow</p>
    </footer>
</body>
</html>

What does this code do?

This base template defines the skeleton that every page on your site will share. It has three main sections:

  • The <nav> section creates navigation links. {{ url_for('home') }} tells Flask to generate the correct URL for each page.
  • The {% block content %}{% endblock %} is a placeholder. Each individual page will fill this block with its own content.
  • The <footer> appears at the bottom of every page automatically.

What is template inheritance?

Template inheritance means individual pages can "extend" a base template. Instead of repeating the navigation, head, and footer on every page, you write them once in the base. Each page only needs to provide its unique content.

  • Save base.html.
Create the home page template

Now you will create the home page that fills in the content block from the base template.

  • Right-click the templates folder, select New > File.
  • Name it index.html and press Enter.
  • Copy the following code into index.html:
{% extends "base.html" %}

{% block content %}
<h1>Welcome to Little Stars Dayhome!</h1>
<p>A warm, caring environment where your little ones can learn, play, and grow every day.</p>
<p>We provide a safe and nurturing space for children ages 1 to 5, with structured activities, outdoor play, and healthy meals.</p>
<h2>Why Choose Us?</h2>
<ul>
    <li>Small group sizes for individual attention</li>
    <li>Structured daily routine with learning activities</li>
    <li>Healthy homemade meals and snacks</li>
    <li>Safe outdoor play area</li>
    <li>Open Monday to Friday, 7:00 AM - 5:30 PM</li>
</ul>
{% endblock %}

What does this code do?

  • {% extends "base.html" %} tells Flask this page inherits everything from the base template (navigation, footer, head).
  • {% block content %} and {% endblock %} wrap the content that gets inserted into the base template's placeholder.
  • Everything between those tags is the unique content for this page only.
  • Save index.html.
Update app.py to use templates

Your templates are ready, but Flask still returns a plain string. You need to tell it to render the HTML template instead.

  • Switch back to app.py in the editor.
  • Find this line at the top of the file:
from flask import Flask
  • Replace it with this line to import the render_template function:
from flask import Flask, render_template
  • Now find the home() function. Find this line inside it:
    return "Welcome to Little Stars Dayhome!"
  • Replace it with this line to render the HTML template instead:
    return render_template("index.html")

Your base template includes an About navigation link, but you have not created the About page route yet. To prevent an error when loading the page, add a temporary placeholder route.

  • Find the blank line just above if __name__ == "__main__": and add this placeholder route above it:
# Temporary placeholder - we'll build this properly in the next step
@app.route("/about")
def about():
    return "About page coming soon!"

Why do I need this placeholder?

The base template uses {{ url_for('about') }} to generate the About link. Flask needs to know a route called about exists in order to build that URL. Without it, Flask shows an error page instead of your site.

You will replace this placeholder with a proper About page in the next step.

  • Save app.py.
  • In the Terminal at the bottom of PyCharm, start your server by running:
python app.py
  • Open your web browser and go to http://127.0.0.1:5000.
  • You should see a full HTML page with a heading that says "Welcome to Little Stars Dayhome!", navigation links for Home and About, and a list of reasons to choose the dayhome.

Seeing an error page instead?

  • If you see a BuildError mentioning about, make sure you added the placeholder route for /about in app.py.
  • If you see TemplateNotFound, make sure your templates folder is at the project root (same level as app.py), not inside another folder.
  • Check that your file is named exactly index.html (not Index.html or index.HTML). File names are case-sensitive.

Still stuck? Help me debug my Flask template error.

✔️ Awesome, I've got everything!

Great. Make sure you have saved all three files.

ⓧ I'd like to double check the full code

Here is what each file should look like at this point.

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)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Stars Dayhome</title>
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>Little Stars Dayhome - A safe and loving place to grow</p>
    </footer>
</body>
</html>
{% extends "base.html" %}

{% block content %}
<h1>Welcome to Little Stars Dayhome!</h1>
<p>A warm, caring environment where your little ones can learn, play, and grow every day.</p>
<p>We provide a safe and nurturing space for children ages 1 to 5, with structured activities, outdoor play, and healthy meals.</p>
<h2>Why Choose Us?</h2>
<ul>
    <li>Small group sizes for individual attention</li>
    <li>Structured daily routine with learning activities</li>
    <li>Healthy homemade meals and snacks</li>
    <li>Safe outdoor play area</li>
    <li>Open Monday to Friday, 7:00 AM - 5:30 PM</li>
</ul>
{% endblock %}

What about the placeholder route?

The app.py above shows the final version without the placeholder. Keep your temporary about route in place for now. You will replace it with the real About page in the next step.

Your site now renders a proper HTML page from a template. Next up, you will build the About page and make the navigation links work between both pages.

Add the About Page with Navigation

Your home page is rendering beautifully through HTML templates. You might have noticed that the navigation bar already includes an About link, but clicking it would cause an error right now because no route exists for it yet.

In this step, you'll create the About page template and connect it to a new route in Flask. Once both pieces are in place, the navigation links will let you click between pages.

In this step, get ready to:
  • Create the about page template with services and contact info.
  • Add a new route in app.py for the about page.
  • Test navigation between both pages.
Create the about page template

Just like your home page extends the base template, the about page will follow the same pattern. It fills in the {% block content %} section with its own unique content while inheriting the shared navigation and footer.

  • In the Project panel on the left side of PyCharm, right-click the templates folder.
  • Select New > File.
  • Name it about.html and press Enter.
  • Copy the following code into about.html:
{% extends "base.html" %}

{% block content %}
<h1>About Our Dayhome</h1>
<p>Little Stars Dayhome has been providing quality childcare in a home setting. We believe every child deserves a safe, loving environment to explore and learn.</p>

<h2>Our Services</h2>
<ul>
    <li>Full-time care (Monday to Friday)</li>
    <li>Part-time and drop-in options available</li>
    <li>Age-appropriate learning activities</li>
    <li>Arts and crafts</li>
    <li>Story time and music</li>
    <li>Outdoor play and nature exploration</li>
</ul>

<h2>Contact Us</h2>
<p>Interested in learning more? Reach out to schedule a visit!</p>
<p>Email: hello@littlestars.example.com</p>
<p>Phone: (555) 123-4567</p>
{% endblock %}

What does this template do?

  • {% extends "base.html" %} tells Jinja2 that this page uses the same layout, navigation, and footer as the home page.
  • Everything inside {% block content %} replaces the matching block in the base template.
  • The page has three sections: an intro paragraph, a services list, and contact details.
  • Save about.html by pressing Ctrl+S.

File not appearing in the templates folder?

  • Make sure you right-clicked the templates folder specifically, not the project root. The file must be inside templates/ for Flask to find it.
  • Check the Project panel to confirm the file appears as templates > about.html.

Why isn't my template file showing up in the right place?

✔️ Awesome, I've got everything!

Great. Make sure you've saved the file before moving on.

ⓧ I'd like to double check the full code

{% extends "base.html" %}

{% block content %}
<h1>About Our Dayhome</h1>
<p>Little Stars Dayhome has been providing quality childcare in a home setting. We believe every child deserves a safe, loving environment to explore and learn.</p>

<h2>Our Services</h2>
<ul>
    <li>Full-time care (Monday to Friday)</li>
    <li>Part-time and drop-in options available</li>
    <li>Age-appropriate learning activities</li>
    <li>Arts and crafts</li>
    <li>Story time and music</li>
    <li>Outdoor play and nature exploration</li>
</ul>

<h2>Contact Us</h2>
<p>Interested in learning more? Reach out to schedule a visit!</p>
<p>Email: hello@littlestars.example.com</p>
<p>Phone: (555) 123-4567</p>
{% endblock %}
Add a new route in app.py

Flask needs to know what to do when someone visits /about. You'll add a second route that points to your new template.

  • Switch back to app.py in the editor.
  • Find the last line of the home() function:
    return render_template("index.html")
  • Below that line, add a blank line, then paste this new route:
@app.route("/about")
def about():
    return render_template("about.html")

What does this route do?

  • @app.route("/about") tells Flask to call this function when someone visits http://127.0.0.1:5000/about.
  • def about(): defines the function name. This name must match the url_for('about') call in your base template's navigation.
  • render_template("about.html") loads the about template and sends it back to the browser.
  • Save app.py by pressing Ctrl+S.

Seeing a syntax error?

  • Make sure there is a blank line between the end of the home() function and the @app.route("/about") decorator.
  • Check that the def about(): line starts at the left edge (no indentation), just like def home(): above it.
  • Confirm the new route is placed above the if __name__ == "__main__": block, not inside it.

Help me fix a syntax error in my Flask app.py file.

✔️ Awesome, I've got everything!

Great. Double check you've saved app.py before running the server.

ⓧ I'd like to double check the full code

from flask import Flask, render_template

app = Flask(__name__)


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


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


if __name__ == "__main__":
    app.run(debug=True)
Test navigation between pages

Both pages are ready. Time to start the server and see your multi-page site in action.

  • Start your server by running this command in the Terminal at the bottom of PyCharm:
python app.py
  • Open your web browser and go to http://127.0.0.1:5000.
  • Click the About link in the navigation bar.
  • You should see the About Our Dayhome page at http://127.0.0.1:5000/about with the services list and contact information.
  • Click the Home link to go back to the home page.

How does navigation work across pages?

Both pages extend base.html, which means they share the same navigation bar. The url_for('home') and url_for('about') calls in the nav links generate the correct URLs automatically based on your route function names.

This is the power of template inheritance. You define the layout once in the base template, and every page that extends it gets the same navigation, footer, and structure for free.

Seeing a BuildError when you click About?

  • Make sure the function name in app.py is exactly about (lowercase). The url_for('about') in base.html must match your function name character for character.
  • If you see a message mentioning could not build url for endpoint, your route function name does not match what the template expects.
  • After fixing the code, stop the server with Ctrl+C and restart it with python app.py.

Help me fix a BuildError in my Flask navigation.

Your site now has two linked pages with shared navigation. Next up, you'll add CSS styling to make everything look clean and professional.

Style Your Website with CSS

Your website has two pages with working navigation. The structure is solid, but right now everything uses the browser's default styling.

In this step, you will add a CSS stylesheet to give your site a clean, professional look. CSS controls colors, spacing, fonts, and layout.

In this step, get ready to:
  • Create a static folder and CSS stylesheet.
  • Link the stylesheet to your base template.
  • Verify both pages display with consistent styling.
Create the static folder and CSS file

Flask serves static files (like stylesheets, images, and JavaScript) from a folder called static in your project root.

  • In the Project panel on the left, right-click your project root folder (dayhome-website).
  • Select New, then Directory.
  • Name it static and press Enter.
  • Right-click the new static folder, select New, then File.
  • Name it style.css and press Enter.

What is a static folder?

Flask automatically serves any files inside a folder called static at the /static URL path. This is where you put CSS files, images, and JavaScript files that don't change based on user input.

  • Write the following CSS rules in style.css to style the navigation, content area, and footer:
/* Reset default browser spacing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base text styles for the whole page */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Navigation bar background and spacing */
nav {
    background-color: #4a90d9;
    padding: 15px 30px;
}

/* Navigation link styles */
nav a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
    font-size: 18px;
}

/* Underline links on hover */
nav a:hover {
    text-decoration: underline;
}

/* Center the main content with a max width */
main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Page heading color */
h1 {
    color: #4a90d9;
    margin-bottom: 20px;
}

/* Section heading spacing */
h2 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* Paragraph spacing */
p {
    margin-bottom: 15px;
}

/* List indentation */
ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

/* Space between list items */
li {
    margin-bottom: 8px;
}

/* Footer bar at the bottom */
footer {
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
    color: #666;
}

What does this code do?

The * selector at the top resets all default browser margins and padding so your layout starts from a clean slate.

The nav rules create a blue bar across the top with white links. The main rule centers your content at a maximum width of 800 pixels so it doesn't stretch across the whole screen.

  • Save style.css.

You won't see any styling changes yet. The CSS file needs to be linked to your HTML before the browser knows about it.

Link the CSS file in your base template

To connect your stylesheet to every page, you add a single <link> tag in the base template. Because all pages extend base.html, this one change applies the styling everywhere.

  • Open templates/base.html in the Project panel.
  • Find the <title> line in the <head> section:
    <title>Little Stars Dayhome</title>
  • Add the following line directly below it:
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

What does url_for do here?

The url_for('static', filename='style.css') function generates the correct URL path to your CSS file. This is the recommended way to reference static files in Flask because it works even if you move or rename your project later.

  • Save base.html.

Not sure where to add the line?

The <link> tag goes inside the <head> section, on the line immediately after <title>Little Stars Dayhome</title>. Make sure it is before the closing </head> tag.

Double check the link tag if you are stuck.

Test the styled site
  • Start your server by running this command in the Terminal:
python app.py
  • Open your web browser and go to http://127.0.0.1:5000.

Your home page should now have a blue navigation bar across the top, centered content, and a grey footer at the bottom.

  • Click About in the navigation bar to visit http://127.0.0.1:5000/about.
  • Confirm the About page has the same blue navigation bar, centered layout, and footer.

Pages look unstyled?

Make sure the static folder is in your project root (at the same level as app.py), not inside the templates folder.

Check that your file is named exactly style.css (not styles.css or style.CSS). The filename in the <link> tag must match exactly.

Try a hard refresh in your browser with Ctrl+Shift+R to clear any cached version of the page.

Help me debug my CSS not loading if things still look wrong.

✔️ Awesome, I've got everything!

Great. Double check you have saved both style.css and base.html.

ⓧ I'd like to double check the full code

Here is the complete static/style.css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

nav {
    background-color: #4a90d9;
    padding: 15px 30px;
}

nav a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
    font-size: 18px;
}

nav a:hover {
    text-decoration: underline;
}

main {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

h1 {
    color: #4a90d9;
    margin-bottom: 20px;
}

h2 {
    color: #333;
    margin-top: 30px;
    margin-bottom: 10px;
}

p {
    margin-bottom: 15px;
}

ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

li {
    margin-bottom: 8px;
}

footer {
    background-color: #f0f0f0;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
    color: #666;
}

Here is the complete templates/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Little Stars Dayhome</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <nav>
        <a href="{{ url_for('home') }}">Home</a>
        <a href="{{ url_for('about') }}">About</a>
    </nav>

    <main>
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>Little Stars Dayhome - A safe and loving place to grow</p>
    </footer>
</body>
</html>

Your dayhome website is complete. You have a styled, multi-page site running locally with working navigation, clean typography, and a professional layout. Next up, check out the Secret Mission to extend your site with a third page.

Secret mission

Add a Daily Schedule Page

Your dayhome website has a Home page and an About page. Can you add a third page showing a daily schedule? You'll create a new template, add a new route, update the navigation, and style a table. This is everything you've learned so far, applied independently.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

This project runs entirely locally on your computer, so there are no ongoing costs.

Resources you used:

  • The dayhome-website project folder (contains your code, templates, CSS, and virtual environment with Flask installed).

Keep everything running

No action needed. Choose this if you are still actively building or want to come back and add more pages to your site.

  • Your project folder stays on your computer with all files intact.
  • To start your site again later, open the project in PyCharm, open the Terminal, and run python app.py.

Pause - I'll come back to this later

Stop the running Flask server to free up your terminal. Your files stay on disk so you can pick up where you left off.

  • In the PyCharm Terminal, press Ctrl+C to stop the Flask development server.
  • Close PyCharm when you are done.
  • To resume later, reopen the project in PyCharm and run python app.py in the Terminal.

Delete - I don't want to use this again

Remove all project files from your computer. This deletes your code, templates, CSS, and the virtual environment with Flask.

  • In the PyCharm Terminal, press Ctrl+C to stop the Flask server if it is still running.
  • Close PyCharm.
  • Open File Explorer and navigate to the folder where you created the project (for example, C:\Users\YourName\).
  • Right-click the dayhome-website folder and select Delete.
  • Alternatively, open a terminal and run the following command:
rmdir /s /q dayhome-website

On macOS or Linux, use this command instead:

rm -rf dayhome-website
  • Confirm the folder is gone by checking that dayhome-website no longer appears in the parent directory.

Nice Work!

Nice Work!

Nice work! You just built a real, multi-page dayhome website from scratch using Python and Flask.

You've learned how to:

  • Build a Flask web application from scratch and run it as a local web server you can view in your browser.
  • Create HTML templates with Jinja2 template inheritance, sharing a base layout across multiple pages.
  • Style your site with a CSS stylesheet and link it using Flask's url_for function for clean, professional pages with working navigation.
  • Secret Mission: Added a third page independently, proving you can extend the site on your own.

Ready to quiz yourself?