Laravel Views & Blade Templates – Beginner’s Guide

In the last lesson, we learned how to use Controllers to handle requests and keep our code organized.
But returning plain text from a controller isn’t much fun — we need proper HTML pages.
That’s where Views and Blade Templates come in.

What is a View?

A View in Laravel is simply a file that contains HTML (and possibly Blade syntax) to be displayed to the user.
Views are stored in:

resources/views/

Creating a Simple View

Let’s make a new view file:

resources/views/about.blade.php

Add some HTML:

<!DOCTYPE html>
<html>
<head>
    <title>About Us</title>
</head>
<body>
    <h1>About Our Company</h1>
    <p>We are a team of passionate developers.</p>
</body>
</html>

Returning a View from a Controller

In your PageController.php:

public function about()
{
    return view('about');
}

Notice:

We don’t write .blade.php in view('about').
Laravel automatically looks inside the views folder.

Passing Data to Views

You can pass variables from your controller:

public function about()
{
    $team = ['Ali', 'Sara', 'John'];
    return view('about', ['team' => $team]);
}

In about.blade.php:

<h1>Our Team</h1>
<ul>
    @foreach($team as $member)
        <li>{{ $member }}</li>
    @endforeach
</ul>

Blade Template Basics

Blade is Laravel’s powerful template engine.
Some common Blade features:

If Statements:

@if(count($team) > 0)
    <p>We have a great team!</p>
@else
    <p>No team members yet.</p>
@endif

Loops:

@foreach($team as $member)
    <li>{{ $member }}</li>
@endforeach

Echoing Variables:

{{ $member }}

Blade Layouts for Reusable HTML

Instead of repeating <html>, <head>, and <body> in every view,
we can use a layout file.

Step 1 – Create Layout:
resources/views/layouts/main.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <h1>My Laravel App</h1>
    </header>

    <div>
        @yield('content')
    </div>
</body>
</html>

Step 2 – Extend Layout in a View:
resources/views/about.blade.php

@extends('layouts.main')

@section('title', 'About Us')

@section('content')
    <h2>About Our Company</h2>
    <p>We are a team of passionate developers.</p>
@endsection

Benefits of Blade Templates

Makes HTML reusable.
Easy to pass and display data.
Cleaner and more organized code.
Supports loops, conditions, includes, and layouts.

Conclusion:
Now we have a full flow: Route → Controller → View.
Next, we can enhance our application by learning Request & Validation so we can handle forms and user input properly.