Template inheritance (@extends, @section, @yield) in Laravel - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Blade template inheritance?

Given the following base layout and child view, what will be the final rendered HTML?

Laravel

@extends('layouts.master')

@section('title', 'Home Page')

@section('content')
<p>Welcome to the home page!</p>
@endsection


// layouts/master.blade.php
<html>
<head>
    <title>@yield('title', 'Default Title')</title>
</head>
<body>
    <div class="content">
        @yield('content')
    </div>
</body>
</html>

A

<html>
<head>
    <title>Default Title</title>
</head>
<body>
    <div class="content">
        <p>Welcome to the home page!</p>
    </div>
</body>
</html>

B

<html>
<head>
    <title>Default Title</title>
</head>
<body>
    <div class="content">
        
    </div>
</body>
</html>

C

<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <div class="content">
        
    </div>
</body>
</html>

D

<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <div class="content">
        <p>Welcome to the home page!</p>
    </div>
</body>
</html>

💡 Hint

Remember that @section content replaces @yield in the parent layout.

The child view sets the title section to 'Home Page' and defines the content section with a paragraph. The parent layout uses @yield to insert these sections. So the final HTML includes the title 'Home Page' and the paragraph inside the content div.

📝 Syntax

intermediate

Which option correctly defines a section with default content fallback?

In Laravel Blade, you want to define a section called sidebar that can be overridden by child views but has default content if not overridden. Which option is correct?

A

@section('sidebar')
    <p>Default sidebar content</p>
@show

B

@extends('sidebar')
@section('sidebar', '<p>Default sidebar content</p>')

C @yield('sidebar', '<p>Default sidebar content</p>')

D

@section('sidebar')
    <p>Default sidebar content</p>
@endsection

💡 Hint

Use @section with @show to define default content that can be replaced.

Option A uses @section with @show, which outputs the section content immediately and allows child views to override it. Option A defines a section but does not output it. Option A uses @yield which is for displaying sections, not defining them. Option A misuses @extends.

🔧 Debug

advanced

Why does this Blade template not display the child content?

Consider this parent layout and child view. The child content inside @section('content') does not appear in the rendered page. What is the cause?

Laravel

// layouts/app.blade.php
<html>
<head><title>App</title></head>
<body>
    <div>@yield('content')</div>
</body>
</html>

// child.blade.php
@extends('layouts.app')

@section('content')
<p>Child content here</p>
@stop

A The child view must use @yield instead of @section to display content.

B The child view uses @stop instead of @endsection, causing the section to not render.

C The parent layout is missing @section('content'), so the child section has no place to insert.

D The parent layout should use @show instead of @yield to display sections.

💡 Hint

Check if the section closing directive matches the Blade syntax.

In Laravel Blade, @stop is an alias for @endsection and should work, but if the Blade version or configuration does not support @stop, the section may not render. The safest is to use @endsection. Options B, C, and D misunderstand how sections and yields work.

❓ state_output

advanced

What is the output when a child view overrides only part of a section?

Given the parent layout and child view below, what will be the rendered output inside the content div?

Laravel

// layouts/base.blade.php
<html>
<body>
    <div>@yield('content')</div>
</body>
</html>

// child.blade.php
@extends('layouts.base')

@section('content')
<p>Start</p>
@parent
<p>End</p>
@endsection

A

<div>
<p>Start</p>
@parent
<p>End</p>
</div>

B

<div>
<p>Start</p>

<p>End</p>
</div>

C

<div>
<p>Start</p>
<p>End</p>
</div>

D

<div>
<p>Start</p>

</div>

💡 Hint

Remember that @parent inserts the parent section content.

The parent layout has no content in the content section, so @parent inserts nothing. The child section outputs

Start

then

End

. The final output inside the div is both paragraphs without extra blank lines.

🧠 Conceptual

expert

Which statement about Blade template inheritance is TRUE?

Choose the correct statement about how @extends, @section, and @yield work together in Laravel Blade templates.

A <code>@yield</code> in a parent template outputs the content defined by <code>@section</code> in child views.

B <code>@section</code> in a parent template immediately outputs content to the browser.

C <code>@yield</code> in a child view inserts content from the parent layout.

D <code>@extends</code> defines a section that can be filled by child views.

💡 Hint

Think about which directive is responsible for outputting section content.

@yield is used in parent templates to display content defined by @section in child views. @extends specifies the parent template to inherit from. @section defines content blocks. Option A correctly describes this relationship.

Practice

1. What is the main purpose of the @extends directive in Laravel Blade templates?

easy

A. To define a section of content inside a template

B. To display content from a section in the layout

