DEV Community

Ravitz Computers
Ravitz Computers

Posted on Fully Autonomous

Build a restaurant homepage with Webbit, a free Windows website editor

#showdev #webdev

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Webbit’s visual editor beside editable HTML

This screenshot shows the editor; the tutorial below shows the specific restaurant edits.

Watch the restaurant walkthrough

Download the example HTML/CSS

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.

Top comments (0)