<div>
<img src="http://daveharned.com/images/grace_hopper_header.jpg" width="100%" alt="graphic of Grace Hopper by Charis Tsevis">
<!--
Grace Hopper graphic - Credit Charis Tsevis
Made for the book Gadgets, Games, Robots and the Digital World published by DK Books (Dorling Kindersley, Penguin Books, UK).
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0) scheme. http://creativecommons.org/licenses/by-nc-nd/3.0/legalcode
-->
</div>
<div class="container">
<div class="page-header">
<h1 id="header">The Life of "Amazing" Grace Hopper</h1>
</div>
<ul class="timeline">
<!-- Timeline item 1 : 1934 -->
<li>
<div class="timeline-badge">1934</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Education</h4>
</div>
<div class="timeline-body">
<p>In 1934, Grace was awarded a PhD in mathematics from Yale University, following her Master's from Yale and Bachelor's from Vassar. She then returned to Vassar to teach mathematics.</p>
</div>
</div>
</li>
<!-- Timeline item 2 : 1944 -->
<li class="timeline-inverted">
<div class="timeline-badge">1944</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">World War II</h4>
</div>
<div class="timeline-body">
<p>After enlisting in the Navy Reserve and completing her training at Smith College, Grace served as one of three principal programmers of the Mark I computer at Harvard.</p>
<hr>
<blockquote>
<p><strong>Letterman: </strong>"How did you know so much about computers then?"</p>
<p><strong>Hopper: </strong>"I didn't, it was the first one!"</p>
<footer>
<cite><a href="https://www.youtube.com/watch?v=1-vcErOPofQ">Late Night with David Letterman</a>, circa 1986</cite>
</footer>
</blockquote>
</div>
</div>
</li>
<!-- Timeline item 3 : 1949 -->
<li>
<div class="timeline-badge">1949</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Eckert–Mauchly Computer Corporation</h4>
</div>
<div class="timeline-body">
<p>Grace was hired as a senior mathemtician on the team devloping UNIVAC, the first commercial computer produced in the United States.</p>
<hr>
<div>
<img src="http://daveharned.com/img/img/univac_i.jpeg" width="100%" alt="a UNIVAC I control station, from the Museum of Science in Boston, Massachusetts.">By <a href="//commons.wikimedia.org/wiki/User:Daderot" title="User:Daderot">Daderot</a>
<!-- Public Domain, https://commons.wikimedia.org/w/index.php?curid=8894394 -->
</div>
</div>
</div>
</li>
<!-- Timeline item 4 : 1952 -->
<li class="timeline-inverted">
<div class="timeline-badge">1952</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Remington Rand</h4>
</div>
<div class="timeline-body">
<p>Grace developed the A-0 system, an arithmetic language and what is regarded to be the first compiler. This paved the way for new high-level language development.</p>
<hr>
<blockquote>
<p>"Nobody believed that. I had a running compiler and nobody would touch it. They told me computers could only do arithmetic."</p>
<footer>
<cite><a href="http://www.cs.yale.edu/homes/tap/Files/hopper-wit.html">The Wit and Wisdom of Grace Hopper</a></cite>
</footer>
</blockquote>
</div>
</div>
</li>
<!-- Timeline item 5 : 1959 -->
<li>
<div class="timeline-badge">1959</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">CODASYL</h4>
</div>
<div class="timeline-body">
<p>As a technical consultant to the Conference on Data Systems Languages, Grace was instrumental in defining the pivotal COBOL business language.</p>
<hr>
<div>
<img src="http://daveharned.com/img/img/cobol.jpg" width="100%" alt="COBOL language logo">
</div>
</div>
</div>
</li>
<!-- Timeline item 7 : 1983 -->
<li class="timeline-inverted">
<div class="timeline-badge">1983</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Naval honors</h4>
</div>
<div class="timeline-body">
<p>Continuing her Navy career, Grace served as Director of the Navy Programming Languages Group. After a joint resolution in the House of Representatives, she was promoted to the rank of Commodore by President Ronald Reagan (the designation later became Rear Admiral).</p>
<hr>
<div>
<img src="http://daveharned.com/img/img/navy_portrait.jpg" width="100%" alt="Commodore Grace M. Hopper, US Navy portrait">Credit James S. Davis - image released by the United States Navy with the ID <a rel="nofollow" class="external text" href="http://defenseimagery.mil/imagery.html#guid=f1a07fc90bc516cbf2426f45f804117be1c69d73">DN-SC-84-05971</a>
<!-- Public Domain, https://commons.wikimedia.org/w/index.php?curid=46498109 -->
</div>
</div>
</div>
</li>
<!-- Timeline item 8 : 1992 -->
<li>
<div class="timeline-badge">1992</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Death</h4>
</div>
<div class="timeline-body">
<p>Grace passed away at the age of 85, and was buried at Arlington National Cemetery with full military honors.</p>
</div>
</div>
</li>
<!-- Timeline item 9 : 1996 -->
<li class="timeline-inverted">
<div class="timeline-badge"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Legacy</h4>
</div>
<div class="timeline-body">
<p>Grace achieved many awards and distinctions in her lifetime including the the Defense Distinguished Service Medal, and the National Medal of Technology.</p>
<p>In 1996, the Navy launched the USS Hopper, an Arleigh Burke class destroyer. It was only the second U.S. Navy warship to be named after a female Navy officer.</p>
<p>Perhaps most famously, Grace is remembered for popularizing the term "debugging" when she fixed a computer glitch by literally removing a dead moth from the machine.</p>
</div>
</div>
</li>
</ul> <!-- end of timeline -->
</div>
<footer>
<div class="page-footer">
<h2>Read more about this extraordinary pioneer on <a href="https://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a>.</h2>
</div>
</footer>.page-header, .page-footer {
text-align: center;
}
blockquote {
background: #eee;
border-left: 5px solid #ddd;
}
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
background: white;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #84389c;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media (max-width: 767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
left: 15px;
margin-left: 0;
top: 16px;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.