<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ravitz Computers</title>
    <description>The latest articles on DEV Community by Ravitz Computers (@aravitz90).</description>
    <link>https://dev.to/aravitz90</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4153273%2F27a4c486-ce81-438f-9ee9-b8a9a1703079.png</url>
      <title>DEV Community: Ravitz Computers</title>
      <link>https://dev.to/aravitz90</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aravitz90"/>
    <language>en</language>
    <item>
      <title>Build a restaurant homepage with Webbit, a free Windows website editor</title>
      <dc:creator>Ravitz Computers</dc:creator>
      <pubDate>Wed, 30 Sep 2026 23:53:56 +0000</pubDate>
      <link>https://dev.to/aravitz90/build-a-restaurant-homepage-with-webbit-a-free-windows-website-editor-2ege</link>
      <guid>https://dev.to/aravitz90/build-a-restaurant-homepage-with-webbit-a-free-windows-website-editor-2ege</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Disclosure: Webbit and this walkthrough were created with help from AI. The screenshots and demonstrated edits come from the actual editor.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with the restaurant template
&lt;/h2&gt;

&lt;p&gt;Choose &lt;strong&gt;New site → Restaurants → Restaurant &amp;amp; café&lt;/strong&gt;. Webbit opens a fictional site called Juniper Table with an HTML page and a CSS file.&lt;/p&gt;

&lt;p&gt;The template includes sample menu, contact and opening-hours sections. It is a starting point, not a working booking system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Change the headline
&lt;/h2&gt;

&lt;p&gt;Select the headline in the visual page. In its contextual ribbon, choose &lt;strong&gt;Content&lt;/strong&gt;, then set &lt;strong&gt;Text / label&lt;/strong&gt; to:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Fresh plates. Good company.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The HTML changes to match the visual edit. You can also click directly on the text to edit it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Style the visit button
&lt;/h2&gt;

&lt;p&gt;Select &lt;strong&gt;Plan your visit&lt;/strong&gt; and choose &lt;strong&gt;Appearance&lt;/strong&gt;. In the CSS property controls, apply these one at a time:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nt"&gt;background-color&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="err"&gt;#245&lt;/span&gt;&lt;span class="nt"&gt;b45&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;span class="nt"&gt;border-radius&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt; &lt;span class="err"&gt;999&lt;/span&gt;&lt;span class="nt"&gt;px&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first makes the button green; the second gives it rounded ends. The generated HTML keeps the ordinary style values:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;a&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"button"&lt;/span&gt; &lt;span class="na"&gt;href=&lt;/span&gt;&lt;span class="s"&gt;"#contact"&lt;/span&gt;
   &lt;span class="na"&gt;style=&lt;/span&gt;&lt;span class="s"&gt;"background-color: rgb(36, 91, 69); border-radius: 999px;"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  Plan your visit
&lt;span class="nt"&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It links to the page’s contact section. Connecting a booking service would be a separate step.&lt;/p&gt;

&lt;h2&gt;
  
  
  Check the page and source
&lt;/h2&gt;

&lt;p&gt;Hide the ribbon to give the page more room. Use &lt;strong&gt;Split&lt;/strong&gt; to inspect the HTML beside the visual page, then choose &lt;strong&gt;Phone&lt;/strong&gt; to check its smaller-screen layout.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F63b5dx8hk4ww6f7x1e7h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F63b5dx8hk4ww6f7x1e7h.png" alt="Webbit’s visual editor beside editable HTML" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This screenshot shows the editor; the tutorial below shows the specific restaurant edits.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://youtu.be/3u5mwn_jOBE" rel="noopener noreferrer"&gt;Watch the restaurant walkthrough&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Ravitz-Computers/webbit/releases/download/v0.1.0-beta.1/Webbit-Restaurant-Example.zip" rel="noopener noreferrer"&gt;Download the example HTML/CSS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://ravitzcomputers.com/webbit" rel="noopener noreferrer"&gt;Download Webbit&lt;/a&gt; · &lt;a href="https://github.com/Ravitz-Computers/webbit" rel="noopener noreferrer"&gt;Source on GitHub&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
