HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<article>
<header>
<img src="http://labs.jensimmons.com/2016/examples/images/GraceHopper.jpg">
<div class="headlines"><div>
<h1>Grace Hopper</h1>
<h4>December 9, 1906 – January 1, 1992</h4>
<h6>invented the first compiler</h6>
<h6>popularized the idea of programming languages</h6>
<h6>coined the term "debugging"</h6>
</div></div>
</header>
<section>
<p>Grace Murray Hopper (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language. She popularized the idea of machine-independent programming languages, which led to the development of COBOL, one of the first modern programming languages. She is credited with popularizing the term "debugging" for fixing computer glitches (inspired by an actual moth removed from the computer). The U.S. Navy destroyer USS Hopper (DDG-70) is named for her, as was the Cray XE6 "Hopper" supercomputer at NERSC.</p>
<h2>World War II</h2>
<p>In 1943, during World War II, Hopper obtained a leave of absence from Vassar and was sworn into the United States Navy Reserve, one of many women to volunteer to serve in the WAVES. She had to get an exemption to enlist; she was 15 pounds (6.8 kg) below the Navy minimum weight of 120 pounds (54 kg). She reported in December and trained at the Naval Reserve Midshipmen's School at Smith College in Northampton, Massachusetts. Hopper graduated first in her class in 1944, and was assigned to the Bureau of Ships Computation Project at Harvard University as a lieutenant, junior grade. She served on the Mark I computer programming staff headed by Howard H. Aiken. Hopper and Aiken coauthored three papers on the Mark I, also known as the Automatic Sequence Controlled Calculator. Hopper's request to transfer to the regular Navy at the end of the war was declined due to her age (38). She continued to serve in the Navy Reserve. Hopper remained at the Harvard Computation Lab until 1949, turning down a full professorship at Vassar in favor of working as a research fellow under a Navy contract at Harvard.</p>
<h2>UNIVAC</h2>
<p>In 1949, Hopper became an employee of the Eckert–Mauchly Computer Corporation as a senior mathematician and joined the team developing the UNIVAC I. In the early 1950s, the company was taken over by the Remington Rand corporation, and it was while she was working for them that her original compiler work was done. The compiler was known as the A compiler and its first version was A-0.</p>
<p>In 1952 she had an operational compiler. "Nobody believed that," she said. "I had a running compiler and nobody would touch it. They told me computers could only do arithmetic."</p>
<p>In 1954 Hopper was named the company's first director of automatic programming, and her department released some of the first compiler-based programming languages, including MATH-MATIC and FLOW-MATIC.</p>
<aside class="pullquote">“Nobody believed that I had a running compiler, and nobody would touch it. They told me computers could only do arithmetic.”</aside>
<h2>COBOL</h2>
<p>In the spring of 1959, a two-day conference known as the Conference on Data Systems Languages (CODASYL) brought together computer experts from industry and government. Hopper served as a technical consultant to the committee, and many of her former employees served on the short-term committee that defined the new language COBOL (an acronym for COmmon Business-Oriented Language). The new language extended Hopper's FLOW-MATIC language with some ideas from the IBM equivalent, COMTRAN. Hopper's belief that programs should be written in a language that was close to English (rather than in machine code or in languages close to machine code, such as assembly languages) was captured in the new business language, and COBOL went on to be the most ubiquitous business language to date.</p>
<p>From 1967 to 1977, Hopper served as the director of the Navy Programming Languages Group in the Navy's Office of Information Systems Planning and was promoted to the rank of Captain in 1973.[ She developed validation software for COBOL and its compiler as part of a COBOL standardization program for the entire Navy.</p>
<h2>Standards</h2>
<p>In the 1970s, Hopper advocated for the Defense Department to replace large, centralized systems with networks of small, distributed computers. Any user on any computer node could access common databases located on the network.[19]:119 She developed the implementation of standards for testing computer systems and components, most significantly for early programming languages such as FORTRAN and COBOL. The Navy tests for conformance to these standards led to significant convergence among the programming language dialects of the major computer vendors. In the 1980s, these tests (and their official administration) were assumed by the National Bureau of Standards (NBS), known today as the National Institute of Standards and Technology (NIST).</p>
</section>
</article>
$color: #4b87bc;
html {
font-family: 'AdobeGaramondW01-Regula', georgia, serif;
font-size: 17px;
line-height: 1.5em;
}
htm, body {
margin: 0;
padding: 0;
}
//--------------------------------------------------
// Header
//--------------------------------------------------
header {
background: rgba(216, 223, 225, 0.8);
margin: 0;
color: rgba(0,0,0,0.6);
text-align: center;
}
img {
height: 85vh;
margin: 0;
padding: 0;
object-fit: cover;
}
div.headlines {
padding-bottom: 1.6rem;
}
h1 {
font-size: 10vw;
color: darken($color, 12%);
}
h2 {
margin: 1.4em 0 0.8em;
color: darken($color, 20%);
}
h4, h6 {
font-weight: normal;
}
h4 {
margin: 1.6em 0;
font-size: 3.5vw;
}
h6 {
margin: 0;
font-size: 2.5vw;
font-style: italic;
}
@media (min-width: 600px) {
header {
height: 100vh;
}
img {
float: left;
height: 100vh;
width: 48vw;
}
div.headlines {
float: right;
width: 45vw;
height: 100vh;
padding: 2vh 3vw;
display: flex;
div {
margin: auto;
}
}
h1 {
margin-top: 0;
font-size: 5vw;
}
h4 {
margin: 1.8em 0 6em;
font-size: 1.8vw;
}
h6 {
margin: 0.5em 0;
font-size: 1.3vw;
font-style: italic;
}
}
//--------------------------------------------------
// Article Text
//--------------------------------------------------
section {
clear: both;
padding: 2em 8vw 4em 17vw;
columns: 260px;
column-gap: 3em;
background-color: #fff;
}
@media (min-width: 600px) {
section {
padding: 4em 6vw 4em 22vw;
}
}
section {
p:first-child {
margin-top: 0;
}
@supports (initial-letter: 4 ) or
(-webkit-initial-letter: 4 ) {
p:first-child::first-letter {
color: $color;
font-weight: bold;
margin-right: 0.5em;
margin-top: 1em; // bug fix
-webkit-initial-letter: 5;
initial-letter: 5 4;
}
}
@supports (initial-letter: 2 ) or
(-webkit-initial-letter: 2 ) {
h2>p::first-letter {
color: $color;
font-weight: bold;
margin-right: 0.5em;
-webkit-initial-letter: 2;
initial-letter: 2 1;
}
}
}
.pullquote {
margin: 2.4rem 0 2.4rem;
color: $color;
font-weight: bold;
font-size: 2em;
line-height: 1.2em;
}
footer {
text-align: center;
}
Also see: Tab Triggers