My first HTML website! [Archive]

View Full Version : My first HTML website!

ComicStix

Sep 20, 2009, 06:36 PM

Like I said this is my first ever HTML website. I had to put all my CSS syntax stuff into my HTML document because whenever I linked them to each other the CSS style sheet would not work. Was this a good effort for a first time website?

ReadySetSkateboard (http://readysetskateboard.netau.net)

miles01110

Sep 20, 2009, 07:13 PM

Ick, it's definitely a first try. I think you've got a ways to go though.

RonCarr

Sep 21, 2009, 12:00 AM

Okay, wow. I know this is your first shot at coding a site but I will be honest. You have a long way to go.

The colors are fine, however, you need to find a better way to implement them into the site. I say they are okay because it is a skateboarder site and it should be a little funky/psychedelic. (The grey is a little out of place though.)

If you are not going to take advantage of the entire page then you really need to center everything so that it looks better.

The pattern in the background needs to go. Now.

You need to set the div so that it allows all of the content to be within it.

I am not really a big fan of vertical navigation but if you like this then please work on it! It's div has no business going the same length as the content section.the dashed borders are not too flattering IMO.

Add some padding to the text so that it does not go all the way to the edges of the div. Also, don't center the text either.

Add a footer.

Hope some of this helps out. Good luck!

Chaszmyr

Sep 21, 2009, 12:02 AM

The brutal truth is that this is pretty bad. With that said, there's pretty much no such thing as a good first effort with something as complicated as web design... What matters is how much you improve over time.

JoshBoy

Sep 21, 2009, 01:31 AM

Keep trying buddy and keep posting your sites for feedback. Just remember when people tell you stuff you don't want to hear take it on board and move onto the next project with those learnings.

Good luck mate!!!

Consultant

Sep 21, 2009, 11:48 AM

Unfortunately it doesn't look like you have any design genes.

Look into wordpress or blogger. You'll be much happier.

Wee Beastie

Sep 21, 2009, 02:44 PM

Haha okay, so now that you have gotten your ego-bruising out of the way, let's get to some more feedback.

RonCarr has a couple of good points. I would wrap your header, navigartion and content divs in a div called container and then center it:

<div id="container">


<div id="header">
<img src="http://img87.imageshack.us/img87/6425/34882880c489e1fm3.jpg" border="0" width="880" height="116" alt="BannerFans.com" />
</div>


<div id="navigation">
<h1> Navigation</h1>
</br>
<ul>

<li>
<span style="font-size: 36px;text-align:center;"><a href="index.html"> Home </a></span> </li>
</ul>
</div>


<div id="content">
<h1>Learn to Skateboard!</h1>
<h2> *Under Renovation*</h2>

<img src="http://4.bp.blogspot.com/_O5fDJGuQat4/SMil17p2ONI/AAAAAAAACGE/-mmOjy3igvY/s400/girl+skateboards+3.JPG" alt="Skateboard" width="500" height="350" align="middle" />
<p> Have you ever wanted to learn how to skateboard? Ever wanted to ride like the pros? Want to skate with the local kids at the skatepark? Save yourself the embarrassment of going to the skatepark and failing, and learn at your own pace at your home. <b>Learn everything a total beginner would want to know! </b>Keep in mind though that this website is for beginners. If you want to learn how to do tricks I will probably be teaching those later! Skateboarding is actually not as hard as you would think. All you really need is a skateboard, determination, and gravel!</p>
<p> I have complied the lessons off this website from testing them in real life! I taught a complete beginner, my younger brother who is nine, to skate! I guarantee these lessons will be easy to follow. By using real world examples there is absolutely no reason you can't learn to skate. Think you are too old, too heavy, too girly? Anyone can learn to skateboard. I might be adding videos later on, also!
<p> You might be asking yourself, "Why should I trust this website?" You should trust me because I have been skating for about six years. I also know the strategies that work for people. Skateboarding is like learning to ride a bike you never forget how to do it! So check out the articles to the left to start your journey to learning everything basic about skateboarding!

</div>

</div>

And then center it like so:

#container {
margin: 0 auto;
width: 880px; /* this should be the total width of your site */
}

Re: external stylesheets: Looks incorrect to me. Try this and take note of the differences. XHTML should always be lowercase and all tags should be closed.

<link href="home.css" rel="stylesheet" type="text/css" />

Do some research of floats and float based layouts. I understand the temptation of absolute positioning. My very first website had a stunning amount of it. Experience taught me that it is better used for advanced css techniques. I would suggest putting some effort into trying to get these results without using absolute positioning—you don't need it.

