uclaacm · zhangjuliet · Jan 6, 2023 · Dec 29, 2022 · Dec 29, 2022 · Dec 29, 2022
diff --git a/README.md b/README.md
@@ -1,13 +1,15 @@
 # Linux Learning Lab
 
-![Production Build](https://github.com/uclaacm/teach-la-react-starter-barebones/workflows/Production%20Build/badge.svg)
+<img width="1511" alt="Screen Shot 2022-12-29 at 3 06 15 PM" src="https://user-images.githubusercontent.com/67720812/210006657-24bb3f10-8d48-44f4-875f-8c00232fd024.png">
+
+![Production Build](https://github.com/uclaacm/linux-lab/workflows/Production%20Build/badge.svg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg)](CODE_OF_CONDUCT.md)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/4932fc43-c02a-4724-bfc0-0253ac602219/deploy-status)](https://app.netlify.com/sites/teach-la-ts-react-starter/deploys)
 
 ## Overview 🐧
 
-Linux Learning Lab is a collaboration between [ACM Teach LA 🌱](https://teachla.uclaacm.com/) and [ACM Cyber 🔐](https://acmcyber.com/). ACM Cyber uses this app to train members in the basics of Linux navigation—a crucial tool for cybersecurity professionals and often used in Capture-the-Flag competitions. This app is also great for COMSCI 35L students and anyone wanting to learn the basics of Linux!
+Linux Learning Lab is a collaboration between [ACM Teach LA 🌱](https://teachla.uclaacm.com/) and [ACM Cyber 🔐](https://acmcyber.com/). ACM Cyber uses this app to train members in the basics of Linux navigation—a crucial tool for cybersecurity professionals and often used in Capture-the-Flag competitions. This app is also great for COM SCI 35L students and anyone wanting to learn the basics of Linux!
 
 ## Table of Contents
 

diff --git a/src/components/pages/creation.tsx b/src/components/pages/creation.tsx
@@ -67,14 +67,16 @@ function Creation(): JSX.Element {
         At the heart of any project is the ability to create and delete things.
         So let&apos;s start with commands that let us make things.
       </p>
-      <br />
+      <h2 className="heading-1">
+        The <span className="command-in-heading">touch</span> Command
+      </h2>
+      <p className="body">
+        The <span className="try-out-command">touch</span> command makes a new
+        empty file.
+      </p>
       <Task
         taskPrompt={
           <>
-            <p className="body task-prompt">
-              The <span className="try-out-command">touch</span> command makes a
-              new empty file.
-            </p>
             <p className="body task-prompt">
               Run <span className="try-out-command">touch emptyFile</span> and
               see how the file system below changes.
@@ -86,23 +88,23 @@ function Creation(): JSX.Element {
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">touch</span> Command
-          </h2>
-        }
+        taskName="Task 1"
         solutions={['touch emptyFile']}
         fileSystem={task1FS}
         currentWorkingDirectory={task1CWD}
         displayFileSystem={true}
       />
+
+      <h2 className="heading-1">
+        The <span className="command-in-heading">mkdir</span> Command
+      </h2>
+      <p className="body">
+        The <span className="try-out-command">mkdir</span> command makes a new
+        empty directory.
+      </p>
       <Task
         taskPrompt={
           <>
-            <p className="body task-prompt">
-              The <span className="try-out-command">mkdir</span> command makes a
-              new empty directory.
-            </p>
             <p className="body task-prompt">
               Run <span className="try-out-command">mkdir newDir</span> and see
               how the file system diagram changes.
@@ -113,11 +115,7 @@ function Creation(): JSX.Element {
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">mkdir</span> Command
-          </h2>
-        }
+        taskName="Task 2"
         solutions={['mkdir newDir']}
         fileSystem={task1FS}
         currentWorkingDirectory={task1CWD}
@@ -128,46 +126,53 @@ function Creation(): JSX.Element {
         will learn below, commands for deletion are quite similar (plus, the
         names basically tell you what the command does!).
       </p>
+
+      <h2 className="heading-1">
+        The <span className="command-in-heading">rm</span> Command
+      </h2>
+
+      <p className="body">
+        The <span className="try-out-command">rm</span> command removes an
+        existing file.
+      </p>
       <Task
         taskPrompt={
           <>
             <p className="body task-prompt">
-              The <span className="try-out-command">rm</span> command removes an
-              existing file.
-              <p className="body task-prompt">
-                Looks like we have three files in the current directory. Go
-                ahead and remove one with the command{' '}
-                <span className="try-out-command">rm</span> followed by the file
-                name.
-              </p>
+              Looks like we have three files in the current directory. Go ahead
+              and remove one with the command{' '}
+              <span className="try-out-command">rm</span> followed by the file
+              name.
+            </p>
+            <p className="body task-prompt">
               Can <span className="try-out-command">rm</span> be used to remove
               a directory? Give it a try.
-              <p className="body task-prompt">
-                The terminal printed an error message! Notice how the file
-                system diagram remains unchanged because rm cannot be used to
-                remove directories. To remove a directory, we need to learn
-                another command: <span className="try-out-command">rmdir</span>.
-              </p>
+            </p>
+            <p className="body task-prompt">
+              The terminal printed an error message! Notice how the file system
+              diagram remains unchanged because rm cannot be used to remove
+              directories. To remove a directory, we need to learn another
+              command: <span className="try-out-command">rmdir</span>.
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">rm</span> Command
-          </h2>
-        }
+        taskName="Task 3"
         solutions={['rm file1', 'rm file2', 'rm nonemptyDir/file3']}
         fileSystem={task2FS}
         currentWorkingDirectory={task2CWD}
         displayFileSystem={true}
       />
+
+      <h2 className="heading-1">
+        The <span className="command-in-heading">rmdir</span> Command
+      </h2>
+      <p className="body">
+        The <span className="try-out-command">rmdir</span> command removes an
+        existing empty directory.
+      </p>
       <Task
         taskPrompt={
           <>
-            <p className="body task-prompt">
-              The <span className="try-out-command">rmdir</span> command removes
-              an existing empty directory.
-            </p>
             <p className="body task-prompt">
               Try running{' '}
               <span className="try-out-command">rmdir nonemptyDir</span>.
@@ -188,11 +193,7 @@ function Creation(): JSX.Element {
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">rmdir</span> Command
-          </h2>
-        }
+        taskName="Task 4"
         solutions={['rm -rf nonemptyDir']}
         fileSystem={task2FS}
         currentWorkingDirectory={task2CWD}
@@ -204,13 +205,17 @@ function Creation(): JSX.Element {
         <span className="try-out-command">cp</span> and{' '}
         <span className="try-out-command">mv</span>.
       </p>
+
+      <h2 className="heading-1">
+        The <span className="command-in-heading">cp</span> Command
+      </h2>
+      <p className="body">
+        The <span className="try-out-command">cp</span> command copies one file
+        to another.
+      </p>
       <Task
         taskPrompt={
           <>
-            <p className="body task-prompt">
-              The <span className="try-out-command">cp</span> command copies one
-              file to another.
-            </p>
             <p className="body task-prompt">
               <span className="try-out-command">
                 cp sourceFile destinationFile
@@ -228,11 +233,7 @@ function Creation(): JSX.Element {
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">cp</span> Command
-          </h2>
-        }
+        taskName="Task 5"
         solutions={[
           'cp sourceFile destinationFile',
           'cp file1 file2 directoryPath',
@@ -241,13 +242,18 @@ function Creation(): JSX.Element {
         currentWorkingDirectory={task3CWD}
         displayFileSystem={true}
       />
+
+      <h2 className="heading-1">
+        The <span className="command-in-heading">mv</span> Command
+      </h2>
+
+      <p className="body">
+        The <span className="try-out-command">mv</span> command moves/renames
+        files.
+      </p>
       <Task
         taskPrompt={
           <>
-            <p className="body task-prompt">
-              The <span className="try-out-command">mv</span> command
-              moves/renames files.
-            </p>
             <p className="body task-prompt">
               <span className="try-out-command">mv oldName newName</span>{' '}
               renames a file called oldName to newName, with the timestamp
@@ -262,11 +268,7 @@ function Creation(): JSX.Element {
             </p>
           </>
         }
-        taskName={
-          <h2 className="heading-1 task-name">
-            The <span className="command-in-heading">mv</span> Command
-          </h2>
-        }
+        taskName="Task 6"
         solutions={['mv oldName newName', 'mv file1 file2 directoryPath']}
         fileSystem={task4FS}
         currentWorkingDirectory={task4CWD}
@@ -282,7 +284,7 @@ function Creation(): JSX.Element {
             back
           </button>
         </a>
-        <a href="piping">
+        <a href="inputOutput">
           <button type="button" className="next-button">
             next
           </button>

diff --git a/src/components/pages/piping.tsx → src/components/pages/inputOutput.tsx b/src/components/pages/piping.tsx → src/components/pages/inputOutput.tsx
@@ -1,10 +1,10 @@
 import tuxHoldingEgg from '../../assets/images/tux-holding-egg.svg';
 import '../../styles/global.scss';
-import '../../styles/piping.scss';
+import '../../styles/inputOutput.scss';
 import { Directory, File } from '../shared/globalTypes';
 import Task from '../shared/Task';
 
-function Piping(): JSX.Element {
+function InputOutput(): JSX.Element {
   const initFileSystem = new Directory(
     '/',
     undefined,
@@ -15,7 +15,7 @@ function Piping(): JSX.Element {
   const currentWorkingDirectory = initFileSystem;
   return (
     <div>
-      <h1 className="lesson-title">Piping</h1>
+      <h1 className="lesson-title">Input/Output (I/O)</h1>
       <div className="first-paragraph">
         <p className="body">
           If we want to perform a complicated task, typing one command at a time
@@ -174,4 +174,4 @@ function Piping(): JSX.Element {
   );
 }
 
-export default Piping;
+export default InputOutput;
diff --git a/src/components/pages/intro.tsx b/src/components/pages/intro.tsx
@@ -8,7 +8,7 @@ function Intro(): JSX.Element {
     <div className="intro-container">
       <h1 className="lesson-title">INTRO TO LINUX</h1>
       <p className="body">
-        Like Windows and iOS, Linux is an <b>operating system (OS)</b>—a piece
+        Like Windows and MacOS, Linux is an <b>operating system (OS)</b>—a piece
         of software that manages a computer&apos;s basic functions, from
         figuring out which key a user presses to storing data. By taking care of
         these &quot;mundane&quot; tasks, the OS simplifies life for
@@ -42,7 +42,7 @@ function Intro(): JSX.Element {
       <p className="body">
         The POSIX file system is organized in a tree-like format, branching out
         from the root directory and into descendent directories containing files
-        and other subdirectories. If you&apos;ve ever used Windows or iOS, you
+        and other subdirectories. If you&apos;ve ever used Windows or MacOS, you
         can think of directories as folders and files as the documents within
         them. To interact with these files and directories, there exist numerous
         operations, such as open, close, read, and write.

diff --git a/src/components/pages/moving.tsx b/src/components/pages/moving.tsx
@@ -26,8 +26,8 @@ function Moving(): JSX.Element {
     <div>
       <h1 className="lesson-title">Moving Around the File System</h1>
       <p className="body">
-        Ok, we can now figure out information about ourselves, from where to who
-        we are. But what if we want to learn about our surroundings?
+        We can now figure out information about ourselves, from where to who we
+        are. But what if we want to learn about our surroundings?
       </p>
       <img src={tuxHoldingEgg} alt="tux hugging a pink egg" />
       <h2 className="heading-1">
@@ -92,14 +92,15 @@ function Moving(): JSX.Element {
         currentWorkingDirectory={task1CWD}
         displayFileSystem={true}
       />
+      <h2 className="heading-1">Putting It All Together</h2>
       <Task
         taskPrompt={
           <p className="body task-prompt">
             Something seems amiss in this cave. Is there a secret hiding in
             plain sight?
           </p>
         }
-        taskName="Putting It All Together"
+        taskName="Task 2"
         solutions={['ls -a']}
         fileSystem={task2FS}
         currentWorkingDirectory={task2CWD}

diff --git a/src/components/pages/permissions.tsx b/src/components/pages/permissions.tsx
@@ -130,7 +130,7 @@ function Permissions(): JSX.Element {
 
         <Task
           taskPrompt={taskPrompts[0]}
-          taskName={'Task'}
+          taskName="Task 1"
           solutions={['chmod u+r hiddenStuff.txt']}
           fileSystem={initFileSystem}
           currentWorkingDirectory={currentWorkingDirectory}