Layout and UI

Goal

This snapshot advances Marlowe Gazette by teaching you to build shared Blade layouts and a responsive Bulma interface.

Every numbered folder is complete and independently runnable, so you can inspect this stage without rebuilding earlier lessons.

Prerequisites

Use PHP 8.2 or newer, Composer, Docker, and a terminal. Basic PHP, HTML, and SQL familiarity will help.

The Laravel development server uses port 8000. Root Docker Compose exposes MySQL 8 on port 3307 and each snapshot has a separate database.

• PHP and Composer
• Docker
• A code editor and terminal

Concepts

Blade inheritance keeps navigation, feedback, CSRF forms, and page chrome consistent. Bulma supplies class-based components without a JavaScript build.

Laravel keeps HTTP routes, controllers, Eloquent models, validation, authorization, and Blade presentation in explicit layers.

Walkthrough

Follow the base layout into feed and form views, noting escaped output, sections, authentication branches, and validation feedback.

Inspect the matching snapshot around the example. The repository includes validation, errors, CSRF protection, and the surrounding application structure.

@extends('layouts.app')
@section('content')
  <h1 class="title">Latest stories</h1>
@endsection

Run and verify

Start MySQL from the repository root, enter 03-Layout-And-UI, install dependencies, copy the environment file, generate an application key, migrate, seed, and serve.

Open http://localhost:8000. From data lessons onward, Ada and Grace are deterministic accounts with password password123.

docker compose up -d
git clone https://github.com/michaeldunga1/fcc-laravel-blog.git
cd fcc-laravel-blog/03-Layout-And-UI
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate --seed
php artisan storage:link
php artisan serve --host=0.0.0.0 --port=8000

Troubleshooting

If a view is missing, verify its dot notation, filename casing, and that the controller returns the expected name.

If MySQL fails, verify Docker is healthy, port 3307 is free, and this snapshot's DB_DATABASE matches its unique marlowe_XX database.

• Read the first exception
• Clear cached config after environment changes
• Never commit .env, vendor, or node_modules

Try this

Add a Bulma notification component to the layout.

Exercise both a successful request and a validation or authorization failure before moving to the next snapshot.

• Make one focused change
• Test it in the browser
• Compare the next snapshot after it works