|
 |
|
|
|
| Thread title: hi. - splash page REVISED! |
 |
|
|
| |
|
Thread tools
Search this thread
Display Modes
|
|
|
01-18-2009, 09:23 PM
|
#1
|
Status: Member
Join date: Apr 2008
Location: Oxford
Expertise:
Software:
Posts: 486
|
 hi. - splash page REVISED!
hi.
recently, my coding abilities have been letting me down. they're much lower than one might expect, and they're losing me a lot of profit, due to the need of hiring a coder for projects.
i've decided that it's about time i start brushing up on my coding. i posted my first attempt at this a couple of days ago, and I have to say, the comments weren't very positive. since then i've taken on board all the comments and discussions that were raised, and I've fully revised the page. I'd be especially greatful if those who posted on the old thread could think back to the old markup, and comment on the improvements.
i've tried to lay out the code as best as i can, and i've managed to validate both the css and the html. if you have any pointers, feedback, or comments to make (positive or negative), please do so. this is also posted in the gallery showcase section as i wasn't sure which was more appropriate.
i'm especially looking for comments on the markup, rather than the site's design itself. comments on the design however, are welcome.
you can view the page here!
thanks! x
|
|
|
|
01-18-2009, 09:34 PM
|
#2
|
Status: Watermelon Man
Join date: Nov 2006
Location: London
Expertise:
Software:
Posts: 3,312
|
There isn't really a need for any divs... use heading tags for the different texts (h1, h2 etc). You don't need all those styles as well, a lot of those are similar, so just reuse them.
Much better though.
|
|
|
|
01-18-2009, 09:49 PM
|
#3
|
Status: Member
Join date: Apr 2008
Location: Oxford
Expertise:
Software:
Posts: 486
|
Originally Posted by Seb 
There isn't really a need for any divs... use heading tags for the different texts (h1, h2 etc). You don't need all those styles as well, a lot of those are similar, so just reuse them.
Much better though.
|
I would, but because I want to emphasise certain sections of the text, it would create an unwanted line break if I used headers, unless I screwed up the alignment.
I created all the different styles because the html is invalid without them. It doesn't like the fact that I've declared the same style more than once for some reason. If there's any way of getting past that problem, I'd really appreciate some help with it!
Thanks for the comments seb. 
|
|
|
|
01-18-2009, 09:49 PM
|
#4
|
Status: Watermelon Man
Join date: Nov 2006
Location: London
Expertise:
Software:
Posts: 3,312
|
This would be better:
HTML:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="strip away the title, and i'm a self-employed graphic artist who thinks outside the box.">
<meta name="keywords" content="oxford, oxfordshire, freelance, graphic, web, print, design, designer, thame, bucks, buckinghamshire, artist, creative, semantic, coding, programming, compatible, css, xhtml, html, web designer, print designer, graphic designer, james, lindsay, james lindsay">
<title>hi. i'm james lindsay. i'm an oxford based freelance graphic designer.</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hi.</h1>
<h2>I'm <span>James Lindsay</span>. I'm an <span>Oxford</span> based freelance <span>graphic designer</span>.</h2>
<h3>For my <span>CV</span>, <span>Resume</span>, or <span>Previous Work</span>, feel free to hit me up on <span>hi<span>@</span>jamesy.net</span>.</h3>
</body>
</html>
CSS:
Code:
* { padding: 0; margin: 0; }
body {
background: #302C2C url('http://www.jamesy.net/imgs/bg.png') repeat-x;
margin: 90px 50px 0 50px;
padding: 0;
text-decoration: none;
text-align: center;
font-family: Georgia, Tahoma, Arial, Verdana, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
text-transform: lowercase;
color: #fff;
}
h1 {
font-size : 200pt;
}
h2 {
color: #ccc;
font-size : 34pt;
}
h2 span {
color: #fff;
}
h3 {
color: #ccc;
font-size : 10pt;
}
h3 span {
color: #fff;
}
See if you can learn something based on the changes I made. Basically, you can minimize the amount of code you write by not repeating yourself.
The above validates and does not drop lines, because of display: inline in the CSS.
A professional coder could probably expand on what changes I made further...
|
|
|
|
01-18-2009, 09:52 PM
|
#5
|
Status: Member
Join date: Jun 2006
Location: UK
Expertise:
Software:
Posts: 184
|
Bored, so:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
Should be:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Make all your META tags lowercase and indent everything inbetween <head></head> and <body></body>
Change <div id="one"> to h1, h2, like Seb said.
Remove all the un-needed linebreaks and whitespace too.
Saying that, it's all down to personal preference, so I guess it's up to you. 
EDIT: beaten by seb 
|
|
|
|
01-18-2009, 09:53 PM
|
#6
|
Status: Member
Join date: Apr 2008
Location: Oxford
Expertise:
Software:
Posts: 486
|
Originally Posted by Seb
This would be better:
HTML:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="strip away the title, and i'm a self-employed graphic artist who thinks outside the box.">
<meta name="keywords" content="oxford, oxfordshire, freelance, graphic, web, print, design, designer, thame, bucks, buckinghamshire, artist, creative, semantic, coding, programming, compatible, css, xhtml, html, web designer, print designer, graphic designer, james, lindsay, james lindsay">
<title>hi. i'm james lindsay. i'm an oxford based freelance graphic designer.</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hi.</h1>
<h2>I'm <span>James Lindsay</span>. I'm an <span>Oxford</span> based freelance <span>graphic designer</span>.</h2>
<h3>For my <span>CV</span>, <span>Resume</span>, or <span>Previous Work</span>, feel free to hit me up on <span>hi<span>@</span>jamesy.net</span>.</h3>
</body>
</html>
CSS:
Code:
body {
background: #302C2C url('imgs/bg.png') repeat-x;
margin-top: 90px;
margin-left: 50px;
margin-right: 50px;
text-decoration: none;
text-align: center;
font-family: Georgia, Tahoma, Arial, Verdana, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
text-transform: lowercase;
color: #fff;
}
h1 {
font-size : 200pt;
line-height : 153pt;
display: block;
}
h2 {
color: #CCCCCC;
line-height : 42px;
font-size : 34pt;
display: inline;
}
h2 span {
color: #fff;
}
h3 {
color: #ccc;
line-height : 42px;
font-size : 10pt;
display: inline;
}
h3 span {
color: #fff;
}
See if you can learn something based on the changes I made. Basically, you can minimize the amount of code you write by not repeating yourself.
A professional coder could probably expand on what changes I made further... |
Ooofff. Thanks for the help. It would appear you just completely disproved my naivity. 
|
|
|
|
01-18-2009, 09:54 PM
|
#7
|
Status: Watermelon Man
Join date: Nov 2006
Location: London
Expertise:
Software:
Posts: 3,312
|
Originally Posted by Jamesy
Ooofff. Thanks for the help. It would appear you just completely disproved my naivity. |
I updated it a little bit by the way.
|
|
|
|
01-18-2009, 09:55 PM
|
#8
|
Status: Member
Join date: May 2007
Location:
Expertise:
Software:
Posts: 257
|
why does all the text have to be the same font? maybe making the font different for each section and adding more space above and below them will differentiate them more, but not bad
also i agree with Seb about the tags
|
|
|
|
01-18-2009, 09:58 PM
|
#9
|
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
Posts: 3,820
|
I think this sort of discussion belongs better in the HTML/CSS forum (yes, we have one!) even though the traffic there is very low so might not see as much attention.
I'm not sure how far this will get you but try to remember that you're marking up a document when writing the HTML. Documents, as you'd write with your favourite word processor, have headings, paragraphs and so on. Your HTML document should reflect that sort of structure.
|
|
|
|
01-18-2009, 09:58 PM
|
#10
|
Status: Member
Join date: Apr 2008
Location: Oxford
Expertise:
Software:
Posts: 486
|
well, i'm not sure if it's my implementation, but as i posted in my first reply to seb, i want to emphasise certain sections of the text, and using headers screws up the alignment.
i implemented all of sebs code, and look at the result; http://www.jamesy.net/index2.htm
|
|
|
|
|
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
|
|
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed