Designing the Layout Template

Introduction: Why a Layout Matters

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.

Recall: Flask Templates and Project Structure

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.

What Is layout.html?

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.

Step-by-Step: Exploring layout.html

Let’s build our layout.html step by step so you can see how each part works.

1. The Basic HTML Structure

We start with the basic HTML5 structure. This includes the <!DOCTYPE html>, <html>, <head>, and <body> tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>{% block title %}Cooking Assistant{% endblock %}</title>
</head>
<body>
</body>
</html>
  • 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.
Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal