4
\$\begingroup\$

I recently created this website for use as a portfolio because I thought it would help set me apart from other internship applicants next summer. I created this website using a mixture of pre-existing bootstrap classes and my own CSS style sheet.

I would be very grateful if anyone would be willing to offer any advice on the design of the website or on HTML coding practices.

    <!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--- Why are you looking down here? -->
    <title>Christopher Diehl Portfolio</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <!-- Navigation -->
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
    <nav id="sidebar-wrapper">

        <ul class="sidebar-nav">

            <li class="sidebar-brand">
                <a id="menu-close" href="#" class=" btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
                <a href="#top"  onclick = "$('#menu-close').click();" >Home</a>
            </li>
            <li>
                <a href="#services" onclick = "$('#menu-close').click();"  >Languages</a>
            </li>
            <li>
                <a href="#interests" onclick = "$('#menu-close').click();"  >Interests</a>
            </li>
            <li>
                <a href="#about" onclick = "$('#menu-close').click();"  >About</a>
            </li>
            <li>
                <a href="#contact" onclick = "$('#menu-close').click();"  >Contact</a>
            </li>
        </ul>
    </nav>

    <!-- Header -->
    <header id="top" class="header">
        <div class="text-vertical-center">
            <h1>Christopher Diehl</h1>
            <h3>Software Developer &amp; Student</h3>
        </div>
    </header>

    <!-- About -->
    <section  class="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2>Bill Gates</h2>
                    <p class="lead">Software is a great combination between artistry and engineering.</p>
                </div>
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Services -->
    <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
    <section id="services" class="services bg-primary">
        <div class="container">
            <div class="row text-center">
                <div class="col-lg-10 col-lg-offset-1">
                    <h2>Favorite Languages</h2>
                    <hr class="small">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-key fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Java</strong>
                                </h4>
                                <p>Experience using Java for:<br> Encryption, Servlet Creation, Data Manipulation, Database Management.</p>
                                <a href="#" class="btn btn-light">Learn More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>HTML</strong>
                                </h4>
                                <p>Knowledge of Website Development..</p>
                                <a href="#" class="btn btn-light">Learn More</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-gear fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Assembly</strong>
                                </h4>
                                <p>Programmed Simon Says game, calculator, and more in Mips <br> Mips CPU design in Logisim</p>
                                <a href="#" class="btn btn-light">Learn more</a>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <div class="service-item">
                                <span class="fa-stack fa-4x">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-shield fa-stack-1x text-primary"></i>
                            </span>
                                <h4>
                                    <strong>Willigness To Learn</strong>
                                </h4>
                                <p>Always excited to learn and am currently delving into C and Python</p>
                                <a href="#" class="btn btn-light">Learn More</a>
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->
                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Callout -->
    <aside class="callout">
        <div class="text-vertical-center" >

            <h1 class= "orange-text" >Studying Comp Sci at Rutgers<br>Employer: Dulles Technology Partners &copy;</h1>
        </div>
    </aside>

    <!-- Portfolio -->
    <section id="portfolio" class="portfolio">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <h2 id="interests" >Interests</h2>
                    <hr class="small">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="portfolio-item" style ="vertical-align: middle">
                                    <img alt="interests" class="img-portfolio img-responsive img-rounded" id="car-picture" src="http://orig12.deviantart.net/e419/f/2009/101/9/6/honda_s2000_wallpaper_by_speedx07.jpg" >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="portfolio-item">
                                    <img alt="interests" class="img-portfolio img-responsive img-rounded picture" src="http://www.blogcdn.com/massively.joystiq.com/media/2012/02/blizz-1330538518.jpg">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="portfolio-item"> 
                                <img alt="interests" class="img-portfolio img-responsive img-rounded picture" src="https://sitespex.com/wp-content/uploads/2015/05/ubuntu.jpeg">   
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="portfolio-item">
                                <img  alt="interests" class="img-portfolio img-responsive img-rounded picture" src="http://people.ucsc.edu/~jlolonis/snow_cat.jpg">
                            </div>
                        </div>
                    </div>
                    <!-- /.row (nested) -->

                </div>
                <!-- /.col-lg-10 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container -->
    </section>

    <!-- Call to Action -->
    <aside class="call-to-action bg-primary">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h1>About</h1>
                    <h4 id ="about">Christopher is currently studying Computer Science at Rutgers- New Brunswick with the intent of fulfilling a concentration in Computer Security. <br>He is currently employed by Dulles Technology Corporation as a Software Developer in New Jersey. <br>For more information on his skills and samples of his work follow the links below. </h4>
                </div>
            </div>
        </div>
    </aside>



    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <h4><strong>Christopher Diehl</strong>
                    </h4>
                    <p id = "contact">Flemington<br>New Jersey</p>
                    <ul class="list-unstyled">
                        <li><i class="fa fa-phone fa-fw"></i> (570) 421-2638</li>
                        <li><i class="fa fa-envelope-o fa-fw"></i>  <a href="diehl.chris@rocketmail.com">diehl.chris@rocketmail.com</a>
                        </li>
                    </ul>
                    <br>
                    <ul class="list-inline">
                        <li>
                            <a href="https://www.linkedin.com/profile/view?id=338507614"><i class="fa fa-linkedin fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://github.com/ChristopherDiehl"><i class="fa fa-github fa-fw fa-3x"></i></a>
                        </li>
                        <li>
                            <a href="https://www.facebook.com/chris.diehl.35"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
                        </li>
                    </ul>
                    <hr class="small">
                    <p class="text-muted">Copyright &copy; Christopher S. Diehl 2015</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script>
    // Closes the sidebar menu
    $("#menu-close").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Opens the sidebar menu
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#sidebar-wrapper").toggleClass("active");
    });

    // Scrolls to the selected menu item on the page
    $(function() {
        $('a[href*=#]:not([href=#])').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
    </script>
    <!-- Makes Interest pictures same hight-->
    <script>
    $(window).load(function() {
        var pictureHeight = $("#car-picture").height();
        $(".picture").css('height', pictureHeight+ "px");
        //$("#menu-bar").css("padding-top", BannerpadSpace);
    })
    $(window).resize(function(){
        pictureHeight = $("#car-picture").height();
        $(".picture").css('height', pictureHeight+ "px");
    })
    </script>
</body>

</html>

The CSS file I made for the project:

body {
    width: 100%;
    height: 100%;

}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;

}

.text-vertical-center {
    display: table-cell;
    text-align: center;

}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 3.3em;
    font-weight: 500;
    vertical-align: middle;
    padding-top: 2%;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

.btn-light {
    border-radius: 0;
    color: #333;
    background-color: rgb(255,255,255);
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #333;
    background-color: rgba(255,255,255,0.8);
}

/* Custom Horizontal Rule */

hr.small {
    max-width: 100px;
}

/* Side Menu */

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background: #222;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-toggle {
    z-index: 1;
    position: fixed;
    top: 0;
    right: 0;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.toggle {
    margin: 5px 5px 0 0;
}

/* Header */

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(http://www.jpdirollphotography.com/Galleries/Pittsburgh/Skyline/i-t2BmHTp/1/XL/Black%20and%20Gold%20Fog%20Pittsburgh%20Clemente%20Bridge-XL.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: #404040   ;


}

/* About */
.bg-primary{
    background-color: #FF9900;
}
.callout{
 vertical-align: middle;

}
.about {
    padding: 50px 0;
}

.fa-linkedin{
    color: #404040  ;
}
.fa-github{
    color: #404040  ;
}
.fa-facebook{
    color: #404040  ;
}
/* Services */
.fa-gear{
    color: #404040 ;
}
.fa-compass{
    color: #404040 ;
}
.fa-flask{
 color: #404040 ;
}
.fa-key{
 color: #404040 ;
}
.fa-cloud{
 color: #404040 ;
}
.fa-shield{
    color: #404040 ;
}
.services {
    padding: 50px 0;
}

.service-item {
    margin-bottom: 30px;
}

/* Callout */

.callout {
    display: table;
    width: 100%;
    height: 400px;
    vertical-align: middle;
    background: url(http://img03.deviantart.net/d652/i/2013/002/5/3/turtle_by_sweetlittlesmiles-d5q7bm5.png) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: white;
    background-color: #404040;
    padding-top: 7%;
}

/* Portfolio */

.portfolio {
    padding: 50px 0;
}

.portfolio-item {
    margin-bottom: 30px;
}

.img-portfolio {
    margin: 0 auto;
}

.img-portfolio:hover {
    opacity: 0.8;

}

/* Call to Action */

.call-to-action {
    padding: 50px 0;
}

.call-to-action .btn {
    margin: 10px;
}



footer {
    padding: 100px 0;
}
\$\endgroup\$
  • \$\begingroup\$ I must say, not a fan of that scrolling:content ratio. \$\endgroup\$ – NightShadeQueen Aug 11 '15 at 15:35
  • \$\begingroup\$ More will be added in the future, this is the initial creation. I intend to add a project section as well as fill out the about me. @NightShadeQueen \$\endgroup\$ – Turtle Aug 11 '15 at 15:36
5
\$\begingroup\$

Quotations

You have a quotation from Bill Gates, but you're not using either of the quotation elements (q or blockquote).

Subheadings

Using hn elements to markup subheadings is such a common misuse of the elements that the W3C wrote up an article on the subject.

<h1>Christopher Diehl</h1>
<h3>Software Developer &amp; Student</h3>

HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines. Here are the suggested alternatives.

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

source: http://www.w3.org/TR/html5/common-idioms.html#sub-head

Even if you weren't using the markup for subheadlines, jumping from h1 to h3 (skipping over h2) is considered incorrect.

Excessive Markup

There's no reason to add an extra element here, just style your h4 elements to look how you actually want them to look and avoid the additional presentational markup.

<h4>
    <strong>HTML</strong>
</h4>

hr is dead

The hr element made sense back before we had CSS or the fantastic HTML5 sectioning elements. Now it's just a relic that doesn't really serve a purpose in modern HTML documents.

<h2>Favorite Languages</h2>
<hr class="small">

You can get the same effect with just CSS:

h2 {
  text-align: center;
}
h2:after {
  display: block;
  content: '';
  border-bottom: 1px solid;
  width: 5em;
  margin: 1em auto;
}

Unsemantic class names & inline CSS

What's the difference between class="orange-text" and style="color: orange"? Pretty much nothing from a semantic standpoint and they're both terrible from a maintenance standpoint. If your color scheme changes from orange to blue, how fun is it going to be to go back and change all of those instances? Use class names that describe the element. What's it's purpose? Why does it look different from the surrounding content?

Content images with no appropriate alt text

For all of your "interests", you have the same alt text for all of your images. Makes for some very boring content for anyone who cannot see the images (the blind, anyone using the Lynx browser, or anyone using a mobile device with images disabled to conserve bandwidth).

<img alt="interests" class="img-portfolio img-responsive img-rounded picture" src="http://people.ucsc.edu/~jlolonis/snow_cat.jpg">

Email link

The correct way to link to your email address is by prefixing it with mailto:. What you have is just a relative URL to a page that doesn't exist.

<a href="mailto:me@example.com">me@example.com</a>

Empty elements

<div class="service-item">
    <span class="fa-stack fa-4x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>

This is a very common idiom used by a lot of CSS libraries that I do not agree with. You should always avoid having empty elements in your markup. Use before/after pseudo elements for this purpose if it is purely decorative and not actual content.

Design & Usability

I don't normally talk about the overall design unless it severely impacts the usability of the page. I think you did a great job with the colors: the contrast between the orange and gray really enhances the page.

However, you have some very wide content ("About" section and your Bill Gates quote). Very long lines decrease the readability of the content and cause eye fatigue.

\$\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.