Welcome to the first lesson of our Cooking Helper frontend course! In this lesson, we will focus on building the main layout HTML file for our project. This layout will serve as the foundation for every page in our Cooking Helper application. By creating a reusable layout, we ensure that all our pages look consistent and are easier to manage. This is a common practice in web development, and it will help us save time as our project grows.
Before we dive in, let’s quickly remind ourselves how Flask uses templates. In Flask, HTML files are stored in a folder called templates. These files can include special placeholders and logic using Jinja2 syntax (like {% ... %} and {{ ... }}), which Flask fills in when rendering a page.
The main layout file, usually named layout.html, resides in the templates folder. Other HTML files can “inherit” from this layout, so we don’t have to repeat the same code on every page.
The layout.html file is a base template. Think of it as a master design that all other pages will use. Instead of copying the same header, navigation bar, and footer into every page, we put them in layout.html once. Then, each page can fill in its own unique content in the right spot.
This is possible thanks to something called template inheritance. In Flask, we use special tags called blocks to mark areas that child templates can replace. For example, {% block content %}{% endblock %} is a placeholder for the main content of each page.
Let’s build our layout.html step by step so you can see how each part works.
We start with the basic HTML5 structure. This includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.
- The
<!DOCTYPE html>tells the browser this is an HTML5 document. - The
<html lang="en">tag sets the language to English. - Inside
<head>, we set the character encoding and make sure the page is responsive on all devices. - The
<title>tag uses a block:{% block title %}Cooking Assistant{% endblock %}. This lets each page set its own title if needed.
Next, we want to add some custom styles. In Flask, static files like CSS are stored in a folder called static. We use the url_for function to link to our CSS file.
{{ url_for('static', filename='css/styles.css') }}tells Flask to find thestyles.cssfile in thecooking_helper/static/cssfolder.- This ensures our pages will look nice and consistent.
We can add more blocks to let child templates insert extra content if needed. For example:
- This block lets other pages add extra tags to the
<head>section if they need to.
Now, let’s add a navigation bar at the top of the page. This usually includes a logo and links to important pages.
- The
<nav>element holds our navigation bar. - The logo is a link that takes users back to the home page. We use
{{ url_for('routes.index') }}to generate the correct URL. We will create thisindexroute in a future practice.
The main part of each page will go inside the <main> tag. We use a block so each page can fill in its own content.
{% block content %}{% endblock %}is where the unique content for each page will appear.
Finally, let’s add a footer at the bottom of the page. We want the year to update automatically, so we use a variable.
{{ current_year | default(2025) }}will show the current year if it’s provided, or 2025 if not.- The
| default(2025)part is called a filter. It sets a fallback value.
If we want to add JavaScript or other scripts later, we can add another block at the end of the body.
- This lets child templates add their own scripts if needed.
Here’s what the full layout.html looks like when all the pieces are combined:
This template gives us a solid, reusable structure for all our pages.
In this lesson, you learned how to build a reusable layout.html template for your Cooking Helper frontend. We covered the basic HTML structure, how to link CSS, how to use template blocks for flexibility, and how to add a navigation bar and footer. You also saw how to use variables and filters in your templates.
Next, you’ll get a chance to practice creating and using this layout in your own project. This will help you get comfortable with template inheritance and building consistent web pages. Let’s get started!
