Could someone review my music website?

eggo9432 · Jul 26, 2011

I have finished the basics of the website and will soon purchase a domain name, but the site has very few users and any review from you guys would be extraordinarily helpful.

The site is http://www.pearlsquirrel.elementfx.com

Page is optimized for chrome, Firefox, and safari.

Example of my personal page (fully customized) http://www.pearlsquirrel.elementfx.com/profile.php?u=eggo

Please leave your comments below and thank you for the help!

cybrax · Jul 28, 2011

Looks like it's off to a good start but bit of a slow load. Code looks scrappy, try moving everything between the doctype declaration and the bottom of the page to the top.

Code:

<!-- see note below and paste stuff in here-->
<head>
<div id="top">
    <h2><a href="index.php"><img src="http://pearlsquirrel.webs.com/pearlsquirrel.jpg"/></a><a href="upload.php" >Upload</a><h11> <a href="login.php">Sign in</a></h11>
<form action='searchmusic.php' method='GET'>
  <align="right">
  <input type='text' size='50' name='search' value="Search for a song here" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
  <div style="visibility:hidden">
    <input type='submit' name='submit' value='Search' />
  </div>

</form></h2>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>PearlSquirrel Homepage</title>
	<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
	
</head>
 
<body>
	<div id="floater"></div>
	<div id="centered">
 
		<h1 align="center">The fast and easy way to listen to homemade music!<br><a href="register.php">Create an account</a> </h1></align>

 
	</div>
	   	<div id="container"> 
<div id="box3" align="center">Recently Uploaded</div> 
<div id="box4" align="center">Random Songs</div> 
	<div id="container"> 
<div id="box1">
			<b>As It All Comes Crashing Down by <h10><a href=/profile.php?u=shneakypete>shneakypete</a></h10></b><br>
			<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />

<param name="flashvars" value="mp3=mp3/As It All Comes Crashing Down by the Cheshire Massacre.mp3shneakypete" />
<param name="wmode" value="transparent" />
</object><p>
			<b>Nog Een Keer (David Lourd edit) by <h10><a href=/profile.php?u=david9999999>david9999999</a></h10></b><br>
			<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=mp3/Nog Een Keer (David Lourd edit).mp3david9999999" />
<param name="wmode" value="transparent" />
</object><p></div> 
<div id="box2">

			<b>Nog Een Keer (David Lourd edit) by <h10><a href=/profile.php?u=david9999999>david9999999</a></h10></b><br>

			<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=mp3/Nog Een Keer (David Lourd edit).mp3david9999999" />
<param name="wmode" value="transparent" />
</object><p>
			<b>As It All Comes Crashing Down by <h10><a href=/profile.php?u=shneakypete>shneakypete</a></h10></b><br>
			<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=mp3/As It All Comes Crashing Down by the Cheshire Massacre.mp3shneakypete" />
<param name="wmode" value="transparent" />
</object><p></div> 
</div>

</div>
</div>
		
</body>

</html>
<html>
<div id="bottom">
<p>
	 <a href="sendmeanemail.php">help</a> , <a href="#" onclick="window.open('http://www.pearlsquirrel.elementfx.com/termsofservice.html','terms of service','width=400,height=200');">terms of service</a> , <a href="#" onclick="window.open('http://www.pearlsquirrel.elementfx.com/privacypolicy.html','privacy policy','width=400,height=200');">privacy policy</a>

</p>
</div>
</html>
<!-- cut from here down to bottom of page -->
<!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">
<style>
html, body {
	margin:0; padding:0;
	height:100%;
}
 
body {
	background:url() 50% 50% no-repeat #808080;
	font-family:Georgia, Times, serifs;
}
 
#floater {
	position:relative; float:left;
	height:20%;	margin-bottom:-100px;
	width:1px;
}
#floater2 {
	position:relative; float:left;
	height:20%;	margin-bottom:-100px;
	width:1px;
}
#topfloater {
	position:relative; float:left;
	height:10%;	margin-bottom:-200px;
	width:1px;
}
 
#centered {
	position:relative; clear:left;
	height:100px; width:80%; max-width:800px; min-width:400px;
	margin: auto;
	background:#806D7E;
	border:2px solid #666;
	
}
#recent {
	position:relative; clear:left;
	height:25px; width:100%; max-width:200px; min-width:200px;
	margin: auto;
	background:#806D7E;
	border:2px solid #666;
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal; color:#FFFFFF;
		
}
#page {
	position:relative; clear:left;
	height:150px; width:100%; max-width:200px; min-width:200px;
	margin: auto;
	background:#FFFFFF;
	border:2px solid #666;
			
}
#top {
	position:relative;
	height:143px; width:100%;
	margin:0 auto;
	background:#000000;
		
}
#bottom {
	position:absolute;
	bottom:0; right:0;
}
 
#nav {
	position:absolute; left:0; top:0; bottom:0; right:70%;
	padding:20px; margin:10px;
}
 
#content {
	position:absolute; left:0; right:0; top:0; bottom:0;
	overflow:auto; height:340px;
	padding:0; margin:10px;
}
#nav ul {
	list-style:none;
	padding:0; margin:20px 0 0 0; text-indent:0;
}
 
