5
\$\begingroup\$

Here is what the site looks like with the icons/images:

enter image description here

#firstpic {
	margin: 0px;
	padding: 0px;
	display: inline;
}

#propic {
	width: 15%;
}

#somed {
	float: right;
	padding-right: 5%;
	display: inline;
}

#somed ul {
	list-style: none;
	padding-top: 30px;
}

#sp {
	padding-bottom: 10px;
}

#navigation {
	border-bottom: 2px dotted #000000;
	padding-bottom: 20px;
}

#box {
	background-color: #224466;
	width: 80%;
	height: 300px;
	margin-top: 50px;
	margin-left: 10% ;
}

#divP {
	float: left;
	height: 290px;
	width: 47%;
	margin: 5px 5px 5px 5px;
}

#divP p {
	margin: 55px;	
	font-family: Courier;
	text-align: center;
	color: #ffffff;
}

#divP2 {
	float: right;
	height: 290px;
	width: 47%;
	margin: 5px 5px 5px 5px;
}

#divP2 p {
	margin: 55px;	
	font-family: Courier;
	text-align: center;
	color: #ffffff;
}

#divI {
	padding-left: 60%;
	padding-top: 1%;
}

#divI2 {
	padding-left: 10%;
	padding-top: 2%;
}

#divI3 {
	padding-left: 66%;
	padding-top: 2%;
}

.bh {
	border-right: 2px solid black;
	padding-right: 20px;
}

.navbar {
	font-size: 400%;
	text-align: center;
	font-family: Courier;
	display: inline;
	padding-left: 90px;
}

.navbar li {
   display: inline;
}

.navbar a {
    text-decoration: none;
    color: #000000;
}

.navbar a:hover {
    color: #224466;
}
<html>
<head>
	<title>Tyler Tilton</title>
	<link rel="shortcut icon" type="image/x-icon" href="Key-T.ico" />
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
	<div id="navigation">
		
		<div id="firstpic"><img src="F:\PersonalWebsite\Images\Profile Pic.png" id="propic"/></div>
		
		<div id="somed">
			<ul>
				<li id="sp"><a href="http://www.stackexchange.com"><img src="F:\PersonalWebsite\Icons\email20.png"/></a></li>
				<li id="sp"><a href="http://www.stackexchange.com"><img src="F:\PersonalWebsite\Icons\linkedin23.png"/></a></li>
				<li id="sp"><a href="http://www.stackexchange.com"><img src="F:\PersonalWebsite\Icons\twitter42.png"/></a></li>
				<li><a href="http://www.stackexchange.com"><img src="F:\PersonalWebsite\Icons\instagram10.png"/></a></li>
			</ul>
		
		</div>
		
			<ul class="navbar">
    			<li class="bh"><a href="index.html">Home</a></li>
    			<li class="bh"><a href="aboutme.html">About Me</a></li>
				<li><a href="contact.html">Contact</a></li> 
			</ul>
		
		</div>
		
		<div id="box">
			<div id="divP"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
			<div id="divI"><img src="F:\PersonalWebsite\Images\pic11.png"/></div>
		</div>
		
		<div id="box">
			<div id="divP2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
			<div id="divI2"><img src="F:\PersonalWebsite\Images\nicaragua.png"/></div>
		</div>
		
		<div id="box">
			<div id="divP"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
			<div id="divI3"><img src="F:\PersonalWebsite\Images\walktheline.png"/></div>
		</div>
</body>
</html>

Are there any general improvements I can make? Do you have any tips or things I need to keep in mind?

\$\endgroup\$
  • 4
    \$\begingroup\$ You'll have issues uploading it to a host with a URL like F:\. \$\endgroup\$ – alex Feb 20 '15 at 7:06
8
\$\begingroup\$

Your CSS is validates perfectly, you can validate it at the W3C CSS validator here

Your HTML has a few problems the validator finds here. First, you need to specify a doctype, like this:

<!doctype html>

Second, it doesn't like the absolute location of the image. What you should do is use relative links, like this: src="myimage.png"

Third, all images need to have an alt attribute. This is some plain text that screen readers use to help people with seeing disabilities, and search engines use to find images:

alt="Image description..."

Fourth, you cannot have multiple id's with the same name. If you want multiple instances of data with that style, use a class. An id specifies a single, unique location on the page.

Fifth, do not use spaces in your URI's. Represent spaces with %20, like this:

href="My%20Image.png"

Sixth, you might as well use HTML5 formatting. This would change the <div id="navigation"> into a <nav>. Then, just change the name of your style to:

nav {
    /* ... */
}

Seventh, you do not need to identify each block on the page with an id or class. If you wish to style all HTML elements of a certain type, you can do so like I show above. The nav in the example can be replaced with body, div or any element you wish.

\$\endgroup\$
6
\$\begingroup\$

Firstly congratulations on your first page. Some improvements I would suggest through a quick scan of the HTML:

  • Specify a Doctype in the first line of your HTML (<!DOCTYPE html>)
  • Change the <div id="navigation"> to a <nav> tag - its more semantic
  • ID's should be unique - you have several duplicated
  • Make your image sources relative, not absolute
  • DivI and DivP (and the v2 & v3) look redundant. Remove them and style the inner elements instead

You've done the hardest part though in learning how to create your first page...

\$\endgroup\$
  • \$\begingroup\$ In Addition you should add alternate font-family in case 'Courier' isn't available on a system. font-family: Courier, serif; If all 4 margins are identical you can use margin: 5px instead of margin: 5px 5px 5px 5px;. This spares a few bytes. ;-) The same goes for the color #ffffff; you can shorten this to color: #fff;. But good job so far. I saw much worse ;-) \$\endgroup\$ – Simon Feb 20 '15 at 7:17
  • \$\begingroup\$ And you shouldn't use #ids for styling. This is maybe my personal preference but if you mix ids and classes you can get conflicts because ids are stronger than classes. Thats why I prefere a class only stylesheet. \$\endgroup\$ – Simon Feb 20 '15 at 7:28
1
\$\begingroup\$

All answers and comments on it are outstanding feedbacks. I would like to add that although the CSS may seem simple I recommend, as a good practice, use the /* */ comment syntax to indicate a brief description of the style and the author name. Good job my friend!

\$\endgroup\$
  • \$\begingroup\$ hmm- HTML comments start with <!-- and are terminated with -->. The /* */ syntax is a c-style multi-line comment supported in various scripting languages, including PHP, C# and JavaScript. \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Sep 7 '19 at 13:53
0
\$\begingroup\$

Just a heads up!

  • You can't re-declare an Id. They have to be unique. Use Classes instead.
  • Css Units that have A value of 0 do not need a unit, So you can remove the px part.
  • for file src's it should use / instead of \ &
  • background-color can be declared with just background:ChosenColor;
  • also img tags are self closing so it doesn't need the closing... / :)
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy