Build a restaurant homepage with Webbit, a free Windows website editor
I made Webbit for people who want to edit a website visually while keeping ordinary HTML, CSS and JavaScript files. It’s a free Windows app, currently in Beta 1. Here’s a small example you can follow without an AI servic
I made Webbit for people who want to edit a website visually while keeping ordinary HTML, CSS and JavaScript files. It’s a free Windows app, currently in Beta 1. Here’s a small example you can follow without an AI service or subscription.
Disclosure: Webbit and this walkthrough were created with help from AI. The screenshots and demonstrated edits come from the actual editor.
Start with the restaurant template
Choose New site → Restaurants → Restaurant & café. Webbit opens a fictional site called Juniper Table with an HTML page and a CSS file.
The template includes sample menu, contact and opening-hours sections. It is a starting point, not a working booking system.
Change the headline
Select the headline in the visual page. In its contextual ribbon, choose Content, then set Text / label to:
Fresh plates. Good company.
The HTML changes to match the visual edit. You can also click directly on the text to edit it.
Style the visit button
Select Plan your visit and choose Appearance. In the CSS property controls, apply these one at a time:
background-color: #245b45;
border-radius: 999px;
The first makes the button green; the second gives it rounded ends. The generated HTML keeps the ordinary style values:
<a class="button" href="#contact"
style="background-color: rgb(36, 91, 69); border-radius: 999px;">
Plan your visit
</a>
It links to the page’s contact section. Connecting a booking service would be a separate step.
Check the page and source
Hide the ribbon to give the page more room. Use Split to inspect the HTML beside the visual page, then choose Phone to check its smaller-screen layout.
This screenshot shows the editor; the tutorial below shows the specific restaurant edits.
Watch the restaurant walkthrough
Before publishing, replace every sample dish, price, address and contact detail. Check keyboard navigation, contrast and the layout at different widths. A device preview is useful, but it does not replace testing in real browsers.
Download Webbit · Source on GitHub
Webbit is still a beta. If you try this workflow, I’d welcome a reproducible bug report or suggestions about the controls you’d want next.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.