Hello everyone! As I've stated in my previous post I have been learning HTML(5), CSS, and JavaScript recently in an attempt to start web programming. I spent probably around 8 hours on this website (I stayed up until 3 in the morning), not including getting hosting .

Zombie Pixels! It's based off of Dead Pixels website, and I like it. I could add more, however I can't think of any content, and I don't want to steal anything more than the poster from Dead Pixel. So, what do you think!

Also, I am trying to expand my portfolio. I lack the art skills for fake assets, and the mind for fake content. So, I am willing to make one free website for anyone on this site. Here are the rules:

(From Reddit:)

I've been coding C++, however to keep myself occupied I've been learning HTML and Javascript (Along with CSS and the like). I'm pretty capable now, and need to make some websites for my portfolio. I would love to design you a website for your games, however here's what I can do:

• Build Good Looking, Interactive Web Pages with HTML5 and JavaScript
  
• No Blogs (Honestly, Just use Wordpress)
  
• No "Comment" Section. I do not fully understand databases yet.I'm Not An Artist, If You Want Pictures, You Need To Provide Them (I'll sign any legal paperwork you would like, however I can promise you I won't "leak" anything.)
  
  Please ask questions below if you would like more clarification.
  
  For a backstory, I can also program C++ and SFML 1.6/2.0. I would like to point out I will work when I can, however If I can't manage to work please respect that.
  
  The first website I build will be completely free! I need some help with my portfolio. If you are interested, please look below. After that, I'll put that website on my portfolio, learn some more ASP.net, and work for actual money. If you would like a website, please message me with these included in your message:
  
  Your Company / Game's Name. (I would like to see that you actually have a working game before I build a website for it, however)
  
  Contact Information
  
  A simple explanation of the basic type of website you need.
  
  And why you should get a website!
  
  I'm going to build a free website for the first person I see who gives me a well-structured, concise offer with ways to contact him and a clear understanding of the type of website he wants. At least the basic details should be sorted out, however there's always things that change, and I understand that.
  
  I hope you'll consider me for building you websites, because I would love too ! Contact me at: [My Email!](hobohm.business@gmail.com) and Look at my gamedev.net profile! ( Here you can look at my reputation and my posts).
  
  ALSO: I'm currently working on making a website paralleling Dead Pixel's Website. I'll probably finish it tonight, and then I'll show it to you guys. It'll just have fake filler information, because it's not actually for a game, however I can't wait until it's done![/quote]

You should do a Classifieds entry if you want to make someone a site.

As for a critique: The fonts don't really match (the title font doesn't match the body's font nor does it match the "Dead Pixels" font); try to stick with just two fonts if you can (one for the title, one for the body text). It lacks a lot of the graphics that Dead Pixels uses that gives Dead Pixels a nice aesthetic appeal. There's also only two pages with minimal content on each, so it's hard to give a more in depth review.

But I'd say you're onto a good start, in terms of learning. I'd suggest seeing if you can re-imagine the Dead Pixels site (i.e. don't copy its layout or color scheme; see if you can come up with something nice but totally different).

I'm just going to be blunt: this is not "showcase" material.
There's almost nothing going on with the main page and it uses borrowed material and theme. I don't see how the site demonstrates any level of knowledge of web programming, unless you mean you hadn't touched HTML and CSS until you made this page.

Between the site as it stands, your "I can't create art, and I may not be able to work even though I'm offering work" comments, and the limitations you've put on the offered web site's features, this just all feels like rushed excitement.

The good news: excitement and passion is great! But you're effectively saying "I'm so excited to get started on something, but I want someone else to provide me requirements. Oh, and make it easy". What do you want to make? Why are you learning HTML and javascript? (Also, I don't think I saw script anywhere, this is all very basic html stuff) Having a particular goal or functionality in mind will go a long way to focusing your energy. Asking someone else for that focus just isn't going to work out well at this point, IMHO.


Edit: Okay, checked some recent threads, this really is you breaking into new material, so props to you. My point still stands: it's like showing someone a "hello world" program as evidence of your C++ skills when looking for work. It's one of many stepping stones, but not what I would throw around as demo material.

Alright, here we go. I'm a web dev by trade so I'll give you some feedback.

This is your source code that I'll be basing it on.

<!doctype html>
<html>
<head>

<title>Zombies!</title>

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

<link href='http://fonts.googleapis.com/css?family=Mouse+Memoirs' rel='stylesheet' type='text/css'>

</head>
<body>

<div id="wrapper">

<header id="defaultHeader">

<h1>Pixel Zombies</h1>

</header>

<nav id="defaultNavigation">

<a href="index.html">Home!</a>
|
<a href="buy.html">Buy The Game!</a>

</nav>

<section class="defaultSection">

<h1>Killing Hordes Of Mindless Zombies!</h1>
<h3>Only $2.99!</h3>
<p>The Long Awaited Pixel Zombies is Here!</p>

</section>

<section class="defaultSection">

<h1>What Reviewers Have To Say:</h1>

<p><em>"It's Amazing"-Fake Person</em></p>
<p><em>"I'd Eat It"-That Fat Chick</em></p>
<p><em>"Braaiaaiaiains! Braaiaiaiaiaiians!"-Zombie</em></p>

</section>

<div>
<img id="posterHolder" src="testPoster.jpg" alt="Picture Of Poster" title="They Should Make This Into A Movie!" />
</div>

<div id="footer">

<p>Developed By Hobohm Software!</p>

</div>

</div>

</body>
</html>

This is one of the first things you want to do.

Check if you are valid.

http://validator.w3.org/check?uri=http%3A%2F%2Fhobohmsoftware.coffeecup.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Save the site, you will use it over and over.

You look ok there, no big things out of place when it comes to nesting.

Let's go deeper.

I don't like the idea of using any external references or hot linking in your site unless you have to.

This is bad

http://fonts.googleapis.com

Reason: If that domain is ever down, you broke your site.

You have no character encoding on the meta tag, you really don't have any meta at all - will want to read up on that.

You are mixing XHTML with HTML using this, '/>' That is the ending to XHTML tags without pairs, in HTML you don't use those at all.

Again, ending </p> tags are not required, just more bytes you are using on filesize to identify them.

There's a general rule that you should include the width and height on any <img> tag. It lets the browser know the bounding box size early before it may have downloaded the image.

It's good that you used nav tags, that's part of the HTML 5 upgrade so that internal menus will be easier to identify for search engines.

You are running into some divitus but there isn't much choice since table layouts went the way of the dinosaur.

I think you need to test yourself on more complicated CSS and layouts. I know it took you some time to do this site but it wouldn't even take me 1 hour to do a site this simple.

If you want something to do, go check out examples here by clickiing on the different items, this shows you how much is possible with the same content. http://www.csszengarden.com/ and it may inspire you.

Teach yourself all the things you can do in CSS that look like graphics, that's when you will be able to show off your skill. I pride myself on having websites with the least amount of images as possible. Remember each image is also an HTTP request and you are already requesting the page source. Keep the HTTP requests as low as possible because they are limited by the browser. Yahoo posted a few years ago that a way to get around that was to put images on another domain so that you could get 2 concurrent downloads happening for images and two for files but none of the sites you make will probably use multiple domains so again, keep the images generated as much as possible. To go from a web designer to a web developer (on the display side), I think you need to be able to see a rounded design in code. You need to be able to square it out in your head and know where you can use CSS or where you might suggest changes to allow CSS to be used.

I'll also give you an idea on design - make up a company name, pick a random industry, pick some random colors, pick some random words imagining the client saying "I want the site to feel like this", "I want the visitor to think this about our site" and you are off - go make those hypothetical customers a website. Don't make it easy either, pick weird things for a challenge. Then have a mock meeting where you explain everything you did for them and WHY after you code it out. The why is the part that will make your paycheck grow. If you can't explain the WHY, you are on the low-end payscale.

You have to learn databases. Get a version of mysql running on your computer if nothing else. There isn't much demand for static HTML websites. Databases are pretty easy stuff. The hard part is only the differences in syntax like mysql uses LIMIT and MSSQL uses TOP. Those you learn over time and I wouldn't call them hard as just one more thing to memorize.

You have a decent start.

The new quote systems sucks... hybrid_ham, most of your post was ok, but there are a few things I wanted to call out.

First of all, validation is highly overrated. Validation would legitimately be useful if it meant that when your markup was validated, it would look the same on all browsers, but that is far from the case. I haven't validated a site I've worked on in years because it's more important to look correct on the browsers you support than to fit some standard which no one implements the same way.

It's also not true that "html" doesn't use closing tags at all on void elements. They are optional in html5 (which he is using according to the doctype). I use them all the time because clarity is often more important than a few extra bytes.

You state that it's a bad idea to reference external items like the fonts that OP mentioned. That's not true either. It's actually better for you to use 3rd party service for this because it increases the chance that your browser will already have a cached version of the document and not have to download anything at all. That being said, it's smart to include a failover to your local server in the event that the 3rd party service is down.