Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">


<div class="container" id="top-anchor">
  <nav id="navbar">
    <header><h1>Unix for beginners</h1></header>
    <ul>
      <li><a href="#_introduction" class="nav-link">_Introduction</a></li>
      <li><a href="#_what_is_unix?" class="nav-link">_What is Unix?</a></li>
      <li><a href="#_unix_architecture" class="nav-link">_Unix architecture</a></li>
      <li><a href="#_listing_files" class="nav-link">_Listing files</a></li>
      <li><a href="#_metacharacters" class="nav-link">_Metacharacters</a></li>
      <li><a href="#_hidden_files" class="nav-link">_Hidden files</a></li>
      <li><a href="#_creating_files" class="nav-link">_Creating files</a></li>
      <li><a href="#_editing_files" class="nav-link">_Editing files</a></li>
      <li><a href="#_display_content_of_a_file" class="nav-link">_Display content of a file</a></li>
      <li><a href="#_counting_words_in_a_file" class="nav-link">_Counting words in a file</span></a></li>
    </ul>
  </nav>

  <main id="main-doc">
     <section class="main-section" id="_introduction">
       <header><h2 class="first-h2">_Introduction</h2></header>
       <p class="project-brief">This project is part of my ongoing studies with the <a href="https://www.freecodecamp.org/" target="_blank">FreeCodeCamp project</a>. After learning about the basics of HTML and CSS and how it relates to Responsive Web Design, I am encouraged to test out my skills with real life projects. Here I´ve styled a beginner´s technical documentation page for Unix. All content here are excerpts from <a href="https://www.tutorialspoint.com/unix/index.htm" target="_blank">Tutorialspoint</a>, a fantastic Unix resource.</p>
       <p>Unix is a computer Operating System which is capable of handling activities from multiple users at the same time. The development of Unix started around 1969 at AT&T Bell Labs by Ken Thompson and Dennis Ritchie. This tutorial gives a very good understanding on Unix.</p>
       <p>This tutorial has been prepared for the beginners to help them understand the basics to advanced concepts covering Unix commands, Unix shell scripting and various utilities. We assume you have adequate exposure to Operating Systems and their functionalities. A basic understanding on various computer concepts will also help you in understanding the various exercises given in this tutorial.</p>
       <p>If you are willing to learn the Unix/Linux basic commands and Shell script but you do not have a setup for the same, then do not worry — <a href="https://www.tutorialspoint.com/codingground.htm" target="_blank">The CodingGround</a> is available on a highend dedicated server giving you real programming experience with the comfort of singleclick execution. Yes! It is absolutely free and online.</p>
     </section>
     <section class="main-section" id="_what_is_unix?">
       <header><h2>_What is Unix?</h2></header>
       <a href="#top-anchor" class="what-is-unix-top-link">Back to top</a>
       <p>The Unix operating system is a set of programs that act as a link between the computer and the user. The computer programs that allocate the system resources and coordinate all the details of the computer's internals is called the operating system or the kernel.</p>
       <p>Users communicate with the kernel through a program known as the shell. The shell is a command line interpreter; it translates commands entered by the user and converts them into a language that is understood by the kernel.</p>
              <ul>
         <li>Unix was originally developed in 1969 by a group of AT&T employees Ken Thompson, Dennis Ritchie, Douglas McIlroy, and Joe Ossanna at Bell Labs.</li>
         <li>There are various Unix variants available in the market. Solaris Unix, AIX, HP Unix and BSD are a few examples. Linux is also a flavor of Unix which is freely available.</li>
         <li>Several people can use a Unix computer at the same time; hence Unix is called a multiuser system.</li>
         <li>A user can also run multiple programs at the same time; hence Unix is a multitasking environment.</li>
       </ul>
     </section>
    
     <section class="main-section" id="_unix_architecture">
       <header><h2>_Unix architecture</h2></header>
       <a href="#top-anchor" class="architecture-top-link">Back to top</a>
       <p>Here is a basic block diagram of a Unix system:</p>
       <img src="https://jjberg83.github.io/myImageLibrary/unix_architecture.jpg" alt="Diagram showing architecture of Unix">
       <p>The main concept that unites all the versions of Unix is the following four basics:</p>
       <ul>
         <li>Kernel − The kernel is the heart of the operating system. It interacts with the hardware and most of the tasks like memory management, task scheduling and file management.</li>
         <li>Shell − The shell is the utility that processes your requests. When you type in a command at your terminal, the shell interprets the command and calls the program that you want. The shell uses standard syntax for all commands. C Shell, Bourne Shell and Korn Shell are the most famous shells which are available with most of the Unix variants.</li>
         <li>Commands and Utilities − There are various commands and utilities which you can make use of in your day to day activities. cp, mv, cat and grep, etc. are few examples of commands and utilities. There are over 250 standard commands plus numerous others provided through 3rd party software. All the commands come along with various options.</li>
         <li>Files and Directories − All the data of Unix is organized into files. All files are then organized into directories. These directories are further organized into a tree-like structure called the filesystem.</li>
      </ul>
      <h3>_System bootup</h3>
        <p>If you have a computer which has the Unix operating system installed in it, then you simply need to turn on the system to make it live.</p>
        <p>As soon as you turn on the system, it starts booting up and finally it prompts you to log into the system, which is an activity to log into the system and use it for your day-to-day activities.</p>
      <h3>_Login Unix</h3>
        <p>When you first connect to a Unix system, you usually see a prompt such as the following:</p>
        <pre><code>login:</code></pre>
      <h3>_To log in</h3>
        <ul>
         <li>Have your userid (user identification) and password ready. Contact your system administrator if you don't have these yet.</li>
         <li>Type your userid at the login prompt, then press ENTER. Your userid is case-sensitive, so be sure you type it exactly as your system administrator has instructed.</li>
         <li>Type your password at the password prompt, then press ENTER. Your password is also case-sensitive.</li>
         <li>If you provide the correct userid and password, then you will be allowed to enter into the system. Read the information and messages that comes up on the screen, which is as follows.</li>
        </ul>
        <pre><code>
