Laravelframework~20 mins

Template inheritance (@extends, @section, @yield) in Laravel - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Try Challenge Project Recall Perf

Template Inheritance with @extends, @section, and @yield in Laravel

📖 Scenario: You are building a simple website with a consistent layout. You want to create a main layout template and then create a page that uses this layout. This helps keep your site organized and easy to update.

🎯 Goal: Create a base layout template using @yield for content placeholders. Then create a child template that uses @extends to inherit the layout and fills in content using @section.

📋 What You'll Learn

Create a base layout file named layout.blade.php with a @yield('content') placeholder inside the <main> tag.

Create a child view file named home.blade.php that uses @extends('layout') to inherit the layout.

In home.blade.php, define a @section('content') that includes a heading <h1>Welcome Home</h1> and a paragraph <p>This is the home page.</p>.

End the section with @endsection.

💡 Why This Matters

🌍 Real World

Web developers use template inheritance to build websites with consistent layouts and reusable code, saving time and reducing errors.

💼 Career

Understanding Laravel's Blade template inheritance is essential for backend and full-stack developers working with Laravel to create maintainable web applications.

Progress0 / 4 steps

Create the base layout template

Create a file named layout.blade.php with a basic HTML5 structure. Inside the <body>, add a <main> tag containing @yield('content') to mark where child views will insert their content.

Laravel




    
    
    My Website


    
        @yield('content')
    



# Your code here

Need a hint?

Remember, @yield('content') is a placeholder for child templates to fill in.

Set up the child view to extend the layout

Create a file named home.blade.php. At the top, write @extends('layout') to inherit the base layout template.

Laravel

@extends('layout')

# Your code here

Need a hint?

Use @extends('layout') exactly to link to the base layout.

Add content section in the child view

In home.blade.php, add a @section('content') block. Inside it, add an <h1> with text Welcome Home and a <p> with text This is the home page.. Close the section with @endsection.

Laravel

@extends('layout')

@section('content')
    
@endsection

Need a hint?

Make sure to open the section with @section('content') and close it with @endsection.

Complete the child view with content

Ensure home.blade.php fully contains @extends('layout'), the @section('content') block with the heading and paragraph, and ends with @endsection.

Laravel

@extends('layout')

@section('content')
    Welcome Home
    This is the home page.
@endsection

# Your code here

Need a hint?

Double-check that all parts are present and correctly spelled.