Layout and UI

Goal

This snapshot advances Junction Almanac by teaching you to create a shared ERB layout styled with Pico.css.

Every numbered folder is a complete Rails application. Run this stage independently, then compare it with the previous snapshot to isolate the new responsibility.

Prerequisites

Use Ruby 3.1 or newer, Bundler, PostgreSQL through Docker, and a terminal. Basic Ruby, HTML, and SQL vocabulary will make the framework conventions easier to recognize.

The app listens on port 3000. PostgreSQL is exposed on host port 5434, and every snapshot names a different database so lesson data never leaks between stages.

• Ruby and Bundler
• Docker with Compose
• A code editor and terminal

Concepts

Layouts wrap each view with shared document structure. ERB evaluates trusted Ruby expressions while Rails escapes inserted text by default.

Keep the Rails request path visible: the router selects a controller action, Active Record handles data rules, and an ERB view renders the response inside the shared layout.

Walkthrough

Load Pico.css, build a semantic navigation bar, render flash messages, and add a small local stylesheet through the asset pipeline.

Read the focused example, then inspect the matching repository snapshot for the surrounding configuration, validation, failure paths, and accessible markup.

<main class="container">
  <% flash.each do |type, message| %>
    <p role="status"><%= message %></p>
  <% end %>
  <%= yield %>
</main>

Run and verify

Enter 03-Layout-And-UI, install its bundle, prepare its database when this stage uses one, and start Rails on port 3000.

Open http://localhost:3000. Keep the server log visible so you can connect each browser action to its route, SQL query, rendered view, redirect, or validation error.

git clone https://github.com/michaeldunga1/fcc-rails-blog.git
cd fcc-rails-blog/03-Layout-And-UI
bundle install
bin/rails server -p 3000

Troubleshooting

Missing styles usually point to an incorrect asset manifest or stylesheet link. Check the browser network panel before changing layout markup.

If Rails reports a missing table, run bin/rails db:prepare db:seed in the current snapshot. Connection failures usually mean PostgreSQL is stopped or port 5434 is already occupied.

• Read the first exception first
• Confirm the current numbered folder
• Never commit secrets or config/master.key

Try this

Add a footer and confirm both Home and About inherit it.

Test one successful request and one invalid or unauthorized request. A production-minded Rails app must preserve data rules even when someone bypasses the visible links and submits a direct request.

• Make one focused change
• Verify it in the browser
• Move on only after the checkpoint works