Do you think i have what it takes to be a web developer?

[Shakilareed90]

I created a sample website for a school project, that i spent so many hours on. The website I have created is not anywhere near done, but i would like to get some people opinions on my website, and I would like to know if you think I have the potential to become a professional web developer. Everything on this site was typed, not copy and paste.. I'm 17 years old by the way. Here's the link to my site:

http://my-fashionz.webs.com/index.html

I created by background image, tabs, graphics, and photos in gimp.

[Jarrod1937]

Well, as with anything, it requires practice. Though, the biggest skill every professional designer has is the ability to find things that need fixing or that just don't look right. Along with this you need a passion for your work, the want to take it to the last step and polish it. To list a few things that need fixing that should pop out to you (for the homepage only):
1.) The background doesn't tile properly.
2.) The main "hero" image looks stretched out. Always keep an image in correct proportions. You'll also want to take your time (again, have passion for the work) and properly cut her out. It looks like a color/background selection wand was used, giving a jaggy look. There are better methods out there for doing this, and although they take more time, it is worth it.
3.) Your side menu's background is blue, but the text is blue... For any navigation, contextual elements, or text you want to allow for almost the max contrast that is possible. For example, complete black or white for the side menu font color will provide better contrast, though the white font will give better aesthetic value.
4.) At least on my browser (firefox 3.6.3), the side menu text runs off past the background, towards the bottom of the page.
5.) The "featured free shipping shoes" text, also feels stretched, you always want to keep an image in its original proportions.
5.) The same text just mentioned should be centered in its section since you have the same paradigm throughout the rest of the page for heading text. Always be consistent with whatever method/design paradigm you choose.
6.) A lot of the images on the page are large, yet they've been scaled down by html (meaning you changed the resolution the image displays at, but not the image itself). This is bad for two reasons. First it inflates the image size, a resampled image of the same size could be half or less the file size. Secondly, not all browsers actually resample their scaled images (aka work at the pixel level to scale the image down) and instead may simply resize the image (throws out whole line of vertical and horizontal resolution), which can lead to the images looking terrible and inconsistent across browsers. Your worst offender is this image:
http://my-fashionz.webs.com/neonblue...tthumbnail.bmp
Its unneedly large for its size on the site, and its a .bmp, so its 540kb! A tad too large for a small thumbnail on a site.
7.) This is more of a personal choice, but if its an ecommerce site, your header is a tad too big (though looks nice). You always want to have a reduced header to move content up above the fold (the point where content goes off screen vertically, based on your most common resolution).

Now keep in mind, this is only the design aspects. I am not sure whats going on under the hood, so to speak. If you want to be a developer you'll need to know at least one server side language and the general structured query language (sql), to create dynamic pages and pages that use templates. Not sure what you're doing now, if you can give me details i can give you some pointers.

Edit: Btw, did you add that facebook style bottom bar from somewhere else or it is provided by webs.com? Been looking for a javascript style facebook bar.

[meinsla]

I decided to critique using a screen shot of the site. It'll probably come off as rude, but these are my honest opinions.

http://www.forgottengames.org/misc_files/scrnshot.png

I also forgot to include the white jaggies on the main photo of the girl.

Been looking for a javascript style facebook bar.

Honestly, I think we need to see a lot less of those things.

[Jarrod1937]

Honestly, I think we need to see a lot less of those things.

I agree for most sites they contain useless stuff. But i was thinking of using it for providing a button to checkout on our site, a button for live chat, a search box for our site search, and mention our blog. That way it has an actual purpose no matter what page they're on and where they are on that page. Though, i can understand if not everyone likes them. Though i have to say, one of the better ones i've seen is at crateandbarrel.com:
http://www.crateandbarrel.com/family.aspx?c=550&f=27739

Admittedly their site sucks from a performance standpoint, but they have some nice ajax stuff going on.

And back to the site critique, i actually didn't see the white space issue on my screen, probably because of my resolution (1280x720). But wheni went back and looked at the actual background image, i have to say, that is the wrong approach. You want a background that can tile both vertically and horizontally so that it can expand with any resolution.

[meinsla]

Well in that case, I am sure it would actually fit what you're trying to do. Perhaps you wouldn't mind showing us your site.

[Jarrod1937]

Well in that case, I am sure it would actually fit what you're trying to do. Perhaps you wouldn't mind showing us your site.

Currently i can't, unless you want to do some host file changes on your computer (change the domain to point to another ip address). I've been doing a complete site redesign and it exists on our test server. If interested, i can pm you with the test servers ip, but if you're not comfortable with changing your host file, it may be too much to ask for a simple look at the site.

[Shakilareed90]

@Jarrod1937 Well. Lol i'm really glad you actually took the time to you know actually review my page and i appreciate that. But for some reason on my screen nothings look streched out and it doesnt have that white space on the side. I mean I know my website aint no were near one of the all time best, but I am a begginner. (Well actually around my peers i'm the best). But like I said before i'm a 17 year old senior in high school and this website was for demonstration purposes only. Not to actually you know purchases inventory. I would actually like some more pointers on what I can do to approve this website.

@meinsla I don't think your critic is rude at all, it's your honest opinion.

So now i'm about to make some changes to my website based on the information you all gave me, and i would like more pointers and such.

[Jarrod1937]

