As some of you may know I haven't been into web developing very long. I started learning the ways of HTML/CSS, etc around about 4 or 5 weeks ago. It didn't take me that long to build my site as I was on and off with it because of my main working job and my social life, etc. But this has been created for my family company as we never originally had a website to begin with.

 

http://www.lotusdp.co.uk/index.html

 

But I would love criticism towards my site and ways to improve it.

 

Also I have read somewhere that the better my site is laid out, the higher ranked it will be on Google? I don't quite understand why but is it true?

 

Go ahead guys!

 

Alex Perseval.

 

EDIT: By the way, it looks better on a larger computer screen because the background image is huge which I adjusted to fit my 27" screen. I may have to fix it onto any resolution if that makes sense I just don't know how lol.

Edited July 11, 201115 yr by Alex Perseval

As some of you may know I haven't been into web developing very long. I started learning the ways of HTML/CSS, etc around about 4 or 5 weeks ago. It didn't take me that long to build my site as I was on and off with it because of my main working job and my social life, etc. But this has been created for my family company as we never originally had a website to begin with.

 

http://www.lotusdp.co.uk/index.html

 

But I would love criticism towards my site and ways to improve it.

 

Also I have read somewhere that the better my site is laid out, the higher ranked it will be on Google? I don't quite understand why but is it true?

 

Go ahead guys!

 

Alex Perseval.

 

EDIT: By the way, it looks better on a larger computer screen because the background image is huge which I adjusted to fit my 27" screen. I may have to fix it onto any resolution if that makes sense I just don't know how lol.

 

 

Can I just ask why your CSS styles are inline?

 

Also, don't, really don't, do this:

 

<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 

 

Generally speaking in a way there's not an awful lot wrong because it's so basic. However the colours are pretty bad. You need to learn that when it comes to colour for a website, you use more than one primary colour in the design at your risk. It's easier when learning to stick to the principle of either a dark greyscale or white website - with ONE primary colour used for highlights, headers, navigation bars etc.

Can I just ask why your CSS styles are inline?

 

Also, don't, really don't, do this:

 

<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 

 

Generally speaking in a way there's not an awful lot wrong because it's so basic. However the colours are pretty bad. You need to learn that when it comes to colour for a website, you use more than one primary colour in the design at your risk. It's easier when learning to stick to the principle of either a dark greyscale or white website - with ONE primary colour used for highlights, headers, navigation bars etc.

 

In terms of the colour, there was a lot of discussion about this and we couldn't decide what looked best so we used logo as the background and thought the blue looked nice on the sidebar but that's down to opinion. Any ideas what colours could be used?

 

and with the "<p> </p>" - I don't want to keep using the excuse of it being my first site and me being a newbie obviously I need to learn what to use and not what to use. That's used in the sidebar as I needed space in between the contact information and the testimonials but couldn't figure out how else to do it.

 

I will definitely clean up the coding as much as I can.

I understand that you have started to learn HTML/CSS 4 or 5 weeks ago, that's why I will miss your coding part. But you didn't tell about design part nothing and I have some criticism. At first I can say that exist a lot of websites that you can use for inspiration. You can find in Google search a lot of popular web design blogs with articles about the latest design trends and examples. You have used so bad colors. I suggest you to use such resources as ContrastA,Colorate, Color Palette , ColorZilla. You will be able to choose the best color for your website.

I understand that you have started to learn HTML/CSS 4 or 5 weeks ago, that's why I will miss your coding part. But you didn't tell about design part nothing and I have some criticism. At first I can say that exist a lot of websites that you can use for inspiration. You can find in Google search a lot of popular web design blogs with articles about the latest design trends and examples. You have used so bad colors. I suggest you to use such resources as ContrastA,Colorate, Color Palette , ColorZilla. You will be able to choose the best color for your website.

 

Okay thank you. Criticism is good

In terms of the colour, there was a lot of discussion about this and we couldn't decide what looked best so we used logo as the background and thought the blue looked nice on the sidebar but that's down to opinion. Any ideas what colours could be used?

 

and with the "<p> </p>" - I don't want to keep using the excuse of it being my first site and me being a newbie obviously I need to learn what to use and not what to use. That's used in the sidebar as I needed space in between the contact information and the testimonials but couldn't figure out how else to do it.

 

I will definitely clean up the coding as much as I can.

 

To apply a space between one object and another you need to use either margin or padding in your CSS.

Margin applies a space outside of the object and padding applies the space inside of the object.

And don't use "<center>". Use CSS to adjust alignment.

To apply a space between one object and another you need to use either margin or padding in your CSS.

Margin applies a space outside of the object and padding applies the space inside of the object.

 

I have applied the use of margins in bits of my code but thats probably why it went a bit wrong because I tend to have ignored the 'padding system'.

 

So like you say padding is the space inside of the object, in this case the space inside the sidebar...

 

padding-bottom:"5px"

 

would that be correct?

And don't use "<center>". Use CSS to adjust alignment.

 

Yeah I know it's been deprecated but I don't know the replacement for it. Any suggestions

I have applied the use of margins in bits of my code but thats probably why it went a bit wrong because I tend to have ignored the 'padding system'.

 

So like you say padding is the space inside of the object, in this case the space inside the sidebar...

 

padding-bottom:"5px"

 

would that be correct?

make it padding-bottom:5px; and Absolutely!

Edited July 11, 201115 yr by MikeChipshop

Yeah I know it's been deprecated but I don't know the replacement for it. Any suggestions

 

 

.class {text-align:center;}

I see you fixed my issue mate, good stuff