login : amrood
amrood's password:
Last login: Sun Jun 14 09:32:32 2009 from 62.61.164.73
$
       </code></pre>
       <p>You will be provided with a command prompt (sometime called the $ prompt ) where you type all your commands. For example, to check calendar, you need to type the cal command as follows:</p>
       <pre><code>
$ cal
June 2009
Su Mo Tu We Th Fr Sa
    1  2  3  4  5  6
 7  8  9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
$
       </code></pre>
     </section>
      
      <div class="quote">
       <img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/dennis-ritchie.jpg" alt="Profile picture of programmer Dennis Ritchie" class="profile-pic">
       <blockquote cite="https://www.brainyquote.com/quotes/dennis_ritchie_172475?src=t_unix">
       <p>UNIX is basically a simple operating system, but you have to be a genius to understand the simplicity.</p>
       <footer><cite>Dennis Ritchie</cite></footer>
       </blockquote>
      </div><!-- quote -->
    
     <section class="main-section" id="_listing_files">
       <header><h2>_Listing files</h2></header>
       <a href="#top-anchor">Back to top</a>
       <p>To list the files and directories stored in the current directory, use the following command:</p>
       <pre><code>$ls</code></pre>
       <p>Here is the sample output of the above command:</p>
       <pre><code class="tabs">
$ls

bin       hosts   lib     res.03
ch07      hw1     pub     test_results
ch07.bak  hw2     res.01  users
docs      hw3     res.02  work
       </code></pre>
       <p>The command ls supports the -l option which would help you to get more information about the listed files:</p>
      <pre><code>
$ls -l
total 1962188

