For this project, let's see how fast we can build a website from scratch. My goal .. start
to finish in 6 minutes flat.
Some of you might remember, a few months ago that
YouTube accidentally deleted my entire channel and terminated my account.
Thankfully, it's back online now, but obviously we need a backup plan for you "King of Random"
fans in case of another emergency. With or without Youtube, I'll keep making videos,
but how are you gonna know when and where I post them? I've formed an inner circle,
and you can become part of it by clicking here.
Now to setup a 6 minute website, let's start by going to squarespace.com and clicking on
the button that says "get started". You can see the first thing that pops up is a number
of templates that we could use to design our webpage. And I'm gonna keep it simple by
going with a template called "Beatrice". Here are some examples of what other people have
done with the layout, but let's just go ahead and click "start with this design". If we
enter a name, email, and password, that's really about all we need to get this started.
Now this next part should go fairly fast, so don't try to keep up on details. Just sit
back and enjoy. With the timer started, we can skip the intro video by hitting escape,
then go to the main navigation bar on the left, click the gear icon, and click to "make
a page like this". This is gonna be our home page, so let's change the name, and the
url to match, then click save. Now all you'd really have to do is swap out your text and
pictures with what's already here. But in this case, I'd prefer to start with a blank
page, so let's just delete the items one by one until everything's gone. Now that our
page is blank, why don't we make another one by clicking "Add page", selecting a blank
page, and let's call this one "Videos". While we're here, let's add one more page, and call
it "Contact". Ok, with that's saved, let's go back to our home page and click on the
"+" sign at the top. This opens a bunch of item options, and the first thing we need
is a newsletter block. This will create our mailing list for the inner circle. Let's change
the name, then click the storage tab so we can connect it to a databasing service like
"MailChimp" or "Google Docs". I chose to use "Google Docs", and as you can see it's as easy
as creating a name for the database, and clicking save. Now if we go to the top and click "view
page", it will ask us to save our work, and here's what the webpage looks like so far.
Now check this out. If we click the pencil at the bottom, we can highlight the footer
text, and paste in some custom information in its place. Now if we save that, click the
"X" and now click on the "paintbrush" icon, we can access the "style mode". This means we
can edit the banner image, delete it, and upload one of our own. There we go, much better
already. But I'm not a very big fan of this site title covering the bottom of the banner.
Unfortunately we can't delete it, but if we click the "site title" properties, we can
adjust the line height down to 1 pixel, and that pretty much gets rid of it. Now it's
hard to tell, but there's a yellowish background image as well, and if we delete that, then
click on "site background", we can adjust it to a custom background color. I'm going
with black. The only problem with that is that the words are harder to read. To fix
that, let's adjust the text colors for the navigation (active) text, the navigation (hover)
text, the standard navigation font, the main body font, and the text color for the footer.
I'm basically just changing the colors of all the different words. and I'm sure you
get the idea. Now you can see the mailing list area is still pretty dark, so let's fix
that by scrolling to the bottom left, and changing the "newsletter style" from "dark",
to "light". That's better already, but we can also change the "newsletter background"
to a custom color of our choice, and while we're at it, change the "button" color so
it's a little more prominent as well. Now to tighten everything up, let's go to the
"page padding scroll bar" and adjust the padding level down to around 25 pixels, so it pulls
everything together. Now let's "X" out of the style mode, and see how it looks. Ok cool.
Now let's "escape" back to the edit menu, click the left side gear icon, select "basic
information" and give our website a name. Of course this one is for "The King of Random",
and we can customize it further by scrolling down and uploading a logo into the "browser
icon" section. Next let's click the index for "domains", and you can see this will give
us the option to customize our URL. In this case I'm just going to call it "TKOR", but
that can be changed anytime you want. Now if you look at the URL at the top, you should
see your icon, as well as your custom squarespace URL. Ok cool, let's keep going.
Let's try adding a page in the "not linked" section, and choose the "gallery page" option.
I'm gonna name this one "video gallery", and although this page will be invisible to
our visitors, it is still very valuable to our page. Let me show you why.
When I click "Add images or video", "select video", then paste the URL for one of my YouTube
uploads, you can see it automatically populates the video title, thumbnail, and sets the image
overlay. Now when we save it, a little video thumbnail pops up on the unlinked page. I'm
gonna add 7 more videos just like this, and I'll speed the process just for convenience,
because I'm sure you already get it. At this point, let's head back to the home page, click
the "+" sign, under the mailing list, and select to add a line. This is mainly, just
for looks. Now let's click the "+" sign again, and this time choose "gallery", "use existing
gallery", and select the video gallery we just created. Now if we go to "design", and
click "gallery design", there's an option for a customizable grid layout. That looks
pretty awesome, but watch this. If we add another gallery the exact same way, but this
time keep the "slideshow" option, and click the "auto play" feature, watch what happens.
We can drag and drop the slideshow gallery down beside the thumbnail grid gallery, and
it automatically reformats the layout. Let's save that, and view the page now. Here we've
got a clean looking signup page, with a video slideshow, and video thumbnails set right
beside it. Nice. Ok to finish up the other two pages, let's click the gear icon at the
bottom and quickly edit the "videos" page. This time when we add a new block option,
let's scroll down until we find the block for inserting "code". All we need to do is
delete the code that's already there, and paste this free embed code, I got from tint.com.
You can see that if we view the page now, all of my recent YouTube videos are automatically
populated into a grid. But they are a little off center. Let's fix that in the style mode
by grabbing onto the side of the page, and setting the page width to 1100 pixels. Now
you can see the video list is adjusted so it's perfectly centered. And this page is
done. Lastly , let's hit escape, and click to edit our "contact" page. This is gonna
be as simple as scrolling down to find the option for creating a "form". I'm gonna
call this one "contact", then deselect it from sending emails, and instead, sync
it up with my Google Docs. Now let's see what this is going to look like. Click "view page",
"save", and there's our contact form. So there you have it. In under 6 minutes we have a
website with a built-in registration, for my private mailing list. Not to mention a
few of my favorite projects, all my newest posts, and a contact page. Everything else
from here on in, is just supplemental, and you can see how easy it would be, to add a
page for blogs, photo galleries, or even making an online store.
By the way, if you haven't joined my mailing
list yet, now is the time to do it. I've got a lot of prizes I'm gonna start randomly
giving away, and of course it doesn't' cost you anything to be a part of it. Well that's
it for now. If you liked this project, perhaps you'll like some of my others. Check them
out at www.thekingofrandom.com