First Website Version 1

[NReed253]

Hey everyone, I just finished up the first version of my first site. What do you guys think? Any tips, tricks, or tweaks to make it better? The next thing on my to-do list is to make a contact form for users to fill out, but I havent learned how to do that yet.

Also, why is there a white gap at the bottom of the site? Im not sure what causes that…

Thanks for your input!

http://codepen.io/Nreed253/pen/FmzsA

[chrisburton]

I can give you a few basic problems that will help improve the overall appearance:

• Typography needs work
• unnecessary images
• poor quality of images
• readability issues (logo mainly)

It might help if you uploaded this to your own server rather than displaying it on CodePen.

[NReed253]

Hey Chris, I am working on redoing the logo.. for now I just have it as a place holder… It was perfect, but when I uploaded it, it didnt look right. Im thinking I just didnt save it before I uploaded it! oops! Rookie mistake.

What images are unnecessary?

What is wrong with the font?

Thanks!

[Paulie_D]

If you don’t have a server you can use Dropbox to test webpages

SIte44.com is pretty good.

http://www.maketecheasier.com/turn-dropbox-account-into-web-host

also

http://www.maketecheasier.com/4-ways-to-host-your-website-on-dropbox/

[mreider]

I think it is a pretty good start. The main graphic behind the Tatum Art logo definitely needs fixed up though. It is really grainy. You’re headed in the right direction though.

[bearhead]

I like the over-all design, but you’ve just coded it in a very overly complex and inflexible way.

I think you should at least change all those 1400px width divs to 100%, on any window larger than that you’ll get a white bar all the way down the right side, and any window smaller will create a horizontal scroll bar.
plus to center any element within those divs you can just use margin-left:auto; margin-right: auto;

there’s alot of other places where the code should probably be re-worked a bit…

I think the only place the typography doesn’t work is in the nav bar. I like raleway as well, but in this instance, I don’t think it works so well bold, in all caps.

I feel like the logo is readable as long as it’s over the dark grey area of the background photo.

umm, minor point but maybe “news” should be renamed “recent work”?

I think what chrisburton meant by unnecessary images are those instance where you’re using an image when css or html would suffice. For example, in your contact paragraph, instead of using an image to create the border, you could just give the paragraph a border in your css.

[chrisburton]

What images are unnecessary?

I think what chrisburton meant by unnecessary images are those instance where you’re using an image when css or html would suffice. For example, in your contact paragraph, instead of using an image to create the border, you could just give the paragraph a border in your css.

Correct.

http://i.imgur.com/oJVA91T.png. That image can easily be accomplished with CSS and would save on page load (slightly) and an additional http request. And as stated above, some of the images are really pixelated.

What is wrong with the font?

Lobster looks severely out of place. I have only seen it used once beautifully on a sign and horribly across the web a thousand times. Lobster has a bad rep because it is used in the worst of ways imaginable. You’re also using Raleway for your body text but that’s not what it was designed for. Raleway is a display typeface. Display and text typefaces are completely different.

[chrisburton]

maybe “news” should be renamed “recent work”?

Or just ‘Work’.

[NReed253]

@Bearhead. Ok I will redo that part.. This is my first time coding ANYTHING so Im not surprised I have made it harder than it needs to be. Thank you!

For the box around the contact area, how do I do that in CSS?

As far as the top image goes, that is the only copy I have of that image.. I am still waiting on a new image.

Ok so once I fix that stuff, how do I go about making it a live site? Do I pay for a server and just upload the files? Sorry if thats a really stupid question, I just don’t really know.

[chrisburton]

@NReed253

Ok so once I fix that stuff, how do I go about making it a live site? Do I pay for a server and just upload the files? Sorry if thats a really stupid question, I just don’t really know.

Well, you have several options here. Do you want to learn how to code or do you just want your website to be maintainable so you can add things to it with ease?

If you wish to learn to code then we can lead you in that direction. If you do not, I would recommend Squarespace.

[Author]

Posts