Codpen links. More links to FF download. (arcadio feedback)

Author: slightlyoffbeat

.vscode/cSpell.json

@@ -0,0 +1,15 @@
+// cSpell Settings
+{
+    // Version of the setting file.  Always 0.1
+    "version": "0.1",
+    // language - current active spelling language
+    "language": "en",
+    // words - list of words to be always considered correct
+    "words": [
+        "Codepen"
+    ],
+    // flagWords - list of words to be always considered incorrect
+    // This is useful for offensive words and common spelling errors.
+    // For example "hte" should be "the"
+    "flagWords": []
+}

src/components/CodepenLink.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const style = {
+  display: 'block',
+  fontSize: '14px',
+  marginTop: '1rem',
+};
+
+const linkStyle = {
+  color: 'black',
+  textDecoration: 'underline',
+};
+
+const CodepenLink = props => (
+  <span style={style}>
+    <a style={linkStyle} href={props.link} target="_blank" rel="noopener noreferrer">
+      View on Codepen
+    </a>
+  </span>
+);
+
+CodepenLink.propTypes = {
+  link: PropTypes.string.isRequired,
+};
+
+export default CodepenLink;
+

src/pages/02-first-grid.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
@@ -92,6 +93,8 @@ grid-gap: 1rem;
       <div className="item" />
       <div className="item" />
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/veXQmp" />
   </div>
 );
 
@@ -107,10 +110,14 @@ const Homework = () => (
     <p>
       Having a good set of developer tools when working with CSS Grid Layout is essential. Firefox
       has some fantastic features that are specifically built to help you create and design grids.
-      Intrigued?
+      Intrigued?{' '}
+      <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">
+        Download Firefox Nightly
+      </a>{' '}
+      to get the browser with the best CSS Grid Layout tools.
     </p>
 
-    <p>Click to the next section to learn about Firefox's CSS Grid Layout Panel.</p>
+    <p>Click to the next section to learn about Firefox's new CSS Grid Layout panel.</p>
   </DevHomework>
 );
 

src/pages/04-fr-unit.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
@@ -56,6 +57,9 @@ const Tutorial = () => (
       <div className="item" />
       <div className="item" />
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/eGdQRN" />
+
   </div>
 );
 

