Wysiwyg html for free

Development Web Development
1

I’m not sure if this is the best category for this.

so, lets start off with I am dumb, about 20~ years ago with some of the ‘make your own website’ websites they had tools/there were free tools to make a website in a visual way, as in no need to know html at all.

my recent move to 10 has seen chrome give a few of the extensions that I used the middle finger, there is nothing like the extensions anymore, and i’m trying to find options.

one of them was mosaic alpha, essentially it was a start tab replacement, let me set up large screenshots of sites as book marks and every new page I could VERY easily just click a button and go.

I’m thinking that remaking this as a local webpage will more or less be the exact same thing, but be portable between browsers.

Now if I remember, the last time I used wysiwyg html there were some 30 lines of crap to place an image arbitrarily, which back then was obscene, but now, even with that extreme bloat would probably be faster than an extension and most modern websites.

Is there any program I can do this with? really I need a background color, and the ability to place images that function as links.

2

Not exactly WYSIWYG but I think the cloest you get is using a website generator such as Hugo or Jekyll…

3

Hugo or Jekyll are total overkill for this.

Such a “website” is not difficult to create at all with just a bit of CSS and HTML, if you want to do it manually.

Here is a basic version of such a site, adjust design to your needs:

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>Start page</title>
                <style>
                        body, html {
                                padding: 0 0;
                                margin: 0 0;
                                color: #fff;
                                background-color: #000;
                                font-family: sans-serif;
                        }
                        .page {
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: center;
                        }
                        .item {
                                box-sizing: border-box;
                                margin: 1em;
                                width: 640px;
                                height: 360px;
                                border-radius: 1em;
                                color: #000;
                                background-color: #fff;
                                object-fit: cover;
                                box-shadow: 0px 0px 10px 0px rgba(127,127,255,0.8);
                                border: 1px solid #88f;
                        }
                </style>
        </head>
        <body>
                <h1 style="text-align: center;">Start page</h1>
                <div class="page">
                        <a href="#"><img class="item" src="example1.jpg"></img></a>
                        <a href="#"><img class="item" src="example2.jpg"></img></a>
                </div>
        </body>
</html>

Just save it as .html, adjust links and image sources as needed, set as homepage. DONE.

4

I assumed OP wanted to do more further down the line…

5

Mostly just want to have thumbnails on screen, to websites I constantly use, possibly add some possibly take some away.

this is just essentially the new ‘new page’ landing page instead of chrome or firefox default.

6

Hey why not hack together a solution by combining approach from @diizzy and @max1220

It should work for the most part if you are willing to install Python, if not I’m sure someone can hack together a PowerShell version, or I can do it when i have my Windows PC handy.

Be warned:

  1. I suck at writing code
  2. I’m a bit drunk at the moment
  3. I can do a more elaborate version that helps you manage full URLs if you find this approach useful
  4. Tested on MacOS only for now

P.S. My first GitHub repo, finally!

7

I don’t use Chrome, but there are speed dial extensions that work more or less how you are describing. I’m not about to butcher my setup to see just how big I can make each dial, but it is adjustable and I currently have mine set up so 4 rows of 6 columns fit on one screen before needing to scroll down. This way I have all of the sites I visit regularly in one place, while links I use infrequently for reference or one-off things I want to be able to find quickly go down lower on the list. If I run out of room I can extend it as needed. I’ve been using Group Speed Dial without issue for a couple of years, but I’m sure there are others.

This isn’t to deter you from learning HTML, but it seems like you want a new extension to act as a home page for new tabs. A quick search didn’t give any meaningful results regarding what you were using so I have no idea how current offerings compare to other options.