Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

My first website

Featured Replies

Hi All

 

For those who read my post a while ago about my first website, I've taken on board what everyone said and found all the responses a great help.

 

I've now changed it slightly and would be interested to see what people think of it now. I know it's still quite basic, but I hope that it's better than it was!

 

Here it is: www.riacornall.co.uk

 

I was using a table before to display the pictures and info on the "art for sale" page, but a lot of people said I shouldn't use tables. So I haven't, and now I'm stuck with how to lay it out as I had it before.

 

Be gentle with me! :)

 

Thanks

Kerstey

Hey

 

I don't know if I remember your first attempt but no worries. Much better than my first or even second attempt so don't worry!

 

If I were you, make yourself a nice header that makes it clear what the website is and is a bit different (personally I would say above the nav).

 

Maybe give yourself a footer too so it feels complete.

 

Perhaps try different fonts for your body text. Have a look at typetester.

 

And for your images (i have two jobs on the go that i should be doing now of id help you do it!) have a look here > http://joshuaink2006.johnoxton.co.uk/blog/...allery-template

 

Have a look at the code of the example site to get an idea how you could layout your images.

 

Also, you could use title attributes on your images so text appears on hover if you are finding there is not enough room for all your info? eg. <img href="whatever.jpg" title="short picture description" alt="picture">

 

I hope this helps you :)

Look how clean your html looks :p isn't it purrrty? :D

 

Your menu buttons, the text looks a little pushed down and the spill over onto two lines with smaller resolutions, which looks a little untidy.

 

The best thing would probably be to give them a set height, remove the top/bottom padding and then set the line-height to exactly half the height (this centres them vertically)

 

I think your art for sale should look a little more like your 'previous work' page, and the image on the home page looks a little low quality/over compressed.

 

Still loving the tidiness of your html though :p Big improvement.

Nice work :)

 

I'd agree with making the top menu a uniform height, it'll make the whole page much tidier.

 

The code looks great, I get so sick of looking at my code after the CMS system we use has been churning it out!

 

A header would be a great help and would tie the site together nicely, I might also see if it's possible to get a slightly higher quality version of the planet in there ;)

 

If you want to push the boat a bit, have a go at making a favicon. Follow these guidelines http://www.photoshopsupport.com/tutorials/...er/favicon.html and you will be going along the right tracks. Pay attention to the stuff about IE7, it can be a real pig at picking favicons up :(

 

For your next project I'd suggest making a center aligned site, with a nice header and drop shadow - but I'll let you google how to that for yourself. Doing this and working from a white background (subjective?) will really push the level of your design to the next level :)

 

Best of luck!

  • Author

Thanks everyone!

 

I'll keep working on it :)

I dont remember your old site but this might help for your art for sale page

 

Google for lightbox this will make your art "come alive" a very nice effect!!

 

create a div "container" set it to a width your happy with

 

Set a div class for your images. That is... a container for your images the width and height of your biggest image.

 

Enclose each image in this class.

 

Float the class left and set margin / padding.

 

This should give you a nice clean layout with your images going across the screen.

 

Thanks

 

P.S. ive never seen a site use just <h4> for one of its pages.

  • Author

Hi Again Everyone

 

Well, I've made some more changes.

 

Thanks Guezala for the link to do the photo gallery. I'm not sure how it looks for everyone else, so would be glad to hear opinions.

 

Also, I don't know how to make the links at the top "set" so that the text stays inside the orange boxes and don't re-size. Any suggestions anyone?

 

Any general comments/tips welcome.

 

Thanks again for everyone's help!

 

Kerstey :D

  • Author
set your background image to
background-repeat: no-repeat;

 

Is that any better ?

 

Kerstey

Is that any better ?

 

Kerstey

 

yea looks alot better now, the one other thing i would say is change you site background color from black to #131416 this color code is for the grey background on your image, it would look alot better than having the text go over a grey and black background.

Nice work for a first website!

 

My main issue is the quality of the background image - do you have it at a higher resolution? It would look tons better with a crisp, clear image :)

 

Oh and, hello from Hampshire! *waves*

