Introduction: Make a Website

Learn the basics to getting your own website online.

Step 1: What You Will Need

Notepad++
A powerful yet lightweight notepad application.

Firefox
This is the browser for web designers.

Photoshop
While you don't need to get CS4, this is definitely the best software for the job. Other software just
doesn't cut it, and are generally much less functional. If you're starting off, I'd suggest Photoshop Album, which has all of the most commonly used tools at only a fraction of the price

DreamWeaver
Professional grade web design software. It's a bit expensive, and there are other free
alternatives].
If you're a student, you can get Microsoft Expression Studio, Microsoft's multimedia software bundle, for free through DreamSpark! Awesome, I know! That's basically Photoshop, Dreamweaver, and Illustrator all for free.

FileZilla
File Transfer Protocol (FTP) application for uploading files to the server.

Computer
(Preferably an HP TouchSmart)

Lots of drinks (Coca-Cola?

Music

Awesome ergo keyboard and optical mouse

You can either learn the code online or simply purchase some books. Books are a bit handier since it's much easier to look things up, but all the information is available online at W3Schools.com.

I first learned HTML with the help of Elizabeth Castro's fantastic HTML for the World Wide Web 4th edition. The latest edition now includes XHTML and CSS, and I highly recommend it.

Step 2: Learn the Code

As you are learning the code, a good place to get support along the way is HTMLForums.com.

Required Languages
XHTML (eXtensible Hypertext Markup Language) - This is basic formatting code such as content boxes, bolding text, paragraphs, etc. It's not programming, just formatting.
CSS (Cascading Style Sheets) - This is styling the formatting (you'll see later) - where the content box goes, which kind of text should be bold, line spacing in paragraphs, etc.

Useful Languages
PHP (Personal Home Page) and MySQL - These are a must if you want to create advanced sites such as Instructables. These are used for more advanced functions as well as data management.
JavaScript - This simple client side script allows for dynamic effects.

While books are more useful, all the information is available online at W3Schools.com.

Step 3: Practice Good Design

You also need a good design sense for what looks good and what doesn't. The best code in the world won't matter if your website looks bad!

To get inspiration, browse web design galleries and keep up to date with the latest trends.

Step 4: Choosing a Hosting Package

There are three main types of hosting packages - shared, virtual private servers (VPS) also known as Virtual Dedicated Servers (VDS), and dedicated servers.

Basically shared hosting means multiple sites are hosted on one server, so the server's resources are shared. This is sufficient for most websites. If your website uses more bandwidth or CPU cycles, you might want to consider a VPS or a Dedicated Server.

Step 5: Choosing a Host

I would recommend HostGator as a decent starter web host. FatCow is great as well, although they use a custom control panel software. Looks a lot nicer than cPanel though.

Step 6: Choosing a Domain Name

After you sign up, you will be asked to choose a domain name, which is your web address, like Instructables.com or Google.com. There are also other extensions such as .net, .biz, .org, or .info.

Step 7: Cpanel and Software

Cpanel is essentially the administration panel for your website. You can access it at www.mydomain.com/cpanel. From there, you can setup email accounts at your domain, install applications like PHPBB, and change settings. Webmail can usually be accessed at www.mydomain.com/webmail.

To upload your files, open up FileZilla and enter your FTP account information. Files are always uploaded to the public_html folder. The www folder is simply a mirror of the public_html folder.

In addition, you can use the application Fantastico de Luxe in CPanel to install scripts such as forums such as PHPBB and blog scripts such as Wordpress.

Step 8: Share Your Site!

If you've made a website with this Instructable, it'd be great if you could post a link!

Comments

author
jesssmart877 made it!(author)2017-04-28

When I launched my small real estate agency, I managed to build a website for it under my own steam! I picked of these news wordpress themes https://www.templatemonster.com/category/news-portal-wordpress-themes/ and added my own content and that was it! Here is how my theme initially looked like:

kingnews-magazine-news-portal--blog-wordpress-theme_58404-original.jpg
author
sandy0052 made it!(author)2016-01-06

add how to actually make the site? i want to redesign my website www.digiclayinfotech.com

author
aeromancy made it!(author)2009-10-20

What are some free alternatives to Dreamweaver? (And any ideas on how to promote the site?)

author
crestind made it!(author)2009-10-21

I use Notepad++. Depends on the type of website.

author
kbowen99 made it!(author)2014-06-23

I know this is a Late Reply but, a great alternative to Dreamweaver is Microsoft Expression Web. To advertise I recommend Google Adwords (If you sign up but wait you will get several $100 credits in the email)

author
TheGeniusCreates made it!(author)2013-01-10

crestind,
Thank you for your suggestions.
I took the "welcome to fitnesspatterns" out and made the "fitness blog tips" just blog! :)
I am in the process of making a downloadable ebook format. I need more workouts and professional pictures before I go that route.
I will check out new themes too!

Thank you for your suggestions and feedback!

author
TheGeniusCreates made it!(author)2013-01-04

I need help with my website. I know you will laugh by my saying but I am a rogue personal trainer attempting to take fitness to the internet. (I want to make personal training affordable to all by cutting out the corporate middle man and $60-120/hour price tag)
I started my website 4 months ago and am learning as I go.
www.fitnesspatterns.com
My goal is to offer personal training instruction in photo and video format.
My website layout SUCKS because it is WordPress hosted.
Can anybody offer me suggestions????
Thanks bunches,
Justin

author
crestind made it!(author)2013-01-05

Wow... totally forgot about this Instructable.
- The WordPress theme you are using is not so good. https://www.google.com/search?q=fitness+wordpress+theme There's a WordPress theme for pretty much any topic.
- "WELCOME TO FITNESSPATTERNS.COM" Take that out.
- Turn your "How to Workout" thing into a downloadable eBook or something available through email signup maybe.
- "Fitness Blog Tips" should just be "Blog"
Just a few things.

author
dsman195276 made it!(author)2008-08-13

cool, but i have one question, how much does a website cost to set up?

author
Ranie-K made it!(author)2011-12-07

Could be free unless you need your own domain. There's several free webhosts -like http://byethost.com/

author
M4industries made it!(author)2009-12-03

anywhere from free to $900 per month. Free sites suck. $900 sites are for those who own their own servers and do their own thing. The ISP (comcast, cox, etc.) charges for a connection called a T1 line. But I pay $26 per month and my site is pretty cool. Its your choice.

author
Lance+Mt. made it!(author)2009-12-19

 webs.com
Very good. It allows you to do anything a paid domain can, as long as you keep the 'yourdomain.webs.com' addition. I rate it very high as im a keep barstool

author
crestind made it!(author)2008-11-08

Hosting is per month, and then domains are paid per year. I suggest grabbing hosting at hostgator using the "wordpress" coupon code to get the first month free.

author
drmjj55 made it!(author)2009-12-30

apprevolution.webs.com

author
jediking100 made it!(author)2009-11-27

hey i am a noob at this so please come to my site and leave some feed back on how to make it better

http://redzone-master.blogspot.com/

author
sh2902 made it!(author)2009-06-22

add how to actually make the site

author
sh2902 made it!(author)2009-06-22

man you know your tech talk. So do i. I know all the codes u mentioned in step 2

author
i+can+go+supersonic made it!(author)2009-06-01

dude I made a cool website. can you sign up for it? the site is http://amikolaj17.webs.com. if you sign up it is a drawing website. here is what you do: first type in the website. then go to members and press sign up. then do what it tells you. now you are signed up, you can post drawings for people. to do that you draw something, take a picture of it, upload it on your computer, put it on a file, then when you want to post a drawing, go to my website and go to your page and click edit and click blog and click post new entry. now click browse, open your file with pictures, find the drawing, click on it and press open, then type in the pictures name, then press post, then make the instructions on how to draw the drawing. oh, and nothing violent or inappropriate because my teacher wants to show my principal my website because she thinks it is cool. if you would like to sign up for it please tell me if you do or don't and if you want tell your friends.

author
rjrollins made it!(author)2009-04-26

What? I am not understanding anything

author
spock155 made it!(author)2009-03-22

Regular textsupersuper-superback to superback to regular
Regular textsupersuper-subback to superback to regular
Regular textsuper italicstrike super back to regular

author
spock155 made it!(author)2009-03-22

:O Coool instructable

author
fredandjoe213 made it!(author)2009-03-13
author
fwjs28 made it!(author)2009-02-24

i heard of a new kind of HTML that is like 3html or something that makes 3D web pages...pretty cool....

author
knexfan9182 made it!(author)2009-01-24

how would I be able to set up my own server so I don't have to pay money to a host.

author
crestind made it!(author)2009-01-25

Most ISPs will not let you run your own server, so then you'd end up paying more for that. It's easier to pay for a host, unless you know what you are doing setting up your own servers.

author
knexfan9182 made it!(author)2009-01-26

knowing comcast I can't

author
knexfan9182 made it!(author)2009-01-24

?

author
DrWeird117 made it!(author)2009-01-20

It's really not, but...typing all you did was.

author
DrWeird117 made it!(author)2009-01-16

Holy hell.

author
btop made it!(author)2008-11-14

Freehostia seems very reliable.

author
DJ+Radio made it!(author)2008-11-08

ok, i guess i can afford 2.20 per month, not to mention that penny......

author
DJ+Radio made it!(author)2008-11-08

cool instructable, but i was wondering if you could find a free host for your website, I dont want to have to pay for one

author
DJ+Radio made it!(author)2008-11-08

oh, i just saw your comment, but have you found any reliable free hosts that dont shut down?

author
xACIDITYx made it!(author)2008-10-17

Nice Instructable! Just one question though; How can I get DreamSpark? If I try to do anything, I need to verify... with a college.

author
xACIDITYx made it!(author)2008-10-17

Whoops, nevermind, apparently I have to be a student. Either way, Awesome!

author
PetervG made it!(author)2008-08-12

How did you make that first image?

author
ac1D made it!(author)2008-08-13

vista or photoshop or both?

author
crestind made it!(author)2008-08-13

Photoshop. Screenshotted the images, duplicated layer, flip vertical, applied layer mask vertical, transform vertical skew. :P Not Flip 3D, but kinda like it.

author
crestind made it!(author)2008-08-13

I could make an Instructable about it.

author
PetervG made it!(author)2008-08-13

That would be splendid!

author
crestind made it!(author)2008-08-14

Here's a link.

author
Ferrite made it!(author)2008-08-13

Nice, I have made sites using Google pages and yahoo geocities, but not anything that I actually programmed. I will probably learn HTML after I finish learning python.

author
killerjackalope made it!(author)2008-08-13

Nice job, I made on about super simple visual designing of a website and someone made a pure code 'ible on sitemaking, I think this really compliments the two...

author
DIYDragon made it!(author)2008-08-13

Another great way to learn code is the view source option of your browser. If you see something really cool on a website you can right click + view source to get the code for that object. So you can learn how it was made.

I'm not advising you to try to steal people's code, but it can be a good learning experience. By copy pasting it to your HTML editor, and altering lines you can see how it works.

My favorite HTML help website is Your HTML Source. Very useful even if you know nothing at all. : )

Tabz

author
killerjackalope made it!(author)2008-08-13

It's not a bad way if it's a common feature to lots of sites, since the code tends to be common and basic in some cases, also free source code is a great way to learn coding, by taking things and making them work the way you need them to... Fireworks codes are great for learning how to generate effects in a similar manner, granted they're tacky they're a bit of fun to play with...

author
Noodle93 made it!(author)2008-08-12

W3Schools ftw.

About This Instructable

13,006views

54favorites

License:

More by crestind:K'nex AST RifleMake a WebsiteK'nex Bike
Add instructable to: