4
\$\begingroup\$

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;
}
<head>
  <meta charset="utf-8"> <!-- I like to be thorough. -->

<!-- Bootstrap and jQuery externally hosted for now. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- And add Cinzel and Roboto. Thanks, G Team! -->
<link href='//fonts.googleapis.com/css?family=Cinzel' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<!-- Everything below this is *technically* the body, but the IDE I had to use technically considers the main editor fields the body. It also behind-the-scenes does things like DOCTYPEs. Sorry if that really annoys you, since I'm not going through and indenting EVERYTHING just to fix that for this one isolated case. -->

<body>
<!-- So, methinks I'll be making a tribute to... George Washington Carver. 

So first we'll get a high-resolution lithograph of him from the Wikimedia Commons...
-->
<div class="container-fluid">
  <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/2/2a/George_Washington_Carver_c1910.jpg">
  <h1 class="text-center"><b>G E O R G E   W A S H I N G T O N   C A R V E R</b></h1> <!-- I'm not familiar with manual kerning yet. If you'd prefer manual kerning over 'lazy' use of spaces and preserved whitespace, let me know. -->
  <h3 class="text-center"><em>"When you do common things in life in an uncommon way, you command the attention of the world."</em></h3>
  <!-- Inline SVG coming! Beware a giant chunk of unintelligible floats for a line separator! -->
  <svg style="display:block; margin-top: 8px; margin-right: auto; margin-bottom: 8px; margin-left: auto;" height="24" viewBox="0 -158 1024 1000" width="525" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(1780.1542,5.0000001e-6)">
      <path class="off-white" d="m-1723.3151,240.40198c29.9202-79.73892 76.139-153.60611 136.3513-213.9766 46.1798-46.29041 100.8487-84.53979 161.4106-109.51025 50.3991-20.8608 104.8404-32.17217 159.4292-32.10618 54.5888-.06599 109.03,11.24538 159.4291,32.10618 60.5619,24.97047 115.23082,63.21984 161.41054,109.51025 60.21237,60.37049 106.43114,134.23767 136.35126,213.97659 9.73883,56.59128 14.55276,114.24763 11.02648,171.64507-1.68692,27.66698-5.30504,55.22507-11.02648,82.34995-11.25191,45.31233-31.22657,88.48005-58.87026,126.12936-31.04654,42.50271-71.41484,77.79433-116.45972,104.82876-54.44782,32.71319-115.42402,53.83902-177.86182,64.83198-72.5117,12.68299-147.3651,11.99264-219.6094-2.16262-61.3109-12.08178-120.9898-34.09558-173.9895-67.43177-43.8386-27.53835-82.8793-63.12839-112.6757-105.57753-25.986-36.87829-44.8128-78.75048-55.3637-122.60252-10.9583-48.75502-17.2782-98.79455-15.4924-148.82521 1.2114-34.86316 6.4231-69.61201 15.9405-103.18546zm761.98496,101.59799h-609.58786c-.0414,43.61016 7.159,87.54256 23.8966,127.94783 15.0905,36.70744 38.161,70.13553 67.3649,97.03404 34.4165,31.87048 76.8843,54.55343 121.9428,67.23644 65.2151,18.37082 136.0196,16.64147 200.1507-5.3019 42.6625-14.58395 82.325-38.50952 114.0212-70.69197 27.771-28.03924 49.12266-62.27099 62.62002-99.32688 13.69849-37.32615 19.61521-77.22436 19.59164-116.89756z"/>
      <path class="off-white" d="m-12009.954,291.20096 9728.0087-406.392c91.0849-.31806 183.8449,20.61973 261.2581,69.90215 75.3147,47.17706 132.9389,119.67106 167.54,201.07654 11.8874,28.10635 22.0305,57.12703 28.6711,86.91585 9.7541,83.48265 11.3283,168.31344-.278,251.69356-32.2193,95.14364-96.9738,178.74145-180.1597,234.86648-71.4097,48.27681-158.407,74.18348-244.7107,69.25556l-9760.3295-354.92114c-43.686-.47093-87.996-6.6583-128.57-23.44462-18.554-8.2637-38.439-19.48613-46.653-39.13637-5.161-14.32418-2.203-30.67662 4.383-44.04529 11.753-22.19363 36.762-32.57199 60.023-37.92252 36.306-8.11574 73.826-7.71294 110.817-7.8482zm9982.0038,50.79901h-6299.0762c-.6224,25.25597 13.3076,49.07865 33.4697,63.64825 31.5096,23.12516 70.9249,32.01208 109.1309,36.18773 24.3182,2.25848 48.7743,1.82364 73.1635,2.74819l5829.317,151.41086c59.7559.29844 121.0882-16.61425 167.7452-55.017 44.171-35.63484 72.1508-88.76528 81.5867-144.30955 3.195-18.03434 4.6636-36.35866 4.6632-54.66848z"/>
      <path class="off-white" d="m9473.6455,291.20096-9728.01006-406.392c-91.08488-.31806-183.84486,20.61973-261.25797,69.90215-75.31468,47.17707-132.93886,119.67108-167.53996,201.07654-11.88736,28.10636-22.03051,57.12703-28.67101,86.91585-9.75392,83.48267-11.32794,168.3134.27795,251.69356 32.21934,95.14362 96.97376,178.74144 180.15968,234.86648 71.40964,48.27682 158.40694,74.18348 244.71065,69.25556l9760.33072-354.92114c43.6863-.47093 87.9959-6.65829 128.5701-23.44462 18.5537-8.2637 38.4384-19.48612 46.6527-39.13637 5.1617-14.32417 2.2033-30.67661-4.3826-44.04529-11.7529-22.19364-36.7618-32.57199-60.0231-37.92252-36.3063-8.11573-73.8256-7.71293-110.8171-7.8482zm-9982.00506,50.79901h6299.07736c.6224,25.25598-13.3076,49.07866-33.4698,63.64825-31.5096,23.1252-70.925,32.01209-109.1311,36.18773-24.3183,2.25848-48.7744,1.82364-73.1637,2.74819l-5829.31776,151.41086c-59.75584.29844-121.08811-16.61426-167.74513-55.017-44.17102-35.63484-72.15073-88.76529-81.58668-144.30955-3.19494-18.03434-4.66361-36.35866-4.66319-54.66848z"/>
    </g>
  </svg>
<!-- Image off Pixabay, modified by minor CSS. I SPENT TWO SODDING HOURS ON A SINGLE LINE SEPARATOR AND I HATE MYSELF FOR IT but now I have a working knowledge of the <svg> tag so eh -->
  <p class="text-center">
  George Washington Carver, born in the 1860s, was an incredible man. Inventor, scholar, and all-around exemplary human being, white men of the time considered him the pinnacle of his race, bestowing upon him the power to close the divide between them.
  </p>
  <div style="text-align: center;">
    <a class="btn" id="to-the-wikipedia" href="https://en.wikipedia.org/wiki/George_Washington_Carver">LEARN MORE</a>
  </div>
  <p class="text-center">
    Let's take a look at the story of his life:</p>
    <ul>
      <li><b>1860-1864:</b> Carver was born into slavery. [Exact date unknown.]
        <ul style="padding-left: 3.75vw margin-right: -7.5vw">
          <li>One week after, his family was captured by night raiders. George's brother James was hidden from them. Only George was found.</li>
        </ul>
      </li>
      <li><b>1865-1886:</b> Slavery abolished, Carver recieves education from several schools across the country.</li>
      <li><b>1886-1890:</b> Carver applies to multiple colleges until being allowed into Simpson College in Iowa.</li>
      <li><b>1891:</b> Carver attends Iowa State Agricultural College, their first black student, as a botanist.</li>
      <li><b>1896:</b> Carver obtains his Master's and begins teaching at Tuskegee Institute.</li>
    </ul>
  <p class="text-center">
    Carver spent his 47 years of tenure at the institute teaching crop rotation, researching alternative crops, and creating highly pratical bulletins for farmers around the country. In 1921, he gave a speech to Congress asking for a tariff on imported peanuts. He was highly successful and became famous.
    
    He spent the final 20 years of his life preaching the good will of race relations, Catholicism, and, of course, good agricultural practices.<br /><br /> In 1938, he donated nearly $60,000 (worth over a million today) to start the George Washington Carver Foundation at Tuskegee, so he may have a legacy to further the goals he had in life. Just but a few years later, on January 5th, 1943, he died of complications from a bad fall down some stairs.<br /><br />His paragon attitude and generous personality were reflected in the quote on his headstone:
  </p>
  <h3 style="margin-bottom: 100px"><em>"He could have added fortune to fame, but caring for neither, he found happiness and honor in being helpful to the world."</em></h3>
  <div style="background-color: #383838; color: #CCCCCC; padding-top: 20px; padding-bottom: 20px;">
    <p class="text-center" style="font-size: 10px;">Page created by Jared Albertson</p>
  </div>