the most critical thing i can see is that background image, its really distorted around the edges, and that loading speed, it needs to be a png.

  • Author
the most critical thing i can see is that background image, its really distorted around the edges, and that loading speed, it needs to be a png.

 

Hiya

I've changed the image to a png, but it doesn't seem to be showing up now!

 

Kerstey

  • Author
When I looked at the background image in a browser it came up with this:

 

http://www.riacornall.co.uk/Images/P1020030long.PNG

 

"The image “http://www.riacornall.co.uk/Images/P1020030long.PNG” cannot be displayed, because it contains errors."

 

What kind of PNG did you make? :)

 

Hmmm, I'm not sure!!

 

I did it in photoshop

 

:unknw:

  • Author
Nice work for a first website!

 

My main issue is the quality of the background image - do you have it at a higher resolution? It would look tons better with a crisp, clear image :)

 

Oh and, hello from Hampshire! *waves*

 

*waves back*

:drinks:

  • Author
Try using lower case on the .png part

 

I don't think that's worked :(

If you want to send it to me I can take a look at it for you? I always export my png's using Fireworks as a png 8 (as it gives me the option of transparency etc). I'll PM my email address to you :)

  • Author

I think it's working now?

 

Can anyone help me with fixing the sizes of the navigations buttons?

 

Thanks

Kerstey

<li><a href="previous work.html">Previous Work</a></li>

 

Avoid spaces in page names.

 

Also try

 

#header a {

background-image:url(Images/tab1.JPG);

color:black;

display:block;

padding:9px; <<<<< makes the text look better

text-decoration:none;

}

 

Other than that, good job! your learning well.

My other problem is your lack or real security on your art.

 

I have just successfully downloaded and removed the C watermark from one of your paintings.

 

You should have something more substantial for example:

 

riacornall diagnoally across the whole image opacity at about 50% or 40% using a nice bold font.

 

Have a think

  • Author
My other problem is your lack or real security on your art.

 

I have just successfully downloaded and removed the C watermark from one of your paintings.

 

You should have something more substantial for example:

 

riacornall diagnoally across the whole image opacity at about 50% or 40% using a nice bold font.

 

Have a think

 

Great! Thanks, I will :D

  • Author
My other problem is your lack or real security on your art.

 

I have just successfully downloaded and removed the C watermark from one of your paintings.

 

You should have something more substantial for example:

 

riacornall diagnoally across the whole image opacity at about 50% or 40% using a nice bold font.

 

Have a think

 

Hiya

 

I've change the copyright image on the main pictures. Do you think it's any better?

 

Thanks for your help!

 

Kerstey

  • Author
I dont see any change.....

 

When you click on them, the larger images have a bigger notice on them.

  • 2 weeks later...
  • Author

Can anyone tell me how to get the "Art for sale" text to go under the tabs rather than to the right of the tabs? It's also the same with the "previous work" text.

 

Both display fine before uploading the pages to the site, but once they're online they're not in the same position!

 

Thanks

Kerstey

Great 1st attempt but I can't believe no-one mentioned it's non 4:3 friendly....and if you've got a square monitor (like the vast majority of people, 1024x768) you really hate having a horisontal scroll bar.

 

Also don't use a <h5> as the first heading, it should be a <h1>

 

Apart from that, clean valid code very well done.

Can anyone tell me how to get the "Art for sale" text to go under the tabs rather than to the right of the tabs? It's also the same with the "previous work" text.

 

Both display fine before uploading the pages to the site, but once they're online they're not in the same position!

 

Thanks

Kerstey

 

 

I think it's because the #wrap div has a margin of 0 auto;

 

That centres the div. If you want it to align left then just use margin: 0;

  • Author
I think it's because the #wrap div has a margin of 0 auto;

 

That centres the div. If you want it to align left then just use margin: 0;

 

Thanks for the suggestion, but if I take the auto out, is moves the images to the left rather than the center.

 

Thanks anyway!

  • 3 years later...

oops this is not a good website design, you need to get website designed by a professional designer. I can not say that one or two sections need to be modify but you need complete revamp.

You realise this thread is 3 years old?

******* necromancers! I just spent 15 minutes going through the thread..

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.