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

CodeSignal

Creating an Interactive Cooking Helper Landing Page

via CodeSignal

Go to class Write review

Overview

Build a dynamic landing page where users can search recipes by ingredients, explore popular options, or try a random recipe.

Syllabus

  • Unit 1: Building the Landing Page
    • Connecting Templates to Flask Routes
    • Converting HTML to Flask Template
    • Adding CSS to Flask Templates
    • Building the Recipe Search Form
    • Adding the Search Results Container
    • Adding Popular Recipes Section
    • Completing the Random Recipe Feature
    • Linking JavaScript for Interactive Features
  • Unit 2: Making the Page Interactive
    • Capturing Your First Form Submission
    • Processing User Input Like a Pro
    • Making Your First API Call
    • Displaying Search Results on Screen
    • Loading Content When Pages Load
    • Building Your Surprise Me Button
    • Adding User Friendly Error Messages
    • Completing Your Error Handling Strategy
  • Unit 3: Styling the Landing Page
    • Adding Space Between Page Sections
    • Styling the Search Input Field
    • Styling the Search and Random Buttons
    • Adding Interactive Button Hover Effects
    • Styling Recipe Lists for Better Readability
    • Styling Individual List Items
    • Styling the Random Recipe Display Area

Reviews

Start your review of Creating an Interactive Cooking Helper Landing Page

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.