#nav li {
	padding:0; margin:3px;
}
 
#nav li a {
	display:block; background-color:#e8e8e8;
	padding:7px; margin:0;
	text-decoration:none; color:#000;
	border-bottom:1px solid #bbb;
	text-align:right;
}
 
#nav li a::after {
	content:'�'; color:#aaa; font-weight:bold;
	display:inline; float:right;
	margin:0 2px 0 5px;
}
 
#nav li a:hover, #nav li a:focus {
	background:#f8f8f8;
	border-bottom-color:#777;
}
 
#nav li a:hover::after {
	margin:0 0 0 7px; color:#f93;
}
 
#nav li a:active {
	padding:8px 7px 6px 7px;
}
#centered {
	-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;
}
 
h1, h2, h3, h4, h5, h6 {
	font-family:Helvetica, Arial, sans-serif;
	font-weight:normal; color:#666;
}
 
h1 {
	color:#000000; border-bottom;
	letter-spacing:-0.05em; font-weight:bold;
	margin-top:0; padding-top:0;
}
h2 {
        color:white; border-bottom;
	letter-spacing:-0.05em; font-weight:bold;
	margin-top:0; padding-top:0; 
	

}

#bottom {
	font-size:0.7em;
	color:#000000;
	position:absolute;
	bottom:0; right:0;
}
 
 
#logo {
	font-size:2em; text-align:center;
	color:#999;
}
 
#logo strong {
	font-weight:normal;
}
 
#logo span {
	display:block;
	font-size:4em; line-height:0.7em;
	color:#000000;
}
 
h3 {
	line-height:1.6em;
}
 
a {
	color:#000000;
}
h10{font-size:0.9em; color:blue;
a color: blue;

}

h11{position: relative; padding: 40px;
}
#container { width:540px; margin: auto; } 
#box1 { width:254px; float:left; height:250px; background:#C1CDCD; border:2px solid #666; font-size:0.8em; font-color:#000000; margin:2 auto; margin-right:5px; } 
#box2 { width:254px; float:left; height:250px; background:#C1CDCD; border:2px solid #666; font-size:0.8em; font-color:#000000; margin:2 auto; margin-left:5px; } 
#box3 { width:254px; float:left; height:25px; background:#806D7E; border:2px solid #666; font-family:Helvetica, Arial, sans-serif;
	font-weight:normal; color:#FFFFFF; margin:2 auto; margin-top:5px; margin-right:5px; margin-top:10px;  } 
#box4 { width:254px; float:left; height:25px; background:#806D7E; border:2px solid #666; font-family:Helvetica, Arial, sans-serif;
	font-weight:normal; color:#FFFFFF; margin:2 auto; margin-left:5px; margin-top:10px;  } 

a.link2:link {color: white;}
a.link3:link {color: blue;}

A:link {
 COLOR: white /*The color of the link*/
}
A:visited {
 COLOR: white /*The color of the visited link*/
}
A:hover {
 COLOR: white /*The color of the mouseover or 'hover' link*/
}

</style> 
</style>

eggo9432 · Jul 28, 2011

Thank you so much. I really appreciate the feedback!

rikkilambo · Jul 28, 2011

The music plays fine, but you could use some design help =)

eggo9432 · Jul 28, 2011

Yeah, I really could. Css is not my specialty. I have self taught myself everything and I guess that it kind of shows. That is why I do not know how excel in css and javascript, however, my php in not too bad. if you want to recommend and design help or even help me, that would be extremely appreciated. Any help that I can get and functionality recommendations for the website are as well appreciated. Thank you for the comments guys. Does anyone have anything else to say about the website that could help me?

cybrax · Jul 29, 2011

rikkilambo said:
you could use some design help =)

We all learn to walk before we run and once you have spent time online you will realise that even the many designers with awsome graphic skills cannot code for love nor money. On the flipside my coding is reasonable but could not draw a rainbow with a pack of crayons lol

Every seasoned web designer remembers their early attempts in quiet horror, so don't worry about critique just yet jst get the basics right first.

One habit to get into at an early stage is using an external stylesheet (CSS) file, this way alterations to the entire website layout can be achieved by tweeking one file and not hundreds separately. The same also applies to javascripts and anything else shared between multiple pages.

eggo9432 · Jul 29, 2011

Yeah, we do not all learn to run right away. Thanks for the advice about the external style sheet, I will try that out in a bit. I spent all last night redoing some css. Now the login, logout, and upload pages actually look decent. So thank you guys so much for the help. Do you have any recommendations about the homepage because I know that the homepage is always the most important page of a website? By the way, what do you think about the name of my website?
Thanks, cybrax for the advice

eggo9432 · Aug 16, 2011

I have completely redone the code and I have made it much easier for a user to register. I have also added quite a few new divs to make the site look better. Any more comments on my site would be greatly appreciated,
Thanks.

Could someone review my music website?

eggo9432

New Member

cybrax

Community Advocate

eggo9432

New Member

rikkilambo

New Member

eggo9432

New Member

cybrax

Community Advocate

eggo9432

New Member

eggo9432

New Member

Free Web Hosting

Our Community

Legal