1st ever complete web page, go nuts, tear it to shreds!

[Infernal]

Hi guys,

First up I’d like to say a huge thanks to Chris for providing us mere mortals with such a gold mine of information, a big round of applause and a pint are definitely due.

My name is Matt, I’m 27 and I’m from Cardiff in South Wales, UK. I am an absolute newcomer to web design having no formal qualifications in graphic design or programming of any kind (although I do have a degree in Product Design but that was mostly building models and furniture). I decided to give web design a go at the start of September this year and picked up a few "For Dummies" books. While these books were good reading while I was sat on the toilet I found I am learning much more quickly by watching video tutorials online (thanks again Chris), reading online tutorials at work (productivity is down this month to say the least) and by dissecting various web templates and messing with the CSS to see what happens.

Anyway, enough of the blatant ass kissing and drivel about me. Here is my first ever complete web page, which is to be part of a site I offered to attempt to build for a lady at work at no cost to her, just for the experience. I built the site in Expression Web only because it gives me colour-coded text instead of the plain text you get in notepad. The site is completely from scratch, not from any templates. I did not use the layout view as I actually found this more complex to use. None of the links point to anything yet as this is the only page I’ve made and would like some critique before I continue.

http://www.infernalstudios.com/dev/beau/

Anyway, let me know what you think of my 1st attempt, tear it to shreds, whatever, so long as I get some good constructive feedback out of it. I have a feeling I’ve done the typical noob thing and put too many divs and ids in there. The design itself is not so much in question as the code. The lady the site is being built for chose the design from a selection of 5 photoshop mockups I had prepared. It was not my 1st choice.

Thanks in anticipation.

Matt

[Cotton]

It looks pretty good in Safari 3, very clean and neat. Looks like a great project for a first project. The only thing I’ll recommend, and you’ll figure it out more as you do more sites, is that often when you replace a logo or headline with an image you may want to use a text replacement method in order to still get that search engine weight for an h1 tag for words like Hair and Beauty. I think you’re definitely on the right track.

[Spunkmeyer]

I agree with Cybershot about the color of the text (size seems ok to me on a 1650×1050 window). One of the hardest things (aside from those incredibly annoying cross-browser coding issues) to get a grip of is understanding what your user needs in terms of typography, color etc. This is usually completely different from what your opinion is (that’s why you’re here).

Considering this site is your first project, you really deserve a pat on the back (great work on the strict doctype btw). It looks great, you just need a few minor tweaks. The text at the bottom of the page for example: The hover color looks great on black, but the white is hard on the eyes. Have you considered maybe switching those colors? Or getting rid of the white all together and using a light grey?

[Infernal]

Thanks for the help guys, very much appreciated. I will go ahead and change the text size and colour a bit, I see what you mean with this, it definitely takes a fresh pair of eyes to spot what you might think looks good.

One thing that is vexing me however is the text replacement method for the logo. I can get the site to look identical using the h1 tag but when I make the h1 a link it won’t validate. Is there any way around this in strict doctype other than not to make it a link?

Also, what would be the best way to swap the background image in different pages? At the moment the background is done through css. Should I change it so it’s an img tag in the markup and use z-index or should I use different IDs on the divs for the different pages and use css to add a different bg image for each one?

Thanks a lot for the feedback guys, it’s a huge confidence booster. I showed the client what I had done so far and she was over the moon but it’s always nice to get positive feedback from someone who actually has a clue about web design.

I eagerly await some help with the above problems and hope to be able to show you all a whole working site soon.

[Infernal]

Got a bit more of the site up and running now to see how it all links together. Unfortuanately can’t go any further until I get some more content off the client.

Until then I’d best start working on a site of my own I suppose, not going to get much work experience without my own site am I?

Also, any assistance with the questions in my post above would be a massive help. Thanks

[MrBrightside]

I’m a bit of an amateur also but it looks very good for your first site!

Yeah, I guess I don’t got a lot of things to say! Maybe adding some rounded corners or something, but really that’s up to you.

[Infernal]

I’m ok for wedding dresses at the moment thanks xiaohx08. Not sure if the Wedding factory do dresses to fit a short fat bloke either to be honest.

Anyway, back on track.. Done a bit more work on the site. Added a small photo gallery and a bit of colour as the black and white was a bit much on every page. Managed to fix the header so it’s now an h1 tag as suggested above and managed to change the background image on each page using css (not sure if this is the best way to go but no one has so far told me to do otherwise).

Anyway, site is pretty much finished apart from adding a few more pictures to the gallery, messing about with different background images and adding a bit more text on some pages.

Let me know what you think and what I should change before I call it done.

[Infernal]

The site is now up and running at:

http://www.beaubridalmakeup.co.uk

Let me know what you think. The client is really happy with it.

[Sumeet Chawla]

The site is really very well constructed :) good work ! 8-)

[Author]

Posts