Getting Started – My First Website (MFW#1)

My First WebsiteI realize that in the previous post I sort of bad-mouthed WYSIWYG visual editors and atop my soapbox I preached the virtues of hand-coding websites.

Well, that’s all fine and dandy if you already know how to hand-code a website. But for those of you who have no idea what HTML is and think that CSS is just another version of the popular TV show Crime Scene Investigation, hand-coding a website can seem as simple as learning Chinese.

Newbie Website Design wouldn’t be much of a blog if I never actually helped newbies. Since I aim to please, I’d like to introduce to you a new series of articles dedicated to teaching you how to build a website from scratch. You’ll learn everything you need to master the very important fundamentals and transform good techniques into solid habits.

Without further ado, let’s get your folder system prepared for the good stuff to follow:

Getting organized

I know that this might not be as glamorous as getting your hands dirty entering HTML into your text editor, but it is very important to get your folders created and organized first. The first folder you should make is a master folder where you can keep all of your Newbie Website Design projects (and others as well). You can use upper-case letters or lower-case letters or any combination thereof for these initial folders. Later on, the case of newer folders will be important (and I’ll let you know when and where.)

Create a folder called “Design Projects”. You can place it anywhere you want on your hard drive, but for simplicity’s sake you can put it on your desktop.
folder

Inside that folder create another folder called “My First Website”. This will be the main folder that holds everything you need for this project.
design

Next, open up the “My First Website” folder and add two more folders: “production” and “website”. Inside the “production” folder we will put all mock-ups we create in Photoshop or some other graphic program. Inside the “website” folder we will put all of those wonderful hand-coded website files. (Note: during most of this series we won’t be making any graphics. But near the end of the series we will!)
first

Finally, inside the “website” folder add one final folder, an “images” folder. When we get to making and adding images and graphics to our website those files will go in here.
images


Here’s how the hierarchy should flow:
Design Projects – My First Website – production and website – images (inside the website folder only)

Like I said before, this initial stage is as exciting as watching snails race on dry pavement. But unlike cheering on competing invertebrates, this first step really is important.

In the next post in the series we’ll talk about what kind of software you need to get your first website off the ground. The good news is that you already have everything you need on your computer!

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



6 Responses:

  1. George

    Love the blog!

    You’ve got a fun writing style and the info is great. I can’t wait for the next post in this series!

    Later!
    George

  2. Andy

    Bring it on!

  3. Franklin

    “Snails racing on dry pavement” … gonna use that one myself! :)

  4. David R - Admin

    Thanks for the comments everyone!

    I’ve got a lot planned for this series. So sit back, relax, and get ready to take your own designing to the next level!

    -David

  5. Manish

    Awesome collection of blogs :)

  6. Devang

    A great collection of articles for web design. You have saved so much of my time as I just have to tell my interns to go through your site :)


Share your thoughts below: