Layout and UI

Goal

This snapshot advances Cedarline Post by teaching you to render html/template pages with Simple.css.

Every numbered folder is a complete app. Run this stage independently, then compare it with the previous folder.

Prerequisites

Use Go 1.22+, a terminal, and a code editor. You should recognize packages, functions, and HTTP verbs.

Port 8081 must be free. Copy .env.example before starting. Stages from the data layer use a per-snapshot SQLite file (no Docker required).

• Go 1.22 or newer
• A code editor and terminal
• Optional: Docker only if you prefer another database later

Concepts

html/template escapes values by default. A shared layout keeps navigation consistent; Simple.css provides readable defaults.

Keep handlers thin: routes accept input, SQL and helpers enforce rules, and html/template escapes output by default.

Walkthrough

Parse templates, serve static CSS, pass sample posts to the home page, and extend a base layout.

Read the example, then open the matching snapshot. The repository includes the surrounding setup and error handling.

tmpl = template.Must(template.ParseGlob("templates/*.html"))
tmpl.ExecuteTemplate(w, "layout", data)

Run and verify

Enter 03-Layout-And-UI, copy .env.example, run go mod tidy, and start the server on port 8081.

Open http://127.0.0.1:8081. Watch the terminal for validation and database errors.

git clone https://github.com/michaeldunga1/fcc-go-blog.git
cd fcc-go-blog/03-Layout-And-UI
cp .env.example .env
go mod tidy
go run .

Troubleshooting

Template not found usually means the working directory is not the snapshot folder when you run go run ..

Missing module errors usually mean go mod tidy was not run in this snapshot. For SQLite failures, delete a corrupt *.db file and restart so migrate/seed can recreate it.

• Read the first error first
• Restart after environment changes
• Never commit .env or *.db

Try this

Render a friendly empty state when the posts list is empty.

Test a happy path and one invalid or unauthorized request.

• Make one small change
• Test it in the browser
• Compare with the next snapshot only after it works