Snail Journal

Join Me

MAKE YOUR WEBSITE TODAY CHEAT SHEET FOR BIMBOS, JIMBOS, DUMBOS, & COLUMBOS

Hi everyone,

Take a deep breath. Raise one eyebrow. Are you ready to hop on the web?

I’m going to transform you into a WEBMASTER in 4, YES FOUR, NOT EVEN FIVE, easy steps, TODAY.

THE FOUR STEPS:

  1. Name your website (and claim it)
  2. Connect to a host
  3. Pop in the code I made for you
  4. Save and Upload - BOOM!!

Don’t worry if you don’t know how to code! This is the Bimbo’s Guide. If you can boil pasta, you can do this. If you can’t boil pasta, don’t invite me over.

I just want to get you to a basic jumping off point. You can take the lead from there, or simply kick back and relax in the shade. I’m no Slick Rick with this computer biz, I just want to have fun with my buddies.

Step 0.5) play around with a free low stakes playpen site

I timed myself just now, it took 23 seconds to make a bear blog account.

Bear is super simple, minimalist, no frills. Play around and think about what you may want to be posting now that you are going to have your own spot and complete creative freedom. Bear is a nice place to quietly break the digital ice and think things out… if you want…

Dibs, can you help below?

Step 1) Use a website like porkbun to buy your domain. Porkbun offers a discount for the first year, the price after that can be $10 and up depending on the domain. Pick something fun!

About: [INCOMPLETE]

Pricing:

Step 2) Hosting

There are different options for hosting. You can find a host on your own, or share a hosting account with friends. There is DreamHost, which will allow you to host as many websites as you want. Then there is NeoCities, which will let you host only one website, but it will be easier to use.

I recommend you try NeoCities - they let you sign up free. If you like it, you can pay them a monthly fee to connect your domain to your NeoCities website. If you don’t like it, you can look elsewhere. I think NeoCities would be much easier than Dreamhost, but someone could figure it out I’m sure.

When you have a host, you’ll need to find their Nameservers and you will need to enter them into the website you bought your domain from. That will let them know how to connect the domain to the website on your host.

Host with friends?

The best things in life are free But you can keep them for the birds and bees I want money! That’s what I want I want moooOOOOooOOOOOoooney That’s-what-I-want Your loving gives me such a thrill But your loving doesn’t pay my bills I want money!

You could recruit a few pals and get an unlimited host that you can all share! This cuts the cost. But it is really not super expensive anyway, usually like $5-6 a month. Eggs cost more bro…

[Cyberduck]

Step 3) Code time (don’t be scared, I already made it for you)

You need paper to draw, yeah? This is the same thing. Phoenix will be your paper (or use whatever idc.) Your code is you drawing on the paper. Phoenix is nice because you can see the results in real time (also just like drawing on a paper.)

Open a New [File?] in Phoenix, name it whatever but it has to end with .html Go to [link] and copy the code I put for you. Paste the code into your [File] and the image should immediately appear, if not hit the swirly refresh arrow Personalize! Details below

Edit your blank base (foolproof guide):

As follows:

Tab Title Background Color Title Text Title Visually Icon Images and Links Change or Remove Bottom Left Image Change or Remove Bottom Right Link Bouncy Guy

Your friends: Ctrl+F - this is for finding things quickly Ctrl+Z - undo, your good friend

Do Ctrl+F and search “your title here” (no quotations necessary)

Do you see how it says 37 to the left? That is “line 37” . Sometimes you will see me write “line”and this is what it is referring to.

This is where you can put the name of your site that will appear on the tab, as demonstrated in the image above.

Going forward, I’m going to tell you: the line, the text to modify, and how to do the modification. Time makes you bolder, and even children grow older. Both your life and these lines may change as you edit your code, but should be fine for now as you build from the blank base template.

Change Background Color

Line: 40 Text you will see: background-color: #008080; Action: swap #008080 with a hex code (color code) of your choice. You can find a code for your color of choice via this website or whatever site you prefer.

Change Title

Line: 100 Text: <h1 class="title" >INSERT TITLE</h1 > Action: swap INSERT TITLE with the title you want

Change Title Visually

Line: 52-56

Text:
text-align: center;
font-size: 4rem;
color: lightpink;
font-family: "MS Sans Serif", sans-serif;
margin: 10px 0;

Action: self explanatory hopefully! Alter what you like, how you like.

What do you want on your website?

I made you an assortment of little tupperwares for your goodies to live inside of. They are easy to swap out with what you want to add.

You can see where the icons/links correspond with the code.

To Customize:

<img src=”the URL of the image you want” >

To get an image URL, right click the image you dig and click Copy Image Address. If the image is on your computer, upload it to the web and do this. Postimages.org is a very simple site if you would like to upload images to the web.

That piece of obsidian on the bottom left? You can swap it out, make it a link, or remove it.

Line: 163

Text: <img src="https://i.postimg.cc/rwTs3r2F/obsidian-icon.webp" alt="obsidian" class="fixed-bottom-left" >

Action Option 1: to change the image, replace with your image URL <img src=”your image URL here” >

Action Option 2: to make it a link, put some ‘bread’ around the meat <a href=”your link here” ><img src=”your img URL here” ></a >

Action Option 3: Delete the line to remove completely

Edit bottom right link content

Line: 158

Text: <div class="fixed-text" ><a href="INSERT URL" >YOUR TEXT HERE</a ></div >

Action Option 1: add your preferred URL and edit YOUR TEXT HERE for the link name

Action Option 2: Text only, no link? Delete INSERT URL.

Action Option 3: Delete the line to remove completely

Edit bottom right link visually

Line: 150

Text: font-size: .6rem;

Action: you can edit this number to adjust the size of the text on the bottom right. Font-family color I imagine you understand by now.

Edit the cute bouncer

Line: 164-178

Action: To change your bouncer, swap the image URL on line 164. You can see between there and 178 where I wrote hamster of Hamster, you can decide on your own nickname there if you want. – Once you are happy with what you have, Save File. Then please DUPLICATE the file and label one as your original, the duplicate can be for experimentation.

Step 4) Time to go live!

Find your file on the computer, click and drag it into [Cyberduck] – In Cyberduck, rename file as index.html – Go look at your website! It should be live!

YOU DID IT!!!

—------------------

For those who want to dig deeper, you can add more pages to your site. Save and drag new .html files to Cyberduck. When you are linking them, you just need to match them up! They are case sensitive, so pay attention if you are using upper or lower case. Example

File name: About.html URL: http://yourwebsiteurl.com/About.html

If you wanted to link it on a page or within some text, you could put:

<a href=”http://yourwebsiteurl.com/About.html” >Link Title Here</a >

</bimbo >