Day 04 of 10

Style and connect your domain

Goal: Make the page feel real, check it on mobile, and get it live on a real URL. (~45 min)

Today is the make-it-feel-real day. You are not redesigning everything. You are tightening the spacing, checking mobile, fixing the obvious rough bits, and getting the page onto a live URL. This is usually where beginners realize that “almost done” still needs a careful pass.

What to do

Tighten the visual style

Refine spacing, font sizes, button style, and color so the page looks intentional.

Copy this Day 4 polish prompt into Codex, Claude Code, or Claude

Use this prompt to improve the page without turning it into a full redesign. Paste it after you already have a working live or local page.

I am a non-technical beginner polishing a validation landing page.
Here is what the page currently looks like: [PASTE SCREENSHOT OR DESCRIBE IT]
Here is the goal of the page: [PASTE IDEA]

Please help me improve this page with the smallest high-value changes.
Focus only on:
1. spacing
2. text size and readability
3. button clarity
4. mobile layout
5. simple trust cues

Rules:
- Do not redesign everything
- Give me the top 3 fixes first
- Explain each fix in plain English
- If code changes are needed, show the exact small change to make
- Keep it simple and believable for a beginner landing page

Check the mobile layout

Fix anything that wraps badly or feels cramped on a phone screen.

Add trust details

Include a favicon and simple trust cues like who it is for or what happens after signup.

Deploy your page to Netlify

This is the step that takes your local page and puts it on a real URL anyone can visit. You created a Netlify account at the end of Day 1. Here is how to deploy: Option A — Drag and drop (simplest, no setup required): 1. Go to netlify.com and log in. 2. On your dashboard, look for the box that says "Want to deploy a new site without connecting to Git? Drag and drop your site output folder here." 3. Open your project folder on your computer (in File Explorer on Windows, or Finder on Mac). 4. Drag the entire folder into that Netlify box. 5. Netlify uploads it and gives you a URL like https://random-words.netlify.app within a few seconds. 6. Click that URL. Your live page is up. Option B — Connect to GitHub (better if you want auto-deploy on every save): 1. First push your project to GitHub using GitHub Desktop: click "Publish repository" in the top right → name it → click Publish. 2. In Netlify: Add new site → Import an existing project → Connect to GitHub → choose your repo → click Deploy. 3. Every time you push a change to GitHub, Netlify automatically updates the live site. Either option works for this challenge. Option A is faster right now.

Connect a custom domain (optional)

Your Netlify URL works fine for sharing and validation. A custom domain makes the page look more credible, but it is optional at this stage. If you want a domain: 1. Buy one from Namecheap (namecheap.com) or GoDaddy (godaddy.com). A .co.za domain costs around R100–R200 per year. A .com costs around R250–R350. Search for your preferred name, add to cart, and check out. 2. In Netlify: go to your site → Site settings → Domain management → Add custom domain → type your domain name → click Verify. 3. Netlify will show you two DNS records to add. They look like: Type: CNAME, Name: www, Value: your-site.netlify.app 4. Go to your registrar (Namecheap or GoDaddy) → find DNS settings → add those exact records. 5. Wait 10 minutes to a few hours. DNS takes time to update — this is normal. Netlify will show "DNS verified" when it is done. If you are blocked on this step, skip it for now. The .netlify.app URL works perfectly for validation.

Verify HTTPS and load time

Open the live site and confirm the lock icon, page load, and links all work correctly.

Run a final build

Make sure the project still builds cleanly before Day 5.

Expected result

The page feels cleaner, works better on small screens, and opens on a real live URL you can share.

Common mistake

Only checking the desktop version and finding out too late that the phone version looks broken.

What you learned

Small polish changes make a beginner project feel much more trustworthy.
Mobile checks catch problems that are easy to miss on a laptop.
A custom domain helps, but a working live page matters more than a perfect domain setup.

Tomorrow

Day 5 - you launch, share, and look at the first signal. Real feedback starts after the page is live.

Day 3 Day 5: Launch and share