11
\$\begingroup\$

I am fairly new to web development, and would like some feedback. It is HTML/CSS, with some JS (button hovers, anchor scrolling and image sliders) from elsewhere. Comments on best practices and any other suggestions would be great as I feel I'm probably doing a lot wrong, but specifically:

  1. I used different-colored containers that stretch the whole width of the page. Each container is inside a div which specifies the background color. Is this the best way to do it?

  2. Is there an easy way for me to vertically-center my text blocks, instead of adding lots of linebreak tags?

  3. A lot of my divs have multiple classes, e.g. "column last half image" and "centered larger highlight" - should this be avoided and if so what's the best way to go about this?

Link

HTML:

<!DOCTYPE html>

<html>
<head>

    <title>MVX Training | Welcome to the future of training</title>

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

    <link href='style.css' rel='stylesheet' type='text/css'>
    <link rel="icon" type="img/ico" href="images/favicon.ico">
    <link rel="image_src" href="screenshot.jpg" />

    <script src="js/jquery.min.js"></script>
    <script src="js/responsiveslides.min.js"></script>
    <script>
        $(function() {
            $(".rslides").responsiveSlides({
              auto: true,       // Boolean: Animate automatically, true or false
              speed: 700,       // Integer: Speed of the transition, in milliseconds
              timeout: 4000,    // Integer: Time between slide transitions, in milliseconds
              pager: false,     // Boolean: Show pager, true or false
              nav: false,       // Boolean: Show navigation, true or false
              maxwidth: "",     // Integer: Max-width of the slideshow, in pixels
            });
        });
    </script>

