Step 1 – Making your folder

The first thing you want to start with is to make the directory folder that you want your wordpress files to go into. Some people call it blog, site, wordpress, or for security reasons, give it a name that has nothing to do with your site. The reason for that is because all wordpress admins are usually accessible by going to “/wp-admin” address of your site. To further protect your site and blog, why not give those hackers a hard time finding where you stored your files?

Step 2 – Go to your Wordpress Admin Settings

The next thing is to tell wordpress where you’re going to move it. So access your admin just like normal, and go to Settings > General and do the following.

Wordpress address (URL) – The URL of the folder that you just made in Step 1. So if you made a folder called blog, then you put in http://yourdomain.com/blog.

Blog address (URL) – The URL of your site. So if you want your Wordpress blog/site to show up when they go to http://yourdomain.com, then you put http://yourdomain.com in there.

Save changes, and you’ll get some ugly stuff going on. Don’t worry about it, the settings are saved, and now that you told Wordpress that it’s located somewhere else, it’s trying to find the files in that place, but we haven’t moved it yet so that’s why you get the ugly stuff.

Step 3 – Moving the Wordpress Files

Now simply move all Wordpress related files into that new folder. The files you will be moving are listed below:

• wp-admin
• wp-includes
• wp-content
• All files with wp- in front of the file name such as wp-config.php, wp-feed.php, wp-rss.php, etc…

So basically all Wordpress files except for index.php and .htaccess (if you have one). Leave those behind in the root directory.

Step 4 – Editing index.php to redirect to the right place

If you checked out your site, you’ll probably see an unstylized form of your blog, so the next thing to do is to tell that index.php that you left in the root where your Wordpress files are located.

Go to your root directory and open/edit index.php with Notepad or any text editor. You’ll notice the following line:

require('./wp-blog-header.php');

Now you want to edit that to reflect the new place you put that Wordpress file, so just simply add the folder you made in front like so:

require('./blog/wp-blog-header.php');

And save that to your FTP, transfer it, or whatever you do to normally upload files to your hosting, and you should be good to go.

Problems with doing this Move

So if you’re like me, and just did this thinking everything was fine with your old posts….you got a lot heading for you. Only do this if you’re content with the following:

Leaving all the image uploads and attachments in the root
or
Going through all your posts and linking them to the right place.

So I ended up doing the latter, and it was a pain to go through all my images to add an extra directory to all my links. If any of you guys know a better way to do that, then comment or leave a link to a tutorial or article about it, since that would be a lifesaver in the future.

Anyway, just showing my little experience with moving it to another directory and the problems that existed. Just follow the steps above and everything will go smooth.

So you already picked web design and development as something you want to do in the future, or maybe you just want to pick a hobby to pass your time away.  Either way, there’s always a few tools or resources that everyone needs to complete the job.  And in most cases it would be the same tools or just different versions of the tools that do the same thing.  When starting web design, the process ultimately comes down to 5 basic steps.

1.  Designing the Template
2.  Slicing the Template
3.  Coding the Template
4.  Filling the Content
5.  Final Clean-up

I will eventually go over those steps in future case studies and tutorials.

For now, we should concentrate on the tools that help us with those steps, and without further ado, here is the list of web design tools you should have in your arsenal.  If you have any other recommendations, feel free to comment below and share them.

Designing the Template

For designing a template, you need a graphics editing program. A program that can make gradients, boxes, shapes, etc… Here are the list of tools that I recommend.

1. Adobe Photoshop

Probably the most popular image editing program would be Adobe’s Photoshop line. The current version is Photoshop CS4, and may I add that it is quite expensive. However, the saying goes, you get what you paid for, and certainly after dishing out the money for a license gives you one of the world’s greatest editing program (sounds very exaggerated, but really, it’s that good). Photoshop is great not only for web design but for other fields and careers such as the art industry, photography, graphic design, print design, and pretty much anything that deals with pictures.

2. GIMP

So what if you don’t have Photoshop or the budget to afford it? GIMP is probably your next best bet. It has layers like photoshop, and a few other features. When I first tried GIMP when I was looking for other options since I couldn’t get my hands on Adobe Photoshop, I first thought the interface was really confusing (compared to Photoshop). However, lo and behold, someone has made a plug-in for GIMP that makes GIMP’s interface just like Photoshop which is very useful for those that may have to downgrade from Photoshop.

3. Need more options?

I recently stumbled over a post that I thought may be more helpful for others, and of course, I’m not into the whole copy and pasting other people’s hard written blog posts, so here are 19 more free image editors that you may like. Visit the site and see if there’s anything in there that may help you. There’s also more programs in that list that go beyond the tools needed for web design.

Also a reminder, you can slice your template with your graphic editor as well. No need to get a separate program for that.

Coding the Template

After you have your template designed whether it be a simple portfolio site or a complicated e-commerce site, it’s now time to code it. If you just want the most basic thing on the earth to code, then your computer already has it. Notepad. Since coding is just a language, all you need is a text editing program and you’re good to go. I would refrain from using editors that automatically format like Microsoft Word since they tend to add a lot of weird formatting that may conflict with your coding. Notepad, Wordpad, things like that is all you need. However, what if you would like some help with your programming or perhaps a more visual look to your code?

1. Notepad++

Notepad++ is a great editor for coding. It supports multiple languages and highlights certain syntax code words so it is easier to spot a mistake if you make one. It also has tabbing so you can open multiple files, and one of the good features I like about it is when you open it, it opens the last couple of files that you worked with on your last session. Very handy when you accidentally close it, or figuring out the next day on what you have to work on next. There is A LOT of features on Notepad++ that I don’t even use, but perhaps you will find a use for them sometime, or simply forget about them like me.

