Category Archives: Web Design

Tools all website designers need – for free!

If you’re interested in website design, you’re in luck.  Nowadays coding and website building is so common you can find resources all over the place, and hundreds of useful and free software to make your HTML building a breeze.  I’ve put together a list of tools, software and resources all website designers should know and have.  And they’re all free!  I’ve ordered the list with essentials at the top and items for more advance users at the bottom, so if you’re a beginner start at the top and work your way down the list.  I’ve also included some alternative (not free) resources if you have some cash to burn.

1. W3Schools.com: one of the ultimate free learning resources of the coding world, W3Schools has tutorials on HTML, CSS, JavaScript, PHP, SQL and more.  Basically anything you want to know about coding, you can learn it here!  They also give you the code for each lesson and let you edit yourself right on the website so you can get a feel for what it does.  If you’re a beginner looking to learn HTML and the basics of coding, start here.

Alternative: if books are more your style, check out “Build Your Own Website The Right Way Using HTML & CSS ” by Ian Lloyd.  This is the book I first used when learning to code and I have nothing but praises for it, he sets everything out very simply and clearly – you can literally learn in just days. For under $20 that ain’t bad!

2. Notepad++: a nifty little free program for code editing, Notepad++ has a wide variety of features that will help your coding.  The most useful feature is the code highlighting – to activate it, open up Notepad++ once you’ve installed it and select language > H > HTML.  You’ll find your text is color coded and that makes it way easier to work with.  Unfortunately Notepad++ only works on Windows, if you have a Mac try out TextWrangler, which is supposed to work similarly (I haven’t tried it myself as I don’t have a Mac).

Alternative: if you’ve got a few extra hundred dollars lying around, think about getting Dreamweaver.  It’s my default coding program and has some really nice features, is available for both windows and mac, and if you’re a student or teacher you can get a nice discount for the program.  Everyone else, however, has to pay a bundle for it :( I personally don’t think you need to get the latest version for it to work well; my own copy is from back when walkmen were still cool, lol (okay so it’s from 2005, I still had a walkman back then!). So if you can find an older, working copy on eBay for cheap buy it!  And save that $400 for more important things.  Like food. 

3. Gimp: I’m sure you probably already know about this free little gem but I’m adding it anyway.  Gimp can do pretty much everything that other art programs can do without the huge price tag.  Unless you want your website to be dull text and borders, you need a good art and image editing program, and Gimp fits the bill.  I use it to create everything from header images to backgrounds to touching up photos, as well as a bunch of other art projects.  The web is also abound with  free tutorials to do everything with Gimp from touching up photos to making GIFs and siggies.

Alternative: you can also check out Macromedia Fireworks, and depending on the version you get you’ll pay anywhere from $50 to $300.  I do have a copy of Fireworks (like my Dreamweaver it is oooold) and I use it for about a third of my web graphic needs, simply because I sometimes find the interface easier to use than Gimp.  However I don’t think it’s really necessary for making a good website.  Fireworks can also do a bunch of really fancy web graphic stuff like roll-over menus or something (just what I’ve heard, I only use the basic functions of mine) but you can do cool menus using CSS as well. 

4. Photobucket.com: Once you have an art program you’ll need something to use with it.  Photobucket is an online picture/art/image sharing site and where I go for all my images.  All pictures can be used royalty free for whatever you may want, so it’s a great place to find graphics and pictures to brighten up your site!

5. AbstractFonts.com: while we’re still on the subject of graphics, let’s talk about font.  Nothing says “Newbie!” on a website like a nicely done header in an overly done, default font.  It just looks amateurish.  AbstractFonts has hundreds of cool fonts and they’re free! You need to pay attention to the copyright license for each font though – some fonts are free to use even for commercial uses, but others can only be used for personal, non-commercial use.  And remember that unless someone has the font installed already on their computer that they won’t be able to see it, so don’t go making your entire website out of a font you downloaded – use these fonts only for graphics and images.

6. XAMPP:  praise the coding gods for this one, as it will make your life so much easier.  Once you’ve mastered HTML and CSS and want to move on to using something more advanced like PHP (a must for larger, more complex sites) you’ll need to have a personal testing host installed on your computer, and that’s where XAMPP comes in.  XAMPP is actually a bundle of programs including the Apache webserver (it’s how you use your own computer as a host to test out your files on) and MySQL, PHP and Perl.  They’re all bundled and configured together and will save you HOURS of time and plenty of tears.

7. Filezilla:  my default file-transfer program, Filezilla is clean-cut and easy to use. This is what you need this to upload your finished website files to your online host.  You’ll want to download the client version (you won’t need the server just for uploading your files to your host).

8.WordPress.org: you probably know this one already, but this is the place to go if you want to add a blog to your site.  Just download the blog files, upload to your domain and you’re good to go!  It’s just like having a wordpress.com blog on your own site, but with WAY more options.

There you go! With these tools and resources you can make a fantastic website without spending a dime ;)

Advertisements

Designing your own blog with wordpress.org & CSS, part 1

I decided I really would write up a guide to customizing your own wordpress.org blog, lol.  I’m going to write this guide geared toward someone who has never done CSS before.  I’ll explain how to set up a wordpress.org blog, install the CSS editor theme Toolbox, and start customizing it by editing the CSS file.

