2
\$\begingroup\$

If it is possible, could someone please revise my code to see if any improvements can be made?

<html>
<head>
  <title>Roamfree - Official Website</title>
  <link rel="stylesheet" href="index.css">
  <style>
ul {
    list-style-type: none;
    margin: 25px;
    padding: 0;
    overflow: hidden;
}

li {
    float: center;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}
</style>
</head>

<body>

<div class="top"> <h1 style="font-size:250%">Welcome to the Roamfree Homepage!</h1> </div>

<div class="main">
 	<h1>About Roamfree</h1>
 	<p title="About Roamfree">
  		Roamfree is a small company that wants to be recognised by the internet and we 
  		decided to make a website to hold ALL our future products, apps and games!
     	This is a Prototype website (not even alpha) so I need support from 	
     	the online community so my coding skills will progress further and this company 	
     	will (eventually) grow!</p>
     	
    <h1>Relyr</h1>
 	<p title="Description">Well Relyr is the measuring app that I am currently developing
 	and it is optimised for iOS 8 and is targeted at the Iphone 5s (sorry Ipad users) 
 	and you press Start then you walk with your Iphone with you and afterwards you press
 	Stop then using GPS it approximately calculates how far you walked, this is mainly for
 	architects and builders but perfectionists can also use it as well :)</p>
</div>

	<div class="left"> <h1>Updates</h1>
	
	<p>So, my first update for this newly founded company as I am VERY happy to have
	a opportunity to get some of the profits and of course the fans and supporters as well
	and here's to a (hopefully) HUGE future for this company because of the support
	and help from you guys.</p></div>
		<div class="right"><h1>Navigation</h1>
		<p style="font-size:100%">Where do you want to go?</p>
		<ul>
  			<li><a href="#home">Home</a></li>
  			<li><a href="#shop">Shop</a></li>
  			<li><a href="#news">News</a></li>
  			<li><a href="#about">About</a></li>
  			<li><a href="#contact">Contact Us</a></li>
		</ul>
		</div>


</body>

</html>

\$\endgroup\$
0

3 Answers 3

Reset to default
5
\$\begingroup\$

Your HTML seems to be correct, except you do not have a doctype in there, which goes at the top of the document:

Doctype for HTML5:

<!doctype html>

Your CSS has one error:

li {
    float: center;
}

center is not a possible value for float - only left and right are.

Otherwise, your code has no errors according to the official W3C validators:

HTML Validator
CSS Validator

Your HTML markup is, however, very difficult to read due to your wild indentation. For example, you have this:

<head>
  <style>

...

</style>
</head>

Your ending </style> tag should have the same level of indentation as the beginning tag, and I was taught to use 4 spaces as the indentation level. Part of the problem is you are mixing tabs and spaces as your indentation level - only use one.

You also have this:

<div class="main">
    <h1>About Roamfree</h1>
    <p title="About Roamfree">
        Roamfree is a small company that wants to be recognised by the internet and we 
        decided to make a website to hold ALL our future products, apps and games!
        This is a Prototype website (not even alpha) so I need support from     
        the online community so my coding skills will progress further and this company     
        will (eventually) grow!</p>

    <h1>Relyr</h1>
    <p title="Description">Well Relyr is the measuring app that I am currently developing
    and it is optimised for iOS 8 and is targeted at the Iphone 5s (sorry Ipad users) 
    and you press Start then you walk with your Iphone with you and afterwards you press
    Stop then using GPS it approximately calculates how far you walked, this is mainly for
    architects and builders but perfectionists can also use it as well :)</p>
</div>

Again, the indentation is wild.

Your indentation on the CSS is very good. However, as your webpage grows, you may find it easier to have the CSS in a different file than the HTML and link to it like this:

<link rel="stylesheet" type="text/css" href="Styles.css">

If you have multiple designs for different types of media, such as phones, printers, and regular computers, you can set the media tag like this:

<link rel="stylesheet" type="text/css" href="PrintStyles.css" media="print">
\$\endgroup\$
2
  • \$\begingroup\$ I had a different CSS page I just didn't show it \$\endgroup\$ Commented Dec 29, 2014 at 22:34
  • \$\begingroup\$ Plus I took the navigation bar from w3 schools so that is why it has A LOT of code in the style anyway if i have links in the future pages which I will then it would mess the links up so I didn't want that to happen then I spend three hours before I find the problem! \$\endgroup\$ Commented Dec 29, 2014 at 22:37
2
\$\begingroup\$

I prefer two column indent for HTML. Unlike code, you can't say that the indent is too much and abstract part of the markup to a function. 

<h1 style="font-size:250%">Welcome to the Roamfree Homepage!</h1>

You should avoid using style attributes on HTML tags. Use CSS instead. If you are having trouble making your style affect just what you want, add an id or class attribute (or both).

For search engine indexing purposes, it's best to have just one h1 tag per page. It can be helpful to give it the same text as you have in the title tag.

There are six levels of headings in HTML, but you are only using one. Usually you want the h1 tag content to describe the whole page. Then you want h2 tags to identify the sections. If you need to break things up further, you can use h3, h4, h5, and h6. 

<div class="top">
<div class="left">
<div class="right">

Try to avoid naming things in the markup (HTML) by where they should be. Instead focus on naming what they are. For example, header would be a bit better than top, but greeting would be even better. Then left could become updates and right could become navigation. 

        <li><a href="#home">Home</a></li>
        <li><a href="#shop">Shop</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact Us</a></li>

The href values here won't work. What these are doing is linking to anchors in the current page, but you haven't anchored anything. Also, they look more like they should be going to different pages. So you might have them look like 

        <li><a href="/">Home</a></li>
        <li><a href="shop.html">Shop</a></li>
        <li><a href="news.html">News</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact Us</a></li>

You also may want to consider using absolute URLs, as those let you specify the protocol and domain as well as the path.

\$\endgroup\$
1
  • \$\begingroup\$ BTW it is a test so I don't want to connect the links yet \$\endgroup\$ Commented Dec 29, 2014 at 23:33
1
\$\begingroup\$

Div div div

Div is not the only container element available to us anymore. There are more semantically appropriate choices available to use now: header, footer, article, section, nav, aside, etc. These elements have special meaning when it comes to the document's outline. Div should be reserved for when you need a container element purely for styling purposes, not for sectioning.

See: http://html5doctor.com/outlines/

Headlines

I don't buy into the whole "you should only have one h1 element per document" school of thought. If you're using sectioning elements, there's nothing wrong with using h1 throughout your document, according to the new outline rules.

If you're not using sectioning elements, then you must use h2-h6 as appropriate to denote hierarchy (eg. "Cats" and "Dogs" might be h2s, with "Beagles" and "Golden Retrievers" as h3s under the "Dogs" headline).

Using the full range of available headline elements (h1-h6) is recommended... but if you work with lots of reusable document fragments (templates), you'll find that sticking to h1 is more convenient.

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.