C. To specify which base layout the current view should use

D. To include a partial view inside another view

Solution

1. Step 1: Understand the role of @extends

   The @extends directive tells Laravel which base layout file the current view should build upon.

2. Step 2: Differentiate from other directives

   @section defines content blocks, @yield displays them, and including partials uses @include. Only @extends sets the base layout.

3. Final Answer:

   To specify which base layout the current view should use -> Option C

4. Quick Check:

   @extends = base layout [OK]

Hint: Remember: @extends picks the base layout file [OK]

Common Mistakes:

• Confusing @extends with @section
• Thinking @extends outputs content
• Mixing @extends with @include

2. Which of the following is the correct syntax to define a content section named 'title' in a Blade template?

easy

A. @section('title') ... @endsection

B. @yield('title') ... @endyield

C. @extends('title') ... @endextends

D. @include('title') ... @endinclude

Solution

1. Step 1: Recall syntax for defining sections

   In Blade, @section('name') starts a content block, and @endsection ends it.

2. Step 2: Identify correct usage

   @yield is for displaying sections, @extends sets layout, and @include inserts partials. Only @section defines content.

3. Final Answer:

   @section('title') ... @endsection -> Option A

4. Quick Check:

   Define section = @section('name') [OK]

Hint: Use @section('name') to start content blocks [OK]

Common Mistakes:

• Using @yield to define content
• Trying to use @extends as a section
• Confusing @include with section definition

3. Given the following Blade layout file layouts/app.blade.php:

<html>
<head>
    <title>My Site - @yield('title')</title>
</head>
<body>
    @yield('content')
</body>
</html>

And a child view:

@extends('layouts.app')
@section('title', 'Home Page')
@section('content')
<h1>Welcome!</h1>
@endsection

What will be the rendered HTML output?

medium

A. Syntax error due to incorrect section usage

B.

My Site - @section('title', 'Home Page')

@section('content')
Welcome!
@endsection

C.

My Site -

D.

My Site - Home Page

Welcome!

Solution

1. Step 1: Understand @yield and @section interaction

   The layout uses @yield('title') and @yield('content') to display content from child sections.

2. Step 2: Check child view sections

   The child view defines @section('title', 'Home Page') and a content section with an <h1> tag. These replace the yields in the layout.

3. Final Answer:

   The rendered HTML includes the title 'Home Page' and the <h1>Welcome!</h1> content -> Option D

4. Quick Check:

   @yield shows @section content [OK]

Hint: Remember: @yield outputs content from matching @section [OK]

Common Mistakes:

• Expecting raw @section tags in output
• Missing that @section('title', 'text') sets inline content
• Confusing @yield with @section definition

4. Consider this Blade child view code:

@extends('layouts.master')
@section('content')
<p>Hello World</p>

What is the problem with this code?

medium

A. Missing @endsection to close the content section

B. Incorrect use of @extends directive

C. Cannot use HTML inside @section

D. Should use @yield instead of @section

Solution

1. Step 1: Check section syntax completeness

   The @section('content') directive must be closed with @endsection to mark the end of the content block.

2. Step 2: Identify missing closing directive

   The code snippet lacks @endsection, causing a syntax error or unexpected behavior.

3. Final Answer:

   Missing @endsection to close the content section -> Option A

4. Quick Check:

   Always close @section with @endsection [OK]

Hint: Always pair @section with @endsection [OK]

Common Mistakes:

• Forgetting to close @section
• Thinking @yield defines content
• Believing HTML is not allowed inside sections

5. You have a base layout with multiple @yield placeholders: title, header, and content. You want to create a child view that fills only content and uses a default title and header from the layout. How should you write the child view?

hard

A. @extends('layouts.base')
@yield('title')
@yield('header')
@section('content')
Page content here
@endsection

B. @extends('layouts.base')
@section('content')
Page content here
@endsection

C. @extends('layouts.base')
@section('title', 'Default Title')
@section('header', 'Default Header')
@section('content')
Page content here
@endsection

D. @extends('layouts.base')
@include('title')
@include('header')
@section('content')
Page content here
@endsection

Solution

1. Step 1: Understand default content in layout

   If the base layout provides default content for title and header, you don't need to override those sections in the child view.

2. Step 2: Write child view with only needed sections

   Only define the content section in the child view to fill that placeholder, leaving others to default.

3. Final Answer:

   Child view extends layout and defines only content section -> Option B

4. Quick Check:

   Define only needed sections; others use layout defaults [OK]

Hint: Only override sections you want to change in child views [OK]

Common Mistakes:

• Overriding sections unnecessarily
• Using @yield inside child views
• Trying to include sections with @include