What you’ll need to do is download the blog files,  add a database for the blog to your domain host’s mysql databases, add user who can use the database, edit the config.php file in the blog folder with your database and user info, then upload the files into the appropriate folder in your domain.  Sounds complicated, but it’s pretty easy and I’ll walk you through it.

GETTING STARTED:

1. Alright, to start off, you need to head over to wordpress.org and download the blog files. I usually just download the zip to my desktop for easy access.  Extract the files.

*Note that wordpress.org is different than wordpress.com – wordpress.com will host your blog on their website, while wordpress.org gives you the files to upload onto your own hosted domain site.   Hosting your own site has several advantages, namely that you have absolute control over how your blog looks, access to hundreds of plug-ins, and the professionalism of having your own site with out .wordpress.com tacked on the end of the URL.

2. Read wordpress.org’s installation guide.  Installing it is really fantastically easy and the guide will tell you much of what I’m going to tell you.  You probably can do this with only the guide, but just in case I’ll tell you how I do it.

3. Now that you’ve downloaded and extracted the blog files, go to your hosting website and log into your dashboard (the area where you can manage your sites and all their info, databases, files, ect).  I use Hostgator personally (no real reason except it was the one my sister was using when I got into coding).   There should be a link/button somewhere around your dashboard that lets you create mysql databases.  This should take you to a page where you can create a new database and/or user.  In Hostgator this is very simple to do – you’ll find the database creator at the top of the page. Simply enter the name of the database you want to add (like, ‘blog’) and then click create.  Congratulations, you have a new database!

4. Now you need to make a user to use that database with your blog.  This is also quite simple, in Hostgator you’ll find the user creator form underneath the database creator, on the same page.  Just scroll down a bit.  Add the name of the new user (like ‘john’ and then enter a password for that user and click create.

*Note that your username for your domain will be added before the database name and user’s name automatically – at least it does in Hostgator, so read up on what your own host does. So if you’re using Hostgator and your username for logging into your domain dashboard is ‘happycoder’ then and you make a database called ‘blog’, it will automatically be named ‘happycoder_blog’.  Same thing with adding a user – add a user called ‘john’ and it will turn into ‘happycoder_john’.  This is important to remember when you’re filling out the wp-config.php file of the blog!

5.  Open up the blog folder you downloaded and find wp-config-sample.php and rename it to simply wp-config.php.  Open it up in your text editor and near the top you’ll find the following bit of code:

// ** MySQL settings - You can get this info from your web host ** // 

/** The name of the database for WordPress */
define('DB_NAME', ' '); 
/** MySQL database username */
define('DB_USER', ' '); 
/** MySQL database password */
define('DB_PASSWORD', ' ');

6.  In the DB_NAME brackets, enter the name of your database.  In the DB_USER brackets enter the name of your user, and finally in the DB_PASSWORD brackets enter the password you use to log into your dashboard.  So, using our example:

// ** MySQL settings - You can get this info from your web host ** // 

/** The name of the database for WordPress */
define('DB_NAME', 'happycoder_blog'); 
 /** MySQL database username */
define('DB_USER', 'happycoder_john'); 
 /** MySQL database password */
define('DB_PASSWORD', 'happycoderspassword');

7. Now that you have the wp-config.php file edited to your database and user, decide if you want your blog to appear as the home page of your site, or in in a separate area. 

-If you the blog to be the home page of your site and the main focus, you will upload the files from the blog folder directly into the root folder for your domain.  The blog will automatically show up as your home page when someone types your URL into an address bar (this is assuming that there are no other files already in your domain root, if there are you would need to remove any preexisting index.php as it will clash with the index.php of the blog). 

-If you want to use a static HTML page for your home page, (i.e, making a site that has articles and a home page, with a blog not the main focus) then you should rename the folder containing the wordpress blog files to ‘blog’, as you’ll upload the entire file into your root to keep the blog in it’s own separate area.

8. Open up whatever FTP program you use and connect to your domain.  Navigate to the root file of your domain and upload either the files from the wordpress folder (if the blog is going to be your home page) or the entire blog folder (if the blog will be in a different area of the site).

9: Open up a internet browser and type in the domain name of your site, adding wp-admin/install.php to the end of the domain and hit enter (if you uploaded the entire blog file, use blog/wp-admin/install.php).  You should find yourself being taken to installing options where you can fill out your username and password.  Once that’s done, you’ll be taken to the dashboard of your new blog, all set up and ready to customize!

*Note that if you get an error and are unable to get to the installation, check to make sure that everything has been uploaded properly and in the right place.  If it’s still not working make sure you have the right address typed into the bar, and if it STILL isn’t working, you may need to check with your host to see if they support wordpress.

10: From the dashboard, go to appearance > themes.  Select the ‘Install Themes’ tab and type ‘toolbox’ into the search bar.  When it pops up, click install and it will automatically be installed.  Now go back to ‘Manage Themes’ and you’ll see Toolbox is now added to your list of installed themes.  Select activate to make it your blog’s current theme.

Now you have successfully installed a wordpress blog on your domain and installed the theme we’ll be working with.  Next time we’ll get started actually editing the CSS!

%d bloggers like this: