Building my own Website


#1

After learning some HTML and CSS here on Codecademy, I have tried to build my own website. Everything was going well until all of a sudden it just....well...broke....that's the only way I can really describe it. So basically I had a blue navigation bar at the top for Home, About Us, and Contact Us, then I when I was testing something to see if it would work the navigation bar disappeared and this is what I'm getting......

Could someone help me? Here's my code....

HTML

<head> 
	<title> Applied Sciences </title>
	<link rel="stylesheet" type="text/css" href="appliedsciences.css"/>
</head>

<body>

	<h1 align="center"> Applied Sciences </h1>
	 
	<!-- <img src="MyWebsite Tablet Left Pic.jpg" alignheight=150 width=150/>
	<img src="Picture and Animated Art.png" /> -->
		
	<!-- Buttons! -->
	<div class="nav"> 
	
		<!-- Home Button -->
		<div id="HomeButton"> 
			<a href="Website.html"> <span>Home</span></a>
		</div>
		
			<!-- About Us Button -->
		<div id="AboutUsButton">
			<a href="About Us.html"> <span>About Us</span></a>
		</div> 
		
		<!-- Contact Us Button -->
		<div id="ContactUsButton"> 
			<a href="Contact Us.html"> <span>Contact Us</span></a>
		</div>
		
	</div>
</body>


CSS

/* Button bar */
.nav {
border: solid 2px;
position: absolute;
top: 10%;
left: 0;
right:0;
height: 50px;
width: 50%;
border-color: black;
border-radius: 5px;
margin:0 auto;
background-color: #33d6ff;
}

/* Home Button */

HomeButton {

position: absolute;
top: 1%;
left: 0;
right: 0;
height: 50%;
width: 100px;
border-top: solid .15em;
border-bottom: none;
border-left: solid .15em;
border-right: solid .15em;
border-radius: 1px;
margin:0 auto;
margin-left: -.1em;
margin-top: -1.5em;
text-align: center;
background-color: #33d6ff;

}

/* All Button Text */
a {
text-decoration: none;
color: #e62e00;
font-family: Cursive;
font-size: 20px;
}
span {
font-weight: bold;
}

/* About Us Button */

AboutUsButton {

position: absolute;
top: 1%;
left: 0;
right: 0;
height: 50%;
width: 100px;
border-top: solid .15em;
border-bottom: none;
border-left: solid .15em;
border-right: solid .15em;
border-radius: 1px;
margin:0 auto;
margin-left: -.1em;
margin-top: -1.5em;
text-align: center;
background-color: #33d6ff;

}

ContactUsButton {

position: absolute;
top: 1%;
left: 0;
right: 0;
height: 50%;
width: 110px;
border-top: solid .15em;
border-bottom: none;
border-left: solid .15em;
border-right: solid .15em;
border-radius: 1px;
margin:0 auto;
margin-left: 10em;
margin-top: -1.5em;
text-align: center;
background-color: #33d6ff;

}


#2

Actually I figured it out. I had one of those genius moments literally like 7min after I posted. I forgot that I had changed the name of the CSS Style Sheet and didn't change the link from HTML to CSS.


#3

Many style guides recommend roughly the same thing, such as:

  1. lower case CSS selectors
  2. lower case HTML class and id attribute values (dashes are okay)
  3. lower case URI names
  4. no white space in URI names
  5. quoted attributes (except Booleans)
  6. no leading or trailing white space in element text nodes

In your code above you are using Capitalized camelCase for selectors. Change all your id's to lower case to correspond with the selectors.

You code uses URI names that contain spaces. This puts an extra strain on the server since it has to encode each resource name like this that it encounters, slowing page load considerably. The names should also be lower case so you establish consistency and predictability.

"mywebsite-tablet-left-pic.jpg"

Quoting attributes is still a best practice, even if we don't really have to.

height="150" width="150"

Web page resources should never be capitalized.

<a href="index.html"> <span>Home</span></a>

<a href="about.html"> <span>About Us</span></a>

<a href="contact.html"> <span>Contact Us</span></a>

Search engines quite frequently look for generic resource names aside from the home page (which they suss out first, after robots.txt). about and contact are two such names they look for. Using them removes all mystery around those pages.

Lastly, the TITLE and H1 elements have unnecessary white space in them.

I'm assuming you have this in a sandbox that provides a document type declaration and a root element for you. If not, then you will need them, as well.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Applied Sciences</title>
    ...
  </head>
  <body>
    ...
  </body>
</html>