George Washington Carver tribute page

Yeah, it's another person wandering through from freeCodeCamp. Sorry.

That aside, I've got a tribute page to George Washington Carver, developed as a project for the above. I'm generally happy with the way it looks, I just want to see if it follows proper conventions, or at the very least, is somewhat readable. I'm a novice to front-end stuff, but even I know how important that is, especially since this is my first step towards building a portfolio.

Concerns

As I said, I'm generally happy with how it turned out. I have noticed one issue though, in that the SVG line separator seems to act a bit wonky on smaller mobile devices (tested on Android Nougat).

So yeah

Again, I'm pretty satisfied with how it turned out. Still, as I'm developing my own coding style, I want to make sure it's update- and multidev-friendly. Any suggestions to blossom into a better hacker are appreciated.

If you have any issues with the actual, biographical information on the page, feel free to say something as well, just know that I'm primarily concerned with the structure side of things.

That'll be all!



// Nothing to see here.
body {
background-color: #222222
}

h1 {
font-family: "Cinzel";
font-size: 4.3vw; /Tweaked to hell and back./
white-space: pre;
color: #CCCCCC;
}

h3 {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
color: #CCCCCC
}

.off-white {
fill: #CCCCCC
}

p, ul {
color: #BABABA;
font-family: "Roboto";
font-size: 18px;
padding-left: 7.5vw;
padding-right: 7.5vw;
}

#to-the-wikipedia {
background-color: #33AA66;
color: #FFFFFF;
font-size: 16px;
font-weight: 700;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
`



G E O R G E W A S H I N G T O N C A R V E R
"When you do common things in life in an uncommon way, you command the attention of the world."








tag so eh -->

George Washington Carver, born in the 1860s, was a

head-Element

Title

Your're missing the one mandatory element in the head-element: title. I recommend inserting it after the charset:

George Washington Carver

JavaScripts

To avoid waiting for the JavaScript to load, you should move the `-elements to the bottom of the page:

Google Fonts

You can reduce the requests by loading multiple fonts at once. Use | to separate each font:

Content

Heading

You have a h1-followed by a h3. Why didn't you use a h2 instead? Headings are structured hierarchically. Try to avoid gaps.

To keep track of the document's outline, the online HTML5 outliner and the Google Chrome extension can be helpful.

Instead of spreading words like G E O R G E, write it normally and use CSS to create the effect:

h1 {
    letter-spacing: 10px;
}

Centered Text

You're using .text-center on almost every element. You get cleaner code, when you apply the class to the outer container and set .text-left on the few elements that aren't centered.

IDs

You're using id="to-the-wikipedia" on one button. Is it really necessary to use an id for that? You can easily add your styles using a second class, like:

As a note: The content of this link is "Learn more". To make this a bit more user-friendly, I would suggest adding a title-attribute, like "Learn more about George Washington on Wikipedia.".

Emphasis

I have the feeling that you emphasis almost all your textual content. It's too much. If it's just for styling, use CSS instead. If you want to put emphasis into something, use it rarely and read about the differences between the elements in detail: "b vs strong? i vs em? What’s the Difference?".

Quote

h3 is not the right element for a quote. Instead use blockquote:

    He could have added fortune to fame …

    George Washington

Inconsistencies in Code-Style

• You're using " and ' on attribute-values. I recommend to stick with one.






• You're using https:// and // to address the protocol. Also stick to one here.

• You're using inline-styles very often. Try to avoid them.

• You're using style="text-align: center;" when you cleary have used .text-center` before.

StackExchange Code Review Q#152065, answer score: 3