Generally speaking in a way there's not an awful lot wrong because it's so basic. However the colours are pretty bad. You need to learn that when it comes to colour for a website, you use more than one primary colour in the design at your risk. It's easier when learning to stick to the principle of either a dark greyscale or white website - with ONE primary colour used for highlights, headers, navigation bars etc.

 

This is the best advice a beginner will ever hear, soak it up and you should start going somewhere. Other than that I think you need to look into your structure a little bit more, block placement is a more stable way of designing your website.

make it padding-bottom:5px; and Absolutely!

Awesome thanks!

 

.class {text-align:center;}

Thank you

 

I see you fixed my issue mate, good stuff

 

Yeah haha thanks dude, got onto it straight away

 

This is the best advice a beginner will ever hear, soak it up and you should start going somewhere. Other than that I think you need to look into your structure a little bit more, block placement is a more stable way of designing your website.

 

Thank you I will bare that in mind.

 

 

 

 

 

LOL love being a noob. THANKS EVERYONE

Considering you've been playing with HTML/CSS for 4-5 weeks I dont think its shabby at all!

 

Yeah learn about colour theory, yeah learn to put your CSS in a specific style.css file etc etc, but thats all things to do in the future as you continue learning new techniques and skills.

 

As far as where you are after only 5 weeks of looking into coding inbetween having a social life I think you've done very well indeed. Hell having spent the last 3 years at Uni I can honestly say that your site is better than some the shiz ive seen from my fellow student "associates".

 

You aint going to win any awards with that site, or top the Google rankings, but its a start, and we were ALL once learning how to code and in the same position as you.

 

Keep it up, you'll learn loads in a short period of time and you'll look back at this design and see the changes and improvements.

 

If you are seriously interested in all this have a look at this "Basix" set of tutorials on the NetTuts+ website: http://net.tutsplus.com/sessions/web-design-from-scratch/

Lots of great information especially if you are starting off with a very limited knowledge of web design

Considering you've been playing with HTML/CSS for 4-5 weeks I dont think its shabby at all!

 

Yeah learn about colour theory, yeah learn to put your CSS in a specific style.css file etc etc, but thats all things to do in the future as you continue learning new techniques and skills.

 

As far as where you are after only 5 weeks of looking into coding inbetween having a social life I think you've done very well indeed. Hell having spent the last 3 years at Uni I can honestly say that your site is better than some the shiz ive seen from my fellow student "associates".

 

You aint going to win any awards with that site, or top the Google rankings, but its a start, and we were ALL once learning how to code and in the same position as you.

 

Keep it up, you'll learn loads in a short period of time and you'll look back at this design and see the changes and improvements.

 

If you are seriously interested in all this have a look at this "Basix" set of tutorials on the NetTuts+ website: http://net.tutsplus.com/sessions/web-design-from-scratch/

Lots of great information especially if you are starting off with a very limited knowledge of web design

 

Thank you for such a constructive comment, that'll definitely get me through the next few days haha. I will be sure to check out that site. Seems very useful.

Hey guys, thanks for all of the tips and stuff so far. I have spent a small period of time sorting out putting all of my styles into a separate CSS file. And also have messed around a bit with the colours. It's getting better.

 

But I finally finished the separate style sheet and linked it to the HTML document and it seemed to work okay. Most of it anyway. For some reason the sidebar has messed up but I can't seem to figure out why.

 

here is my site at the moment

 

www.lotusdp.co.uk

 

I havent updated it since the last time but here is a screenshot of what has gone wrong.

 

 

If you need to take a look at my coding of my style sheet just ask

scratch that post, i have figured it out.

 

SILLY ME

At least you're still enthusiasic about it

 

Have a look around that Net Tuts+ site I linked you to earlier in the thread, there are loads of great posts, not just that one I linked.

 

At least you're still enthusiasic about it

 

Have a look around that Net Tuts+ site I linked you to earlier in the thread, there are loads of great posts, not just that one I linked.

 

 

I have it has helped me out great. Thank you for the link I can't get off it haha so much better than W3schools. Though W3S helps for smaller things that you may not find on Net Tuts but the visual aids on net tuts help a great deal more.

http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-in-easy-to-understand-steps/

 

That was the first tutorial I used to get me started and I still refer back to it (to remember how to use the social icons in the right hand side list).

 

Have a play around with that too.

 

Do you have Photoshop at all?

http://net.tutsplus....derstand-steps/

 

That was the first tutorial I used to get me started and I still refer back to it (to remember how to use the social icons in the right hand side list).

 

Have a play around with that too.

 

Do you have Photoshop at all?

 

Yes I have CS5, I use it fairly often as I work as a printer/graphic designer but I am not very good on the design side! LOL

 

Why do you ask?

Just wondered if you had access to some sort of design tool.

 

Using PS to knock up your ideas etc will help you loads with the whole "visualising the job" thing, and that tutorial I linked to a few posts ago will explain all how to slice em up ready for stick on t'internets

Just wondered if you had access to some sort of design tool.

 

Using PS to knock up your ideas etc will help you loads with the whole "visualising the job" thing, and that tutorial I linked to a few posts ago will explain all how to slice em up ready for stick on t'internets

 

I will take note, thanks

.class {text-align:center;}

 

text-align: center; will only align the text. If you're looking to center an element you should use margin: 0 auto;

so, say I had the following code:

<div id="wrapper">

<div id="content">

text

</div>

</div>

 

And I wanted to align the 'wrapper' to the center of the page I would use:

div#wrapper {

width: 960px;

margin: 0 auto;

}

 

and to center the text in content:

div#content {

text-align: center;

}

Edited July 15, 201115 yr by MatthehCarter

yeah yeah makes sense, definitely getting the hang of it now. My site I'd say is looking better now than what it did a week ago :L