</head>
<body>

    <header>
        <div class="lightgrey">
            <div class="navcontainer">
                <div class="logo">
                    <img src="images/logo.png" />
                </div>
                <div class="navlinks">
                    <ul>
                        <li><a class="scroll" data-speed="700" href="#welcome">Welcome</a></li>
                        <li><a class="scroll" data-speed="1000" href="#features">Features</a></li>
                        <li><a class="scroll" data-speed="1400" href="#casestudies">Case Studies</a></li>
                        <li><a class="scroll" data-speed="1500" href="#development">Development</a></li>
                        <li><a class="scroll" data-speed="1600" href="#pricing">Pricing</a></li>
                        <li><a class="scroll" data-speed="1700" href="#getintouch">Get in Touch</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <div class="darkgrey">
        <div class="container">
            <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>
                <div class="underline light"></div>
                <p class="centered larger">MVX is an innovative new technology which leverages 3D gaming engines to provide immersive virtual training. 3D visuals and outcomes-focussed content are combined in a realistic 3D environment, allowing you to teach and assess operational procedures, hazard awareness and emergency scenario responses in an interactive and memorable way.</p><br />
                <center><img src="images/reel.png" /></center>
                <a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
            </div>
            <a class="scroll" data-speed="700" href="#features"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <a class="anchor" id="features"></a><h1>FEATURES</h1>
                <div class="underline"></div>
                <div class="column half">
                    <h2>SIMULATE EMERGENCY SCENARIOS</h2>
                    <p>Expose your personnel to realistic emergency and hazard scenarios so they can safely experience the potential consequences and dangers they can cause, and practise the appropriate responses to these emergencies.</p>
                </div>
                <div class="column half last image">
                    <img src="images/simulate_emergency_scenarios.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features2"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image rtl">
                    <img src="images/teach_consequences_effectively.png" />
                </div>
                <div class="column half last">
                    <a class="anchor" id="features2"></a><h2>TEACH CONSEQUENCES EFFECTIVELY</h2>
                    <p>Users can interact with the virtual 3D environment and make choices that will affect how their virtual character will fare, much like the real world. In these virtual environments, users can experience the consequences of those choices in a memorable way without the risk, and without the need to cease real operations.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features3"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features3"></a><h2>SITE FAMILIARISATION</h2>
                    <p>Our talented team of 3D artists can create realistic 3D representations of your plant, site or work environment - whether it be existing or conceptual. These can be created using photographs, videos, blueprints or 3D CAD models. Interacting and exploring within this virtual environment will allow users to become familiar with important locations around site, minimising risk and improving efficiency.</p>
                </div>
                <div class="column half last image rtl">
                    <br /><br />
                    <img src="images/site_familiarisation.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features4"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image rtl">

                </div>
                <div class="column half last">
                    <a class="anchor" id="features4"></a><h2>COMMUNICATE SAFETY CULTURE</h2>
                    <p>Our training modules are custom-tailored to teach your user outcomes and safety culture in the most effective way. These may be communicated and tested through animated storylines and conversations within the 3D environment, engaging and interactive minigames, and simulated emergency scenarios.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features5"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features5"></a><h2>VISUALISE COMPLEX PROCESSES</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
                <div class="column half last image rtl">
                    <img src="images/visualise_complex_processes.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features6"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <div class="column half image">

                </div>
                <div class="column half last">
                    <a class="anchor" id="features6"></a><h2>DETAILED USER REPORTING</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#features7"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <div class="column half">
                    <a class="anchor" id="features7"></a><h2>DEPLOYMENT OPTIONS</h2>
                    <p>(Removed for StackExchange char limit)</p>
                </div>
                <div class="column half last image rtl">
                    <br />
                    <img src="images/deployment_options.png" />
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#casestudies"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <div class="column">
                <a class="anchor" id="casestudies"></a><h1>CASE STUDIES</h1>
                <div class="underline"></div>
                <h2>WOODSIDE HEAT STRESS</h2>
                <ul class="rslides">
                  <li><img src="images/case-studies/woodside-1.jpg"></li>
                  <li><img src="images/case-studies/woodside-2.jpg"></li>
                  <li><img src="images/case-studies/woodside-3.jpg"></li>
                  <li><img src="images/case-studies/woodside-4.jpg"></li>
                  <li><img src="images/case-studies/woodside-5.jpg"></li>
                </ul>
                <p>To complement their existing Broome induction, Woodside required an additional module to teach inductees about the dangers of heat stress. The module covered several related topics ranging from PPE, alcohol restrictions, real examples of heat stress, assessing personal risk, first aid response, emergency response and incident reporting.</p>
                <p class="parabreak">&nbsp;</p>
                <p>Inductees are placed in various realistic scenarios, including emergency scenarios, in which they must apply the knowledge they have learnt throughout the module. They are taught to be aware of their own hydration/heat stress levels, as well as those of their co-workers.</p>
                <div class="quote">
                    <p>"The software developed by Sentient for Woodside's Kimberley induction program has provided workers with a more engaging and effective site induction."</p>
                    <div class="author">
                        <p>- Jim McQueenie / Health, Safety & Security Manager / Woodside Browse LNG Development</p>
                    </div>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#casestudies2"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightgrey">
        <div class="container">
            <div class="column">
                <br /><br /><br />
                <a class="anchor" id="casestudies2"></a><h2>ACID PLANT FILTER PRESS</h2>
                <ul class="rslides">
                  <li><img src="images/case-studies/acid-1.jpg"></li>
                  <li><img src="images/case-studies/acid-2.jpg"></li>
                  <li><img src="images/case-studies/acid-3.jpg"></li>
                  <li><img src="images/case-studies/acid-4.jpg"></li>
                  <li><img src="images/case-studies/acid-5.jpg"></li>
                  <li><img src="images/case-studies/acid-6.jpg"></li>
                  <li><img src="images/case-studies/acid-7.jpg"></li>
                </ul>
                <p>This training module was developed to teach complex procedures to new and existing staff at a plant dealing with hazardous chemicals. The procedures were taught by utilising three fundamental stages: Show, Interact, and Assess. Trainees were first shown the correct procedure, then were allowed to interact with the virtual scene to practise the procedure, and finally were assessed on what they had learnt.</p>
                <p class="parabreak">&nbsp;</p>
                <p>Visual animations, combined with an accurate and immersive 3D representation of the real site allowed trainees to familiarise themselves with the procedure and site before being physically inducted.</p>
                <div class="stat">
                    <p>&nbsp;</p>
                    <p>The company was able to reduce its training time from 3 days per trainee to just 1.</p>
                </div>
            </div>
            <a class="scroll" data-speed="700" href="#development"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="darkgrey">
        <div class="container">
            <a class="anchor" id="development"></a><h1 class="light">DEVELOPMENT</h1>
            <div class="underline light"></div>
            <div class="flowbox">Project start-up meeting (with client) to discuss requirements and deliverables</div>
            <div class="flowline"></div>
            <div class="flowbox">Customer delivers existing training material & other supporting documentation and assets</div>
            <div class="flowline"></div>
            <div class="flowbox">Create pre-visualisation (3D storyboard)</div>
            <div class="flowline"></div>
            <div class="flowbox right">Make adjustments</div>
            <div class="flowbox rounded">Client approves?</div>
            <p class="centered">Yes</p>
            <div class="flowline"></div>
            <div class="flowline"></div>
            <div class="flowbox">Develop any remaining 3D content</div>
            <div class="flowline"></div>
            <div class="flowbox">Implement animations and interactions</div>
            <div class="flowline"></div>
            <div class="flowbox">Implement training outcomes</div>
            <div class="flowline"></div>
            <div class="flowbox">Create a build and deliver to customer</div>
            <div class="flowline"></div>
            <div class="flowbox right">Make adjustments</div>
            <div class="flowbox rounded">Client approves?</div>
            <p class="centered">Yes</p>
            <div class="flowline"></div>
            <div class="flowbox">Project closure</div>
            <a class="scroll" data-speed="700" href="#pricing"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="lightestgrey">
        <div class="container">
            <a class="anchor" id="pricing"></a><h1>PRICING</h1>
            <div class="underline"></div>
            <p>As each module is customised, the pricing will vary depending on several factors. Below is an estimation of our average module prices. Please contact us directly for a specific quote.</p><br />
            <div class="column third lightgrey">
                <h2 class="centered">BASIC</h2>
                <div class="price"><br /><br /><br />15k</div>
            </div>
            <div class="column third lightgrey">
                <h2 class="centered">MEDIUM</h2>
                <div class="price"><br /><br /><br />50k</div>
            </div>
            <div class="column third last lightgrey">
                <h2 class="centered">COMPLEX</h2>
                <div class="price"><br /><br /><br />85k</div>
            </div>
            <div class="column third">
                <p class="centered">10-20 minutes of gameplay<br />
                Basic 3D environment and assets<br />
                Basic 3D animations<br />
                1-2 non-player characters<br />
                In-house voiceovers</p>
            </div>
            <div class="column third">
                <p class="centered">20-40 minutes of gameplay<br />
                Realistic 3D environment and assets<br />
                Realistic 3D animations<br />
                3-5 non-player characters<br />
                Professional voiceovers</p>
            </div>
            <div class="column third last">
                <p class="centered">40-60 minutes of gameplay<br />
                Realistic 3D environment and assets<br />
                Realistic 3D animations<br />
                6-10 non-player characters<br />
                Professional voiceovers</p>
            </div>
            <a class="scroll" data-speed="700" href="#getintouch"><div class="nextbutton">NEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
        </div>
    </div>

    <div class="darkgrey">
        <div class="container contact">
            <a class="anchor" id="getintouch"></a><h1 class="light">GET IN TOUCH</h1>
            <div class="underline light"></div>
            <p class="centered larger">See what you can achieve with MVX Training. Contact us for a free demo today.</p>
            <a href="#"><div class="button light">CONTACT US FOR A FREE DEMO</div></a>
            <p class="centered larger">Or call us on</p>
            <p class="centered larger highlight">+61 8 9240 7888</p>
        </div>
    </div>

    <div class="darkestgrey">
        <div class="container">
            <center><img src="images/sentient_logo.png" /></center>
            <p class="centered larger">204 Balcatta Road, Balcatta WA 6021</p>
            <p class="centered larger"><a href="http://sencom.com.au" target="_blank">www.sencom.com.au</a></p>
        </div>
    </div>

