I can’t remember when I started creating webpages, it was years ago and I’ve lost track of how many I’ve done. For me, coding in HTML or Java was never as fun as the actual designing, so when drag and click web tools started popping up I naturally gravitated to using them. I began with Google Sites then move to Blogger and eventually on to WordPress. Along the way, I’ve dabbled with Wix and now more recently, Weebly.  When my good friend released her first independent CD project, I offered to help her get a website started using Weebly. I suggest Weebly because it makes designing and maintaining a website easy and quick for beginners.

Here’s how I did it.

First, I like to sketched out a rough site layout. This will keep me on track once I begin putting the site together. The dashboard options can be really overwhelming when you don’t already have a rough design in mind.

If you don’t have a Weebly account you can quickly created a free account.

From the home screen of your weebly account select Add Site.

Then select one of the three options from the next menu. I choose Site.

Next, you’ll choose a pre-formatted theme. Don’t spend a lot of time choosing from the huge list of templates. Pick one that is close to the layout that you sketched out before you began. Don’t worry, you can always change it later if you need to .

I chose the Fashion Forward theme because it had a large image as the site header and that’s what I wanted for Melis’a site. I replaced the template image by using the Edit Image button.

I had to do some photo editing to get Melisa’s photo to the correct shape. First I cropped the bottom. To make her image banner size, I used MSPaint to selected a small slice of the image and dragged it to create a rectangular banner. This also created the blur that I used for the header background.

Once the template image was replaced by my new banner image I began adding the other site elements. We decided to add links to all the music sites where Melisa’s project could be streamed and or purchased. To do this I added logo icons as images with links to the site.  Weebly makes it easy to give each image it’s own unique url link.

I used Google image search to find the logo icons. Use the advance search of Google to find images of a specific type and/or size.

The final element is an embedded CDBaby audio sampler. CDBaby offers a link maker. On their link maker site you’ll search for the cd you want and CDBaby will provide you with some code to embed into your website.

Using the Weebly dashboard embed code menu option, embed the code provided by the CDBaby link maker site.

Finally, when you’re satisfied with the way things look and work. You’re ready to publish using the Weebly publish button. You can use the preview button to check things out multiple time before the final publish. I’m pretty happy with how Melisa’s site came together and Melisa has already started learning how to make her own updates and changes.