Does my very ugly website violate any general tenants of graphic design?

I'm learning how to use AngularJS (a Javascript framework used in web development), so I decided to throw together a website to test out some of its features. The website is mostly comprised of static, expository content, with a few examples of the framework's features in-action.

My problem is that the website looks really ugly, and I want to develop a more comprehensive understanding of exactly why this is so ugly. Here's a screenshot:

These are the steps I took to produce this somewhat hideous-looking website:

• I looked through the Google Fonts database for a nice-looking, simple sans-serif font to incorporate into the project.


• I wanted to find a balanced color scheme (I don't know anything about color theory) so I started with a simple olive green, and used variations of the initial color (based on its hue/saturation/lighting values) to style distinct sections of the website, navigation links, and headers.

I think the end-result looks pretty sloppy.

Are there any general tenants of graphic design that my website violates? Perhaps with respect to the text, color, and/or layout proper?

Note: The horizontal rule is *especially* ugly, but this was just a test to see if I could make a custom `<hr>` against a transparent background-image.