</body>

<script src="js/smooth-scroll.js"></script>

</html>

CSS:

/* ---------------------------------------------------------------

MVX TRAINING WEBSITE
URL: 
Company:
Year: 2014


------- SWATCHES USED: --------
Dark  backgrounds:      #1b1b1b
Darkest backgrounds:    #090909
Light backgrounds:      #eeeeee
Lightest backgrounds:   #f5f5f5
Dark text:              #1b1b1b
Light text:             #fff
Light grey text:        #9e9e9e
Orange highlights:      #f98c0b
-------------------------------

--------------------------------------------------------------- */


/* --------------------------- OPEN SANS --------------------------- */

/* Light */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Light-webfont.eot');
    src: url('fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: 300;
    font-style: normal;

}

/* Light Italic */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-LightItalic-webfont.eot');
    src: url('fonts/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: 300;
    font-style: italic;

}


/* --------------------------- GENERAL --------------------------- */

body {
    background-color: #fff;
}

a {
    outline: 0; 
}

a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

* {
    margin: 0;
    padding: 0;
}

/* --------------------------- FONTS --------------------------- */

p, body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-align: justify;
    line-height: 28px;
    color: #1b1b1b;
}

p a {
    color: #f98c0b;
    text-decoration: none;
}

p a:hover {
    text-decoration: underline;
}

