BlocWeave
What you'll build
This is Part 1 of a series for anyone who wants a professional website for their business — whether you're a caterer, a salon, a shop, or a freelancer. You don't need to know programming. BlocWeave will write the code; you tell it what your business is about.
By the end of the series you'll have:
- A professional homepage with a hero section, services, and testimonials
- An About page, a Services/Pricing page, and a Contact page
- A working contact form (no server needed)
- A WhatsApp button so customers can message you instantly
- A live website published at your own domain
By the end of Part 1 you'll have a polished homepage that looks great on both phones and desktop computers.
Prerequisites
- VS Code installed — download and install it, it's free
- BlocWeave installed — search BlocWeave in the VS Code Extensions tab and install it
- A free BlocWeave account — sign in from the extension sidebar after installing
No other tools needed. No Node.js, no terminal commands in this part.
Create a folder for your website
- On your computer, create a new folder. Name it after your business — for example
amas-catering(use lowercase letters and hyphens, no spaces) - In VS Code, go to File → Open Folder and select that folder
- BlocWeave will appear in the sidebar on the left
This series uses the example of Ama's Catering — a Ghanaian catering business. Replace every mention of "Ama's Catering" with your own business name, services, and details.
Tell BlocWeave about your business
Create a new file called BLOCWEAVE_PLAN.md in your folder. This is where you describe your business so BlocWeave understands the context.
Click the BlocWeave icon in the sidebar and type:
Create a BLOCWEAVE_PLAN.md file with the following information about my business: Business name: Ama's Catering Type: Catering and event food service Location: Accra, Ghana Services: Corporate catering, wedding catering, birthday parties, daily office lunches Phone: +233 24 000 0001 WhatsApp: +233 24 000 0001 Email: [email protected] Brand colors: Deep green (#1a6b3c), warm gold (#c9982a), white background Tone: Warm, professional, homely — like a trusted family cook who also runs a professional business
BlocWeave will create the file. From now on, every prompt you write in this series will use this context automatically.
Create the homepage
Now let BlocWeave build the homepage. In the BlocWeave panel, type:
Create an index.html file for Ama's Catering website. It should be a complete, self-contained HTML file with all CSS in a <style> tag inside the <head>.
Design: clean and professional. Deep green (#1a6b3c) for the header and CTA buttons, warm gold (#c9982a) for accents and highlights, white background, dark grey text (#1a1a1a).
Include these sections in order:
1. Navigation bar — sticky at top, white background with subtle shadow on scroll. Left: business logo (just the name "Ama's Catering" in a green serif font). Right: links — Home, About, Services, Contact — and a gold "Get a Quote" button.
2. Hero section — full-width, green background with a subtle diagonal pattern overlay. Large headline: "Exceptional Food for Every Occasion". Subheading: "From intimate birthday dinners to full wedding receptions — we bring professional catering to your event in Accra." Two buttons: "Get a Free Quote" (gold, links to contact.html) and "See Our Menu" (outlined white, links to services.html).
3. Services strip — three cards in a row (stack on mobile). Each card has an emoji icon, a heading, and two lines of description: "Corporate Catering — Daily office lunches and boardroom meals", "Wedding Catering — Full-service reception catering for your special day", "Events & Parties — Birthdays, funerals, outdoorings, and celebrations".
4. Why choose us — two-column section (image placeholder on left, text on right). Heading: "Cooked with care. Delivered on time." Three bullet points: "Fresh ingredients sourced daily from Makola market", "Our own delivery team — no delays, no excuses", "Serving Accra businesses and families since 2018".
5. Testimonials — three quote cards with a light green background. Use these testimonials: "Ama's team catered our office lunch for 80 people. Everything was hot, on time, and absolutely delicious. — Kofi A., Accra", "Our wedding reception was perfect. The food was the highlight of the day. — Abena & Kwame", "We order from Ama's every Friday. The jollof rice is unmatched. — Akosua B., HR Manager".
6. CTA banner — full-width green background. Headline: "Ready to plan your event?" Two buttons: "Call Us Now" (links to tel:+233240000001) and "Send a WhatsApp" (links to https://wa.me/233240000001).
7. Footer — dark grey background. Left: business name and tagline "Exceptional food. Every time." Centre: navigation links. Right: phone number and email. Bottom bar: copyright "© 2026 Ama's Catering. All rights reserved."
Make the entire page fully responsive — it must look good on a phone screen (max-width: 600px). Use CSS Grid or Flexbox for layouts. No JavaScript required except for the navigation scroll shadow effect.
Open the homepage in your browser
In VS Code, right-click on index.html and choose Open with Live Server (if you have the Live Server extension) or just double-click the file in your file manager to open it in a browser.
You should see a professional-looking catering website. Look through it and note anything you'd like to change.
Adjust the content for your business
Now personalise it. In BlocWeave, tell it what to change:
Update index.html: change "Ama's Catering" to "Mensah Events" everywhere it appears, update the hero headline to "Unforgettable Events, Perfectly Executed", and change the phone number to +233 20 111 2222 and the WhatsApp link to https://wa.me/233201112222.
BlocWeave will make the changes directly in the file. You can keep refining like this — change colors, reword sections, add or remove parts — until it matches your vision exactly.
Placeholder images: The "Why choose us" section has a grey image placeholder. In Part 2 we'll add real photos. For now, you can drag any JPG or PNG into your project folder and ask BlocWeave: "Replace the placeholder in the why-choose-us section with my photo food-photo.jpg".
Project structure after Part 1
your-business-site/
index.html ← homepage (complete, self-contained)
BLOCWEAVE_PLAN.md ← your business contextWhat's next
In Part 2 we add the About, Services, and Contact pages, link everything together, and add a WhatsApp floating button that follows the user as they scroll.