When you’re new to website building, web design can be a very intimidation process.
Heck, even if you’ve been around awhile it still can be intimidating if design is not your forté.
So here are some tips for getting off on the right track when designing your first site.
Tip 1 – Familiarize Yourself With a Web Editor
There are many different editors out there. They all have their pluses and minuses so it’s important to find what works best for you.
Just make sure you learn to use something. It will make your life easier, trust me.
If you’re on a budget, Nvu or CoffeeCup may be a good choice. Nvu is free and recommended by many newbie Webmasters.
CoffeeCup is not free ($50), but comes with some awesome templates. There’s even a free, 45-day trial.
If you don’t mind splurging on some really good software, I recommend Dreamweaver. I recently switched to this program after FrontPage started phasing out.
With a price tag of $400 I’m sure you’re wondering what it possibly does. My short answer to that is everything. And while I don’t use half of the features this powerful program provides, I like DW because it’s great for people of all levels.
If you’re a beginner and just want to learn the basics of creating a page, you can use DW for the basic HTML commands.
But if you want to take it to the next level and learn more about CSS (see Tip #2), XML and other Web languages, DW will support those too.
There are also a lot of customizable features in Dreamweaver, so you can set it up so your favorite commands are easily accessible.
Whatever editor you decide use, buy a book or use your favorite search engine to find a tutorial that will help you get familiar with the program.
You don’t have to learn every menu function or feature, but you do want to learn the basics such as creating links, bolding text, starting new paragraphs, etc. There are some great free online tutorials for almost every popular editor out there.
Tip 2 – Learn The Basics of CSS
CSS stands for Cascading Style Sheets, and it’s basically a sheet of attributes that assigns various styles to your website. Don’t let the acronym scare you. It’s pretty easy to learn and a very handy function if you just learn the basics.
One style sheet can govern how your entire site is designed while giving it a cohesive, consistent look.
For example, you can declare your sitewide font style, font size, hyperlink colors, background color, table design, etc. all with one file.
That means if you ever want to change the look of your site, you just edit the style sheet instead of opening every page and changing the HTML code directly. What a huge timesaver, especially if you have a large site.
The best way to learn CSS is to find a site template that already has a style sheet attached. For example, I bought my site’s template from dreamweaver-templates.net and there was a style sheet included.
I’ve learned a lot just by changing colors, sizes, etc. to see how they affect my site’s layout and design.
Dreamweaver also has a function called CSS Layouts that will help you learn more about CSS and apply it to your site.
You can also go to W3Schools if you want to learn the basic CSS attributes and creating a style sheet from scratch. There are some good tutorials there.
Tip 3 – Find a Design Template
As I just mentioned, I bought my template from dreamweaver-templates.net, but there are many other sites that offer templates, some even for free. FreeCSSTemplates.org has some free ones you can download.
I would highly recommend you choose a template that includes CSS, unless you plan to create your own style sheet from scratch. Again, if you use Dreamweaver then this is pretty easy to do.
Once you’ve found a template you’d like to use, open it up in the editor you’ve chosen. Always save a backup copy of the template in case you want to start over.
Most templates only come with the index page (the homepage) so if you want additional pages simply “Save As” from the homepage to create new pages.
I’ve created a basic 3 column CSS template you can download to learn how to design a web page.
Tip 4 – Learn Basic File Management
Websites are basically a series of files organized on a server. Whatever Web editor you use, you should organize your website files so they are easy to find and manage.
Don’t just throw all your files in one folder. Organize them into logical sub folders and always store your images in a separate folder.
So, if you have a site about cooking, you may have your main index file (your homepage) and then you’ll have a series of sub folders (i.e. baking, grilling, frying, etc.) And inside those sub folders will be pages that go in those categories.
When you start setting up your site, the sub folders could likely be navigation items on your site.
So before you use your web editor, you need to create a folder on your hard drive where your site will live.
Let’s say you create a folder called CookingWebsite and it resides at…
C:\Documents and Settings\User\CookingWebsite
If you downloaded a template, you want to store/save all the template files inside this folder. And if the template came with an images folder, put the images folder inside this same folder so the path to it would be…
C:\Documents and Settings\User\CoookingWebsite\images
Make sure you keep the template’s file structure the same as when you downloaded it.
So when you open up your Web editor and start a new site, most editors will ask where your site lives locally. You will navigate to this new folder you created and this is where you’ll go to update your site each time.
Keeping your file structure organized will help, especially if you’re using a Web editor. Not only is it easier to find files, but linking the pages and adding images is much easier when everything is organized into folders.
Tip 5 – Learn How to FTP
I know, I know. Another dag-blasted acronym. 
FTP just stands for file transfer protocol and it’s the process of transferring your files (web pages) from a local environment to your Web server (or your hosting account).
If you’re using a regular web host, you can setup an FTP account at your host’s control panel.
Most web editors will allow you to save your site directly to the web using your FTP username and password. So you simply choose the “Publish Site” command in your editor, and generally you’ll be prompted for your FTP information.
Voila! Your site is live and kickin’. 
If you’re not using an editor or your editor does not have a publish feature, you can download a separate FTP program to publish your files to the Web. Filezilla is a good one and it’s free.
Or if you use Firefox, download the FireFTP plugin. You can access it from the Firefox Tools menu and you don’t even have to close your browser to use it.
Tip 6 – Find a Graphic/Image Editing Program
You don’t have to become a full-fledged graphic designer, but it does help to know how to resize and touch up graphics. Gimp is a free image manipulation program you can use to make minor graphic edits.
If you want to create images from scratch Paint Shop Pro and PhotoShop are two popular programs used for this.
I use PhotoShop for all my graphic needs. Yes, it’s pricey, but does everything under the sun (including animation) and I’ll never need to buy another program again.
___________________
So there you have it! Six tips to get you started with your first website. It’s really not that intimidating if you just do it. Becoming comfortable with a web editor and finding a template is half the battle.
Here’s to your first website! (Cheers)
{ 23 comments… read them below or add one }
Follow on Twitter: @LamNuwin
Hey
Took a lot of your tips on hand and it’s really helped out. Thanks a lot!
I learned several things about web design. I have read other posts and find them very informative. I like the way you write because it seems like you are talking to a friend. Much appreciated.
I urgently need to get my website going so
that i can marry Rosemary before she moves
away. Help me and i’ll give you a percentage
of my profits.
A blog sounds good. I’ll TRY to establish
that. Jump in and help when you can.
Doug.
Hi D Tessling.
Not looking for a partnership at the moment but I’ll try to help.
What are you doing to help promote your site? Are you using social networking sites like digg.com, stumbleupon.com, etc?
Post in forums related to your niche and advertise your site in your sig file, go to selfpromotion.com and learn more about search engine optimization. Traffic takes time.
I saw in another comment you needed money fast. It takes time and 3 months is generally unrealistic for most people.
Lisa,
I am not entirely clueless about webdesign. However, I am clueless about how your tweaked your Wordpress blog to have the same theme as your website.
I just thought I would ask if you still have your notes from your research on how you did the aforementioned before I begin an exhaustive Google search.
Thanks.
Rayeinguard,
I used one of the WordPress templates and customized the colors of the template images in PhotoShop.
Well lisa,I have to tell your site is really helping me a lot..I am very happy that i found your website that teaches me a lot…And God will bless you always because you are giving some hope for unemployed people who likes to take next step for there future..I have a doubt on templates if i have created a website with templates how can i add pages or edit pages after i publish on the webpage..hope you will help me…Thanks
Hi Sam,
To add more pages you would simply “save as” on the main page to create more pages. As far as publishing them you need to either FTP the pages (Your host can help with this.) Or you can use software. For example I use Dreamweaver and I can publish my pages directly to the net with my hosts’ FTP username and password.
For newbies to web design, often the easiest way to get a site online is to just create a WordPress blog. There are thousands of free templates and you can post and update anywhere you have access to a browser. Throw in all the free widgets and plugins and you can do about anything with WordPress.
If you make the jump to actually doing an HTML site, I’d recommend starting with a template and tear into it to see how it was created. Often you can learn more by modifying someone else’s design than creating your own.
Wow! I have always wanted to understand some webdesign stuff better but never understood what the heck people were talking about. Even the people who claimed to give “simple” instructions seemed to be speaking a foreign language!
But you wrote an excellent article that any layman could understand and apply! Thank you for sharing your knowledge- I am so glad I have found you!!
its very informative for a beginer thks
Thanks so much Lisa for your blog and all the website information. I was led to your site initially from youtube. Finally, concise educational material that speaks in a very personable tone. I admire what you’ve accomplished, which in turns fuels my excitement for creating and managing a profitable online store. Look for Irreplaceablegifts.com in the near future. Cheers!
I sent a link to my daughter who is a talented writer & had planned a career in journalism but an unplanned pregnancy kind of made that hard to acheive.She`s a newby to online writing but I think your information & comfortable style of writing could help her on her way to earning some extra money but still be around to see her daughter grow. Wishing u continuing success.
I appreciate so much you sharing your knowledge…someone has told me I should do a website for a talent I have discovered I have..but, I have no clue where to start..so, I found myself here..I will be watching and have so much to learn..I did not plan a very good retirement plan..and, I will be needing to provide for myself in later years..so, I know I must learn..I am a very willing learner..can I learn everything online or should I take a course in computers at a local votech school..and, what should I take? Appreciate your time helping us find our way around..sincerely, Sherry
I agree with Sherry Walling, is it worthit to take local courses or not…
I,m a civil engineer, have no clue of web coding. your comment will be apreciated.
Im from Puerto Rico and my question is, which is beter, a local page (state, town) or a global page (usa, worldwide)?
Just like a lot of you, I had absolutely NO experience but I learned on my own by slowly picking up things here and there. I bought web software back in 1998 and studied other people’s sites by right-clicking and choosing “View Source” on the browser. That’s how I started learning. Little by little I began picking up things and brought me to where I am today.
There is enough free info out here for you to learn without taking a course. But some prefer to learn in a more structured environment where they can ask questions. So it’s a personal choice.
Follow on Twitter: @pictureme2
Hi Lisa
The information you shared had inspired me (websites, blogs, and videos). You have provided us with stacks of information and I thank you!
I have become so overwhelmed in my niche, “photography”. It started as a hobby and then exploded in my face as a business. Yes, I have a regular and will keep my 9 to 5, but my passion for photography came out of nowhere (point &Shoot camera and an inkjet printer). I know have my own professional slur equipment as of 2006 to now!
My FIRST question today or suggestion is this: I took a HTML/cuss class in college and found it very difficult and challenging (too tedious – too many codes)… I build my website using iWeb. Is there a particular reason why you love, like, or chose html/CSS? Was it difficult or complicated at first? What motivated you to use that or did you use Dreamweaver to build your site?
Thanks Lisa!
Follow on Twitter: @pictureme2
oops typo….
I know have my own professional slur equipment as of 2006 to now!
should be: I now have my own pro-dslr equipment and have been using it since 2006.
Web builders like iWeb are fine for the short term. But when you know HTML and CSS you can do so, so much more and you aren’t limited to a builder. The homepage of this blog was designed by hand using CSS and it’s great because I can do anything I want and there are no limitations. It’s always best to get a foundation on HTML and CSS because eventually you will want to branch out beyond the builders. It also helps for troubleshooting.
Follow on Twitter: @pictureme2
Thanks Lisa for your quick response.
Now I understand why you select html/css.
I have to take refreshing course! I love it but it was hard…. I really worked hard to earn that “A”…
Hi. I am a newbie in website development. I really want to learn how to build my own sites. So while doing some internet research over the topic just few moments back, I stumbled upon your two sites – http://www.2planawebsite.com/ and http://www.2createawebsite.com/ . So far they seem to be quite helpful. I will keep you updated how I am doing. I hope you will help me out from time to time. That will be of great help. Thanks
Hello Lisa,
i have seen many of your youtubes and i took one week to learn from your successful experience. so i wish you though more success
i have 3 domains and i want to do job site but since in morocco we cant pay online to get what we want so am looking for free templates to use plus i need your guidance as am beginner in web design.
waiting for your reply as soon as possible
Thanks for your assistance
help! recently I am learning the css tutorial on 2createawebsite.com, my css file wont work….
#container {
width: 900px;
}
#header {
width: 900px;
height: 100px;
backgroundimage: url(”/image/headerBG.jpg”);
border-bottom: 2px solid #000000;
}
#leftnav {
float: left;
width: 140px;
height: 400px;
background-color: #F8AA3C;
border-right: 1px dashed #694717;
}
#rightnav {
float: right;
width: 140px;
height: 400px;
background-color: #694717;
}
#body {
width: 620px;
}
#footer {
clear: both;
background-color: #D1C0A7;
}