Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

CodeSignal

Creating the basic structure for our Cooking Helper Frontend

via CodeSignal

Overview

Set up the core HTML structure for the app using Jinja2 templates, and create a custom-styled 404 page to handle missing routes gracefully.

Syllabus

  • Unit 1: Designing the Layout Template
    • Fix the Layout Template
    • Complete the Layout Head Section
    • Build the Navigation Header Section
    • Add the Main Content Area
    • Complete the Footer with Dynamic Copyright
    • Add Flexible Template Extension Blocks
  • Unit 2: Styling the Cooking Helper
    • Adding CSS Reset Rules
    • Styling the Body Element
    • Centering Content with Container Styling
    • Styling the Navigation Bar
    • Fixing the Floating Footer Problem
  • Unit 3: Creating a Custom 404 Page
    • Building Your First Error Template
    • Adding Content to Error Pages
    • Connecting Flask Error Handlers
    • Preparing Templates for Custom Styling
    • Debug the Broken Error Page
  • Unit 4: Styling the 404 Page
    • Adding Container Styles for Centering
    • Styling the Error Page Heading
    • Styling the Error Message Text
    • Creating the Back Home Button
    • Adding Interactive Button Hover Effects

Reviews

Start your review of Creating the basic structure for our Cooking Helper Frontend

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.