Template inheritance (@extends, @section, @yield) in Laravel - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base layout in a Blade template.

Laravel

@[1]('layouts.app')

Drag options to blanks, or click blank then click option'

A@include

B@extends

C@yield

D@section

Attempts:

3 left

💡 Hint

Common Mistakes

Using @section instead of @extends to inherit a layout.

Using @yield which is for placeholders, not inheritance.

Use @extends to specify which layout this template inherits from.

2fill in blank

medium

Complete the code to define a content section named 'title'.

Laravel

@[1]('title')
My Page Title
@endsection

Drag options to blanks, or click blank then click option'

A@section

B@yield

C@extends

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @yield to define content instead of to display it.

Forgetting to close the section with @endsection.

Use @section to start defining a named section that fills a placeholder.

3fill in blank

hard

Fix the error in the code to display the 'content' section in the layout.

Laravel

<div>
  @[1]('content')
</div>

Drag options to blanks, or click blank then click option'

A@section

B@extends

C@yield

D@include

Attempts:

3 left

💡 Hint

Common Mistakes

Using @section in the layout instead of @yield.

Using @extends in the layout which is for child templates.

Use @yield in the layout to display the content of a named section from child templates.

4fill in blank

hard

Fill both blanks to create a section named 'sidebar' and end it properly.

Laravel

@[1]('sidebar')
  <p>Sidebar content here</p>
@[2]

Drag options to blanks, or click blank then click option'

A@section

B@yield

C@endsection

D@extends

Attempts:

3 left

💡 Hint

Common Mistakes

Using @yield to start or end a section.

Forgetting to close the section with @endsection.

Start a section with @section and close it with @endsection to define content blocks.

5fill in blank

hard

Fill all three blanks to extend 'layouts.master', define a 'content' section, and end it.

Laravel

@[1]('layouts.master')

@[2]('content')
<p>Welcome to the site!</p>
@[3]

Drag options to blanks, or click blank then click option'

A@yield

B@section

C@endsection

D@extends

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up @yield and @section directives.

Not closing the section with @endsection.

Use @extends to inherit a layout, @section to start content, and @endsection to close it.