.darkgrey p, .darkestgrey p {
    color: #9e9e9e;
}

p.larger {
    font-size: 16px;    
}

p.parabreak {
    line-height: 14px;
}

.quote {
    min-height: 100px;
    width: 60%;
    float: right;
    margin: 10px 120px 10px 10px;
    font-style: italic;
    color: #000;
    background: url('images/quote.png') 1.4em 1.6em no-repeat;
    padding: 10px 10px 10px 90px;
}

.author {
    font-style: normal;
}

.stat {
    min-height: 100px;
    width: 60%;
    float: right;
    margin: 10px 120px 10px 10px;
    font-style: italic;
    color: #000;
    background: url('images/stat.png') 1.4em 1.6em no-repeat;
    padding: 6px 10px 10px 90px;
}

h1 {
    letter-spacing: 2px;
    font-weight: 300;
    text-align: center;
    font-size: 36px;
    color: #1b1b1b;
    margin-top: 20px;
    margin-bottom: 20px;
}

h1 a {
    text-decoration: inherit;
    color: inherit;
}

h1.light {
    color: #fff;
}

h2 {
    letter-spacing: 2px;
    font-weight: 300;
    font-size: 22px;
    text-align: justify;
    margin-bottom: 20px;
}

h2.light {
    color: #fff;
}

.underline {
    background-color: #1b1b1b;
    width: 70px;
    height: 2px;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 30px;
}

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

.centered {
    text-align: center; 
}

.highlight {
    color: #f98c0b;
}

/* --------------------------- CONTAINERS --------------------------- */

.container {
    width: 960px;
    margin: 0 auto;
    padding: 0;
    padding-top: 30px;
    padding-bottom: 30px;
}

.container:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.nobottompadding {
    padding-bottom: 0px;
}

.container.contact {
    background-image: url('images/contact.png');
    background-repeat: no-repeat;
}

/* --------------------------- COLUMNS --------------------------- */

.column {
    width: 960px;
    float: left;
}

