Personal portfolio website

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.

`







Christopher Diehl Portfolio


























Home


-
Languages


-
Interests


-
About


-
Contact







Christopher Diehl
Software Developer & Student








Bill Gates
Software is a great combination between artistry and engineering.













Favorite Languages









Java


Experience using Java for:
Encryption, Servlet Creation, Data Manipulation, Database Management.
Learn More

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.

Christopher Diehl
Software Developer & Student

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.

    HTML

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.

Favorite Languages

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).

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.

me@example.com

Empty elements

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.

StackExchange Code Review Q#100576, answer score: 5