@Jarrod1937 Well. Lol i'm really glad you actually took the time to you know actually review my page and i appreciate that. But for some reason on my screen nothings look streched out and it doesnt have that white space on the side. I mean I know my website aint no were near one of the all time best, but I am a begginner. (Well actually around my peers i'm the best). But like I said before i'm a 17 year old senior in high school and this website was for demonstration purposes only. Not to actually you know purchases inventory. I would actually like some more pointers on what I can do to approve this website.

Can you take a screenshot of the site running in your browser? What browser and version are you using? Eitherway, stretching was only one of the many issues.
And please don't take this the wrong way, but i really dislike when people use their age as an excuse. If you want to be a professional, compare yourself with the best, any other comparison is meaningless. My friend and I, at the age of 16-17 developed an ecommerce site which sold texture packs for indie video game developers. Sure the business failed horribly , but it shows age has nothing to do with it.
"this website was for demonstration purposes only."
It shouldn't matter if its only for demonstration, you should be attempting your best all the time.

[NetNerd85]

I've been a web developer for 10 years and you definitely have potential. Your layout is very good, a few things are a little stretched but overall it is good for a first time go. You should have seen my first website in 2000, it was awful! You're off with a better head start than most. Good luck for the future, I am sure if you stick to it you will be a great web developer in no time!

[Haze1434]

Although this website is a little bit of a shamble, it shows potential.

I wouldn't say that you were ready to make websites for other people or companies, but your skills are getting there.

Start looking at other websites now, taking in to account the kind of things that they do. For an example, on your website you use generic blue links a lot. If you take a look at other websites, this is done very rarely as people percieve it as unprofessional design.

And now that you know the basics of how to put a page together and create enough to make a website work, take a look at making it work in as many browsers as you can (your website is too wide and some things sit out of line in older browsers).
Also, think about things like accessibilty options for blind users, improvement on the quality of the graphics (this makes a big difference) and don't place things on your website for the sake of it!

Your main problem at the moment I think is trying to do too much. Don't forget the old KISS method - 'Keep it simple stupid'. Things like a live chatroom really don't need to be on a fashion sales website.

[votter]

In google chrome, part of the menu is over the "Free shipping on all orders banner pic", along with the menu going past the menu background as others have said.

If you want a screen shot, just let me know and I'll post one.

Overall, very nice job.

[cbVision]

It seems like most of the comments are based on the design and layout. I'm going to provide a few on the coding.

1. You've got a lot of weird absolute positioned elements. Example:

<div style="position:absolute;left:789px;top:590px;"> 
<img src="jewelrybanner.jpg" width="344" height="150"> 
</div> 
<div style="position:absolute;left:329px;top:910px;"> 
<img src="coogibanner.jpg" width="420" height="150"> 
</div> 
<div style="position:absolute;left:150px;top:1070px;"> 
<img src="freeshippingitems.png" width="370" height="100">

2. You need to look into using a stylesheet instead of all those inline styles.

3. You're using font tags. Example:

<div style="position:absolute;left:890px;top:0px;"> 
<a href="help.html"><font color="3c8492" size="2" border="0">Help |</font></a> 
<a href="bookmark.html"><font color="3c8492" size="2">BookMark |</font></a> 
<a href="myaccount.html"><font color="3c8492" size="2">My Account |</font></a> 
<a href="shoppingcart.html"><font color="3c8492" size="2">Shopping Cart</font></a> 
</div>

The cleaner approach to that same code would be:

<style type="text/css">
	.top-links {position:absolute;left:890px;top:0px;}
	.top-links a {color: #3c8492; font-size: 1.2em;}
</style>
<div class="top-links"> 
	<a href="help.html">>Help |</a> 
	<a href="bookmark.html">BookMark |</a> 
	<a href="myaccount.html">My Account |</a> 
	<a href="shoppingcart.html">Shopping Cart</a> 
</div>

4. Resize your images in your photo editing program such as Adobe Photoshop or GIMP. Don't rely on the HTML attributes to resize things for you. It makes them look distorted. Example:

<img src="wilddivakneehighbootsthumbnail.jpg" width="150" height="280" border="0">

5. Try using lists for list data instead of break tags. Example:

<font color="white" size="3"> 
<a href="shirts.html">Shirts</a><br> 
<a href="sweaters.html">Sweaters</a><br> 
<a href="hoodies.html">Hoodies</a><br> 
<a href="dresses.html">Dresses</a><br> 
<a href="jackets.html">Jackets</a><br> 
<a href="pants.html">Pants</a><br> 
<a href="jeans.html">Jeans</a><br> 
<a href="shorts.html">Shorts</a><br> 
</font>

Converted to:

<style type="text/css">
	.left-links {color: #fff; font-size: 14px;}
</style>
<ul class="left-links">
	<li><a href="shirts.html">Shirts</a></li>
	<li><a href="sweaters.html">Sweaters</a></li>
	<li><a href="hoodies.html">Hoodies</a></li>
	<li><a href="dresses.html">Dresses</a></li>
	<li><a href="jackets.html">Jackets</a></li>
	<li><a href="pants.html">Pants</a></li>
	<li><a href="jeans.html">Jeans</a></li> 
	<li><a href="shorts.html">Shorts</a></li>
</ul>

6. None of your images have alternate text.

7. Pretty much everything is an image.

8. Validate your code, especially if you're considering a career in this field.

Good luck sir!