drwxrwxr-x  2 amrood amrood      4096 Dec 25 09:59 uml
-rw-rw-r--  1 amrood amrood      5341 Dec 25 08:38 uml.jpg
drwxr-xr-x  2 amrood amrood      4096 Feb 15  2006 univ
drwxr-xr-x  2 root   root        4096 Dec  9  2007 urlspedia
-rw-r--r--  1 root   root      276480 Dec  9  2007 urlspedia.tar
drwxr-xr-x  8 root   root        4096 Nov 25  2007 usr
drwxr-xr-x  2    200    300      4096 Nov 25  2007 webthumb-1.01
-rwxr-xr-x  1 root   root        3192 Nov 25  2007 webthumb.php
-rw-rw-r--  1 amrood amrood     20480 Nov 25  2007 webthumb.tar
-rw-rw-r--  1 amrood amrood      5654 Aug  9  2007 yourfile.mid
-rw-rw-r--  1 amrood amrood    166255 Aug  9  2007 yourfile.swf
drwxr-xr-x 11 amrood amrood      4096 May 29  2007 zlib-1.2.3
$
      </code></pre>
      <p>Here is the information about all the listed columns:</p>
      <ul>
         <li>First Column − Represents the file type and the permission given on the file. Below is the description of all type of files.</li>
         <li>Second Column − Represents the number of memory blocks taken by the file or directory.</li>
         <li>Third Column − Represents the owner of the file. This is the Unix user who created this file.</li>
         <li>Fourth Column − Represents the group of the owner. Every Unix user will have an associated group.</li>
         <li>Fifth Column − Represents the file size in bytes.</li>
         <li>Sixth Column − Represents the date and the time when this file was created or modified for the last time.</li>
         <li>Seventh Column − Represents the file or the directory name.</li>
     </ul>
     </section>
     <section class="main-section" id="_metacharacters">
       <header><h2>_Metacharacters</h2></header>
       <a href="#top-anchor">Back to top</a>
       <p>Metacharacters have a special meaning in Unix. For example, * and ? are metacharacters. We use * to match 0 or more characters, a question mark (?) matches with a single character. For example:</p>
       <pre><code>
 $ls ch*.doc
      </code></pre>
      <p>Displays all the files, the names of which start with ch and end with .doc</p>
      <pre><code>
ch01-1.doc   ch010.doc  ch02.doc    ch03-2.doc 
ch04-1.doc   ch040.doc  ch05.doc    ch06-2.doc
ch01-2.doc ch02-1.doc c
      </code></pre>
      <p>Here, * works as meta character which matches with any character. If you want to display all the files ending with just .doc, then you can use the following command:</p>
            <pre><code>
$ls *.doc
      </code></pre>
     </section>
     <section class="main-section" id="_hidden_files">
       <header><h2>_Hidden files</h2></header>
       <a href="#top-anchor">Back to top</a>
       <p>An invisible file is one, the first character of which is the dot or the period character (.). Unix programs (including the shell) use most of these files to store configuration information.</p>
       <p>Some common examples of the hidden files include the files:</p>
       <ul>
         <li>.profile − The Bourne shell ( sh) initialization script</li>
         <li>.kshrc − The Korn shell ( ksh) initialization script</li>
         <li>.cshrc − The C shell ( csh) initialization script</li>
         <li>.rhosts − The remote shell configuration file</li>
      </ul>
       <p>To list the invisible files, specify the -a option to ls:</p>
       <pre><code>
 $ ls -a

.         .profile       docs     lib     test_results
..        .rhosts        hosts    pub     users
.emacs    bin            hw1      res.01  work
.exrc     ch07           hw2      res.02
.kshrc    ch07.bak       hw3      res.03
$
      </code></pre>
      <ul>
        <li>Single dot (.) − This represents the current directory.</li>
        <li>Double dot (..) − This represents the parent directory.</li>
      </ul>
     </section>
    
      <div class="quote">
       <img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/ellen-ullman.jpg" alt="Profile picture of programmer Ellen Ullman" class="profile-pic">
       <blockquote cite="https://www.brainyquote.com/quotes/ellen_ullman_849346?src=t_unix">
       <p>I came of technical age with UNIX, where I learned with power-greedy pleasure that you could kill a system right out from under yourself with a single command.</p>
       <footer><cite>Ellen Ullman</cite></footer>
     </blockquote>
    </div><!-- quote -->
  
     <section class="main-section" id="_creating_files">
       <header><h2>_Creating files</h2></header>
       <a href="#top-anchor">Back to top</a>
        <p>You can use the vi editor to create ordinary files on any Unix system. You simply need to give the following command:</p>
        <pre><code>
$ vi filename
        </code></pre>
        <p>The above command will open a file with the given filename. Now, press the key i to come into the edit mode. Once you are in the edit mode, you can start writing your content in the file as in the following program:</p>
        <pre><code>
