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 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…
To create a restaurant homepage using Webbit, a free Windows website editor, follow these steps:
1. Begin by selecting the restaurant template by clicking on New site → Restaurants → Restaurant & café. Webbit will open a fictional site called Juniper Table, featuring an HTML page and a CSS file. The template contains sample menu, contact, and opening-hours sections, but it's not a functioning booking system.
2. To customize the headline, locate the headline in the visual page. In the contextual ribbon, choose Content, then set Text / label to "Fresh plates. Good company." The HTML will automatically update to reflect the visual changes. Alternatively, you can click directly on the text to edit it.
3. Next, style the "Visit" button. Choose Plan your visit from the visual page and then select Appearance. In the CSS property controls, apply the following changes one by one: background-color to #245b45 for a green color, and border-radius to 999px to create rounded ends. The generated HTML will retain the ordinary style values, such as a class of "button" and an href of "#contact" with a style attribute of "background-color: rgb(36, 91, 69); border-radius: 999px;". Note that linking to the page's contact section is a separate step.
4. To make the page more spacious, hide the ribbon. Use Split to inspect the HTML beside the visual page, and then choose Phone to examine the layout on smaller screens. This screenshot displays the editor, while the tutorial below illustrates the specific restaurant modifications.
5. Before publishing, replace every sample dish, price, address, and contact detail with accurate information for your restaurant. Test keyboard navigation, color contrast, and the layout at various widths. While a device preview is helpful, it should not replace testing in real browsers.
6. Finally, download the example HTML/CSS provided. Remember that Webbit is still in beta, so if you encounter any bugs or have suggestions for improvements during this process, please provide a reproducible bug report or suggestions about the controls you'd want next.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