2. Scite

Scite is another text editor that I use a lot. I interchange with either programs. Honestly, there’s no difference except Scite doesn’t automatically open files in new tabs and it doesn’t save your last known session. However, it’s a lightweight program, that’s really nice to have.

3. Panic Coda

Since I’m also a Mac user, I can’t forget to give this program some credit. Panic Coda is probably one of the greatest code editors for the Mac right now. It is costly, starting at $99 but the price is worth it in my personal opinion. Although there’s a lot of alternatives, this is probably the most user friendly. You can connect to your files with your FTP information, upload, save files instantly, edit your files there, and even preview them. Very handy.

4. Mozilla Web Development Plug-ins and Add-Ons

Another method of editing code and seeing how it works would be using Mozilla Firefox’s plug-ins and add-ons. I’ve already listed some really good plugins for web developers in a previous post. Using those in combination with text editors to save to your ftp will result in faster coding. It may be quite obvious, but I’ll make sure I show you guys my process in editing code in a video cast later.

Other Useful Tools to have

There’s a lot of extra tools you might need to finish your development or make your design much more efficient. One important tool would be an FTP client. There are tons of FTP clients, and I’ve tried many of them and pretty much they all do what is needed for the most part. Some may have extra features or fancy interface, but all you need is a client that connects to your server or the client’s server, and you can upload and download from it. My favorite FTP programs would have to be either FireFTP which is an add-on for Firefox to use an FTP right in the browser or FileZilla which is a standalone client and supports multiple connections.

Here’s a link as well to even more web design tools you may or may not use, but personally here is my final list of web tools that are good for starters.

Since I use both Mac and PC, I’ll put what I use for both.

PC

1. Notepad++ (Text Editor)
2. Filezilla (FTP)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

MAC

1. Panic Coda (Text Editor/FTP in one)
2. Filezilla (I use it sometimes for faster uploading)
3. Mozilla Firefox Web Development Add-ons – Includes Firebug, Web Developer, etc..
4. Adobe Creative Suite CS4 (Photoshop, Flash, and Illustrator)

Alright, so that’s definitely more than 10 and of course there may be better programs out there.  I wouldn’t waste my time with getting the advanced programs.  Wait until you’re comfortable with coding since the more you know, the more you’ll be able to use the extra features.  So don’t waste your time trying to research it all out. I’ve already done it for you. Come back for more case studies and resources for beginning web designers.

P.S I’d like to thank those that contributed to my comment and contribute for Haiti entry. A total of $5, but I’ll throw in another $5 to make it an even $10. I’ll do the transaction tonight and will post an update to that post later tonight. Thank you for your cooperation, and stay tuned for more ways to participate and even win some prizes.

Microsoft did a decent job with it’s WYSIWYG Frontpage editor and Adobe did an excellent job with its DreamWeaver products.  However…what if you didn’t like the abilities of Frontpage and couldn’t afford the Adobe suite?

Technology these days have increased and thanks to other developers that think alike, we have come across essential plugins that were made for Mozilla Firefox to make it a browser that everyone should be using.  Check out these 5 plugins that every web developer should have in their disposal!

1. Firebug

Firebug is a really neat tool that helps find errors in your coding and also displays what each element is contributing to the website.  All of this live on the site.  No need to go through your files and open up a program like Dreamweaver.  Just head to the web address of your site and click the Firebug icon and you’ll be able to see your code and everything else working behind the design such as HTML/CSS/Javascript, etc…

Link to Firebug download.

2.  Web Developer 1.1.8

Web Developer is much like Firebug, but contains more tools that are helpful to developers.  Things like marking certain forms in the site, editing CSS, or even validating the html and css according to W3C standards can all be found in this toolbar.  And of course, all of this right here on the site that you’re working on.  Use it on other sites and see how they code their sites.  Learn how they tackled a certain part of the blog or site.  I’ll show you how to use some tools in a later review of this plugin.  Overall, Web Developer has everything you can possibly need to see the changes live…of course, you’ll have to save the changes and then upload them.

Link to Web Developer download.

3.  MeasureIt

MeasureIt is a neat program in that it creates a little icon on the bottom left of your browser.  This button allows you to make a ruler over a website to measure the dimensions.  This is very useful when you have a design that you have to code from and you want the measurements to be close to the design composition.  Use this ruler to compare to the ruler on your design and you can get close to the design as possible.  Every pixel counts!

Link to MeasureIt download.

4.  ColorZilla

ColorZilla is probably one of the best tools out there, and it’s very time saving.  Is there a color out there that you want to know, but there’s no clue on what it is?  Instead of wasting time to open up a program and screen-capping the website, you can just click on this tool and pick out the color from the site itself.  No more guessing, no more screen-capping, just take it from the site live.

Link to ColorZilla download.

5.  Clear Cache

Clear Cache is probably the least known thing that people think about in web design.  Basically cache is the process of your computer memorizing how a site looks the more you visit the site.  If I had a banner , and I changed a few coding…more often than not you won’t actually see the new changes..why is that?  It’s because your computer is saving the old image as a memory.  Therefore, even though the site loads fast…sometimes it may not be the actual site.  With Clear Cache, you can simply press the button and your cache is cleared and refresh the page to see the new site changes.  I’ve had many frustrations when I changed a coding and never see the changes…well, now I know it’s because of the cache.

Link to Clear Cache download.

Thank you for viewing this entry, and if there’s other tools out there that you personally like for Firefox, give a comment about it, and I’ll include it in my future list.  Subscribe to my RSS, follow me on twitter, and visit often for more resources.