This is unix file....I created it for the first time.....
I'm going to save this content in this file.
        </code></pre>
        <p>Once you are done with the program, follow these steps:</p>
        <ul>
          <li>Press the key esc to come out of the edit mode.</li>
          <li>Press two keys Shift + ZZ together to come out of the file completely.</li>
       </ul>
       <p>You will now have a file created with filename in the current directory.</p>
       <pre><code>
$ vi filename
$
      </code></pre>
     </section>
     <section class="main-section" id="_editing_files">
       <header><h2>_Editing files</h2></header>
       <a href="#top-anchor">Back to top</a>
       <p>You can edit an existing file using the vi editor. We will discuss in short how to open an existing file:</p>
       <pre><code>
$ vi filename
       </pre></code>
       <p>Once the file is opened, you can come in the edit mode by pressing the key i and then you can proceed by editing the file. If you want to move here and there inside a file, then first you need to come out of the edit mode by pressing the key Esc. After this, you can use the following keys to move inside a file:</p>
      <ul>
        <li>l key to move to the right side.</li>
        <li>h key to move to the left side.</li>
        <li>k key to move upside in the file.</li>
        <li>j key to move downside in the file.</li>
      </ul>
      <p>So using the above keys, you can position your cursor wherever you want to edit. Once you are positioned, then you can use the i key to come in the edit mode. Once you are done with the editing in your file, press Esc and finally two keys Shift + ZZ together to come out of the file completely.</p>
     </section>
     <section class="main-section" id="_display_content_of_a_file">
       <header><h2>_Display content of a file</h2></header>
       <a href="#top-anchor">Back to top</a>
        <p>You can use the cat command to see the content of a file. Following is a simple example to see the content of the above created file:</p>
        <pre><code>
$ cat filename
This is unix file....I created it for the first time.....
I'm going to save this content in this file.
$
        </pre></code>
        <p>You can display the line numbers by using the -b option along with the cat command as follows:</p>
        <pre><code>
$ cat -b filename
1   This is unix file....I created it for the first time.....
2   I'm going to save this content in this file.
$
       </code></pre>
     </section>
    
      <div class="quote">
       <img src="https://jjberg83.github.io/myImageLibrary/technical-documentation-page/scott-adams.jpg" alt="Profile picture of cartoonist Scott Adams" class="profile-pic">
       <blockquote cite="https://www.brainyquote.com/quotes/scott_adams_130522?src=t_unix">
         <p>If you have any trouble sounding condescending, find a Unix user to show you how it's done.</p>
         <footer><cite>Scott Adams</cite></footer>
       </blockquote>
    </div><!-- quote -->
    
     <section class="main-section" id="_counting_words_in_a_file">
       <header><h2>_Counting words in a file</h2></header>
       <a href="#top-anchor">Back to top</a>
         <p>You can use the wc command to get a count of the total number of lines, words, and characters contained in a file. Following is a simple example to see the information about the file created above:</p>
        <pre><code>
$ wc filename
2  19 103 filename
$
        </code></pre>
        <p>Here is the detail of all the four columns:</p>
        <ul>
          <li>First Column − Represents the total number of lines in the file.</li>
          <li>Second Column − Represents the total number of words in the file.</li>
          <li>Third Column − Represents the total number of bytes in the file. This is the actual size of the file.</li>
          <li>Fourth Column − Represents the file name.</li>
       </ul>
      <p>You can give multiple files and get information about those files at a time. Following is simple syntax:</p>
      <pre><code>
$ wc filename1 filename2 filename3
      </pre></code>
     </section>
  </main>
</div><!-- container -->
              
            
!

CSS

              
                html {
  box-sizing: border-box;
  background: var(--background);
  color: var(--secondary);
}
*, *:before, *:after {
  box-sizing: inherit;
}
:root {
  --primary: #39A817;
  --secondary: #525E4B;
  --background: #F2F2F2;
}
.container {
  font-family: 'Open Sans', sans-serif;
}

/* -----------------------------------------
MAIN NAVIGATION
------------------------------------------*/

#navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5em;
}
#navbar li {
  margin-top: 20px;
}
#navbar a {
  color: var(--primary);
  text-decoration: none;
}
#navbar a:hover {
  color: var(--background);
  text-decoration: none;
}
#navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 600px;
  background: var(--secondary, grey)
}

