PDA

View Full Version : Critique



JJackson
Feb 5th, 2010, 06:56 PM
I worked on coding a new, simple page last night. I've run the code through the XHTML/CSS validation and it passed, but I'm not sure if the code is clean or organized enough -- or if it's even being used in the best method. Could you critique it?

XHTML 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" />
<link href="default.css" rel="stylesheet" type="text/css" />
<title>The Codester</title>
</head>

<body>
<div id="container">
<div id="header">
<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end navigation-->
<div id="bread-crumbs">
Home >> Services >> About >> Contact
</div><!--end bread-crumbs-->
</div><!--end header-->

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac dolor quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dictum sem ut ligula sollicitudin at vehicula mauris mattis. Morbi in dictum sapien. Duis luctus suscipit neque, nec interdum mi euismod nec. Sed quis justo risus, quis porta quam. Sed pharetra ipsum quis purus dignissim lacinia. Ut iaculis pretium enim, quis convallis quam hendrerit ac. Proin ut enim sapien, vitae luctus quam. Maecenas hendrerit sapien ut purus bibendum in scelerisque purus tempor. Curabitur nunc nibh, aliquet sit amet commodo a, mollis varius nulla. Curabitur feugiat sem non dui facilisis tincidunt. Pellentesque at posuere urna. Sed a nibh nulla, malesuada mattis lacus. Curabitur leo odio, placerat id varius a, tincidunt eget eros. Integer purus purus, lacinia eget elementum sit amet, rhoncus at dolor.
</p>
</div><!--end content-->
</div><!--end container-->
<div id="footer">
Copyright &copy; 2010 <a href="http://thecodester.com"><strong>TheCodester.com</strong></a>.
</div>
</body>
</html>

CSS Code

/* The Codester */

/*======
OVERALL
======*/

#container {
width: 600px;
margin: 0 auto;
padding-top: 50px;
}

/*================
HEADER/NAVIGATION
================*/

#navigation {
width: 600px;
height: 30px;
text-align: right;
}

#navigation li {
margin: 10px 10px 10px 10px;
}

ul {
list-style-type : none;
font-size: 18px;
margin : 0;
padding : 0;
}

li {
display : inline;
}

#bread-crumbs {
background: url(images/navigation.gif) repeat-x;
text-align: left;
padding-left: 8px;
color: #FFFFFF;
}

/*==========
FONTS/LINKS
==========*/

body {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 12px;
color: #212121;
text-align: justify;
line-height: 23px;
}

a:link {
color: #616161;
}

a:visited {
color: #616161;
}

a:hover {
color: #616161;
}

a:active {
color: #616161;
}

/*===============
FOOTER/COPYRIGHT
===============*/

#footer {
text-align: center;
}

jenius
Feb 5th, 2010, 09:08 PM
Hey JJackson,

This code looks nice and clean, just the way I like it. Nice job! I assume you have more work ahead, as there isn't much code here.

The only things I would consider adding are a CSS reset at the beginning perhaps, and a bit of meta information (like keywords, author, and description) - these kinds of things control how you page appears in search engines. Other than that, couldn't ask for more here in terms of cleanliness and organization.

I do a lot of these same little comment tricks you have here myself (the html end comments, css section breaks), which is good :D

JJackson
Feb 5th, 2010, 09:29 PM
Hey JJackson,

This code looks nice and clean, just the way I like it. Nice job! I assume you have more work ahead, as there isn't much code here.

The only things I would consider adding are a CSS reset at the beginning perhaps, and a bit of meta information (like keywords, author, and description) - these kinds of things control how you page appears in search engines. Other than that, couldn't ask for more here in terms of cleanliness and organization.

I do a lot of these same little comment tricks you have here myself (the html end comments, css section breaks), which is good :D

Thanks for the comments! That project is finished now... I'm not going to work on it anymore. I'm not coding these sites to use them, only to learn from them. I'm working on another one now. I will try to make things more complex each time. As for the organized code and comments, I prefer to keep things organized and clean. I can't stand to look at messy code.