The nuances of floats can be challenging, but they are effective and learning about them is a worthwhile endeavor. Also, my first tip about centering your site in the browser window won't work unless you do away with the absolute positioning.

I think it is a good idea to learn this stuff, BUT if you are not really trying to get into the field and just want to advertise your service, Consultant's suggestion about looking into WordPress is a good one. Tons of awesome free themes out there. If you want to get into the field, time to buckle down and learn this stuff. It's fun! Frustrating at times, but fun.

DaReal_Dionysus

Sep 21, 2009, 02:53 PM

Yes the website looks bad there's no question, but it is your first one!!!! I will say that you need to do graphics much better. You will learn as you go and there will be bumps in the road, but learn from professionals in the industry and I would recommend dreamwerver as well.

good luck

chiefroastbeef

Sep 22, 2009, 08:00 PM

Like some others have mentioned, have you thought about Joomla or Wordpress and the like? There are great themes offered and your site can look really good!

Like everyone else said, you do have a long way to go, it may be easier going the Joomla and Wordpress route. It is your first website, I hope you had fun, that is what matters!

here is my first website based in Hong Kong, both are non-profits volunteer projects and I had a ton of fun!

www.chinahandsunited.org

and second based in New Jersey:

www.wwn-go.com

jaikob

Sep 24, 2009, 02:35 PM

Uhhhh. Yeah.... pretty much what everyone else said. But if you are a true beginner, kudos. I would try a few tutorial sites, try learning some good color combos and aesthetic colors. the colors are completely horrid in my opinion.

DaReal_Dionysus

Sep 24, 2009, 11:18 PM

here is my first website based in Hong Kong, both are non-profits volunteer projects and I had a ton of fun!

www.chinahandsunited.org

and second based in New Jersey:

www.wwn-go.com

Those aren't to bad there CRB!!! For the first and second one

appledyl

Sep 24, 2009, 11:29 PM

Keep it up! That looks WAY BETTER than my first HTML site. Mine didn't even have CSS or any design. Here's an example of a well-formatted CSS site. Try and model off of this. :rolleyes: http://xeyra.co.nr

karl878

Sep 25, 2009, 01:26 AM

No worse than my first attempt at making a web page.

Keep studying; when you come across a web page that looks good, take some time to observe the layout, color scheme and take a look at how the page was coded (view source). I always run my work through a validator as well, to help catch coding errors. See:

http://validator.w3.org/

SchneiderMan

Sep 25, 2009, 04:27 AM

Its fine for a first try, maybe you should just use iweb?

7031

Sep 25, 2009, 11:19 AM

First of all, yes the design is bad, but it's still a hell of a lot better than my first too.
Keep it up! That looks WAY BETTER than my first HTML site. Mine didn't even have CSS or any design. Here's an example of a well-formatted CSS site. Try and model off of this. :rolleyes: http://xeyra.co.nr
To be honest, that design isn't exactly amazing, and I don't really like the logo myself to be honest, but pretty good.

X-Cart

Oct 1, 2009, 08:44 AM

It seems all this feedback scared the author of the question and he even has not replied anything here...

chiefroastbeef

Oct 1, 2009, 06:07 PM

It is more fair to say his website scared us, to the point where poop came out and stained our computer seats. Those of us that were in a coffee shop at the time of the unveiling were indeed the most unfortunate.. Just joking!

The poster did ask us for opinions, and it is good to know most of us on here are truth telling people.

omgitskevin

Oct 2, 2009, 12:03 AM

its a start and everyone starts somewhere, check out the

http://www.w3schools.com/

get some tutorials for design but first understand the language and creating it will come after time.

my first and second sites and i'm working on a recreating my 1st site cause theirs issues.

http://www.kevinmichaeldesigns.com

http://www.sisomphonephotography.com

chiefroastbeef

Oct 2, 2009, 03:23 AM

I like those sites! Very clean, simple, looks good, and easy to navigate. :)

nullx86

Oct 2, 2009, 03:31 AM

X-Cart

Oct 2, 2009, 07:52 AM

The poster did ask us for opinions, and it is good to know most of us on here are truth telling people.

I agree with that. It is better to tell truth, and I believe the author expected sincere answers when posted a question...

It is just rather strange to my mind that the author has not replied anything back.

angelwatt

Oct 2, 2009, 07:54 AM

It is just rather strange to my mind that the author has not replied anything back.

Not that strange. The poster is like most that come here, and wants to advertise his site, like you are with your signature link. He likely didn't really care much about feedback, just free advertisement, which is why I don't critique sites on here very often anymore.

chiefroastbeef

Oct 2, 2009, 08:08 PM

Though let's be honest here, there ain't much to be advertised with this site. :p