/* -----------------------------------------
FONT STYLING
------------------------------------------*/
header, h2, h3, #navbar, a[href="#top-anchor"] {
  font-family: 'Press Start 2P', cursive;
}
h2 {
  margin-top: 50px;
  padding-top: 25px;
}
.first-h2 {
  margin-top: 26px;
}
h3 {
  margin-top: 50px;
}
.quote {
  text-align: center;
  margin: 70px 0 50px 0;
  font-size: 25px;
}
.quote p {
  margin: 0 0 15px 0;
  font-weight: bold;
}
.quote p:before {
  content: "\275D";
  margin-right: 5px;
}
.quote p:after {
  content: "\275E";
  margin-left: 5px;
}

h1 {
  margin-bottom: 40px;
  color: var(--background);
  line-height: 1.2em;
}
h2, a {
  color: var(--primary);
}
h3 {
  color: var(--secondary);
}
a, a[href="#top-anchor"] {
  font-weight: bold;
}
a:hover {
  color: var(--secondary);
}
a[href="#top-anchor"] {
  color: var(--secondary);
}
a[href="#top-anchor"]:hover {
  color: var(--primary);
}
#main-doc ul {
  margin-left: -37px;
}
#main-doc li {
  list-style-type: none;
  margin-bottom: 10px;
}
#main-doc li:before {
  content: ">";
  font-weight: bold;
  color: var(--primary);
  margin-left: -21px;
  margin-right: 10px;
}
a[href="#top-anchor"] {
  font-size: 12px;
}
.project-brief {
  font-weight: bold;
  border: 3px dotted var(--primary);
  padding: 10px;
}

/* -----------------------------------------
MISCELLANEOUS
------------------------------------------*/
pre {
  background: var(--secondary);
  padding: 10px;
  min-width: 640px;
}
code {
  color: var(--primary);
  font-weight: bold;
  font-size: 16px;
}
#navbar, #main-doc {
  padding: 40px;
}
.profile-pic {
  max-width: 400px;
  box-shadow: 0 2px 10px 5px rgba(0,0,0,0.19), 0 3px 10px 5px rgba(0,0,0,0.23);
  border: 25px solid #fff;
  transform: rotate(0.7deg);
  margin-bottom: 15px;
}

/* -----------------------------------------
MEDIA QUERIES
------------------------------------------*/
@media (min-width: 1200px) {
  .container {
    margin: 0 auto;
    width: 1190px;
    display: block;
  }
}
@media (min-width: 1060px) {
  .container {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-column-gap: 20px;
  }
  .architecture-top-link {
    display: none;
  }
}
@media (max-width: 1059px) {
  #navbar {
    height: 520px;
    position: static;
  }
}
@media (max-width: 814px) {
  .first-h2 {
    margin-top: 0;
  }
}
@media (max-width: 550px) {
  img {
    width: 100%;
  }
}
@media (max-width: 529px) {
  #navbar {
    height: 550px;
  }
}
@media (max-width: 430px) {
  h2, h3 {
    font-size: 17px;
    margin-top: 35px;
  }
  .quote {
    font-size: 20px;
    margin: 30px 0 10px 0;
  }
  .profile-pic {
    border: 15px solid #fff;
  }
}
@media (min-width: 400px) {
  .what-is-unix-top-link {
    display: none;
  }
}
@media (max-width: 395px) {
  #navbar {
    height: 580px;
  }
  .quote {
    font-size: 15px;
  }
}
@media (max-width: 330px) {
  h2, h3 {
    font-size: 14px;
  }
}
@media (max-width: 312px) {
  #navbar {
    height: 600px;
  }
}
@media (max-width: 287px) {
  #navbar {
    height: 640px;
  }
  .quote, .quote p {
    text-align: left;
    margin-left: -10px;
  }
  .quote p:before, .quote p:after {
    margin: 0;
  }
  .profile-pic {
    border-width: 8px;
  }
}
@media (max-width: 264px) {
  #navbar {
    height: 700px;
  }
  h2, h3, a[href="#top-anchor"] {
    font-size: 10px;
  }
}
@media (max-width: 252px) {
  #navbar {
    height: 780px;
    font-size: 10px;
  }
  .profile-pic {
    border: none;
    box-shadow: none;
  }
}


              
            
!

JS

              
                
              
            
!
999px

Console