Skip to main content
added 1269 characters in body
Source Link
CRABOLO
  • 948
  • 3
  • 8
  • 30

Lastly, I think your use of classes is just fine. I also like how you used a limited number of id's, which can too often end up making your css many more characters than needed.

Lastly, I think your use of classes is just fine. I also like how you used a limited number of id's, which can too often end up making your css many more characters than needed.

added 1269 characters in body
Source Link
CRABOLO
  • 948
  • 3
  • 8
  • 30

There's nothing evil about line breaks, so it's whatever you prefer to use. The way you used them here is pretty unusual though.

<div class="column">
                <p><br /><br /><br /></p>
                <a class="anchor" id="welcome"></a><h1 class="light"><br /><br />WELCOME TO THE FUTURE OF TRAINING</h1>

I'd probably change that to this:

<div class="column">
                <a class="anchor" id="welcome"></a><h1 class="firsth1 light">WELCOME TO THE FUTURE OF TRAINING</h1>

#welcome { margin: 40px 0 0 0; }   /* adjust accordingly */
.firsth1 { margin: 20px 0 0 0; }  /* adjust accordingly */

How you have them here looks fine.

<div class="column half last image rtl">  
      <br /><br />  
      <img src="images/site_familiarisation.png" />  
</div> 

You have quite a few lines like this too.

<div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

I would change it to something like this:

<div class="nextbutton">NEXT</div>

.nextbutton {
    text-align: right;  /* this might not work */
    padding: 0 0 0 20px; /* then you could do something like this instead */  /* adjust accordingly */
}

There's nothing evil about line breaks, so it's whatever you prefer to use. The way you used them here is pretty unusual though.

<div class="column">
                <p><br /><br /><br /></p>
                <a class="anchor" id="welcome"></a><h1 class="light"><br /><br />WELCOME TO THE FUTURE OF TRAINING</h1>

I'd probably change that to this:

<div class="column">
                <a class="anchor" id="welcome"></a><h1 class="firsth1 light">WELCOME TO THE FUTURE OF TRAINING</h1>

#welcome { margin: 40px 0 0 0; }   /* adjust accordingly */
.firsth1 { margin: 20px 0 0 0; }  /* adjust accordingly */

How you have them here looks fine.

<div class="column half last image rtl">  
      <br /><br />  
      <img src="images/site_familiarisation.png" />  
</div> 

You have quite a few lines like this too.

<div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>

I would change it to something like this:

<div class="nextbutton">NEXT</div>

.nextbutton {
    text-align: right;  /* this might not work */
    padding: 0 0 0 20px; /* then you could do something like this instead */  /* adjust accordingly */
}
added 452 characters in body
Source Link
CRABOLO
  • 948
  • 3
  • 8
  • 30

CSS

Instead of having 5 different rules all saying the same thing for 5 selectors. You can group them like this.

h1.light,
h2.light,
.darkgrey a,
.darkestgrey a,
.button.light
 {
    color: #fff;
}

body,
.underline.light {
    background-color: #fff;
}

Use one line for margins.

h1 {
    margin-top: 20px 0;
}

h2 {
    margin: 0 0 20px 0;
}

.underline {
    margin: 20px auto 30px;
}

.button {
    margin: 20px auto 20px -160px;
}

.nextbutton {
    margin: 20px 0;
}

Use one line for paddings.

.container {
    padding: 30px 0;
}

.column.third {
    padding: 30px 0;
}

HTML

You should remove this from your head.

<meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">

Most search engines do not use the meta keywords for their algorithm top rankings anymore. From what I've heard, having the meta keywords can only count against you for SEO (Search Engine Optimization). Because I believe that search engines will still penalize a site for having false and or repetitive keywords. Yes, your keywords are correct, but there is no point in including them on websites anymore. http://en.wikipedia.org/wiki/Meta_element#The_keywords_attribute

The description is still used and is very important because it will likely show up when searching for your site. However, search engines may show something other than your description based on the users search keywords. The description should be more detailed and longer than just "3D Interactive Training".

<meta name="description" content="3D Interactive Training">

http://en.wikipedia.org/wiki/Meta_element#The_description_attribute

CSS

Instead of having 5 different rules all saying the same thing for 5 selectors. You can group them like this.

h1.light,
h2.light,
.darkgrey a,
.darkestgrey a,
.button.light
 {
    color: #fff;
}

body,
.underline.light {
    background-color: #fff;
}

Use one line for margins.

h1 {
    margin-top: 20px 0;
}

h2 {
    margin: 0 0 20px 0;
}

.underline {
    margin: 20px auto 30px;
}

.button {
    margin: 20px auto 20px -160px;
}

.nextbutton {
    margin: 20px 0;
}

Use one line for paddings.

.container {
    padding: 30px 0;
}

.column.third {
    padding: 30px 0;
}

HTML

You should remove this from your head.

<meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">

Most search engines do not use the meta keywords for their algorithm top rankings anymore. From what I've heard, having the meta keywords can only count against you for SEO (Search Engine Optimization). Because I believe that search engines will still penalize a site for having false and or repetitive keywords. Yes, your keywords are correct, but there is no point in including them on websites anymore. http://en.wikipedia.org/wiki/Meta_element#The_keywords_attribute

CSS

Instead of having 5 different rules all saying the same thing for 5 selectors. You can group them like this.

h1.light,
h2.light,
.darkgrey a,
.darkestgrey a,
.button.light
 {
    color: #fff;
}

body,
.underline.light {
    background-color: #fff;
}

Use one line for margins.

h1 {
    margin-top: 20px 0;
}

h2 {
    margin: 0 0 20px 0;
}

.underline {
    margin: 20px auto 30px;
}

.button {
    margin: 20px auto 20px -160px;
}

.nextbutton {
    margin: 20px 0;
}

Use one line for paddings.

.container {
    padding: 30px 0;
}

.column.third {
    padding: 30px 0;
}

HTML

You should remove this from your head.

<meta name="keywords" content="3D, interactive, virtual, simulations, training, games, gamification">

Most search engines do not use the meta keywords for their algorithm top rankings anymore. From what I've heard, having the meta keywords can only count against you for SEO (Search Engine Optimization). Because I believe that search engines will still penalize a site for having false and or repetitive keywords. Yes, your keywords are correct, but there is no point in including them on websites anymore. http://en.wikipedia.org/wiki/Meta_element#The_keywords_attribute

The description is still used and is very important because it will likely show up when searching for your site. However, search engines may show something other than your description based on the users search keywords. The description should be more detailed and longer than just "3D Interactive Training".

<meta name="description" content="3D Interactive Training">

http://en.wikipedia.org/wiki/Meta_element#The_description_attribute

added 677 characters in body
Source Link
CRABOLO
  • 948
  • 3
  • 8
  • 30
Loading
Source Link
CRABOLO
  • 948
  • 3
  • 8
  • 30
Loading