Hey all!

I've decided to build a website for me and my family. I was thinking to implement a couple of pages with some personal data, a gallery, blog,and maybe some stuff from my work and studies.

Here is what I know so far:

• HTML on a basic level, but there is no problem to dive deeper into this if need be.
• CSS tha same as HTML.
• JavaScript on a decent level.
• C# - I believe that knowing C# is a half way to learn ASP.NET, correct me if I'm wrong. Anyway ASP.NET is my next planned class.
• I do know the SQL language but I have no idea how to use it from JavaScript(If even possible) or from C# (ASP.NET)

It seems to me that I have decent knowlage for building something like that, but, I do lack the understanding of HOW to buld a website.

• Is there an guidelines I should follow to build the site correctly?
• Is it legal to just copy the look from some other website I like?

Thanks for the help!

CSS is not HTML. CSS is for style sheets that determine the style of HTML elements (e.g background color, font size, alignment, etc)

Javascript is not required for most simple websites. Also, when not used very effectively, JS can make a website look bad. So use Javascript only when there is a definite purpose. Not just to use it.

I don't know C#. But you should read up about "server side scripting" and "client side scripting". You should know what both are and the difference between the two. ASP.NET is a server side script. PHP is also a server side script (arguably better). To connect and use a SQL database, you will need to server side scripting not client side scripting (JS is client side).

Client side is something that is executed by the browser and server side is something that is executed by the server. You normally want server-side scripts when dealing with editing files/using databases, etc.

When you read up about ASP.NET or PHP, you will understand how they work a little better.

I would recommend PHP for many reasons: better hosts (especially if you want to use a free host for a small website), more popular at YC (by far), PHP is open-source (that shouldn't be too big of an issue if you aren't particularly interested in open-source, also this does not mean that you cannot make closed source PHP scripts or open-sourced ASP scripts).

There is no such thing as a "correct" website. Definitely use CSS as far as possible (instead of using HTML properties).

Ensure that your site validates (The W3C Markup Validation Service).

Make your site reasonably cross-browser compatible (if you don't have many browsers to test on Check Browser Compatibility, Cross Platform Browser Test - Browsershots is a good place to do that. Firefox (2, 3), Opera (9), IE (5,6 and 7) should be more than enough.

Make a website that is easy to navigate through. Don't get anyone "stuck" on a page. Make it easy to find their way "back" and "around" your website.

Test your website on your computer first. But don't use absolute paths (e.g "C:\My Website\" or "/home/username/website/" etc) use relative paths (e.g "index.htm" or "http://www.youngcoders.com/images/head.png" etc) so that the paths remain the same when uploaded to a server.

You will need to buy a domain ("example.com"), unless you don't mind a free domain ("example.co.cc" or "example.ath.cx"). These aren't easy to setup if you haven't seen them before, but I would suggest trying to figure it out yourself before asking for help, because you will really learn that way.

Yes, you should not copy other people's logo and "look" (i.e. layout and style). Be original - it's fun and legal! You won't have a great site with your first try, but that's what learning is about!

Best of luck!

Umang

Thanks a lot for the tips!

By writing :"same as HTML" I ment that i know CSS on the same level as I know HTML

I have good understanding about client side scripting and browser side scripting. The question was more as for example: What is the right webpage layout? (using <div> or <p>)

Actually you answered to almost every question i had

So, thanks a lot!
Will post my results as soon as i'll get some

No problem!

Oops, should have seen that!

a <p> tag is only for paragraphs. If you want to make divisions (boxes). They can have images, paragraphs, and other tags inside them. You should avoid using <p> for things other than for paragraph.

Take a look at Joomla or Wordpress and play around with it a little bit. Wordpress has a smaller learning curve but you'll notice that you have a lot more extensions on Joomla. Either way you go it's a win-win situation. Both are free which is another plus.

I'm lost!
I knew that knowing everything you should it's only a 1/3 of the way to build a website. But it seems that it is not enough anyway. For the last a couple of days I've been searching and googling to find any tutorials not on what I should know to build a website, but on how to build it when you already know lets say HTML, CSS, C# and JS.

Maybe I wasn't looking in the right places
I've also tried to undestand how other sites work. For example, I was looking at w3schools.com on the main page.
The main page is devided to tables with data. Pretty designed tables. But the borders of the tables aren't pictures or anything like that... Where does they come from?

This all very much confusing. I know how I want my website to look like and I have the knowlage to do it, but, I have no idea how to arrange all of this.

And yes, I admit, this is soo much harder than making a Win apps
So if anyone can help me this would be great...

Thanks!

Avoid tables as far as possible. Use them (and don't hesitate to) use them only for making tables to present data. Using tables is quite and old thing to do....

Maybe the keyword you were looking for was layout:
CSS Layout | layers, absolute and relative positioning and floating elements || HTMLSource ]
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!
Max Design - Sample CSS Page Layouts
(first three results from Google)

I suggest you use these as examples, and then fool around with your own website. (They will give you an idea on how to use "width:", "float:", "clear:", etc to make a layout).

Oh, also, one really good way to learn is to make backups and fool around without being scared of the outcome. If you are comfortable with version control then use one (SVN, Hg, Git, bzr, etc). If you aren't comfortable, then just keep making copies of your work after each step. So that you know you are free to mess up!

I also found this link somewhere (The Principles of Beautiful Web Design [Design Principles]) and think it may be the kind of article you should read and search for to learn more about how to start. (Also, look at keywords used in the article to find more using a search engine).

I suggest you start by sketching a rough layout before trying to code anything for your website. (Oh, and about the border part, let them tell you: CSS Border)

You should also install "Firebug" and "Web developer" to experiment and understand the "padding:", "margin:", "border:" etc properties.

Finally, don't be scared to keep trying. It's the best way to learn! You'll discover a lot as you go along.

Thanks a lot!

Lots of information you gave me! I will be sure to check it all!

Will reply on my results