ComicStix

Oct 3, 2009, 08:09 PM

You're feedback made me go into a deep depression so I couldn't reply in a while. Just kidding! After taking the gist of all your opinions and advice I must say... That site sucked but then I thought to myself I didn't do so-so bad for my first try! All you gotta do is get back when you're knocked down! I decided to start all over with new CSS and new HTML. I have a lot to learn. Thanks to everyone for contributing. I appreciate it! Encouragement and constructive criticism. My revised website should be done by the end of October!

chiefroastbeef

Oct 3, 2009, 11:34 PM

Good to hear from you, you are off to a great start! I apologize for the negative comments I've made, and it is great to know you are a good sport about it!

One thing you can do is download a css template and start from there. You can customize the graphics, fonts, colors and everything else to your liking. Search free css and there are plenty of good free templates that come with html and css files.

have fun!

ComicStix

Oct 4, 2009, 09:28 AM

One more thing I am 14. Just to clear that up so people don't think I'm a 40 year old man who can't make a good looking HTML site :D

chiefroastbeef

Oct 5, 2009, 07:16 PM

I'm sure we all know that part, no self-respecting 40 year-old would make such skate-boarding site! Keep us updated on your revisions! :)

Darth.Titan

Oct 5, 2009, 09:07 PM

its a start and everyone starts somewhere, check out the

http://www.w3schools.com/

Seconded, thirded, and fourthed!

mr.kite!

Oct 6, 2009, 12:51 AM

chiefroastbeef

Oct 6, 2009, 02:31 AM

Great to see you jump in! HTML can be a complex world.

My suggestion would be to build the site using iWeb, allowing you to focus more on creating a great looking site.

I would study the templates to understand the basics of page design and website navigation. (You also will have the freedom to create pages from scratch.)

Once you have the right look and feel, decide what features you think your site lacks that you can't create in iWeb and move on to another program. You might find that iWeb covers all of your needs.

Agreed. If you do want to dive into css and html, go to this link, look for a website template design you like, and download the html and css files. It will give you a good understanding of how css and html works, and you can then change and customize it to your liking.

http://www.free-css.com/free-css-templates/page1.php

X-Cart

Oct 6, 2009, 08:10 AM

Not that strange. The poster is like most that come here, and wants to advertise his site, like you are with your signature link. He likely didn't really care much about feedback, just free advertisement, which is why I don't critique sites on here very often anymore.

:) You may believe that or not, I came here to communicate with customers and share some information i know and get new information for me. Signature is a signature, sure it provides some information about the company.

Sorry for off-topic:)

Anyway, the author has replied, and that is good.

computergek80

Oct 6, 2009, 02:20 PM

It's certainly better that anything I made at 14!
I had a look at your code, and apart from your css link tag(see a previous post), you should put your analytics code inside your body tag:

<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>

It is currently outside your html tags.

Also try setting a padding on your <div id="content">, so the text stays away from the border. (looks nice)
You should also check out http://960.gs/, it does all the layout for you. I would suggest doing it by hand at least for a while though, because it makes it almost too easy!
Also, have fun in the world of web development!
If you want, have a look at my site: http://www.pietervanderweel.com/

ComicStix

Oct 12, 2009, 03:32 PM

I feel like such a noob! Everyone has better sites than me! I finished the layout with the CSS and HTML but I still have to fill in the content! Should be done soon!

star-fish

Oct 14, 2009, 09:54 AM

Ignore everyone telling you to use iweb, preset themes or similar. You'll just end up reliant on fitting your needs and wants to other people's designs.

Everyone has to start off somewhere. I started when I was your age (I'm 22 now), and my website has come a hell of a long way.

Having said that, you might want to check out a colour palette website like http://www.colourlovers.com/palettes/top ...your colours are kind of blinding, and unfortunately I think that's more of an instinctual thing (you've either got it or you haven't) unless you're professionally taught.

skunkworker

Oct 14, 2009, 10:02 AM

I remember my first web site and it was probably like that. One thing I heavily recommend is learning CSS, as well as doing all of this web stuff initially by hand. Also you should definitely take a look at how colors match & balance each other.
http://kuler.adobe.com/#create/fromacolor

Angelo95210

Oct 14, 2009, 10:10 AM

Mate don't worry !! The learning curve is quite stiff at the beginning but you are on the good way !!

I have not read the whole thread, but as the previous poster said, forget about iweb or you will not learn anything. Use a text editor (I like Text Wrangler (http://www.barebones.com/products/TextWrangler/) which is free) and that's it. You can also look at templates (http://www.freecsstemplates.org/) to see how they are built, modify them etc.

Don't give up ;)