.column:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.column.third {
    float: left;
    margin-right: 20px;
    width: 306px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.column.last {
    margin-right: 0px;
    float: right;
}

.column.half {
    width: 460px;
    min-height: 300px;
    margin-top: 120px;
}

.column.rtl {
    direction: rtl;
}

.column.ltr {
    direction: ltr;
}

.column.image {
    margin: 0px;
}

/* --------------------------- COLORS --------------------------- */

.darkgrey {
    background-color: #1b1b1b;
}

.darkestgrey {
    background-color: #090909;
}

.lightgrey {
    background-color: #eeeeee;
}

.lightestgrey {
    background-color: #f5f5f5;
}

/* --------------------------- BUTTONS --------------------------- */

.button {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    font-size: 14px;
    border: solid 2px #f98c0b;
    display: inline-block;
    width: 240px;
    left: 50%;
    margin: 20px auto;
    margin-left: -160px;
    padding: 10px 40px 10px 40px;
    transition: all 0.2s linear;
}

.button:hover {
    width:260px;
    margin-left:-170px;
    -webkit-transition:500ms linear; 
}

.button.light {
    color: #fff;
}

.nextbutton {
    padding-top: -2px;
    float: right;
    text-align: right;
    font-size: 12px;
    width: 48px;
    height: 16px;
    background-image: url('images/arrow.png');
    background-repeat: no-repeat;
    margin-top: 20px;
    margin-bottom: 20px
}

.nextbutton a {
    color: inherit;
    text-decoration: none;
}

.darkgrey a, darkestgrey a {
    color: #fff;
}

.scroll {
    color: inherit;
    text-decoration: none;
}

/* --------------------------- NAVIGATION --------------------------- */

header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #eeeeee;
    margin: 0px;
}

.navcontainer {
    width: 960px;
    margin: 0 auto;
    height: 88px;
}

.navcontainer:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.navlinks {
    float: right;
    margin-right: 10px;
    padding-top: 28px;
}

ul li {
    text-transform: uppercase;
    font-size: 12px;
    display: inline;
    color: #1b1b1b;
    margin-left: 40px;
}

ul li a {
    color: inherit;
    text-decoration: none;
}

ul li a:hover {
    border-bottom: 2px solid #f98c0b;
    padding-bottom:4px;
}

.logo {
    float: left;
    margin: 0 auto;
    padding: 0px;
    height: 150px;
    width: 150px;
}

/* --------------------------- PRICING --------------------------- */

.price {
    font-size: 60px;
    text-align: center;
    margin: 30px 50px 10px 50px;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: 2px solid #f98c0b;
}

/* --------------------------- FLOWCHART --------------------------- */

.flowbox {
    text-align: center;
    color: #fff;
    width: 260px;
    border: 2px solid #f98c0b;
    margin: auto;
    padding: 20px;
}

.flowbox.right {
    float: right;
    display: inline;
}

.flowbox.rounded {
    width: 160px;
    border-radius: 50%;
}

.flowline {
    font-size: 0;
    width: 3px;
    height: 20px;
    background-color: #3b3b3b;
    margin: auto;
}

/* --------------------------- SLIDER --------------------------- */

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
}

.rslides li:first-child {
  position: relative;
  float: left;
}

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  margin-bottom: 20px;
}
Improve this question
\$\endgroup\$

2 Answers 2

Reset to default
11
\$\begingroup\$

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

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 */
}

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.

Improve this answer
\$\endgroup\$
7
\$\begingroup\$

Here are some quick and non-exhaustive comments:

Wrong usage of br

Your use of br is wrong, you should use margin or padding for that.

For example, to have a fixed menu just put the other content on a div, and give that div margin-top.
(Or you could hack it with header+* { margin-top: 40px; }, or...)

See the examples in http://developers.whatwg.org/text-level-semantics.html#the-br-element
, where this is stated:

While line breaks are usually represented in visual media by physically moving subsequent text to a new line, a style sheet or user agent would be equally justified in causing line breaks to be rendered in a different manner, for instance as green dots, or as extra spacing.

br elements must be used only for line breaks that are actually part of the content, as in poems or addresses.

(...)

If a paragraph consists of nothing but a single br element, it represents a placeholder blank line (e.g. as in a template). Such blank lines must not be used for presentation purposes.

Wrong usage of &nbsp;

Similar to the suggestion about br.

For example, remove the &nbsp;s from div.nextbutton, and use css to put everything in place: .nextbutton { padding-right: 18px; /*16+2*/ background-position: right center;}

Invalid HTML

Your HTML is not valid.

Also, I cannot stress this enough: you should use UTF8 as your default encoding, and not ASCII.

Improve this answer
\$\endgroup\$

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.