</div>

</body>

And here is a better preview.

\$\endgroup\$
3
\$\begingroup\$

head-Element

Title

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

<meta charset="utf-8">
<title>George Washington Carver</title>

JavaScripts

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Google Fonts

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

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Roboto+Condensed:400,400i" rel="stylesheet">

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:

<a href="" class="btw btn-wikipedia"></a>

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:

<blockquote>
    He could have added fortune to fame …

    <cite>George Washington</cite>
</blockquote>

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.
\$\endgroup\$
  • \$\begingroup\$ As for the <head> thing, CodePen is interesting like that. It crams in all the vital/standard stuff into the head behind-the-scenes, and I'm only learning everything they put in there now. I didn't even need the charset, turns out, and they even have quick buttons to get libs like Bootstrap and [insert popular JS library here]. The ' for the attribute value. I only see it when I fetched Cinzel, and have no idea how it got there. I almost exclusively use " for that stuff, so thanks for pointing it out. text-align: center; is an artifact from when the anchor was a button. --> \$\endgroup\$ – Papayaman1000 Jan 9 '17 at 13:05
  • \$\begingroup\$ [Cont'd] Where did I use // on its own for a link? | Thanks for telling me how to kern. | The ID was pre-mature optimization. My bad. | Neat about G Fonts. I'll keep that in mind. | I honestly didn't know <blockquote> was a thing outside of SE. Thanks for notifying me of its existence. | I have no idea why I chose h3 over h2 (ignoring blockquotes for a sec). | Thanks for the note on emphasis. I'm keeping the quotes italicized, but from now on I'll differentiate from <em> and <i>, simply because I imagine it makes a difference to screen readers. | Thanks for the JS tip. \$\endgroup\$ – Papayaman1000 Jan 9 '17 at 13:23
  • \$\begingroup\$ Ultimately, this is very solid and thorough. Thanks for helping me better my footing. \$\endgroup\$ – Papayaman1000 Jan 9 '17 at 13:23
  • \$\begingroup\$ One time you used //fonts.googleapis.com, the other https://fonts.googleapis.com. If you want the quote to be in italics, you can simply use blockquote { font-style: italic; }. Well, it's nice to have a tool like codepen, but in the end you have to create the skeleton of your page yourself. Especially when you try to create maintainable code, you'll end up having your own boilerplate code for things like scripts and the head-part. Glad I could throw in some thoughts that might help you. \$\endgroup\$ – insertusernamehere Jan 9 '17 at 14:37
  • \$\begingroup\$ I do actually use my own boilerplate for basic <head> stuff (which I prefer to use!), it's just that I'm forced to host it through CodePen for the project, and they have their own. It's not bad, but again, I do prefer my own. On the google font URL side, I just copied them wholesale from the website. If I somehow missed the https: when I selected it (but nothing else), I'm amazed at how fortunately unfortunate I was. \$\endgroup\$ – Papayaman1000 Jan 9 '17 at 14:48

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.