src/pages/05-mixing-units.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
@@ -10,8 +11,7 @@ const Tutorial = () => (
     <p>
       When declaring track sizes, you can use fixed sizes with units such as px and em. You can also
       use flexible sizes such as percentages or the fr unit. The real magic of CSS Grid Layout,
-      however, is the ability to mix these units. The best way to understand is with an
-      example:
+      however, is the ability to mix these units. The best way to understand is with an example:
     </p>
     <CodeBlock>
       {`
@@ -58,6 +58,9 @@ const Tutorial = () => (
       <div className="item" />
       <div className="item" />
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/JrReJE" />
+
   </div>
 );
 
@@ -77,7 +80,7 @@ grid-template-columns: 100px 30% 2fr 1fr;
       Do you see what happened? Instead of 3 columns, you now have a 3rd column that is{' '}
       <code>2fr</code> and occupies 2/3 of the remaining space, and a 4th column that is{' '}
       <code>1fr</code> and occupies the final 1/3 of the remaining space. Continue to play around in
-      DevTools and try different units and combinations.
+      Firefox DevTools and try different units and combinations.
     </p>
 
     <p>When you are ready, continue on to learn about how to position items on the grid.</p>

src/pages/06-position-items.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 // images
 import numbers from '../components/img/terms/numbers.svg';
@@ -97,6 +98,9 @@ const Tutorial = () => (
       <div className="item item5">5</div>
       <div className="item item5">6</div>
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/veXQZp" />
+
   </div>
 );
 

src/pages/07-basic-layout.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
@@ -84,6 +85,9 @@ const Tutorial = () => (
       <div className="item content-3-7">Content-3</div>
       <div className="item footer-7">footer</div>
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/GMjwvG" />
+
   </div>
 );
 
@@ -93,7 +97,10 @@ const Homework = () => (
       This is the perfect time to test out the 'display line numbers' setting on the Firefox CSS
       Grid Layout Panel. Inspect the result above and select the layout panel. Here you can activate
       the overlay grid and check the box to 'display line numbers'. Handy right? This tool makes it
-      very easy to visualize your grid when positioning items.
+      very easy to visualize your grid when positioning items. Don't have Firefox?{' '}
+      <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">
+        Download Firefox Nightly
+      </a>.
     </p>
   </DevHomework>
 );

src/pages/08-template-areas.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
@@ -31,8 +32,8 @@ const Tutorial = () => (
       `}
     </CodeBlock>
     <p>
-      Here we have defined three columns and four rows. Instead of placing each individual item, we can
-      define the entire layout using the <code>grid-template-areas</code> property. We can then
+      Here we have defined three columns and four rows. Instead of placing each individual item, we
+      can define the entire layout using the <code>grid-template-areas</code> property. We can then
       assign those areas to each grid item using the <code>grid-area</code> property.
     </p>
     <p>Our HTML:</p>
@@ -85,6 +86,8 @@ const Tutorial = () => (
       <div className="item content-3-8">Content-3</div>
       <div className="item footer-8">footer</div>
     </div>
+
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/Xejyed" />
   </div>
 );
 
@@ -93,7 +96,10 @@ const Homework = () => (
     <p>
       Did you know that FireFox DevTools can display the area names? Try it out! Inspect the grid
       above and open the layout panel. From here you can toggle the overlay grid and the 'Display
-      Area Names' feature.
+      Area Names' feature. Don't have Firefox?{' '}
+      <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">
+        Download Firefox Nightly
+      </a>.
     </p>
   </DevHomework>
 );

src/pages/09-named-lines.js

@@ -2,16 +2,17 @@ import React from 'react';
 import Main from '../components/layout/Main';
 import CodeBlock from '../components/CodeBlock';
 import DevHomework from '../components/layout/DevHomework';
+import CodepenLink from '../components/CodepenLink';
 
 const Tutorial = () => (
   <div>
     <h2>Named Lines</h2>
 
     <p>
       In a previous example, we learned how to place an item on the grid by providing the {' '}
-      <code>grid-column</code> and <code>grid-row properties</code> with specific grid lines. 
-      We can also name some or all of those grid lines when defining a grid. This allows us to
-      use those names instead of grid lines. To name a grid line, simply add the name in square brackets:
+      <code>grid-column</code> and <code>grid-row properties</code> with specific grid lines. We can
+      also name some or all of those grid lines when defining a grid. This allows us to use those
+      names instead of grid lines. To name a grid line, simply add the name in square brackets:
     </p>
 
     <p>To name a grid line, we simply provide the name in square brackets:</p>
@@ -102,6 +103,7 @@ const Tutorial = () => (
       <div className="item content-3-9">Content-3</div>
       <div className="item footer-9">footer</div>
     </div>
+    <CodepenLink link="https://codepen.io/mozilladevelopers/pen/dVpQVV" />
   </div>
 );
 
@@ -112,7 +114,10 @@ const Homework = () => (
       example is on a white background, and the default purple may not be the best color to use.
       When selecting an overlay grid to display, you will see a circle next to the grid name that
       indicates the color of the overlay. Click on that circle, and you can customize the color to
-      whatever you'd like. Try a different color, such as red.
+      whatever you'd like. Try a different color, such as red. Don't have Firefox?{' '}
+      <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">
+        Download Firefox Nightly
+      </a>.
     </p>
   </DevHomework>
 );

src/styles/_shame.scss

@@ -17,8 +17,3 @@
 .gallery {
   @include gallery(4 of 12);
 }
-
-.meh {
-  height: 200px;
-  background-color: red;
-}